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

<template>
  <user-dashboard-container page-class="guarantee" panel-title="صندوق ورودی نماینده">
    <div class="filter mb-5">
      <h4 style="display: inline-block; margin-left: 15px">مشاهده لیست:</h4>
      <button class="switchBtns btn" :class="type === 'ttl' && 'btn-primary'" @click="type = 'ttl'">دریافتی ها</button>
      <button class="switchBtns btn" :class="type === 'atl' && 'btn-primary'" @click="type = 'atl'">
        پذیرش شده ها
      </button>
      <div class="search mt-3" :class="serachBoxClass">
        <el-input v-model="searchInput" clearable placeholder="جستجو در لیست با کد پذیرش موقت یا دائم" />
      </div>
    </div>
    <div class="tableBox">
      <table class="qaurantee">
        <thead>
          <tr>
            <th>ردیف</th>
            <th>شماره پذیرش موقت</th>
            <th>تاریخ ارسال فرم</th>
            <template v-if="type === 'atl'">
              <th>شماره پذیرش دائم</th>
              <th>تاریخ پذیرش</th>
              <th>وضعیت</th>
            </template>
            <th class="brand">برند</th>
            <th>جزئیات</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="filteredList.length">
            <tr v-for="(item, index) in filteredList" :key="item._id" :class="!item.seen && 'unread'">
              <td>
                <span>{{ index + 1 }}</span>
              </td>
              <td>
                <span>{{ item.TempReceiptTransNumber }}</span>
              </td>
              <td>
                <span>{{ $jDate(item.TempReceiptTransDate) }}</span>
              </td>
              <template v-if="type === 'atl'">
                <td>
                  <span>{{ item.ItemReceptionTransNumber }}</span>
                </td>
                <td>
                  <span>{{ $jDate(item.ItemReceptionTransDate) }}</span>
                </td>
                <td>
                  <span v-if="item.status === 'recieved'">پذیرش شده</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="brand">
                <!-- <img
									v-if="item.db_name === 'verity'"
									src="/assets/img/verity-small.png"
									alt="verity"
									style="width: 80px;"
								/>
								<img
									v-if="item.db_name === 'panatech'"
									src="/assets/img/panatech-small.png"
									alt="panatech"
									style="width: 80px;"
								/> -->
                <i
                  v-if="item.db_name === 'verity'"
                  class="fas fa-phone-laptop"
                  title="لوازم جانبی کامپیوتر و موبایل"
                ></i>
                <i v-if="item.db_name === 'panatech'" class="fas fa-photo-video" title="لوازم صوتی و تصویری خودرو"></i>
              </td>
              <td>
                <nuxt-link
                  :to="{
                    name: 'account-agents-inbox-view',
                    query: {
                      tid: item._id,
                      ttn: item.TempReceiptTransNumber,
                      atn: item.ItemReceptionTransNumber || undefined,
                      db_name: item.db_name
                    }
                  }"
                  class="btn btn-primary"
                >
                  مشاهده
                </nuxt-link>
              </td>
            </tr>
          </template>
          <tr v-else>
            <td class="noItem">
              <span>هیچ اطلاعاتی وجود ندارد</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <table-notice />
  </user-dashboard-container>
</template>

<script>
export default {
  name: 'AccountAgentInbox',
  layout: 'user',
  async asyncData({ $axios, error }) {
    try {
      const transactions = await $axios.get('/api/agent/inbox')
      return {
        transactions: transactions.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      transactions: null,
      searchInput: ''
    }
  },
  computed: {
    type: {
      get() {
        return this.$route.query.type
      },
      set(val) {
        this.$router.push({ name: 'account-agents-inbox', query: { type: val } })
      }
    },
    serachBoxClass() {
      if (this.searchInput && this.filteredList.length) return 'success'
      if (this.searchInput && !this.filteredList.length) return 'error'
      return null
    },
    filteredList() {
      let filteredByTC
      if (!this.searchInput) filteredByTC = this.transactions
      else {
        filteredByTC = this.transactions.filter(
          item =>
            item.TempReceiptTransNumber?.toLowerCase().includes(this.searchInput.toLowerCase()) ||
            item.ItemReceptionTransNumber?.toLowerCase().includes(this.searchInput.toLowerCase())
        )
      }
      const transactions = filteredByTC.filter(item => {
        if (this.type === 'ttl') return !item.ItemReceptionTransNumber
        else if (this.type === 'atl') return item.ItemReceptionTransNumber
        return false
      })
      if (this.type === 'ttl') return transactions.reverse()
      else return transactions
    }
  }
}
</script>