ostandari/pages/admin/news/_details.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-news' }">برگشت به صفحه قبل</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>
      <CCol lg="6">
        <!-- *************** start set category ***************  -->
        <CCard>
          <CCardBody>
            <CForm>
              <CRow>
                <CCol>
                  <h6>
                    قسمت انتخابی
                    <i v-c-tooltip="'شما باید تعیین کنید که این خبر برای کدام قسمت پرتال می باشد'"
                       class="fas fa-question-circle"></i>
                  </h6>
                  <el-select
                      :disabled="$auth.user.portals.length === 1"
                      v-model="news.modelType"
                      placeholder="انتخاب کنید"
                      style="width: 100%;"
                      @change="[clearIDs('catId'),clearIDs('newsFile')]"
                  >
                    <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>
                  <template v-if="filterParent">
                    <el-divider/>
                    <CRow>
                      <CCol sm="12">
                        <h6>
                          {{
                            this.$route.params.details !== "new"
                                ? "دسته بندی"
                                : "انتخاب دسته بندی"
                          }}
                        </h6>
                        <el-select
                            filterable
                            clearable
                            style="width : 100%"
                            v-model="catId"
                            placeholder="انتخاب دسته بندی"
                            @change="clearIDs('newsFile')"
                        >
                          <el-option
                              v-for="item in filterParent"
                              :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>
                    </CRow>
                  </template>
                </CCol>
              </CRow>
            </CForm>
          </CCardBody>
        </CCard>
        <!-- *************** end set category ***************** -->
        <!-- *************** start set details **************** -->
        <CCard>
          <CCardBody>
            <CRow>
              <CCol sm="12">
                <CTextarea
                    :class="validation.summaryTitle ? 'err' : null"
                    label="رو تیتر"
                    :description="validation.summaryTitle? validation.summaryTitle.msg: null "
                    v-model="news.summaryTitle"
                    rows="3"
                />
              </CCol>
            </CRow>

            <CRow>
              <CCol sm="12">
                <CTextarea
                    :class="validation.title ? 'err' : null"
                    label="تیتر"
                    :description="validation.title ? validation.title.msg : null"
                    v-model="news.title"
                    rows="3"
                />
              </CCol>
            </CRow>

            <CRow>
              <CCol sm="12">
                <CTextarea
                    :class="validation.leadTitle ? 'err' : null"
                    label="لید"
                    :description="validation.leadTitle? validation.leadTitle.msg: null "
                    v-model="news.leadTitle"
                    rows="3"
                />
              </CCol>
            </CRow>

            <CRow>
              <CCol sm="12">
                <CTextarea
                    :class="validation.metaTagDesc ? 'err' : null"
                    label="توضیحات برای موتورهای جست و جو"
                    placeholder="در صورتی که این کادر را خالی بگذارید از متن لید استفاده خواهد شد."
                    :description="validation.metaTagDesc? validation.metaTagDesc.msg: null"
                    v-model="news.metaTagDesc"
                    rows="3"
                />
              </CCol>
            </CRow>

            <CRow>
              <CCol sm="12">
                <p>کلمات کلیدی</p>
                <div>
                  <el-input
                      class="input-new-tag mb-3"
                      v-if="inputVisible"
                      v-model="inputValue"
                      ref="saveTagInput"
                      size="small"
                      @keyup.enter.native="handleInputConfirm"
                      @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button
                      v-else
                      class="button-new-tag mb-3"
                      size="small"
                      @click="showInput"
                  >کلمه جدید
                  </el-button
                  >
                </div>
                <div class="mb-3">
                  <el-tag
                      class="ml-1"
                      :key="tag"
                      v-for="tag in news.keywords"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </CCol>
            </CRow>

            <CRow>
              <CCol>
                <CRow>
                  <CCol sm="12" class="mb-3">
                    <template>
                      <client-only>
                        <p>متن خبر</p>
                        <ckeditor
                            v-model="news.pageContent"
                            :config="editorConfig"
                        ></ckeditor>
                        <p class="text-danger" v-if="validation.pageContent">
                          {{ validation.pageContent.msg }}
                        </p>
                      </client-only>
                    </template>
                  </CCol>
                </CRow>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
        <!-- *************** end set details ****************** -->
      </CCol>
      <CCol lg="6">
        <CCard>
          <CCardBody>
            <CCol sm="12">
              <el-checkbox
                  v-model="news.publish"
                  label="انتشار خبر"
              />
            </CCol>
            <CCol sm="12">
              <el-checkbox
                  v-model="news.showInHome"
                  label="نمایش خبر در صفحه اصلی"
              />
            </CCol>
            <el-divider></el-divider>
            <!-- <CCol sm="12">
              <el-checkbox
                v-model="news.slider"
                label="قرار گرفتن خبر در اسلایدر صفحه اصلی"
              />
            </CCol> -->
            <!-- <el-divider></el-divider> -->
            <CCol sm="12">
              <el-checkbox
                  v-model="news.priority"
                  label="نمایش خبر در بالای صفحه ی دسته بندی"
              />
            </CCol>
            <CCol sm="12">
              <el-checkbox
                  v-model="news.allowComment"
                  label="اجازه کامنت گذاشتن برای این خبر"
              />
            </CCol>
            <el-divider></el-divider>
            <CCol sm="12">
              <el-checkbox
                  v-model="news.special"
                  label="نمایش در قسمت مطالب ویژه"
              />
            </CCol>
            <CCol sm="12">
              <el-checkbox
                  v-model="news.notifications"
                  label="قرار گرفتن در بخش اطلاعیه ها"
              />
            </CCol>

          </CCardBody>
        </CCard>
        <CCard>
          <CCardBody>
            <CCol sm="12">
              <h6>
                انتخاب موضوع پرونده خبری
                <i
                    v-c-tooltip="
                          'شما می توانید در صورت تمایل این خبر را در یکی از موضوعات پرونده های خبری قرار دهید'
                        "
                    class="fas fa-question-circle"
                ></i>
              </h6>
              <el-select
                  v-model="news.newsFileId"
                  placeholder="انتخاب کنید"
                  style="width: 100%;"
                  filterable
                  clearable
              >
                <el-option
                    v-for="item in filteredSetNewsFile"
                    :key="item._id"
                    :label="item.title"
                    :value="item._id"
                >
                </el-option>
              </el-select>
              <p
                  style="margin-top : 5px !important ; color : red"
                  class="form-err"
                  v-if="validation.newsFileId"
              >
                {{ validation.newsFileId.msg }}
              </p>
            </CCol>
          </CCardBody>
        </CCard>
        <CCard v-if="$route.params.details !=='new'">
          <CCardBody>
            <CCol sm="12">
              <h6>
                تغییر زمان ثبت خبر
              </h6>
              <date-picker clearable input-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" display-format="jYYYY/jMM/jDD HH:mm"
                           v-model="news.customDate" type="datetime"/>
              <p
                  style="margin-top : 5px !important ; color : red"
                  class="form-err"
                  v-if="validation.customDate"
              >
                {{ validation.customDate.msg }}
              </p>
            </CCol>
          </CCardBody>
        </CCard>
        <CCard>
          <CCardBody>
            <p style="font-weight: bold; color: red;">*در صورتی که عکس خبر وارد نشده باشد خبر در حالت ناقص قرار می گیرد</p>
            <CCol sm="12">
              <h4>عکس خبر هنگام نمایش در لیست اخبار</h4>
              <el-divider/>
              <CCol>
                <img :src="news.thumbCover" style="width: 100%;" alt=""/>
              </CCol>
              <input type="file" ref="thumbCover" @change="imagePreview2"/>
              <p style="margin-top: 5px !important;" class="form-err text-danger" v-if="validation.thumbCover">
                {{ validation.thumbCover.msg }}</p>
              <p class="mt-3 text-muted">
                عکس 300*600 باشد. در غیر این صورت اتوماتیک بریده می شود.
              </p>
            </CCol>
            <CCol sm="12">
              <h4>کاور اصلی خبر</h4>
              <el-divider/>
              <CCol>
                <img :src="news.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">
                عکس 1080*1920 باشد. در غیر این صورت اتوماتیک بریده می شود.
              </p>
            </CCol>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol sm="12" v-if="$route.params.details !== 'new'">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol sm="6">
                <h2>لیست فایل های ضمیمه</h2>
                <el-divider></el-divider>
                <el-table :data="news.attachments">

                  <el-table-column
                      type="index"
                      label="#"
                  >
                  </el-table-column>

                  <el-table-column
                      label="فایل"
                      width=""
                  >
                    <template slot-scope="scope">
                      <a :href="scope.row.file" target="_blank">{{ scope.row.title }}</a>
                    </template>
                  </el-table-column>


                  <el-table-column
                      label="ویرایش"
                      width="75"
                      align="center"
                  >
                    <template slot-scope="scope">
                      <CButton color="danger" variant="outline" @click="deleteFile(scope.row._id)">
                        <i class="far fa-trash-alt"></i>
                      </CButton>
                    </template>
                  </el-table-column>

                </el-table>
              </CCol>
              <CCol sm="6">
                <h2>افزودن فایل ضمیمه</h2>
                <el-divider></el-divider>
                <input type="file" ref="attFile"/>
                <p class="text-danger" v-if="validation.file">{{ validation.file.msg }}</p>
                <br>
                <br>
                <input type="text" ref="attTitle" placeholder="عنوان فایل را بنویسید" style="width: 300px;"/>
                <p class="text-danger" v-if="validation.attTitle">{{ validation.attTitle.msg }}</p>
                <br>
                <br>
                <el-button size="small" type="success" @click="addFile">افزودن</el-button>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
import axiosUploadProcess from "@/mixins/axiosUploadProcess"
import moment from "moment-jalaali";

export default {
  data() {
    return {
      news: null,
      typePage: true,
      inputVisible: false,
      inputValue: "",
      validation: {},
      newsFile: [],
      editorConfig: {
        language: "en",
        extraPlugins: ["bidi", "justify"],
        versionCheck:false
      },
      parents: null,
      portals: null
    }
  },
  mixins: [axiosUploadProcess],
  computed: {
    title() {
      return this.$route.params.details === "new"
          ? "افزودن خبر جدید"
          : "مشاهده جزئیات خبر";
    },
    catId: {
      get() {
        if (this.$route.params.details === 'new') return this.news.catId
        else return this.news.catId._id
      },
      set(value) {
        if (this.$route.params.details === 'new') this.news.catId = value
        else this.news.catId._id = value
      }
    },
    filterParent() {
      return this.parents.filter(item => item.modelType === this.news.modelType)
    },
    filteredSetNewsFile() {
      return this.newsFile.filter(item => item.modelType === this.news.modelType && (this.$route.params.details === 'new' ? item.catId === this.news.catId : item.catId === this.news.catId._id))
    }
  },
  methods: {
    jDate(date) {
      return moment(date);
    },
    handleClose(tag) {
      this.news.keywords.splice(this.news.keywords.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.news.keywords.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    clearIDs(mode) {
      if (mode === 'catId') this.catId = ''
      if (mode === 'newsFile') this.news.newsFileId = ''
    },
    imagePreview(e) {
      this.news.cover = URL.createObjectURL(e.target.files[0]);
    },
    imagePreview2(e) {
      this.news.thumbCover = URL.createObjectURL(e.target.files[0]);
    },
    post() {
      this.validation = {};
      const data = new FormData();
      data.append("title", this.news?.title?.trim());
      data.append("summaryTitle", this.news?.summaryTitle?.trim());
      data.append("leadTitle", this.news?.leadTitle?.trim());
      data.append("catId", this.catId);
      data.append("priority", this.news.priority);
      data.append("allowComment", this.news.allowComment);
      data.append("showInHome", this.news.showInHome);
      // data.append("slider", this.news.slider);
      data.append("publish", this.news.publish);
      data.append("pageContent", this.news.pageContent);
      data.append("special", this.news.special);
      data.append("notifications", this.news.notifications);
      data.append("keywords", JSON.stringify(this.news.keywords));
      data.append("metaTagDesc", this.news?.metaTagDesc || this.news?.leadTitle);
      data.append("modelType", this.news.modelType);
      if (this.news.newsFileId) {
        data.append("newsFileId", this.news.newsFileId);
      }
      if (this.$refs.cover.files[0]) data.append("cover", this.$refs.cover.files[0]);
      if (this.$refs.thumbCover.files[0]) data.append("thumbCover", this.$refs.thumbCover.files[0]);

      this.$axios
          .post(`/api/admin/news`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "خبر با موفقیت ایجاد شد.",
            });
            this.$router.push({
              name: "admin-news",
            });
          })
          .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;
              this.$message({
                type: 'warning',
                message: 'پارامتر هارو بررسی کنید'
              })
            } else console.log(err.response.data);
          });
    },
    update() {
      this.validation = {};

      const data = new FormData();
      data.append("title", this.news.title.trim());
      data.append("summaryTitle", this.news.summaryTitle.trim());
      data.append("leadTitle", this.news.leadTitle.trim());
      data.append("catId", this.catId);
      data.append("priority", this.news.priority);
      data.append("allowComment", this.news.allowComment);
      data.append("showInHome", this.news.showInHome);
      // data.append("slider", this.news.slider);
      data.append("publish", this.news.publish);
      data.append("pageContent", this.news.pageContent);
      data.append("special", this.news.special);
      data.append("notifications", this.news.notifications);
      data.append("keywords", JSON.stringify(this.news.keywords));
      data.append("metaTagDesc", this.news.metaTagDesc || this.news.leadTitle);
      data.append("modelType", this.news.modelType);
      data.append("customDate", this.news.customDate);

      if (this.news.newsFileId) {
        data.append("newsFileId", this.news.newsFileId);
      }
      if (this.$refs.cover.files[0]) data.append("cover", this.$refs.cover.files[0]);
      if (this.$refs.thumbCover.files[0]) data.append("thumbCover", this.$refs.thumbCover.files[0]);

      this.$axios
          .put(`/api/admin/news/${this.news._id}`, data, this.axiosConfig)
          .then((response) => {
            this.$message({
              type: "success",
              message: "اطلاعات بروزرسانی شد.",
            });
            this.$nuxt.refresh();
            this.$refs.cover.value = null
            this.$refs.thumbCover.value = null
          })
          .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.$message({
                type: 'warning',
                message: 'پارامترها رو بررسی کنید'
              })
              this.validation = err.response.data.validation;
            } else console.log(err.response.data);
          });
    },
    addFile() {
      this.validation = {}
      const data = new FormData()
      data.append('file', this.$refs.attFile.files[0])
      data.append('attTitle', this.$refs.attTitle.value)

      this.$axios.post(`/api/admin/news/attachments/${this.news._id}`, data, this.axiosConfig)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'فایل با موفقیت اضافه شد'
            })
            this.$refs.attFile.value = null
            this.$refs.attTitle.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.$message({
                type: 'warning',
                message: 'پارامترها را بررسی کنید'
              })
              this.validation = err.response.data.validation
            } else console.log(err.response.data);
          })
    },
    deleteFile(id) {
      this.$confirm('فایل حذف شود؟', 'هشدار', {
        confirmButtonText: 'بله',
        cancelButtonText: 'لغو',
        type: 'warning'
      })
          .then(async () => {
            this.$axios.delete(`/api/admin/news/attachments/${id}`)
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: 'فایل با موفقیت حذف شد'
                  })
                  this.news.attachments = this.news.attachments.filter(item => item._id !== id)
                })
                .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 === 422) {
                    return this.$message({
                      type: 'error',
                      message: err.response.data.message
                    })
                  }
                  console.log(err.response.data)
                })
          })
          .catch(() => {
            this.$message({
              type: 'warning',
              message: 'عملیات لغو شد'
            })
          })
    }
  },
  head() {
    return {
      title: this.title,
    };
  },
  layout: "admin",
  async asyncData({$axios, $auth, params, query, error}) {
    try {

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

      const fetch = await Promise.all(requests);

      let [parents, portals, newsFile] = 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 news = await $axios.get(`/api/admin/news/${params.details}`);

        return {
          portals: portals.data,
          parents: parents.data,
          news: news.data,
          // filterParent: parents.data,
          newsFile: newsFile.data
        };
      } else {
        return {
          portals: portals.data,
          parents: parents.data,
          // filterParent: parents.data,
          newsFile: newsFile.data,
          news: {
            title: '',
            summaryTitle: '',
            leadTitle: '',
            catId: $auth.user.specialPermissions,
            allowComment: false,
            // slider: false,
            priority: false,
            showInHome: true,
            siteMap: true,
            special: false,
            publish: true,
            notifications: false,
            pageContent: '',
            keywords: [],
            metaTagDesc: '',
            newsStatus: false,
            modelType: setModelType,
            newsFileId: ''
          },
        };
      }
    } catch (e) {
      console.log(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>