asan-service/pages/account/agents/guaranteeReports/index.vue

<template>
  <user-dashboard-container page-class="agent-requests" panel-title="لیست گزارش عملکرد گارانتی">
    <div class="filter mb-5">
      <h4 style="display: inline-block; margin-left: 15px">مشاهده لیست:</h4>
      <button class="switchBtns btn" :class="type === 'temp' && 'btn-primary'" @click="type = 'temp'">
        پیشنویس ها
      </button>
      <button class="switchBtns btn" :class="type === 'sent' && 'btn-primary'" @click="type = 'sent'">
        ارسال شده ها
      </button>
      <div v-if="type === 'sent'" class="search mt-3" :class="serachBoxClass">
        <el-input v-model="searchInput" clearable placeholder="جستجو در لیست با کد پیگیری" />
      </div>
    </div>
    <div class="tableBox">
      <table class="agent-requests" :class="type !== 'temp' && 'extended'">
        <thead>
          <tr>
            <th class="index">ردیف</th>
            <th class="description">توضیحات</th>
            <th class="createDate">تاریخ ایجاد</th>
            <template v-if="type === 'sent' || type === 'delivered'">
              <th class="sendDate">تاریخ ارسال</th>
              <th class="trackingCode">کد پیگیری</th>
              <th class="status">وضعیت</th>
            </template>
            <th class="quantity">تعداد گزارش</th>
            <th class="details">جزئیات</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="filteredList.length">
            <tr v-for="(item, index) in filteredList" :key="item._id" :title="item.description">
              <td class="index">
                <span>{{ index + 1 }}</span>
              </td>

              <td class="description">
                <span v-if="item.description" class="singleLineTxt">{{ item.description }}</span>
                <span v-else style="color: gray">بدون توضیحات</span>
              </td>

              <td class="createDate">
                <span> {{ $jDate(item.createDate) }} </span>
              </td>

              <template v-if="type === 'sent' || type === 'delivered'">
                <td class="sendDate">
                  <span>{{ $jDate(item.sendDate) }}</span>
                </td>
                <td class="trackingCode">
                  <span>{{ item.trackingCode }}</span>
                </td>
                <td class="status">
                  <span v-if="item.status === 'sent'">ارسال شده</span>
                  <!-- <span v-if="item.status === 'ongoing'">در دست اقدام</span>
									<span v-if="item.status === 'waiting'">در انتظار قطعه</span>
									<span v-if="item.status === 'delivered'">تحویل شده</span> -->
                </td>
              </template>

              <td class="quantity">
                <span>{{ totalItemsCount(item.items) }}</span>
              </td>

              <td class="details">
                <template v-if="item.status === 'temp'">
                  <button class="trashIcon-btn" title="حذف پیشنویس" @click="removeGR(item._id)">
                    <i class="fal fa-trash-alt"></i>
                  </button>
                  <nuxt-link
                    :to="{
                      name: 'account-agents-guaranteeReports-gr',
                      params: {
                        gr: item._id
                      }
                    }"
                    class="btn btn-primary"
                  >
                    تکمیل فرم
                  </nuxt-link>
                </template>
                <nuxt-link
                  v-else
                  :to="{
                    name: 'account-agents-guaranteeReports-gr',
                    params: {
                      gr: item._id
                    }
                  }"
                  class="btn btn-primary"
                >
                  مشاهده
                </nuxt-link>
              </td>
            </tr>
          </template>
          <tr v-else>
            <td class="noItem">
              <span>هیچ اطلاعاتی وجود ندارد</span>
            </td>
          </tr>
          <tr v-if="type === 'temp'" class="addStuffBtn" @click="addGuaranteeReport">
            <td colspan="5">
              <button>
                <span>افزودن فرم گزارش</span>
                <i class="far fa-plus"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <table-notice />
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountAgentGrList',
  layout: 'user',
  async asyncData({ $axios, $auth, error }) {
    try {
      const guaranteeReports = await $axios.get('/api/agent/grList')
      return {
        guaranteeReports: guaranteeReports.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      guaranteeReports: null,
      searchInput: ''
    }
  },
  computed: {
    type: {
      get() {
        return this.$route.query.type
      },
      set(val) {
        this.$router.push({ name: 'account-agents-guaranteeReports', query: { type: val } })
      }
    },
    serachBoxClass() {
      if (this.searchInput && this.filteredList.length) return 'success'
      if (this.searchInput && !this.filteredList.length) return 'error'
      return null
    },
    filteredList() {
      let filteredBySearch
      if (!this.searchInput || this.type === 'temp') filteredBySearch = this.guaranteeReports
      else {
        filteredBySearch = this.guaranteeReports.filter(item =>
          item.trackingCode?.toLowerCase().includes(this.searchInput.toLowerCase())
        )
      }
      return filteredBySearch.filter(item => {
        if (this.type === 'temp') return item.status === 'temp'
        if (this.type === 'sent') return item.status !== 'temp'
        return false
      })
    }
  },
  methods: {
    addGuaranteeReport() {
      this.$axios
        .post('/api/agent/gr')
        .then(res => {
          this.$message({
            type: 'success',
            message: 'فرم گزارش جدید افزوده شد'
          })
          this.$nuxt.refresh()
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: 'مشکلی در افزودن گزارش پیش آمده'
          })
        })
    },
    totalItemsCount(items) {
      return items.length
    },
    removeGR(id) {
      this.$confirm('این گزارش از پیشنویس ها حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/agent/gr/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              this.$nuxt.refresh()
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: 'مشکلی در حذف گزارش پیش آمده'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: 'عملیات لغو شد'
          })
        })
    }
  }
}
</script>