Add Trainee Detail View

src/router/index.js

@@ -23,6 +23,11 @@ const routes = [
     name: 'TraineeList',
     component: () => import('@/views/TraineeList.vue'),
   },
+  {
+    path: '/trainee/:id',
+    name: 'TraineeDetail',
+    component: () => import('@/views/TraineeDetail.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/settings/api.js

@@ -35,6 +35,16 @@ export default {
       method: 'get',
       mode: 'cors',
     },
+    put: data => ({
+      body: data !== null ? JSON.stringify(data) : null,
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      method: 'put',
+      mode: 'cors',
+    }),
     delete: {
       credentials: 'include',
       headers: {

src/views/TraineeDetail.vue

+<template>
+  <div class="trainee-detail">
+    <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-btn
+          color="error"
+          outlined
+          @click="deleteTrainee(id)"
+        >
+          삭제
+        </v-btn>
+        <v-btn
+          color="primary"
+          outlined
+          @click="updateTrainee(id)"
+        >
+          저장
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import APISetting from '@/settings/api';
+
+export default {
+  name: 'TraineeDetail',
+
+  data: () => ({
+    isProcessing: false,
+    error: {
+      isError: false,
+      message: '',
+    },
+    showDatePicker: false,
+    trainee: {
+      email: '',
+      name: '',
+      phone: '',
+      birthDate: '',
+      updatedAt: '',
+      createdAt: '',
+    },
+  }),
+
+  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);
+          this.trainee = json.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, 404, 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);
+          this.trainee = json.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 ([204, 400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          // If response status is not equal to 204, 400, 404, or 500, go to catch.
+          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>