Skip to content
Snippets Groups Projects
Select Git revision
  • 8fab4d99e2eb27cf3d99b4518182af721c4470e2
  • main default protected
  • br_A
3 results

file.68.java

Blame
  • TrainerDetail.vue 6.45 KiB
    <template>
      <div class="trainer-detail">
        <v-row>
          <v-col cols="12">
            <v-card :loading="isProcessing">
              <v-card-title>트레이너 정보</v-card-title>
              <v-card-text>
                <v-alert
                  v-if="error.isError"
                  dense
                  text
                  type="error"
                >
                  {{ error.message }}
                </v-alert>
                <v-text-field
                  label="등록번호"
                  readonly
                  v-model="id"
                ></v-text-field>
                <v-text-field
                  label="이메일"
                  v-model="trainer.email"
                ></v-text-field>
                <v-text-field
                  label="이름"
                  v-model="trainer.name"
                ></v-text-field>
                <v-text-field
                  label="닉네임"
                  v-model="trainer.nickname"
                ></v-text-field>
                <v-text-field
                  label="연락처"
                  v-model="trainer.phone"
                ></v-text-field>
                <v-menu
                  :close-on-content-click="false"
                  min-width="290px"
                  offset-y
                  v-model="showDatePicker"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      label="생년월일"
                      readonly
                      v-model="trainer.birthDate"
                      v-on="on"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    v-model="trainer.birthDate"
                    @input="showDatePicker = false"
                  ></v-date-picker>
                </v-menu>
                <v-textarea
                  auto-grow
                  label="소개"
                  v-model="trainer.bio"
                ></v-textarea>
                <v-text-field
                  label="등록 시각"
                  readonly
                  v-model="trainer.createdAt"
                ></v-text-field>
                <v-text-field
                  label="최종 수정 시각"
                  readonly
                  v-model="trainer.updatedAt"
                ></v-text-field>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  color="error"
                  outlined
                  @click="deleteTrainer(id)"
                >
                  <v-icon left>mdi-delete</v-icon>
                  삭제
                </v-btn>
                <v-btn
                  color="primary"
                  outlined
                  @click="updateTrainer(id)"
                >
                  <v-icon left>mdi-content-save</v-icon>
                  저장
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </div>
    </template>
    
    <script>
    import moment from 'moment';
    
    import APISetting from '@/settings/api';
    
    export default {
      name: 'TrainerDetail',
    
      data: () => ({
        isProcessing: false,
        error: {
          isError: false,
          message: '',
        },
        showDatePicker: false,
        trainer: {
          email: '',
          name: '',
          nickname: '',
          phone: '',
          birthDate: '',
          bio: '',
          createdAt: '',
          updatedAt: '',
        },
      }),
    
      computed: {
        id() {
          if ('id' in this.$route.params) return this.$route.params.id;
          return null;
        },
      },
    
      methods: {
        getTrainer(id) {
          this.error.isError = false;
          this.error.message = '';
          this.isProcessing = true;
    
          fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.get)
            .then((res) => {
              if (res.status === 404) return Promise.all([null, res]);
              if ([200, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
              throw new Error('알 수 없는 응답입니다.');
            })
            .then((values) => {
              const [json, res] = values;
              if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
              if (res.status !== 200) throw new Error(json.message);
              const { trainer } = json;
              trainer.createdAt = moment(trainer.createdAt).format('YYYY-MM-DD HH:mm:ss');
              trainer.updatedAt = moment(trainer.updatedAt).format('YYYY-MM-DD HH:mm:ss');
              this.trainer = json.trainer;
            })
            .catch((e) => {
              this.error.message = e.message;
              this.error.isError = true;
            })
            .finally(() => {
              this.isProcessing = false;
            });
        },
        updateTrainer(id) {
          this.error.isError = false;
          this.error.message = '';
          this.isProcessing = true;
    
          fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.put(this.trainer))
            .then((res) => {
              if (res.status === 404) return Promise.all([null, res]);
              if ([200, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
              throw new Error('알 수 없는 응답입니다.');
            })
            .then((values) => {
              const [json, res] = values;
              if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
              if (res.status !== 200) throw new Error(json.message);
              const { trainer } = json;
              trainer.createdAt = moment(trainer.createdAt).format('YYYY-MM-DD HH:mm:ss');
              trainer.updatedAt = moment(trainer.updatedAt).format('YYYY-MM-DD HH:mm:ss');
              this.trainer = json.trainer;
            })
            .catch((e) => {
              this.error.message = e.message;
              this.error.isError = true;
            })
            .finally(() => {
              this.isProcessing = false;
            });
        },
        deleteTrainer(id) {
          this.error.isError = false;
          this.error.message = '';
          this.isProcessing = true;
    
          fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.delete)
            .then((res) => {
              if ([204, 404].includes(res.status)) return Promise.all([null, res]);
              if ([400, 500].includes(res.status)) return Promise.all([res.json(), res]);
              throw new Error('알 수 없는 응답입니다.');
            })
            .then((values) => {
              const [json, res] = values;
              if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
              if (res.status !== 204) throw new Error(json.message);
              return this.$router.push('/trainer');
            })
            .catch((e) => {
              this.error.message = e.message;
              this.error.isError = true;
            })
            .finally(() => {
              this.isProcessing = false;
            });
        },
      },
    
      created() {
        this.getTrainer(this.id);
      },
    };
    </script>