asan-service/pages/account/agents/buffer/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>
      <button class="switchBtns btn" :class="type === 'delivered' && 'btn-primary'" @click="type = 'delivered'">
        انجام شده ها
      </button>
      <div v-if="type !== 'temp'" 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 v-if="type === 'delivered'" class="deliveryCode">کد ارسال مرسوله</th>
            <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 v-if="type === 'delivered'" class="deliveryCode">
                <span>{{ item.deliveryCode || '-' }}</span>
              </td>

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

              <td class="details">
                <template v-if="item.status === 'temp'">
                  <button class="trashIcon-btn" title="حذف پیشنویس" @click="removePR(item._id)">
                    <i class="fal fa-trash-alt"></i>
                  </button>
                  <nuxt-link
                    :to="{
                      name: 'account-agents-buffer-br',
                      params: {
                        br: item._id
                      }
                    }"
                    class="btn btn-primary"
                  >
                    تکمیل فرم
                  </nuxt-link>
                </template>
                <nuxt-link
                  v-else
                  :to="{
                    name: 'account-agents-buffer-br',
                    params: {
                      br: 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="addBufferRequest">
            <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: 'AccountAgentBufferList',
  layout: 'user',
  async asyncData({ $axios, $auth, error }) {
    try {
      const bufferRequests = await $axios.get('/api/agent/brList')
      return {
        bufferRequests: bufferRequests.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      bufferRequests: null,
      searchInput: ''
    }
  },
  computed: {
    type: {
      get() {
        return this.$route.query.type
      },
      set(val) {
        this.$router.push({ name: 'account-agents-buffer', 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.bufferRequests
      else {
        filteredBySearch = this.bufferRequests.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' && item.status !== 'delivered'
        if (this.type === 'delivered') return item.status === 'delivered'
        return false
      })
    }
  },
  methods: {
    addBufferRequest() {
      this.$axios
        .post('/api/agent/br')
        .then(res => {
          this.$message({
            type: 'success',
            message: 'درخواست جدید افزوده شد'
          })
          this.$nuxt.refresh()
        })
        .catch(() => {
          this.$message({
            type: 'error',
            message: 'مشکلی در افزودن درخواست پیش آمده'
          })
        })
    },
    totalItemsCount(items) {
      let count = 0
      items.forEach(item => (count += item.bufferQuantity))
      return count
    },
    removePR(id) {
      this.$confirm('این درخواست از پیشنویس ها حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .delete(`/api/agent/br/${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>