asan-service/pages/agents/index.vue

<template>
  <div class="agents--page page">
    <hero title="لیست نمایندگان شهرها" />
    <section class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="panel">
              <h3>فیلتر ها:</h3>
              <el-divider></el-divider>

              <div class="row">
                <div class="col-12 col-md-4 mb-3">
                  <el-select v-model="representationType" placeholder="نوع نماینده" style="width: 100%">
                    <el-option label="همه نمایندگان آسان سرویس" value="all" />
                    <el-option label="نمایندگان لوازم جانبی کامپیوتر و موبایل" value="verity" />
                    <el-option label="نمایندگان لوازم صوتی و تصویری خودرو" value="panatech" />
                    <el-option label="نمایندگانی که هر دو نوع لوازم را پشتیبانی میکنند" value="both" />
                  </el-select>
                </div>
                <div class="col-12 col-md-4 mb-3">
                  <el-select
                    v-model="selectedProvince"
                    filterable
                    clearable
                    placeholder="استان را انتخاب کنید"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in iranProvinces"
                      :key="item.ProvinceID"
                      :label="item.ProvinceName"
                      :value="item.ProvinceID"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="col-12 col-md-4 mb-3">
                  <el-select
                    v-model="selectedCity"
                    filterable
                    clearable
                    :placeholder="provinceCities.length ? 'شهر را انتخاب کنید' : 'ابتدا استان را انتخاب کنید'"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in provinceCities"
                      :key="item.CityID"
                      :label="item.CityName"
                      :value="item.CityID"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="col-12">
                  <el-input
                    v-model="filterText"
                    clearable
                    placeholder="جستجو بر اساس کد نماینده - نام فروشگاه - نام و نام خانوادگی - کد پستی - تلفن ثابت - تلفن همراه"
                  ></el-input>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 mt-3">
            <div class="panel">
              <el-table :data="filteredItems" style="width: 100%">
                <el-table-column type="index" label="#"> </el-table-column>

                <el-table-column label="نوع نماینده" width=""> 
                   <template slot-scope="scope">
                    <span v-if="scope.row.representation_type === 'both'">نماینده هر دو نوع لوازم</span>
                    <span v-if="scope.row.representation_type === 'verity'">نماینده لوازم جانبی کامپیوتر و موبایل</span>
                    <span v-if="scope.row.representation_type === 'panatech'">نماینده لوازم صوتی تصویری خودرو</span>
                  </template>
                </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 prop="agent_code" label="کد نماینده" width=""> </el-table-column>

                <el-table-column label="اطلاعات" width="70" align="center">
                  <template slot-scope="scope">
                    <button class="showDetailsBtn" @click="showDetails(scope.row._id)">
                      <i class="fas fa-info"></i>
                    </button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <AgentDetailsModal
      :key="agentDetailsModalKey"
      :show="agentsModal"
      :agent="agentToShow"
      @closeModal="closeAgentDetailsModal"
    />
  </div>
</template>

<script>
export default {
  name: 'AgentsListPage',
  async asyncData({ $axios, error }) {
    try {
      const agents = await $axios.get('/api/public/agents')
      return {
        agents: agents.data
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      agents: null,
      iranProvinces: [],
      iranCities: [],
      provinceCities: [],
      selectedProvince: '',
      selectedCity: '',
      filterText: '',
      representationType: 'all',
      agentsModal: false,
      agentToShow: {},
      agentDetailsModalKey: 0
    }
  },
  head() {
    return {
      title: 'آسان سرویس | لیست نمایندگان '
    }
  },
  computed: {
    filteredItems() {
      const filterByRepresentationType = this.agents.filter(item => {
        if (this.representationType === 'all') return true
        else if (this.representationType === 'verity') return item.representation_type === 'verity' || item.representation_type === 'both'
        else if (this.representationType === 'panatech') return item.representation_type === 'panatech' || item.representation_type === 'both'
        else if (this.representationType === 'both') return item.representation_type === 'both'
        else return false
      })
      const filterByProvinceAndCity = filterByRepresentationType.filter(item => {
        // remember order is important (first shoud check city)
        if (this.selectedCity) return item.city_id === this.selectedCity
        else if (this.selectedProvince) return item.province_id === this.selectedProvince
        else return item
      })
      const filterText = this.filterText.toLowerCase()
      if (!filterText.length) return filterByProvinceAndCity
      else {
        return filterByProvinceAndCity.filter(item => {
          return (
            item.agent_code.toLowerCase().includes(filterText) ||
            item.full_name.toLowerCase().includes(filterText) ||
            item.postal_code.toLowerCase().includes(filterText) ||
            item.store_name.toLowerCase().includes(filterText) ||
            item.mobile_number.toLowerCase().includes(filterText) ||
            item.tel_number.toLowerCase().includes(filterText)
          )
        })
      }
    }
  },
  watch: {
    selectedProvince(newVal, oldVal) {
      // step 1
      this.selectedCity = ''
      // step 2
      if (newVal) this.provinceCities = this.iranCities.filter(item => item.ProvinceID === newVal)
      else this.provinceCities = []
    }
  },
  mounted() {
    // fetch province and city data
    this.$axios
      .post('/api/cross/getRouteManager', {
        url: '/api/GetProvince',
        db: 'verity'
      })
      .then(res => {
        this.iranProvinces = res.data.data
      })
      .catch(() => {
        this.$message({
          type: 'warning',
          message: 'دریافت لیست استان ها با مشکل مواجه شد'
        })
      })

    this.$axios
      .post('/api/cross/getRouteManager', {
        url: '/api/GetCity',
        db: 'verity'
      })
      .then(res => {
        this.iranCities = res.data.data
      })
      .catch(() => {
        this.$message({
          type: 'warning',
          message: 'دریافت لیست شهر ها با مشکل مواجه شد'
        })
      })
  },
  methods: {
    showDetails(id) {
      this.agentToShow = this.agents.find(item => item._id === id)
      this.agentsModal = true
    },
    closeAgentDetailsModal() {
      this.agentsModal = false
      this.agentDetailsModalKey = Math.random()
      this.agentToShow = {}
    }
  }
}
</script>