ostandari/pages/admin/counterDay/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="success" class="mr-auto" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CCard>
      <CCardBody>
        <CRow>
          <CCol sm="12" md="6">
            <CInput
                :class="validation.title ? 'err' : null"
                label="عنوان"
                :description="validation.title ? validation.title.msg : null"
                v-model="counterDay.title"
            />
          </CCol>
          <CCol sm="12" md="6">
            <p class="mb-2" style="color: #666666; font-size: 14px !important;">تاریخ اتمام</p>
            <date-picker clearable :min="startDate" format="YYYY-MM-DD" display-format="jMMMM jD"
                         v-model="expireDate"></date-picker>
            <p style="margin-top : 5px !important ; color: red; font-size: 12px !important;" class="form-err" v-if="validation.expireDate">
              {{ validation.expireDate.msg }}
            </p>
          </CCol>
          <el-divider></el-divider>
          <CCol>
            <el-checkbox
                v-model="counterDay.publish"
                label="نمایش داده شود"
            />
            <p style="margin-top : 5px !important ; color: red;" class="form-err" v-if="validation.publish">
              {{ validation.publish.msg }}
            </p>
          </CCol>
          <el-divider></el-divider>
          <CCol sm="12">
            <span v-if="counterDay.title && counterDay.expireDate && new Date(counterDay.expireDate) > new Date()">{{ jDate(counterDay.expireDate) + ' مانده تا ' + counterDay.title }}</span>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import moment from "moment-jalaali";

export default {
  data() {
    return {
      title: 'روز شمار',
      counterDay: null,
      validation: {}
    }
  },
  computed:{
    startDate(){
      return moment().add(1, 'day').format('YYYY-MM-DD')
    },
    expireDate : {
      get(){
        return this.counterDay.expireDate ? moment(this.counterDay.expireDate).format('YYYY-MM-DD') : null
      },
      set(date){
        this.counterDay.expireDate = date
      }
    }
  },
  methods: {
    jDate(date) {
      if (date){
        return moment(date).locale('fa').fromNow(true)
      }
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.counterDay.title)
      data.append('publish', this.counterDay.publish)
      data.append('expireDate', this.expireDate)

      this.$axios.post('/api/admin/counterDay', data, this.axiosConfig)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'تغییرات با موفقیت انجام شد'
            })
            this.$nuxt.refresh()
          })
          .catch(err => {
            if (err.response?.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها را بررسی کنید'
              })
            } else console.log(e)
          })
    }
  },
  head() {
    return {
      title: this.title,
    };
  },
  layout: "admin",
  async asyncData({$axios, error}) {
    try {
      const counterDay = await $axios.get('/api/admin/counterDay')
      return {
        counterDay: counterDay.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اطلاعات مورد نظر پیدا نشد",
        });
    }
  },
}
</script>