#15 Add Voucher List View

src/components/NavigationDrawer.vue

@@ -5,7 +5,7 @@
     :value="isNavDrawerVisible"
   >
     <v-list>
-      <v-subheader>회원</v-subheader>
+      <v-subheader>회원 관리</v-subheader>
       <v-list-item-group
         color="primary"
       >
@@ -20,31 +20,47 @@
             <v-list-item-title>회원 목록</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
+      </v-list-item-group>
+      <v-subheader>프로그램 관리</v-subheader>
+      <v-list-item-group
+        color="primary"
+      >
         <v-list-item
           link
-          :to="{ name: 'TrainerList' }"
+          :to="{ name: 'ProgramList' }"
         >
           <v-list-item-icon>
-            <v-icon>mdi-account-supervisor</v-icon>
+            <v-icon>mdi-shape</v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title>트레이너 목록</v-list-item-title>
+            <v-list-item-title>프로그램 목록</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item
+          link
+          :to="{ name: 'VoucherList' }"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-ticket</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>이용권 목록</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list-item-group>
-      <v-subheader>프로그램</v-subheader>
+      <v-subheader>매장 관리</v-subheader>
       <v-list-item-group
         color="primary"
       >
         <v-list-item
           link
-          :to="{ name: 'ProgramList' }"
+          :to="{ name: 'TrainerList' }"
         >
           <v-list-item-icon>
-            <v-icon>mdi-shape</v-icon>
+            <v-icon>mdi-account-supervisor</v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title>프로그램 목록</v-list-item-title>
+            <v-list-item-title>트레이너 목록</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list-item-group>

src/router/index.js

@@ -53,6 +53,11 @@ const routes = [
     name: 'TrainerDetail',
     component: () => import('@/views/TrainerDetail.vue'),
   },
+  {
+    path: '/voucher',
+    name: 'VoucherList',
+    component: () => import('@/views/VoucherList.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/settings/api.js

@@ -22,6 +22,10 @@ export default {
       list: `${host}/trainer`,
       detail: id => (`${host}/trainer/${id}`),
     },
+    voucher: {
+      list: `${host}/voucher`,
+      detail: id => (`${host}/voucher/${id}`),
+    },
   },
   settings: {
     post: data => ({

src/views/VoucherList.vue

+<template>
+  <div class="voucher-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="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>
+  </div>
+</template>
+
+<script>
+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: '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;
+        })
+        .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>