Merge branch '#17' into 'development'

#17 Add Voucher Registration View

See merge request !21

src/router/index.js

@@ -58,6 +58,11 @@ const routes = [
     name: 'VoucherList',
     component: () => import('@/views/VoucherList.vue'),
   },
+  {
+    path: '/voucher/create',
+    name: 'VoucherCreate',
+    component: () => import('@/views/VoucherCreate.vue'),
+  },
   {
     path: '/voucher/:id',
     name: 'VoucherDetail',

src/views/VoucherCreate.vue

+<template>
+  <div class="voucher-create">
+    <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="voucher.program"
+        ></program-field>
+        <v-text-field
+          label="이용횟수"
+          v-model="voucher.quantity"
+        ></v-text-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="createVoucher"
+        >
+          <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: 'VoucherCreate',
+
+  components: {
+    ProgramField,
+  },
+
+  data: () => ({
+    isProcessing: false,
+    error: {
+      isError: false,
+      message: '',
+    },
+    voucher: {
+      program: {
+        title: '',
+      },
+      quantity: '',
+    },
+  }),
+
+  methods: {
+    createVoucher() {
+      this.error.isError = false;
+      this.error.message = '';
+      this.isProcessing = true;
+
+      fetch(APISetting.endpoints.voucher.list, APISetting.settings.post(this.voucher))
+        .then((res) => {
+          if ([201, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          throw new Error('알 수 없는 응답입니다.');
+        })
+        .then((values) => {
+          const [json, res] = values;
+          if (res.status !== 201) throw new Error(json.message);
+          this.$router.push('/voucher');
+        })
+        .catch((e) => {
+          this.error.message = e.message;
+          this.error.isError = true;
+        })
+        .finally(() => {
+          this.isProcessing = false;
+        });
+    },
+    cancel() {
+      this.$router.push('/voucher');
+    },
+  },
+};
+</script>