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" />

              <div class="row">
                <div class="col-12">
                  <label class="fl-r"> تصویر : </label>
                  <label for="file" class="btn-upload">آپلود تصویر</label>
                  <input id="file" ref="myFiles" style="display: none;" type="file" @change="setData" />
                </div>
                <div v-if="type === 'user'" class="col-12 mt-4 mr-3">
                  <input  id="flexCheckDefault" v-model="announcement.publicx" class="form-check-input"  type="checkbox" />
                  <label class="form-check-label" for="flexCheckDefault">
                    عمومی
                    </label>
                   
                </div>
              </div>


            </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>
import axiosUploadProcess from '@/mixins/axiosUploadProcess'

export default {
  name: 'AdminAnnouncementDetails',
  mixins: [axiosUploadProcess],

  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: {
            publicx: false,
            image: '',
            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: {
    setData(event) {

      this.announcement.image = this.$refs.myFiles.files[0];
      console.log(event)
    },
    post() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.announcement.title)
      data.append('caption', this.announcement.caption)
      data.append('isForAgents', this.announcement.isForAgents)
      data.append('publicx', this.announcement.publicx)
      data.append('expireDate', this.announcement.expireDate)
      data.append('image', this.$refs.myFiles.files[0])
      this.$axios
        .post('/api/admin/announcements', data, this.axiosConfig)
        .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;
  }
}

.btn-upload {
  background-color: cornflowerblue;
  padding: .5rem 1rem;
  border-radius: .5rem;
  cursor: pointer;
  color: white;
  float: left;
}

.space {
  margin: 5rem;
}
</style>