barg-restuarant/pages/admin/gallery/_image.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-gallery'}">برگشت به صفحه قبل</CButton>
      <CButton size="sm" v-if="newPage" color="success" class="mr-1" @click="add">افزودن</CButton>
      <CButton size="sm" v-else color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CCard>
      <CCardHeader>
        <slot name="header">
          <!--          <i class="fal fa-bars"></i>-->
          <!--          <span>{{ list_title }}</span>-->
        </slot>
      </CCardHeader>
      <CCardBody>
        <CRow>
          <CCol md="6">
            <CForm>
              <CRow>
                <CCol sm="12">
                  <CTextarea
                      :class="validation.caption ? 'err' : null"
                      label="توضیحات"
                      v-model="image.caption"
                      rows="10"
                  />
                  <p class="form-err" v-if="validation.caption">{{ validation.caption.msg }}</p>
                </CCol>
              </CRow>
            </CForm>
          </CCol>
          <CCol md="6">
            <h4>تصویر:</h4>
            <el-divider/>
            <img :src="image.image" alt="" style="width: 100%">
            <input type="file" ref="image" @change="preview">
            <p class="form-err" style="color: red" v-if="validation.image">{{ validation.image.msg }}</p>
          </CCol>
        </CRow>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import axiosUploadProcess from "@/mixins/axiosUploadProcess"

export default {
  data() {
    return {
      image: null,
      validation: {}
    }
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      return this.$route.params.image === 'new' ? 'افزودن تصویر' : 'ویرایش تصویر'
    },
    newPage() {
      return this.$route.params.image === 'new'
    }
  },
  methods: {
    add() {
      this.validation = {}
      const data = new FormData()
      data.append('caption', this.image.caption)
      data.append('image', this.$refs.image.files[0])

      this.$axios.post(`/api/admin/gallery`, data, this.axiosConfig)
          .then(response => {
            this.$message({
              message: 'اسلاید با موفقیت ثبت شد.',
              type: 'success'
            })
            this.$router.push({name: 'admin-gallery'})
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$alert(err.response.data.error.message, 'خطا', {
                confirmButtonText: 'باشه'
              })
            }
          })
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append('caption', this.image.caption)
      if (this.$refs.image.files[0]) data.append('image', this.$refs.image.files[0])

      this.$axios.put(`/api/admin/gallery/${this.image._id}`, data, this.axiosConfig)
          .then(response => {
            this.$message({
              message: 'تغییرات با موفقیت انجام شد.',
              type: 'success'
            })
            this.$refs.image.value = null
            this.$nuxt.refresh()
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$alert(err.response.data.error.message, 'خطا', {
                confirmButtonText: 'باشه'
              })
            }
          })
    },
    preview(event) {
      this.image.image = URL.createObjectURL(event.target.files[0])
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      if (params.image !== 'new') {
        const image = await $axios.get(`/api/public/gallery/${params.image}`)
        return {
          image: image.data
        }
      } else {
        return {
          image: {
            caption: '',
            image: ''
          }
        }
      }
    } 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>