orisoxin/pages/admin/projects/new.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{name: 'admin-projects'}">برگشت به صفحه قبل</CButton>
      <CButton size="sm" color="success" class="mr-1" @click="post">افزودن</CButton>
    </CustomSubHeader>
    <CRow>
      <CCol lg="6">
        <CCard>
          <CCardBody>
            <CForm>
              <CRow>
                <CCol sm="12">

                  <p>دسته بندی</p>
                  <el-select v-model="project.category" filterable :class="validation.category? 'err' : null">
                    <el-option v-for="item in projectCategories" :label="item.locale.fa.name" :value="item._id" :key="item._id"/>
                  </el-select>
                  <p class="text-danger" v-if="validation.category">{{ validation.category.msg }}</p>
                  <el-divider></el-divider>

                  <p>دسته بندی زیر مجموعه</p>
                  <el-select v-model="project.tag" filterable clearable>
                    <el-option v-for="item in availableTags" :label="item.locale.fa.name" :value="item._id" :key="item._id"/>
                  </el-select>
                  <el-divider></el-divider>

                  <CInput
                      :class="validation.project_date ? 'err' : null"
                      label="سال اجرای پروژه (سال شمسی)"
                      placeholder="مثال: 1390"
                      :description="validation.project_date ? validation.project_date.msg : null"
                      v-model="project.project_date"
                  />
                  <el-divider></el-divider>
                  <CInput
                      :class="validation.fa_title ? 'err' : null"
                      label="عنوان فارسی"
                      :description="validation.fa_title ? validation.fa_title.msg : null"
                      v-model="project.fa_title"
                  />
                  <CInput
                      :class="validation.fa_client ? 'err' : null"
                      label="نام مشتری فارسی"
                      :description="validation.fa_client ? validation.fa_client.msg : null"
                      v-model="project.fa_client"
                  />
                  <el-divider></el-divider>
                  <CInput
                      :class="validation.en_title ? 'err' : null"
                      label="عنوان انگلیسی"
                      :description="validation.en_title ? validation.en_title.msg : null"
                      v-model="project.en_title"
                  />
                  <CInput
                      :class="validation.en_client ? 'err' : null"
                      label="نام مشتری انگلیسی"
                      :description="validation.en_client ? validation.en_client.msg : null"
                      v-model="project.en_client"
                  />
                  <el-divider></el-divider>
                  <el-checkbox label="دارای صفحه توضیحات میباشد" v-model="project.has_details"/>
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'افزودن پروژه جدید',
      projectCategories: null,
      project: {
        fa_title: '',
        en_title: '',
        fa_client: '',
        en_client: '',
        has_details: false,
        category: '',
        tag: ''
      },
      validation: {}
    }
  },
  computed: {
    availableTags() {
      return this.projectCategories.find(item => item._id === this.project.category)?.tags || []
    }
  },
  methods: {
    post() {
      this.validation = {}

      this.$axios.post(`/api/admin/project`, this.project)
          .then(response => {
            this.$message({
              type: 'success',
              message: 'محصول با موفقیت ایجاد شد.'
            })
            if (this.project.has_details) this.$router.push({name: 'admin-projects-project', params: {project: response.data._id}})
            else this.$router.push({name: 'admin-projects'})
          })
          .catch(err => {
            if (err.response.status === 401) {
              return this.$message({
                type: 'error',
                message: 'لطفا دوباره وارد سیستم شوید.'
              })
            }
            if (err.response.status === 422) {
              this.validation = err.response.data.validation
              return this.$message({
                type: 'warning',
                message: 'پارامتر ها رو بررسی و دوباره تلاش کنید'
              })
            }
            if (err.response.status === 403) {
              return this.$message({
                type: 'error',
                message: err.response.data.message
              })
            } else console.log(err.response.data)
          })
    },
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: 'admin',
  async asyncData({$axios, params, error}) {
    try {
      const projectCategories = await $axios.get(`/api/public/projectCategories`)
      return {
        projectCategories: projectCategories.data
      }
    } catch (e) {
      error({status: 404, message: 'page not found'})
    }
  }
}
</script>