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

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
      <CButton v-if="isNew" size="sm" color="success" class="mr-1" @click="post">افزودن</CButton>
      <!--      <CButton size="sm" v-else color="success" class="mr-1" @click="update">بروزرسانی</CButton>-->
    </CustomSubHeader>

    <CRow>
      <CCol v-if="type" sm="12">
        <CCard>
          <CCardBody>
            <h6>متن اعلان:</h6>
            <el-divider></el-divider>
            <CForm>
              <CInput
                v-model="announcement.title"
                label="عنوان"
                horizontal
                :class="validation.title && 'err'"
                :disabled="!isNew"
                :description="validation.title && validation.title.msg"
              />
              <CTextarea
                v-model="announcement.caption"
                label="متن"
                horizontal
                rows="5"
                :class="validation.caption && 'err'"
                :disabled="!isNew"
                :description="validation.caption && validation.caption.msg"
              />
            </CForm>
            <el-divider></el-divider>
            <h6>تاریخ منقضی شدن اعلان:</h6>
            <p v-if="type === 'user'" class="mb-4" style="font-size: 12px; color: gray">
              *زمانی که اعلان منقضی شود از لیست حذف نخواهد شد و فقط در پنل کاربران قابل مشاهده نخواهد بود.
            </p>
            <p v-if="type === 'agent'" class="mb-4" style="font-size: 12px; color: gray">
              *زمانی که اعلان منقضی شود از لیست حذف نخواهد شد و فقط در پنل نمایندگان قابل مشاهده نخواهد بود.
            </p>
            <persian-date-picker
              v-model="expireDate"
              display-format="jYYYY/jMM/jDD"
              :min="today"
              format="x"
              :disabled="!isNew"
              placeholder="تاریخ را انتخاب کنید"
              color="#065495"
            />

            <p v-if="validation.expireDate" style="color: red">{{ validation.expireDate.msg }}</p>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-if="$route.params.item !== 'new' && type" sm="12">
        <CCard>
          <CCardBody>
            <h6>وضعیت بازدید اعلان:</h6>
            <el-divider></el-divider>
            <div class="progressBar">
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :color="customColors"
                :percentage="seenPercentage"
              ></el-progress>
            </div>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminAnnouncementDetails',
  layout: 'admin',
  async asyncData({ $axios, params, query, error }) {
    try {
      if (params.item !== 'new') {
        const announcement = await $axios.get(`/api/admin/announcements/${params.item}`)
        const users = await $axios.get(`/api/admin/announcementsUsers`)
        const agents = await $axios.get('/api/public/agents')
        return {
          announcement: announcement.data,
          users: users.data,
          agents: agents.data
        }
      } else {
        return {
          announcement: {
            title: '',
            caption: '',
            expireDate: '',
            isForAgents: !!query?.agent
          }
        }
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      announcement: null,
      users: null,
      agents: null,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#1989fa', percentage: 60 },
        { color: '#5cb87a', percentage: 80 },
        { color: '#5cb87a', percentage: 100 }
      ],
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    title() {
      if (this.type === 'agent' && this.isNew) return 'افزودن اطلاعیه برای نمایندگان'
      if (this.type === 'user' && this.isNew) return 'افزودن اعلان برای مشتریان'
      if (this.type === 'agent') return 'مشاهده اطلاعیه نمایندگان'
      if (this.type === 'user') return 'مشاهده اعلان مشتریان'
      return null
    },
    type() {
      if (this.$route.query?.user) return 'user'
      if (this.$route.query?.agent) return 'agent'
      return null
    },
    isNew() {
      return this.$route.params.item === 'new'
    },
    seenPercentage() {
      let totalAudience
      if (this.type === 'user') totalAudience = this.users.length || 1
      if (this.type === 'agent') totalAudience = this.agents.length || 1
      const percenteage = Number(((this.announcement.seenBy.length * 100) / totalAudience).toFixed(2))
      return percenteage > 100 ? 100 : percenteage
    },
    today() {
      return Date.now().toString()
    },
    expireDate: {
      get() {
        return this.announcement.expireDate.toString()
      },
      set(val) {
        this.announcement.expireDate = val
      }
    }
  },
  methods: {
    post() {
      this.validation = {}
      this.$axios
        .post('/api/admin/announcements', this.announcement)
        .then(res => {
          this.$message({
            type: 'success',
            message: 'پیام با موفقیت برای کاربران ارسال شد'
          })
          this.$router.push({ name: 'admin-announcements', query: { ...this.$route.query } })
        })
        .catch(err => {
          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: 'دوباره وارد سیستم شوید'
            })
        })
    }
    // update() {
    //   this.validation = {}
    //   this.$axios.put(`/api/admin/announcement/${this.announcement._id}`, this.announcement)
    //       .then(res => {
    //         this.$message({
    //           type: 'success',
    //           message: 'پیام با موفقیت بروزرسانی شد'
    //         })
    //         this.$router.push({name: 'admin-announcements'})
    //       })
    //       .catch(err => {
    //         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: 'دوباره وارد سیستم شوید'
    //         })
    //         else console.log(err)
    //       })
    // },
  }
}
</script>

<style lang="scss">
.progressBar {
  .el-progress-bar__inner {
    left: auto;
    right: 0;
    text-align: left;
  }
}
</style>