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

#16 Add Voucher Detail View

parent a06bb084
No related branches found
No related tags found
2 merge requests!37Deploy,!20#16 Add Voucher Detail View
Pipeline #4248 passed
...@@ -58,6 +58,11 @@ const routes = [ ...@@ -58,6 +58,11 @@ const routes = [
name: 'VoucherList', name: 'VoucherList',
component: () => import('@/views/VoucherList.vue'), component: () => import('@/views/VoucherList.vue'),
}, },
{
path: '/voucher/:id',
name: 'VoucherDetail',
component: () => import('@/views/VoucherDetail.vue'),
},
]; ];
const router = new VueRouter({ const router = new VueRouter({
......
<template>
<div class="voucher-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>
<v-text-field
label="등록번호"
readonly
v-model="id"
></v-text-field>
<program-field
:program.sync="voucher.program"
></program-field>
<v-text-field
label="이용횟수"
v-model="voucher.quantity"
></v-text-field>
<v-text-field
label="등록 시각"
readonly
v-model="voucher.createdAt"
></v-text-field>
<v-text-field
label="최종 수정 시각"
readonly
v-model="voucher.updatedAt"
></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="error"
outlined
@click="deleteVoucher(id)"
>
<v-icon
left
>
mdi-delete
</v-icon>
삭제
</v-btn>
<v-btn
color="primary"
outlined
@click="updateVoucher(id)"
>
<v-icon
left
>
mdi-content-save
</v-icon>
저장
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
import APISetting from '@/settings/api';
import ProgramField from '@/components/ProgramField.vue';
export default {
name: 'VoucherDetail',
components: {
ProgramField,
},
data: () => ({
isProcessing: false,
error: {
isError: false,
message: '',
},
voucher: {
program: {
title: '',
},
quantity: '',
},
}),
computed: {
id() {
if ('id' in this.$route.params) return this.$route.params.id;
return null;
},
},
watch: {
selectedProgram(val) {
if (val && 'id' in val) this.voucher.programId = val.id;
},
},
methods: {
getVoucher(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.voucher.detail(id), APISetting.settings.get)
.then((res) => {
if (res.status === 404) return Promise.all([null, 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.voucher = json.voucher;
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
updateVoucher(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.voucher.detail(id), APISetting.settings.put(this.voucher))
.then((res) => {
if (res.status === 404) return Promise.all([null, 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.voucher = json.voucher;
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
deleteVoucher(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.voucher.detail(id), APISetting.settings.delete)
.then((res) => {
if ([204, 404].includes(res.status)) return Promise.all([null, res]);
if ([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 !== 204) throw new Error(json.message);
return this.$router.push('/voucher');
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
},
created() {
this.getVoucher(this.id);
},
};
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment