Select Git revision
VoucherList.vue
VoucherList.vue 4.66 KiB
<template>
<div class="voucher-list">
<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"
>
<v-btn
color="success"
outlined
@click="createVoucher"
>
<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="voucherList.searchKeyword"
></v-text-field>
</v-col>
</v-row>
<v-data-table
:headers="voucherList.headers"
item-key="id"
:items="voucherList.data"
:loading="isProcessing"
loading-text="데이터를 불러오는 중입니다."
:search="voucherList.searchKeyword"
no-results-text="일치하는 이용권을 찾지 못했습니다."
>
<template v-slot:item.action="{ item }">
<v-icon
small
class="mr-2"
@click="editVoucher(item.id)"
>
mdi-pencil
</v-icon>
<v-icon
small
@click="deleteVoucher(item.id)"
>
mdi-delete
</v-icon>
</template>
</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 {
name: 'VoucherList',
data: () => ({
isProcessing: false,
error: {
isError: false,
message: '',
},
voucherList: {
headers: [
{
text: '#',
value: 'id',
},
{
text: '프로그램',
value: 'program.title',
},
{
text: '이용횟수',
value: 'quantity',
},
{
text: '가격',
value: 'price',
},
{
text: '등록 시각',
value: 'createdAt',
},
{
text: '',
value: 'action',
sortable: false,
},
],
data: [],
searchKeyword: '',
},
}),
methods: {
getVoucherList() {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.voucher.list, APISetting.settings.get)
.then((res) => {
if (res.status === 200) return res.json();
throw new Error('알 수 없는 응답입니다.');
})
.then((json) => {
this.voucherList.data = json.vouchers;
this.voucherList.data.forEach((voucher) => {
// eslint-disable-next-line no-param-reassign
voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
});
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
createVoucher() {
this.$router.push('/voucher/create');
},
editVoucher(id) {
this.$router.push(`/voucher/${id}`);
},
deleteVoucher(id) {
this.error.isError = false;
this.error.message = '';
this.isProcessing = true;
fetch(APISetting.endpoints.voucher.detail(id), APISetting.settings.delete)
.then((res) => {
if (res.status === 204) return Promise.all([null, res]);
if ([400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
throw new Error('알 수 없는 응답입니다.');
})
.then((values) => {
const [json, res] = values;
if (res.status === 204) return this.getVoucherList();
throw new Error(json.message);
})
.catch((e) => {
this.error.message = e.message;
this.error.isError = true;
})
.finally(() => {
this.isProcessing = false;
});
},
},
created() {
this.getVoucherList();
},
};
</script>