ostandari/pages/admin/newsFile/_details.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-newsFile' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.details === 'new'" size="sm" color="success" class="mr-1" @click="post">افزودن</CButton>
      <CButton v-else size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CRow style="display : flex ; flex-direction: column">
      <CRow>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CRow>
                <CCol sm="12">
                  <CInput
                      :class="validation.title ? 'err' : null"
                      label="عنوان"
                      :description="
                      validation.title ? validation.title.msg : null"
                      v-model="newsFile.title"
                  />
                </CCol>
                <el-divider></el-divider>
                <CCol sm="12">
                  <CTextarea
                      :class="validation.description ? 'err' : null"
                      label="توضیحات"
                      :description="
                      validation.description ? validation.description.msg : null"
                      v-model="newsFile.description"
                  />
                </CCol>
              </CRow>
            </CCardBody>
          </CCard>
        </CCol>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <h6>
                  قسمت انتخابی
                  <i v-c-tooltip="'شما باید تعیین کنید که این خبر برای کدام قسمت پرتال می باشد'" class="fas fa-question-circle"></i>
                </h6>
                <el-select
                    :disabled="$auth.user.portals.length === 1"
                    v-model="newsFile.modelType"
                    placeholder="انتخاب کنید"
                    @change="changePortalVal"
                    style="width: 100%;">
                  <el-option
                      v-for="item in portals"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                  </el-option>
                </el-select>
                <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.modelType">{{ validation.modelType.msg }}</p>
              </CCol>
              <el-divider></el-divider>
              <template v-if="newsFile.modelType">
                <CCol sm="12">
                  <h6>
                    {{
                      this.$route.params.details !== "new"
                          ? "دسته بندی"
                          : "انتخاب دسته بندی"
                    }}
                  </h6>
                  <el-select
                      filterable
                      clearable
                      style="width : 100%"
                      v-model="catId"
                      placeholder="انتخاب دسته بندی">
                    <el-option
                        v-for="item in filterParent"
                        v-if="availableCategory(item._id)"
                        :key="item._id"
                        :label="item.title"
                        :value="item._id"
                    >
                      <!-- <span>{{setTitle(item)}}</span> -->
                    </el-option>
                  </el-select>
                  <p style="margin-top : 5px !important ; color : red" class="form-err" v-if="validation.catId">
                    {{ validation.catId.msg }}
                  </p>
                </CCol>
                <el-divider></el-divider>
              </template>
              <CCol sm="12">
                <el-checkbox
                    v-model="newsFile.showInHome"
                    label="نمایش در صفحه اصلی"
                />
              </CCol>
              <CCol sm="12" v-if="catId">
                <h6 class="mt-2">ترتیب نمایش</h6>
                <!--                <el-input-number style="width:100%" class="mt-2" size="mini" v-model="slider.index"-->
                <!--                  controls-position="right" :min="0"></el-input-number>-->
                <el-select style="width:100%" class="mt-2" v-model="newsFile.index" placeholder="">
                  <el-option
                      v-for="item in tempAllNewsFile.length + 10"
                      v-if="!tempAllNewsFile.find((item2) => item2.index === item)"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <h4>کاور اصلی خبر</h4>
              <el-divider/>
              <CCol>
                <img :src="newsFile.cover" style="width: 100%;" alt=""/>
              </CCol>
              <input type="file" ref="cover" @change="imagePreview"/>
              <p style="margin-top: 5px !important;" class="form-err text-danger" v-if="validation.cover">
                {{ validation.cover.msg }}</p>
              <p class="mt-3 text-muted">
                عکس 300*600 باشد. در غیر این صورت اتوماتیک بریده می شود.
              </p>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </CRow>
  </div>
</template>

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

export default {
  data() {
    return {
      newsFile: null,
      typePage: true,
      validation: {},
      editorConfig: {
        language: "en",
        extraPlugins: ["bidi", "justify"],
      },
      portals: null,
      allNewsFile: null,
      tempAllNewsFile: [],
      filterParent: null,
    };
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      return this.$route.params.details === "new" ? "افزودن پرونده خبری جدید" : "مشاهده جزئیات پرونده خبری"
    },
    catId: {
      get() {
        if (this.$route.params.details === 'new') {
          return this.newsFile.catId
        } else {
          return this.newsFile.catId._id
        }
      },
      set(value) {
        if (this.$route.params.details === 'new') {
          this.newsFile.catId = value
        } else {
          this.newsFile.catId._id = value
        }
      }
    }
  },
  watch: {
    catId(newVal, oldVal) {
      this.tempAllNewsFile = this.allNewsFile.filter(item => item.catId === newVal);
    }
  },
  methods: {
    imagePreview(e) {
      this.newsFile.cover = URL.createObjectURL(e.target.files[0]);
    },
    changePortalVal(value) {
      this.catId = null;
      if (this.$auth.user.specialPermissions.length) {
        this.filterParent = this.parents.filter(
            (item) => item.modelType === value
        ).filter((item) => {
          return this.$auth.user.specialPermissions.includes(item._id)
        });
      } else {
        this.filterParent = this.parents.filter(
            (item) => item.modelType === value
        );
      }
    },
    availableCategory(id) {
      return this.$auth.user.permissions.includes('superAdmin') || this.$auth.user.specialPermissions.includes(id)
    },
    post() {
      this.validation = {};
      const data = new FormData();
      data.append("title", this.newsFile.title.trim());
      data.append("catId", this.catId);
      data.append("description", this.newsFile.description.trim());
      data.append("showInHome", this.newsFile.showInHome);
      data.append("modelType", this.newsFile.modelType);
      data.append("index", this.newsFile.index);
      if (this.$refs.cover.files[0]) data.append('cover', this.$refs.cover.files[0]);

      this.$axios
          .post(`/api/admin/newsFile`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "پرونده خبری با موفقیت ایجاد شد.",
            });
            this.$router.push({
              name: "admin-newsFile",
            });
          })
          .catch((err) => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422)
              this.validation = err.response.data.validation;
            else console.log(err.response.data);
          });
    },
    update() {
      this.validation = {};

      const data = new FormData();
      data.append("title", this.newsFile.title.trim());
      data.append("description", this.newsFile.description.trim());
      data.append("catId", this.catId);
      data.append("showInHome", this.newsFile.showInHome);
      data.append("modelType", this.newsFile.modelType);
      data.append("index", this.newsFile.index);
      if (this.$refs.cover.files[0]) data.append('cover', this.$refs.cover.files[0]);

      this.$axios
          .put(`/api/admin/newsFile/${this.newsFile._id}`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
            this.$refs.cover.value = null
            this.$nuxt.refresh();
          })
          .catch((err) => {
            if (err.response.status === 401) {
              return this.$message({
                type: "error",
                message: "لطفا دوباره وارد سیستم شوید.",
              });
            }
            if (err.response.status === 403) {
              return this.$message({
                type: "error",
                message: err.response.data.message,
              });
            }
            if (err.response.status === 500) {
              return this.$message({
                type: "error",
                message: "مشکلی در ارسال درخواست پیش آمده",
              });
            }
            if (err.response.status === 422)
              this.validation = err.response.data.validation;
            else console.log(err.response.data);
          });
    },
  },
  head() {
    return {
      title: this.title,
    }
  },
  layout: "admin",
  async asyncData({$axios, $auth, params, query, error}) {
    try {
      // const allNewsFile = await $axios.get("/api/admin/newsFile", { progress: false });
      // const portals = await $axios.get("/api/admin/portals", { progress: false });

      const requests = [
        $axios.get("/api/admin/category/getParent", {params: {type: "news"}}),
        $axios.get("/api/admin/newsFile"),
        $axios.get("/api/admin/portals")
      ]

      const fetch = await Promise.all(requests);

      let [parents, allNewsFile, portals] = fetch

      const setModelType = $auth.user.portals.length !== 1 ? $auth.user.portals : $auth.user.portals[0]

      const setFilterParent = $auth.user.portals.length !== 1 ? null : parents.data.filter((item) => item.modelType === $auth.user.portals[0])

      if (params.details !== "new") {
        const newsFile = await $axios.get(`/api/admin/newsFile/${params.details}`)

        return {
          portals: portals.data,
          parents: parents.data,
          filterParent: parents.data,
          allNewsFile: allNewsFile.data,
          newsFile: newsFile.data
        }
      } else {
        return {
          portals: portals.data,
          parents: parents.data,
          filterParent: setFilterParent,
          allNewsFile: allNewsFile.data,
          newsFile: {
            title: '',
            description: '',
            cover: '',
            catId: $auth.user.specialPermissions,
            index: null,
            showInHome: true,
            showInMenu: false,
            siteMap: true,
            modelType: setModelType,
          }
        }
      }
    } 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>