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

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
    </CustomSubHeader>

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

      <CCardBody>
        <CRow>
          <CCol sm="12">
            <CButtonGroup>
              <CButton
                :color="filterType === 'all' ? 'primary' : 'light'"
                :class="filterType === 'all' && 'selected'"
                @click="filterType = 'all'"
              >
                <span>همه</span>
                <span> ({{ representations.length }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'registered' ? 'primary' : 'light'"
                :class="filterType === 'registered' && 'selected'"
                @click="filterType = 'registered'"
              >
                <span>جدید</span>
                <span> ({{ getListCountByStatus('registered') }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'ongoing' ? 'primary' : 'light'"
                :class="filterType === 'ongoing' && 'selected'"
                @click="filterType = 'ongoing'"
              >
                <span>در دست اقدام</span>
                <span> ({{ getListCountByStatus('ongoing') }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'verification' ? 'primary' : 'light'"
                :class="filterType === 'verification' && 'selected'"
                @click="filterType = 'verification'"
              >
                <span>بررسی مدارک</span>
                <span> ({{ getListCountByStatus('verification') }} )</span>
              </CButton>

              <CButton
                :color="filterType === 'accepted' ? 'primary' : 'light'"
                :class="filterType === 'accepted' && 'selected'"
                @click="filterType = 'accepted'"
              >
                <span>تایید شده</span>
                <span> ({{ getListCountByStatus('accepted') }}) </span>
              </CButton>

              <CButton
                :color="filterType === 'rejected' ? 'primary' : 'light'"
                :class="filterType === 'rejected' && 'selected'"
                @click="filterType = 'rejected'"
              >
                <span>رد شده</span>
                <span> ({{ getListCountByStatus('rejected') }}) </span>
              </CButton>
            </CButtonGroup>
          </CCol>
          <CCol sm="12">
            <el-divider></el-divider>
          </CCol>
          <CCol sm="12">
            <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"
          style="width: 100%"
          :row-class-name="({ row, rowIndex }) => row.status === 'registered' && 'unread'"
        >
          <el-table-column type="index" label="#"> </el-table-column>

          <el-table-column prop="full_name" label="نام" width=""> </el-table-column>

          <el-table-column prop="national_code" label="کد ملی" width=""> </el-table-column>

          <el-table-column prop="mobile_number" label="شماره موبایل" width=""> </el-table-column>

          <el-table-column prop="representation_code" label="کد پیگیری" width=""> </el-table-column>

          <el-table-column prop="province_name" label="استان" width=""> </el-table-column>

          <el-table-column prop="city_name" label="شهر" width=""> </el-table-column>

          <el-table-column label="تاریخ ثبت درخواست" width="">
            <template slot-scope="scope">
              <span> {{ $jDate(scope.row.created_at) }} </span>
            </template>
          </el-table-column>

          <el-table-column label="وضعیت" width="">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 'registered'" type="info">ثبت شده</el-tag>
              <el-tag v-if="scope.row.status === 'ongoing'" type="primary">در دست اقدام</el-tag>
              <el-tag v-if="scope.row.status === 'verification'" type="warning">بررسی مدارک</el-tag>
              <el-tag v-if="scope.row.status === 'accepted'" type="success">تایید شده</el-tag>
              <el-tag v-if="scope.row.status === 'rejected'" type="danger">رد شده</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="بررسی" width="65" align="center">
            <template slot-scope="scope">
              <CButton
                :key="scope.row._id"
                color="success"
                variant="outline"
                :to="{ name: 'admin-representations-representation', params: { representation: scope.row._id } }"
              >
                <i class="fal fa-eye"></i>
              </CButton>
            </template>
          </el-table-column>
        </el-table>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
export default {
  name: 'AdminRepresentationsList',
  layout: 'admin',
  async asyncData({ $axios, error }) {
    try {
      const representations = await $axios.get('/api/admin/representations')
      return {
        representations: representations.data
      }
    } catch (err) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      title: 'درخواست های نمایندگی',
      list_title: 'لیست',
      representations: null,
      filterText: ''
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    filteredItems() {
      const filterData = this.representations.filter(item =>
        this.filterType === 'all' ? item : item.status === this.filterType
      )
      const filterText = this.filterText.toLowerCase()
      if (!filterText.length) return filterData
      else
        return filterData.filter(item => {
          return (
            item.representation_code.toLowerCase().includes(filterText) ||
            item.full_name.toLowerCase().includes(filterText) ||
            item.mobile_number.toLowerCase().includes(filterText) ||
            item.national_code.toLowerCase().includes(filterText) ||
            item.province_name.toLowerCase().includes(filterText) ||
            item.city_name.toLowerCase().includes(filterText)
          )
        })
    },
    filterType: {
      get() {
        return this.$route.query.status
      },
      set(val) {
        this.$router.push({ name: 'admin-representations', query: { status: val } })
      }
    }
  },
  methods: {
    getListCountByStatus(status) {
      return this.representations.filter(item => item.status === status).length
    }
  }
}
</script>

<style lang="scss" scopped>
.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;

  span {
    color: #fff;
  }
}

.unread {
  background: rgba(orange, 0.1) !important;
}
</style>