TraineeDetail.vue

<template>
  <div class="trainee-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="trainee.name"
            ></v-text-field>
            <v-text-field
              label="이메일"
              v-model="trainee.email"
            ></v-text-field>
            <v-text-field
              label="연락처"
              v-model="trainee.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="trainee.birthDate"
                  v-on="on"
                ></v-text-field>
              </template>
              <v-date-picker
                v-model="trainee.birthDate"
                @input="showDatePicker = false"
              ></v-date-picker>
            </v-menu>
            <v-text-field
              label="등록 시각"
              readonly
              v-model="trainee.createdAt"
            ></v-text-field>
            <v-text-field
              label="최종 수정 시각"
              readonly
              v-model="trainee.updatedAt"
            ></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="error"
              outlined
              @click="deleteTrainee(id)"
            >
              <v-icon left>mdi-delete</v-icon>
              삭제
            </v-btn>
            <v-btn
              color="primary"
              outlined
              @click="updateTrainee(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: 'TraineeDetail',

  data: () => ({
    isProcessing: false,
    error: {
      isError: false,
      message: '',
    },
    showDatePicker: false,
    trainee: {
      email: '',
      name: '',
      phone: '',
      birthDate: '',
      createdAt: '',
      updatedAt: '',
    },
  }),

  computed: {
    id() {
      if ('id' in this.$route.params) return this.$route.params.id;
      return null;
    },
  },

  methods: {
    getTrainee(id) {
      this.error.isError = false;
      this.error.message = '';
      this.isProcessing = true;

      fetch(APISetting.endpoints.trainee.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 { trainee } = json;
          trainee.createdAt = moment(trainee.createdAt).format('YYYY-MM-DD HH:mm:ss');
          trainee.updatedAt = moment(trainee.updatedAt).format('YYYY-MM-DD HH:mm:ss');
          this.trainee = trainee;
        })
        .catch((e) => {
          this.error.message = e.message;
          this.error.isError = true;
        })
        .finally(() => {
          this.isProcessing = false;
        });
    },
    updateTrainee(id) {
      this.error.isError = false;
      this.error.message = '';
      this.isProcessing = true;

      fetch(APISetting.endpoints.trainee.detail(id), APISetting.settings.put(this.trainee))
        .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 { trainee } = json;
          trainee.createdAt = moment(trainee.createdAt).format('YYYY-MM-DD HH:mm:ss');
          trainee.updatedAt = moment(trainee.updatedAt).format('YYYY-MM-DD HH:mm:ss');
          this.trainee = trainee;
        })
        .catch((e) => {
          this.error.message = e.message;
          this.error.isError = true;
        })
        .finally(() => {
          this.isProcessing = false;
        });
    },
    deleteTrainee(id) {
      this.error.isError = false;
      this.error.message = '';
      this.isProcessing = true;

      fetch(APISetting.endpoints.trainee.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('/trainee');
        })
        .catch((e) => {
          this.error.message = e.message;
          this.error.isError = true;
        })
        .finally(() => {
          this.isProcessing = false;
        });
    },
  },

  created() {
    this.getTrainee(this.id);
  },
};
</script>