#34 Refactor Schedule Views

Schedule Create View
Schedule Detail View
Schedule List View

src/views/ScheduleCreate.vue

 <template>
   <div class="schedule-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
@@ -13,19 +13,13 @@
             >
               {{ error.message }}
             </v-alert>
-        <program-field
-          :program.sync="schedule.program"
-        ></program-field>
-        <trainer-field
-          :trainer.sync="schedule.trainer"
-        ></trainer-field>
+            <program-field :program.sync="schedule.program"></program-field>
+            <trainer-field :trainer.sync="schedule.trainer"></trainer-field>
             <v-text-field
               label="최대 예약 가능 인원"
               v-model="schedule.maxTrainee"
             ></v-text-field>
-        <date-time-field
-          :datetime.sync="schedule.startAt"
-        ></date-time-field>
+            <date-time-field :datetime.sync="schedule.startAt"></date-time-field>
           </v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
@@ -34,11 +28,7 @@
               outlined
               @click="cancel"
             >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
+              <v-icon left>mdi-delete</v-icon>
               취소
             </v-btn>
             <v-btn
@@ -46,15 +36,13 @@
               outlined
               @click="createSchedule"
             >
-          <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>
 

src/views/ScheduleDetail.vue

 <template>
   <div class="schedule-detail">
     <v-row>
-      <v-col
-        cols="12"
-      >
-        <v-card
-          :loading="isProcessing"
-        >
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
           <v-card-title>일정 정보</v-card-title>
           <v-card-text>
             <v-alert
@@ -22,19 +18,13 @@
               readonly
               v-model="id"
             ></v-text-field>
-            <program-field
-              :program.sync="schedule.program"
-            ></program-field>
-            <trainer-field
-              :trainer.sync="schedule.trainer"
-            ></trainer-field>
+            <program-field :program.sync="schedule.program"></program-field>
+            <trainer-field :trainer.sync="schedule.trainer"></trainer-field>
             <v-text-field
               label="최대 예약 가능 인원"
               v-model="schedule.maxTrainee"
             ></v-text-field>
-            <date-time-field
-              :datetime.sync="schedule.startAt"
-            ></date-time-field>
+            <date-time-field :datetime.sync="schedule.startAt"></date-time-field>
             <v-text-field
               label="등록 시각"
               readonly
@@ -53,11 +43,7 @@
               outlined
               @click="deleteSchedule(id)"
             >
-              <v-icon
-                left
-              >
-                mdi-delete
-              </v-icon>
+              <v-icon left>mdi-delete</v-icon>
               삭제
             </v-btn>
             <v-btn
@@ -65,11 +51,7 @@
               outlined
               @click="updateSchedule(id)"
             >
-              <v-icon
-                left
-              >
-                mdi-content-save
-              </v-icon>
+              <v-icon left>mdi-content-save</v-icon>
               저장
             </v-btn>
           </v-card-actions>
@@ -77,17 +59,11 @@
       </v-col>
     </v-row>
     <v-row>
-      <v-col
-        cols="12"
-      >
-        <v-card
-          :loading="isProcessing"
-        >
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
           <v-card-title>예약자</v-card-title>
           <v-card-text>
-            <v-row
-              justify="end"
-            >
+            <v-row justify="end">
               <v-col
                 cols="12"
                 sm="4"
@@ -136,6 +112,8 @@
 </template>
 
 <script>
+import moment from 'moment';
+
 import APISetting from '@/settings/api';
 import DateTimeField from '@/components/DateTimeField.vue';
 import ProgramField from '@/components/ProgramField.vue';
@@ -220,7 +198,10 @@ export default {
           const [json, res] = values;
           if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
           if (res.status !== 200) throw new Error(json.message);
-          this.schedule = json.schedule;
+          const { schedule } = json;
+          schedule.createdAt = moment(schedule.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          schedule.updatedAt = moment(schedule.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.schedule = schedule;
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -238,7 +219,7 @@ export default {
       fetch(APISetting.endpoints.schedule.detail(id), APISetting.settings.put(this.schedule))
         .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) => {
@@ -263,8 +244,7 @@ export default {
       fetch(APISetting.endpoints.schedule.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/ScheduleList.vue

 <template>
   <div class="schedule-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="createSchedule"
                 >
-              <v-icon
-                left
-              >
-                mdi-plus
-              </v-icon>
+                  <v-icon left>mdi-plus</v-icon>
                   새 일정 등록
                 </v-btn>
               </v-col>
@@ -69,6 +65,8 @@
             </v-data-table>
           </v-card-text>
         </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>