#35 Refactor Trainer Views

Trainer Create View
Trainer Detail View
Trainer List View

src/views/TrainerCreate.vue

+<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="이메일"
+              v-model="trainer.email"
+            ></v-text-field>
+            <v-text-field
+              label="비밀번호"
+              type="password"
+              v-model="trainer.password"
+            ></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-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+              color="error"
+              outlined
+              @click="cancel"
+            >
+              <v-icon left>mdi-delete</v-icon>
+              취소
+            </v-btn>
+            <v-btn
+              color="primary"
+              outlined
+              @click="createTrainer"
+            >
+              <v-icon left>mdi-content-save</v-icon>
+              저장
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import APISetting from '@/settings/api';
+
+export default {
+  name: 'TrainerCreate',
+
+  data: () => ({
+    isProcessing: false,
+    error: {
+      isError: false,
+      message: '',
+    },
+    showDatePicker: false,
+    trainer: {
+      email: '',
+      password: '',
+      name: '',
+      nickname: '',
+      phone: '',
+      birthDate: '',
+      bio: '',
+    },
+  }),
+
+  methods: {
+    createTrainer() {
+      this.error.isError = false;
+      this.error.message = '';
+      this.isProcessing = true;
+
+      fetch(APISetting.endpoints.trainer.list, APISetting.settings.post(this.trainer))
+        .then((res) => {
+          if ([201, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          throw new Error('알 수 없는 응답입니다.');
+        })
+        .then((values) => {
+          const [json, res] = values;
+          if (res.status !== 201) throw new Error(json.message);
+          this.$router.push('/trainer');
+        })
+        .catch((e) => {
+          this.error.message = e.message;
+          this.error.isError = true;
+        })
+        .finally(() => {
+          this.isProcessing = false;
+        });
+    },
+    cancel() {
+      this.$router.push('/trainer');
+    },
+  },
+};
+</script>

src/views/TrainerDetail.vue

 <template>
   <div class="trainer-detail">
-    <v-card
-      :loading="isProcessing"
-    >
+    <v-row>
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
           <v-card-title>트레이너 정보</v-card-title>
           <v-card-text>
             <v-alert
@@ -18,13 +18,17 @@
               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.email"
+              label="닉네임"
+              v-model="trainer.nickname"
             ></v-text-field>
             <v-text-field
               label="연락처"
@@ -36,9 +40,7 @@
               offset-y
               v-model="showDatePicker"
             >
-          <template
-            v-slot:activator="{ on }"
-          >
+              <template v-slot:activator="{ on }">
                 <v-text-field
                   label="생년월일"
                   readonly
@@ -51,6 +53,11 @@
                 @input="showDatePicker = false"
               ></v-date-picker>
             </v-menu>
+            <v-textarea
+              auto-grow
+              label="소개"
+              v-model="trainer.bio"
+            ></v-textarea>
             <v-text-field
               label="등록 시각"
               readonly
@@ -63,11 +70,13 @@
             ></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
@@ -75,14 +84,19 @@
               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 {
@@ -102,8 +116,8 @@ export default {
       phone: '',
       birthDate: '',
       bio: '',
-      updatedAt: '',
       createdAt: '',
+      updatedAt: '',
     },
   }),
 
@@ -130,6 +144,9 @@ export default {
           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) => {
@@ -148,13 +165,16 @@ export default {
       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, 404, 500].includes(res.status)) return Promise.all([res.json(), 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) => {
@@ -173,8 +193,7 @@ export default {
       fetch(APISetting.endpoints.trainer.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.
+          if ([400, 500].includes(res.status)) return Promise.all([res.json(), res]);
           throw new Error('알 수 없는 응답입니다.');
         })
         .then((values) => {

src/views/TrainerList.vue

 <template>
   <div class="trainer-list">
+    <v-row>
+      <v-col cols="12">
         <v-card>
           <v-card-title>트레이너 목록</v-card-title>
           <v-card-text>
-        <v-row
-          justify="end"
+            <v-row>
+              <v-col
+                align-self="center"
+                cols="12"
+                sm="8"
+                md="9"
+                lg="9"
+                xl="10"
               >
+                <v-btn
+                  color="success"
+                  outlined
+                  @click="createTrainer"
+                >
+                  <v-icon left>mdi-plus</v-icon>
+                  새 트레이너 등록
+                </v-btn>
+              </v-col>
               <v-col
                 cols="12"
                 sm="4"
@@ -48,10 +65,14 @@
             </v-data-table>
           </v-card-text>
         </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+
 import APISetting from '@/settings/api';
 
 export default {
@@ -86,8 +107,8 @@ export default {
           value: 'phone',
         },
         {
-          text: '소개',
-          value: 'bio',
+          text: '등록 시각',
+          value: 'createdAt',
         },
         {
           text: '',
@@ -109,11 +130,15 @@ export default {
       fetch(APISetting.endpoints.trainer.list, APISetting.settings.get)
         .then((res) => {
           if (res.status === 200) return res.json();
-          // If response status is not equal to 200, go to catch.
           throw new Error('알 수 없는 응답입니다.');
         })
         .then((json) => {
-          this.trainerList.data = json.trainers;
+          const { trainers } = json;
+          trainers.forEach((trainer) => {
+            // eslint-disable-next-line no-param-reassign
+            trainer.createdAt = moment(trainer.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          });
+          this.trainerList.data = trainers;
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -123,31 +148,34 @@ export default {
           this.isProcessing = false;
         });
     },
+    createTrainer() {
+      this.$router.push('/trainer/create');
+    },
     editTrainer(id) {
       this.$router.push(`/trainer/${id}`);
     },
     deleteTrainer(id) {
       this.error.isError = false;
       this.error.message = '';
+      this.isProcessing = true;
 
       fetch(APISetting.endpoints.trainer.detail(id), APISetting.settings.delete)
         .then((res) => {
           if (res.status === 204) 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, 500, go to catch.
+          if ([400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
           throw new Error('알 수 없는 응답입니다.');
         })
         .then((values) => {
           const [json, res] = values;
-          // If trainer successfully deleted and response status is equal to 204,
-          // update trainer list.
           if (res.status === 204) return this.getTrainerList();
-          // Otherwise, go to catch.
           throw new Error(json.message);
         })
         .catch((e) => {
           this.error.message = e.message;
           this.error.isError = true;
+        })
+        .finally(() => {
+          this.isProcessing = false;
         });
     },
   },