Skip to content
Snippets Groups Projects
Commit fb0fc103 authored by JunGu Kang's avatar JunGu Kang
Browse files

Merge branch '#32' into 'development'

#32 Refactor Program Views

See merge request !28
parents 87641311 f047bcfc
No related branches found
No related tags found
2 merge requests!37Deploy,!28#32 Refactor Program Views
Pipeline #4343 passed
<template> <template>
<div class="program-detail"> <div class="program-detail">
<v-card <v-row>
:loading="isProcessing" <v-col cols="12">
> <v-card :loading="isProcessing">
<v-card-title>프로그램 생성</v-card-title> <v-card-title>프로그램 등록</v-card-title>
<v-card-text> <v-card-text>
<v-alert <v-alert
v-if="error.isError" v-if="error.isError"
...@@ -34,11 +34,7 @@ ...@@ -34,11 +34,7 @@
outlined outlined
@click="cancel" @click="cancel"
> >
<v-icon <v-icon left>mdi-delete</v-icon>
left
>
mdi-delete
</v-icon>
취소 취소
</v-btn> </v-btn>
<v-btn <v-btn
...@@ -46,15 +42,13 @@ ...@@ -46,15 +42,13 @@
outlined outlined
@click="createProgram" @click="createProgram"
> >
<v-icon <v-icon left>mdi-content-save</v-icon>
left
>
mdi-content-save
</v-icon>
저장 저장
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col>
</v-row>
</div> </div>
</template> </template>
...@@ -62,7 +56,7 @@ ...@@ -62,7 +56,7 @@
import APISetting from '@/settings/api'; import APISetting from '@/settings/api';
export default { export default {
name: 'ProgramDetail', name: 'ProgramCreate',
data: () => ({ data: () => ({
isProcessing: false, isProcessing: false,
......
<template> <template>
<div class="program-detail"> <div class="program-detail">
<v-card <v-row>
:loading="isProcessing" <v-col cols="12">
> <v-card :loading="isProcessing">
<v-card-title>프로그램 정보</v-card-title> <v-card-title>프로그램 정보</v-card-title>
<v-card-text> <v-card-text>
<v-alert <v-alert
...@@ -49,11 +49,7 @@ ...@@ -49,11 +49,7 @@
outlined outlined
@click="deleteProgram(id)" @click="deleteProgram(id)"
> >
<v-icon <v-icon left>mdi-delete</v-icon>
left
>
mdi-delete
</v-icon>
삭제 삭제
</v-btn> </v-btn>
<v-btn <v-btn
...@@ -61,19 +57,19 @@ ...@@ -61,19 +57,19 @@
outlined outlined
@click="updateProgram(id)" @click="updateProgram(id)"
> >
<v-icon <v-icon left>mdi-content-save</v-icon>
left
>
mdi-content-save
</v-icon>
저장 저장
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-col>
</v-row>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment';
import APISetting from '@/settings/api'; import APISetting from '@/settings/api';
export default { export default {
...@@ -118,7 +114,10 @@ export default { ...@@ -118,7 +114,10 @@ export default {
const [json, res] = values; const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.'); if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 200) throw new Error(json.message); 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) => { .catch((e) => {
this.error.message = e.message; this.error.message = e.message;
...@@ -136,14 +135,17 @@ export default { ...@@ -136,14 +135,17 @@ export default {
fetch(APISetting.endpoints.program.detail(id), APISetting.settings.put(this.program)) fetch(APISetting.endpoints.program.detail(id), APISetting.settings.put(this.program))
.then((res) => { .then((res) => {
if (res.status === 404) return Promise.all([null, 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('알 수 없는 응답입니다.'); throw new Error('알 수 없는 응답입니다.');
}) })
.then((values) => { .then((values) => {
const [json, res] = values; const [json, res] = values;
if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.'); if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
if (res.status !== 200) throw new Error(json.message); 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) => { .catch((e) => {
this.error.message = e.message; this.error.message = e.message;
...@@ -161,8 +163,7 @@ export default { ...@@ -161,8 +163,7 @@ export default {
fetch(APISetting.endpoints.program.detail(id), APISetting.settings.delete) fetch(APISetting.endpoints.program.detail(id), APISetting.settings.delete)
.then((res) => { .then((res) => {
if ([204, 404].includes(res.status)) return Promise.all([null, 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 ([400, 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('알 수 없는 응답입니다.'); throw new Error('알 수 없는 응답입니다.');
}) })
.then((values) => { .then((values) => {
......
<template> <template>
<div class="program-list"> <div class="program-list">
<v-row>
<v-col cols="12">
<v-card> <v-card>
<v-card-title>프로그램 목록</v-card-title> <v-card-title>프로그램 목록</v-card-title>
<v-card-text> <v-card-text>
<v-row <v-row>
justify="end"
>
<v-col <v-col
align-self="center" align-self="center"
cols="12" cols="12"
...@@ -19,11 +19,7 @@ ...@@ -19,11 +19,7 @@
outlined outlined
@click="createProgram" @click="createProgram"
> >
<v-icon <v-icon left>mdi-plus</v-icon>
left
>
mdi-plus
</v-icon>
새 프로그램 등록 새 프로그램 등록
</v-btn> </v-btn>
</v-col> </v-col>
...@@ -69,10 +65,14 @@ ...@@ -69,10 +65,14 @@
</v-data-table> </v-data-table>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col>
</v-row>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment';
import APISetting from '@/settings/api'; import APISetting from '@/settings/api';
export default { export default {
...@@ -99,8 +99,8 @@ export default { ...@@ -99,8 +99,8 @@ export default {
value: 'durationTime', value: 'durationTime',
}, },
{ {
text: '프로그램 소개', text: '등록 시각',
value: 'detail', value: 'createdAt',
}, },
{ {
text: '', text: '',
...@@ -122,11 +122,14 @@ export default { ...@@ -122,11 +122,14 @@ export default {
fetch(APISetting.endpoints.program.list, APISetting.settings.get) fetch(APISetting.endpoints.program.list, APISetting.settings.get)
.then((res) => { .then((res) => {
if (res.status === 200) return res.json(); if (res.status === 200) return res.json();
// If response status is not equal to 200, go to catch.
throw new Error('알 수 없는 응답입니다.'); throw new Error('알 수 없는 응답입니다.');
}) })
.then((json) => { .then((json) => {
this.programList.data = json.programs; 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) => { .catch((e) => {
this.error.message = e.message; this.error.message = e.message;
...@@ -145,25 +148,25 @@ export default { ...@@ -145,25 +148,25 @@ export default {
deleteProgram(id) { deleteProgram(id) {
this.error.isError = false; this.error.isError = false;
this.error.message = ''; this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.program.detail(id), APISetting.settings.delete) fetch(APISetting.endpoints.program.detail(id), APISetting.settings.delete)
.then((res) => { .then((res) => {
if (res.status === 204) return Promise.all([null, 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 ([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.
throw new Error('알 수 없는 응답입니다.'); throw new Error('알 수 없는 응답입니다.');
}) })
.then((values) => { .then((values) => {
const [json, res] = 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(); if (res.status === 204) return this.getProgramList();
// Otherwise, go to catch.
throw new Error(json.message); throw new Error(json.message);
}) })
.catch((e) => { .catch((e) => {
this.error.message = e.message; this.error.message = e.message;
this.error.isError = true; this.error.isError = true;
})
.finally(() => {
this.isProcessing = true;
}); });
}, },
}, },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment