#32 Refactor Program Views

Program Create View
Program Detail View
Program List View

src/views/ProgramCreate.vue

 <template>
   <div class="program-detail">
-    <v-card
-      :loading="isProcessing"
-    >
-      <v-card-title>프로그램 생성</v-card-title>
+    <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"
@@ -34,11 +34,7 @@
               outlined
               @click="cancel"
             >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
+              <v-icon left>mdi-delete</v-icon>
               취소
             </v-btn>
             <v-btn
@@ -46,15 +42,13 @@
               outlined
               @click="createProgram"
             >
-          <v-icon
-            left
-          >
-            mdi-content-save
-          </v-icon>
+              <v-icon left>mdi-content-save</v-icon>
               저장
             </v-btn>
           </v-card-actions>
         </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
@@ -62,7 +56,7 @@
 import APISetting from '@/settings/api';
 
 export default {
-  name: 'ProgramDetail',
+  name: 'ProgramCreate',
 
   data: () => ({
     isProcessing: false,

src/views/ProgramDetail.vue

 <template>
   <div class="program-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
@@ -49,11 +49,7 @@
               outlined
               @click="deleteProgram(id)"
             >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
+              <v-icon left>mdi-delete</v-icon>
               삭제
             </v-btn>
             <v-btn
@@ -61,19 +57,19 @@
               outlined
               @click="updateProgram(id)"
             >
-          <v-icon
-            left
-          >
-            mdi-content-save
-          </v-icon>
+              <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 {
@@ -118,7 +114,10 @@ export default {
           const [json, res] = values;
           if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
           if (res.status !== 200) throw new Error(json.message);
-          this.program = json.program;
+          const { program } = json;
+          program.createdAt = moment(program.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          program.updatedAt = moment(program.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.program = program;
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -136,14 +135,17 @@ export default {
       fetch(APISetting.endpoints.program.detail(id), APISetting.settings.put(this.program))
         .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);
-          this.program = json.program;
+          const { program } = json;
+          program.createdAt = moment(program.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          program.updatedAt = moment(program.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.program = program;
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -161,8 +163,7 @@ export default {
       fetch(APISetting.endpoints.program.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/ProgramList.vue

 <template>
   <div class="program-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"
@@ -19,11 +19,7 @@
                   outlined
                   @click="createProgram"
                 >
-              <v-icon
-                left
-              >
-                mdi-plus
-              </v-icon>
+                  <v-icon left>mdi-plus</v-icon>
                   새 프로그램 등록
                 </v-btn>
               </v-col>
@@ -69,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 {
@@ -99,8 +99,8 @@ export default {
           value: 'durationTime',
         },
         {
-          text: '프로그램 소개',
-          value: 'detail',
+          text: '등록 시각',
+          value: 'createdAt',
         },
         {
           text: '',
@@ -122,11 +122,14 @@ export default {
       fetch(APISetting.endpoints.program.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.programList.data = json.programs;
+          this.programList.data.forEach((program) => {
+            // eslint-disable-next-line no-param-reassign
+            program.createdAt = moment(program.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          });
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -145,25 +148,25 @@ export default {
     deleteProgram(id) {
       this.error.isError = false;
       this.error.message = '';
+      this.isProcessing = true;
 
       fetch(APISetting.endpoints.program.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 program successfully deleted and response status is equal to 204,
-          // update program list.
           if (res.status === 204) return this.getProgramList();
-          // Otherwise, go to catch.
           throw new Error(json.message);
         })
         .catch((e) => {
           this.error.message = e.message;
           this.error.isError = true;
+        })
+        .finally(() => {
+          this.isProcessing = true;
         });
     },
   },