Skip to content
Snippets Groups Projects
Select Git revision
  • a3fba007df57e094c9fb0a4536f39ef43b4bd2c8
  • main default protected
  • PC1
  • br_A
4 results

file.97.java

Blame
  • 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>