asan-service/pages/admin/sms/_item.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <el-tag v-if="!isNew && sms._creator.first_name" type="primary" class="ml-1">
        <span>ایجاد کننده: </span>
        <span> {{ sms._creator.first_name + ' ' + sms._creator.last_name }} </span>
      </el-tag>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <h6>متن پیامک:</h6>
            <el-divider></el-divider>
            <CForm>
              <CTextarea
                v-model="sms.message"
                label="متن"
                horizontal
                rows="5"
                :class="validation.message && 'err'"
                :disabled="!isNew"
                :description="validation.message && validation.message.msg"
              />
              <CInput
                v-if="!isNew"
                label="تاریخ ارسال"
                horizontal
                :value="$jDateTime(sms.create_at)"
                :disabled="true"
              />
            </CForm>

            <div v-if="isNew" class="recievers mt-5" style="text-align: center">
              <h4>
                <span>تعداد مخاطبین انتخاب شده:</span>
                <b>{{ contacts.length }}</b>
              </h4>
              <p v-if="searchInput.length" style="color: orange; font-size: 12">
                *برای مشاهده نتایج دقیق فیلد "جستجو" را خالی کنید. چنانچه فیلد جستجو پر باشد فقط برای کسانی که در لیست
                فیلتر شده اند و نامشان انتخاب شده پیامک خواهد رفت.
              </p>
              <p v-if="validation.recievers && validation.recievers.msg" style="color: red">
                {{ validation.recievers.msg }}
              </p>

              <div class="btnRow mt-3">
                <el-button class="btn btn-primary custom-el-button" :loading="posting" @click="post">ارسال</el-button>
              </div>
            </div>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-if="isNew" sm="12">
        <CCard>
          <CCardBody>
            <h6 class="mb-2">انتخاب مخاطبین:</h6>

            <div class="mb-2">
              <CButtonGroup>
                <CButton
                  :color="userType === 'all' ? 'primary' : 'light'"
                  :class="userType === 'all' && 'selected'"
                  @click="userType = 'all'"
                >
                  <span>همه</span>
                </CButton>

                <CButton
                  :color="userType === 'customers' ? 'primary' : 'light'"
                  :class="userType === 'customers' && 'selected'"
                  @click="userType = 'customers'"
                >
                  <span>مشتریان</span>
                </CButton>

                <CButton
                  :color="userType === 'agents' ? 'primary' : 'light'"
                  :class="userType === 'agents' && 'selected'"
                  @click="userType = 'agents'"
                >
                  <span>نمایندگان</span>
                </CButton>
              </CButtonGroup>
            </div>

            <el-input
              v-model="searchInput"
              clearable
              placeholder="جستجو با نام و نام خانوادگی - کد مشتری - کد ملی - شماره همراه"
            />

            <el-divider></el-divider>

            <div>
              <el-checkbox key="checkAll_checkbox1" v-model="selectAll" label="انتخاب همه" />
            </div>
            <el-divider></el-divider>
            <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">
                  {{ scope.row.first_name + ' ' + scope.row.last_name }}
                </template>
              </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="verity_businessCode" label="کد مشتری (وریتی)" width=""> </el-table-column>

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

              <el-table-column label="وضعیت حساب" width="">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.isAgent" type="success">نماینده</el-tag>
                  <el-tag v-else type="warning">مشتری</el-tag>
                </template>
              </el-table-column>

              <el-table-column v-if="!selectAll" label="انتخاب" width="65" align="center">
                <template slot-scope="scope">
                  <el-checkbox :key="scope.row._id + 'singleCheckBox'" v-model="scope.row.checked" />
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-else sm="12">
        <CCard>
          <CCardBody>
            <h6 class="mb-2">لیست مخاطبین:</h6>

            <el-divider></el-divider>

            <el-table :data="sms.recievers" style="width: 100%">
              <el-table-column type="index" label="#"> </el-table-column>

              <el-table-column label="نام" width="">
                <template slot-scope="scope">
                  {{ scope.row.user_id.first_name + ' ' + scope.row.user_id.last_name }}
                </template>
              </el-table-column>

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

              <el-table-column prop="mobile_number" label="شماره موبایل" width=""> </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 label="مشاهده اکانت کاربر" width="140" align="center">
                <template slot-scope="scope">
                  <CButton
                    :key="scope.row._id"
                    color="success"
                    variant="outline"
                    :to="{ name: 'admin-customers-customer', params: { customer: scope.row.user_id._id } }"
                  >
                    <i class="fal fa-eye"></i>
                  </CButton>
                </template>
              </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminSMSBroadcastDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      if (params.item !== 'new') {
        const sms = await $axios.get(`/api/admin/smsBroadcasts/${params.item}`)
        return {
          sms: sms.data
        }
      } else {
        const users = await $axios.get(`/api/admin/usersForSMS`)
        return {
          sms: {
            message: '',
            recieveres: []
          },
          users: users.data
        }
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      sms: null,
      users: null,
      posting: false,
      selectAll: false,
      userType: 'all',
      searchInput: '',
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    title() {
      if (this.isNew) return 'ارسال پیامک گروهی برای کاربران'
      else return 'مشاهده پیامک ارسال شده'
    },
    isNew() {
      return this.$route.params.item === 'new'
    },
    contacts() {
      if (this.selectAll) return this.filteredItems
      else return this.filteredItems.filter(item => item.checked)
    },
    filteredItems() {
      const filterUsersByType = this.users.filter(item => {
        if (this.userType === 'all') return item
        else if (this.userType === 'customers' && !item.isAgent) return item
        else if (this.userType === 'agents' && item.isAgent) return item
        else return null
      })
      const searchInput = this.searchInput
      if (!this.searchInput.length) return filterUsersByType
      else {
        return filterUsersByType.filter(item => {
          return (
            item.first_name.includes(searchInput) ||
            item.last_name.includes(searchInput) ||
            item.mobile_number.includes(searchInput) ||
            item.national_code.includes(searchInput) ||
            item.verity_businessCode?.includes(searchInput) ||
            item.panatech_businessCode?.includes(searchInput) ||
            (item.first_name + ' ' + item.last_name).includes(searchInput)
          )
        })
      }
    }
  },
  watch: {
    userType(newVal, oldVal) {}
  },
  methods: {
    async post() {
      try {
        if (!this.isNew) return
        if (this.posting) {
          return this.$message({
            type: 'warning',
            message: 'لطفا منتظر بمانید'
          })
        }

        // get user confirmations
        const title1 = ' هشدار - مرحله اول'
        const title2 = ' هشدار - مرحله دوم'

        const msg1 = 'لیست مخاطبان و متن پیام را چند بار قبل از ارسال بررسی کنید!'
        const msg2 = 'پس از ارسال امکان انصراف یا بازگشت نخواهد بود!!!'

        /// first step
        await this.$confirm(msg1, title1, {
          confirmButtonText: 'ادامه',
          cancelButtonText: 'لغو',
          type: 'warning'
        })
        /// second step
        await this.$confirm(msg2, title2, {
          confirmButtonText: 'ارسال',
          cancelButtonText: 'لغو',
          type: 'warning'
        })

        this.posting = true
        this.validation = {}

        // create recieveres array
        const recievers = []
        for await (const contact of this.contacts) {
          recievers.push({ user_id: contact._id, mobile_number: contact.mobile_number })
        }

        // send request
        const smsBroadcast = await this.$axios.post('/api/admin/broadcastSMS', {
          message: this.sms.message,
          recievers
        })

        // handle request response
        this.posting = false
        this.$message({
          type: 'success',
          message: smsBroadcast.data.message
        })
        this.$router.push({ name: 'admin-sms' })
      } catch (err) {
        this.posting = false
        if (err.response?.status === 422) {
          this.$message({
            type: 'warning',
            message: 'پارامتر ها رو بررسی کنید'
          })
          this.validation = err.response.data.validation
        }
        if (err.response?.status === 401)
          this.$message({
            type: 'error',
            message: 'دوباره وارد سیستم شوید'
          })
      }
    }
  }
}
</script>