arakrail/pages/admin/projects/_project.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <admin-title-bar :title="title">
        <el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
        <el-button type="success" @click="upload">بروزرسانی</el-button>
      </admin-title-bar>

      <div class="col-12">
        <admin-panel>
          <el-form>
            <el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام فارسی">
              <el-input v-model="formData.project_details.fa.name"></el-input>
              <p class="err" v-if="validation.fa_name">{{ validation.fa_name.msg }}</p>
            </el-form-item>
            <el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام انگلیسی">
              <el-input v-model="formData.project_details.en.name"></el-input>
              <p class="err" v-if="validation.en_name">{{ validation.en_name.msg }}</p>
            </el-form-item>

            <el-divider></el-divider>

            <el-form-item prop="title" :class="validation.fa_description ? 'is-error' : ''" label="توضیح فارسی">
              <el-input type="textarea" v-model="formData.project_details.fa.description"></el-input>
              <p class="err" v-if="validation.fa_description">{{ validation.fa_description.msg }}</p>
            </el-form-item>

            <el-form-item prop="title" :class="validation.en_description ? 'is-error' : ''" label="توضیح انگلیسی">
              <el-input type="textarea" v-model="formData.project_details.en.description"></el-input>
              <p class="err" v-if="validation.en_description">{{ validation.en_description.msg }}</p>
            </el-form-item>

            <el-divider></el-divider>

            <el-form-item prop="date" :class="validation.date ? 'is-error' : ''" label="تاریخ اجرا">
              <date-picker v-model="formData.date" format="YYYY-MM-DD" display-format="jYYYY/jMM/jDD"></date-picker>
              <p class="err" v-if="validation.date">{{ validation.date.msg }}</p>
            </el-form-item>
          </el-form>
        </admin-panel>
      </div>

      <div class="col-12">
        <admin-panel>
          <h2>تصاویر</h2>
          <el-divider></el-divider>
          <div class="newImg">
            <img :src="image" alt="" style="width: 100%;max-width: 300px;display: block">
            <input type="file" ref="image" @change="previewGallery">
            <p class="err" v-if="validation.image">{{ validation.image.msg }}</p>
            <el-button type="primary" @click="addImage" style="margin-top: 10px;">افزودن</el-button>
          </div>
          <div class="images">
            <div class="imgBox" v-for="item in formData.images" :key="item._id">
              <img :src="item.image" alt="">
              <el-button type="danger" plain icon="el-icon-delete" class="dlt" v-if="item._id" @click="delImage(item._id)"></el-button>
            </div>
          </div>
        </admin-panel>
      </div>

    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      formData: null,
      image: '',
      validation: {},
      uploading: false,
      uploadProgress: null
    }
  },
  computed: {
    title() {
      if (!this.uploading) {
        return 'ویرایش پروژه'
      } else {
        return this.uploadProgress
      }
    }
  },
  methods: {
    upload() {
      this.validation = {}
      const data = new FormData()

      data.append('fa_name', this.formData.project_details.fa.name)
      data.append('fa_description', this.formData.project_details.fa.description)
      data.append('en_name', this.formData.project_details.en.name)
      data.append('en_description', this.formData.project_details.en.description)
      data.append('date', this.formData.date)

      const axiosConfig = {
        onUploadProgress: progressEvent => {
          this.uploading = true
          this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'

          if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
            this.uploading = false
          }
        }
      }

      this.$axios.put(`/api/private/projects/${this.formData._id}`, data, axiosConfig)
          .then(response => {
            this.$message({
              message: 'پروژه با موفقیت بروزرسانی شد.',
              type: 'success'
            })
          }).catch(error => {
        if (error.response.status === 422) {
          this.validation = error.response.data.validation
          this.$message({
            type: 'error',
            message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
          })
        } else {
          this.$alert(error.response.data.message, 'خطا', {
            confirmButtonText: 'باشه',
          })
        }
      })
    },
    addImage() {
      this.validation = {}
      const data = new FormData()
      data.append('image', this.$refs.image.files[0])

      this.$axios.post(`/api/private/projects/images/${this.formData._id}`, data)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'تصویر جدید با موفقیت افزوده شد.'
            })
            this.$refs.image.value = null
            this.image = ''
            this.formData = res.data
          })
          .catch(err => {
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            }
          })
    },
    delImage(id) {
      this.$confirm('این آیتم حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/private/projects/images/${id}`)
            .then(res => {
              this.$message({
                type: 'success',
                message: 'تصویر با موفقیت حذف شد.'
              })
              this.formData.images = this.formData.images.filter(item => {
                return item._id !== id
              })
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.message
              })
            })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: 'عملیات لغو شد'
        })
      })
    },
    previewGallery(event) {
      this.image = URL.createObjectURL(event.target.files[0])
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      let project = await $axios.get(`/api/public/projects/${params.project}`)
      return {
        formData: project.data
      }
    } catch (e) {
      error({status: 404, message: 'Page not found'})
    }
  }
}
</script>


<style scoped lang="scss">
.images {
  width: 100%;
  margin-top: 30px;

  .imgBox {
    border: 1px solid rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    width: 200px;
    position: relative;
    display: inline-block;
    margin: 5px;

    img {
      width: 100%;
    }

    .dlt {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>