diff --git a/src/views/ScheduleCreate.vue b/src/views/ScheduleCreate.vue index 946c15d580313ffac03fb1931a7241e5e4bbec13..cd0232e31cbc28f99cbc883fdc82dd83ae943b83 100644 --- a/src/views/ScheduleCreate.vue +++ b/src/views/ScheduleCreate.vue @@ -1,60 +1,48 @@ <template> <div class="schedule-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> - <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> - </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="createSchedule" - > - <v-icon - left - > - mdi-content-save - </v-icon> - 저장 - </v-btn> - </v-card-actions> - </v-card> + <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> + <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> + </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="createSchedule" + > + <v-icon left>mdi-content-save</v-icon> + 저장 + </v-btn> + </v-card-actions> + </v-card> + </v-col> + </v-row> </div> </template> diff --git a/src/views/ScheduleDetail.vue b/src/views/ScheduleDetail.vue index d3ff6e9407d294296591554f22ee1490f458f0f6..4baf94fa8dcbf099358feb86946a4ca658c40db4 100644 --- a/src/views/ScheduleDetail.vue +++ b/src/views/ScheduleDetail.vue @@ -1,12 +1,8 @@ <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) => { diff --git a/src/views/ScheduleList.vue b/src/views/ScheduleList.vue index eaee0d0a570e3936528b69212aa7b28876c8065b..f81d1e4035e437637636c857366563d641f47c53 100644 --- a/src/views/ScheduleList.vue +++ b/src/views/ScheduleList.vue @@ -1,74 +1,72 @@ <template> <div class="schedule-list"> - <v-card> - <v-card-title>일정 목록</v-card-title> - <v-card-text> - <v-row - justify="end" - > - <v-col - align-self="center" - cols="12" - sm="8" - md="9" - lg="9" - xl="10" - > - <v-btn - color="success" - outlined - @click="createSchedule" - > - <v-icon - left + <v-row> + <v-col cols="12"> + <v-card> + <v-card-title>일정 목록</v-card-title> + <v-card-text> + <v-row> + <v-col + align-self="center" + cols="12" + sm="8" + md="9" + lg="9" + xl="10" > - mdi-plus - </v-icon> - 새 일정 등록 - </v-btn> - </v-col> - <v-col - cols="12" - sm="4" - md="3" - lg="3" - xl="2" - > - <v-text-field - append-icon="mdi-magnify" - clearable - label="일정 검색" - v-model="scheduleList.searchKeyword" - ></v-text-field> - </v-col> - </v-row> - <v-data-table - :headers="scheduleList.headers" - item-key="id" - :items="scheduleList.data" - :loading="isProcessing" - loading-text="데이터를 불러오는 중입니다." - :search="scheduleList.searchKeyword" - no-results-text="일치하는 일정을 찾지 못했습니다." - > - <template v-slot:item.action="{ item }"> - <v-icon - small - class="mr-2" - @click="editSchedule(item.id)" - > - mdi-pencil - </v-icon> - <v-icon - small - @click="deleteSchedule(item.id)" + <v-btn + color="success" + outlined + @click="createSchedule" + > + <v-icon left>mdi-plus</v-icon> + 새 일정 등록 + </v-btn> + </v-col> + <v-col + cols="12" + sm="4" + md="3" + lg="3" + xl="2" + > + <v-text-field + append-icon="mdi-magnify" + clearable + label="일정 검색" + v-model="scheduleList.searchKeyword" + ></v-text-field> + </v-col> + </v-row> + <v-data-table + :headers="scheduleList.headers" + item-key="id" + :items="scheduleList.data" + :loading="isProcessing" + loading-text="데이터를 불러오는 중입니다." + :search="scheduleList.searchKeyword" + no-results-text="일치하는 일정을 찾지 못했습니다." > - mdi-delete - </v-icon> - </template> - </v-data-table> - </v-card-text> - </v-card> + <template v-slot:item.action="{ item }"> + <v-icon + small + class="mr-2" + @click="editSchedule(item.id)" + > + mdi-pencil + </v-icon> + <v-icon + small + @click="deleteSchedule(item.id)" + > + mdi-delete + </v-icon> + </template> + </v-data-table> + </v-card-text> + </v-card> + </v-col> + </v-row> </div> </template>