ostandari/pages/admin/slider/_details.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-slider' }">برگشت به صفحه قبل</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>
              <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="slider.modelType"
                           placeholder="انتخاب کنید" 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>
              <CCol sm="12">
                <CTextarea :class="validation.title ? 'err' : null" label="عنوان" :description="
                      validation.title ? validation.title.msg : null
                    " v-model="slider.title" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <CTextarea :class="validation.summaryTitle ? 'err' : null" label="عنوان خلاصه" :description="
                      validation.summaryTitle ? validation.title.msg : null
                    " v-model="slider.summaryTitle" />
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
        <CCol lg="6">
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <el-checkbox v-model="slider.isLocal" @change="changeBox"
                  label="انتخاب خبر از داخل پرتال" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <NuxtLink class="btn btn-light" v-if="slider.isLocal" :to="{name: 'portal-news-details', params: {portal: slider.modelType,details: slider.url}}">نمایش خبر</NuxtLink>
                <CInput v-else :class="validation.url ? 'err' : null" :label="slider.isLocal ? 'عنوان خبر' : 'لینک'" :description="
                      validation.url ? validation.url.msg : null
                    " v-model="slider.url" />
              </CCol>
              <el-divider></el-divider>
              <CCol sm="12">
                <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="slider.index" placeholder="">
                  <el-option
                      v-for="item in allSlider.length + 10"
                      v-if="!allSlider.find((item2) => item2.index === item)"
                      :key="item"
                      :label="item"
                      :value="item">
                  </el-option>
                </el-select>
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>


      <CRow>
        <CCol>
          <CCard>
            <CCardBody>
              <CCol sm="12">
                <h5>کاور</h5>
                <el-divider />
                <CCol>
                  <img :src="slider.cover" style="width: 100%;" alt="" />
                </CCol>
                <input type="file" ref="cover" @change="imagePreview" />
                <p style="margin-top : 5px !important ;" class="form-err" v-if="validation.cover">
                  {{ validation.cover.msg }}
                </p>
                <p class="mt-3 text-muted">
                  عکس 600*400 باشد. در غیر این صورت اتوماتیک بریده می شود.
                </p>
              </CCol>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    </CRow>

    <el-dialog title="انتخاب خبر" close="closeModal" :before-close="closeModal" :visible.sync="showGetNews">
      <CContainer style="border: solid 1px;padding: 25px;border-radius: 15px;">
        <CRow style="flex-direction: column;">
          <CCol>
            <template style="text-align: justify; word-break: break-word;">
              <el-select style="width : 100%" v-model="slider.url" filterable remote reserve-keyword placeholder="بخشی از تیتر خبر را وارد کنید"
                :remote-method="remoteMethod" :loading="loading">
                <el-option v-for="item in news" :key="item._id" :label="item.title" :value="item._id">
                </el-option>
              </el-select>
            </template>
          </CCol>
          <CCol>
            <template style="text-align: justify; word-break: break-word;">
              <el-button @click="handleClick" size="small" style="width: auto;margin: 25px auto auto auto;" type="primary">
            تایید</el-button>
            </template>
          </CCol>
        </CRow>
      </CContainer>
    </el-dialog>
  </div>
</template>

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

  export default {
    data() {
      return {
        slider: null,
        typePage: true,
        validation: {},
        editorConfig: {
          language: "en",
          extraPlugins: ["bidi", "justify"],
        },
        portals: null,
        showGetNews: false,
        loading : false,
        news : [],
        baseUrl : 'http://localhost:6688',
        allSlider : null
      };
    },
    mixins: [axiosUploadProcess],
    computed: {
      title() {
        return this.$route.params.details === "new" ?
          "افزودن اسلایدر جدید" :
          "مشاهده جزئیات اسلایدر";
      },
      customUrl:{
        get:()=>{
          return this.slider?.url?.title
        },
        set:(value)=>{
          this.slider.url = value
        }
      }
    },
    methods: {
      imagePreview(e) {
        this.slider.cover = URL.createObjectURL(e.target.files[0]);
      },
      changeBox(){
        this.slider.url = null;
        this.showGetNews = this.slider.isLocal;
      },
      closeModal(done) {
        this.slider.isLocal = false;
        this.slider.url = null;
        done();
      },
      handleClick(){
        this.showGetNews = false;
      },
      remoteMethod(query) {
        this.loading = true;
        this.$axios(`/api/public/searchnewsbytitle/${query}`)
        .then((news) => {
          this.loading = false;
          this.news = news.data;
        })
        .catch((err) => {
          this.loading = false;
          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);
        })
      },
      post() {
        this.validation = {};
        const data = new FormData();
        data.append("title", this.slider.title.trim());
        data.append("summaryTitle", this.slider.summaryTitle.trim());
        data.append("url", this.slider?.url?.trim())
        data.append("index", this.slider.index);
        data.append("modelType", this.slider.modelType);
        data.append("isLocal", this.slider.isLocal);
        if (this.$refs.cover.files[0])
          data.append("cover", this.$refs.cover.files[0]);

        this.$axios
          .post(`/api/admin/slider`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اسلایدر با موفقیت ایجاد شد.",
            });
            this.$router.push({
              name: "admin-slider",
            });
          })
          .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.slider.title.trim());
        data.append("summaryTitle", this.slider.summaryTitle.trim());
        data.append("url", this.slider?.url?.trim());
        data.append("index", this.slider.index);
        data.append("modelType", this.slider.modelType);
        data.append("isLocal", this.slider.isLocal);
        if (this.$refs.cover.files[0])
          data.append("cover", this.$refs.cover.files[0]);

        this.$axios
          .put(`/api/admin/slider/${this.slider._id}`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
            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 portals = await $axios.get("/api/admin/portals" ,{ progress: false });
        // const allSlider = await $axios.get(`/api/admin/slider` ,{ progress: false });

        const requests = [
          $axios.get("/api/admin/portals" ,{ progress: false }),
          $axios.get(`/api/admin/slider` ,{ progress: false })
        ];

        const fetch = await Promise.all(requests);

        let [portals, allSlider] = fetch;

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


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

          return {
            portals: portals.data,
            allSlider : allSlider.data,
            slider: slider.data
          };
        } else {
          return {
            portals: portals.data,
            allSlider : allSlider.data,
            slider: {
              title: '',
              summaryTitle: '',
              isLocal: false,
              url: '',
              index: null,
              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>