asan-service/pages/admin/tickets/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="success" :to="{ name: 'admin-add-tickets' }" class="mr-auto">افزودن</CButton>
    </CustomSubHeader>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <i class="fas fa-filter"></i>
          <b>فیلتر ها</b>
        </slot>
      </CCardHeader>

      <CCardBody>
        <CRow>
          <CCol>
            <h4>جستجو در لیست:</h4>
            <el-input
              v-model="filterText"
              clearable
              placeholder="عنوان - کد مشتری - شماره سفارش"
              style="display: inline-block; max-width: 500px; margin-top: 8px"
            ></el-input>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>

    <CCard>
      <CCardHeader>
        <slot name="header">
          <CIcon name="cil-grid" />
          {{ list_title }}
        </slot>
      </CCardHeader>

      <CCardBody>
        <el-table :data="filteredItems" :row-class-name="hasUnread" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column prop="title" label="عنوان" width="">
            <template slot-scope="scope">
              <span :title="scope.row.title" class="singleLineTxt"> {{ scope.row.title }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="user_id.verity_businessCode" label="کد مشتری (وریتی)" width=""> </el-table-column>

          <el-table-column prop="user_id.panatech_businessCode" label="کد مشتری (پاناتک)" width=""> </el-table-column>

          <el-table-column prop="transaction_id" label="شماره سفارش" width="">
            <template slot-scope="scope">
              {{ scope.row.transaction_id || '-' }}
            </template>
          </el-table-column>

          <el-table-column prop="created_at" label="تاریخ ایجاد مکالمه" width="">
            <template slot-scope="scope">
              {{ $jDate(scope.row.created_at) }}
            </template>
          </el-table-column>

          <el-table-column label="مشاهده" width="75" align="left">
            <template slot-scope="scope">
              <CButton
                :key="scope.row._id"
                color="success"
                variant="outline"
                :to="{ name: 'admin-tickets-ticket', params: { ticket: scope.row._id } }"
              >
                <i class="fal fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AddminTicketsList',
  layout: 'admin',
  async asyncData({ $axios, error }) {
    try {
      const tickets = await $axios.get(`/api/admin/tickets`)
      return {
        tickets: tickets.data
      }
    } catch (err) {
      error({ status: 404, message: 'There is a problem here', log: err })
    }
  },
  data() {
    return {
      title: 'تیکت ها',
      list_title: 'لیست',
      tickets: null,
      filterText: ''
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    filteredItems() {
      const filterText = this.filterText
      return this.tickets.filter(item => {
        return (
          item.title.includes(filterText) ||
          item.user_id.first_name.includes(filterText) ||
          item.user_id.last_name.includes(filterText) ||
          item.user_id.verity_businessCode?.includes(filterText) ||
          item.user_id.panatech_businessCode?.includes(filterText) ||
          (item.user_id.first_name + ' ' + item.user_id.last_name).includes(filterText)
        )
      })
    }
  },
  methods: {
    hasUnread({ row, rowIndex }) {
      return row.messages.filter(item => !item.read && item.isUser).length ? 'unreadMsgInCv' : null
    }
  }
}
</script>

<style lang="scss">
.unreadMsgInCv {
  background: rgba(orange, 0.1) !important;
}

.selected {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 2;
}
</style>