NUXT_FRONTEND/pages/admin/publications/_id.vue

<template>
  <v-container class="spacing-playground" fluid>
    <modal
      adaptive
      height="auto"
      name="is-edited-modal"
      :clickToClose="false"
      v-if="is_edited"
    >
      <v-alert outlined type="info"
        >Статья уже редактируется пользователем {{ is_edited.user }}</v-alert
      >
      <v-btn @click="$router.push('/admin/publications')"
        >Перейти к публикациям</v-btn
      >
      <v-btn @click="interception()"
      >Перехватить редактирование</v-btn
      >
    </modal>

    <modal adaptive height="auto" name="is-interception-modal" :clickToClose="false">
      <v-alert outlined type="info">Редактирование статьи было перехвачено другим пользователем</v-alert>
      <v-btn @click="$router.push('/admin/publications')">Перейти к публикациям</v-btn>
      <v-btn @click="interception()">Перехватить редактирование</v-btn>
    </modal>

    <v-tabs v-model="tab">
      <v-tabs-slider color="blue"></v-tabs-slider>
      <v-tab v-for="item in items_tab" :key="item">
        {{ item }}
      </v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-tab-item>
        <v-card>
          <v-row no-gutters>
            <v-col cols="8" class="col detail__main pa-6">
              <treeselect
                      placeholder="Категория"
                      value="id"
                      noChildrenText="Нет подкатегорий"
                      valueFormat="object"
                      v-model="category"
                      :options="treeCategories"
                      class="tree-select"
              />

              <div class="error" v-if="$v.$dirty && !$v.category.required">
                Обязательное поле
              </div>

              <v-text-field v-model="title" label="Заголовок">
              </v-text-field>
              <div class="error" v-if="$v.$dirty && !$v.title.required">
                Обязательное поле
              </div>

              <v-text-field disabled v-model="generatedAlias" label="Алиас">
              </v-text-field>

              <v-text-field v-model="sliderId" label="Слайдер"> </v-text-field>

              <v-text-field v-model="sorting" label="Позиция"> </v-text-field>

              <v-textarea
                      name="input-7-1"
                      label="Описание"
                      hint=""
                      v-model="description"
              ></v-textarea>

              <v-textarea
                      label="Видео"
                      v-model="video"
                      rows="3"
                      auto-grow
              ></v-textarea>

              <v-text-field v-model="externalLink" label="Внешняя ссылка">
              </v-text-field>

              <v-text-field v-model="token" label="Токен (для рекламы)">
              </v-text-field>

              <v-file-input
                      prepend-icon=""
                      append-icon="$file"
                      label="Прикрепить файлы (PDF, ZIP, DOC, DOCX)"
                      chips
                      multiple
                      small-chips
                      v-model="filesModel"
                      @change="loadFiles"
                      accept=".pdf, .zip, .doc, .docx"
              ></v-file-input>

              <v-chip-group v-if="files.length">
                <v-chip
                        @click:close="deleteFile(file, index)"
                        v-for="(file, index) in files"
                        :key="file.id"
                        close
                >
                  {{ file.original_file_name }}
                </v-chip>
              </v-chip-group>

              <AdminEditor
                      v-if="content"
                      :value="content"
                      @input="content = $event"
              ></AdminEditor>

              <v-btn class="ml-auto mr-0 pa-6 my-6" @click="createNews('save')">Сохранить публикацию</v-btn>
              <v-btn class="ml-auto mr-0 pa-6 my-6" @click="createNews('update')">Обновить публикацию</v-btn>
              <v-btn class="ml-auto mr-0 pa-6 my-6" @click="previewNews">Предпросмотр</v-btn>
              <v-btn class="ml-auto mr-0 pa-6 my-6" @click="shareNews">Поделиться</v-btn>
              <v-btn class="mx-6" tile color="warning" @click="deleteNews(id)">
                <v-icon left> mdi-delete </v-icon>
                удалить
              </v-btn>
            </v-col>

            <v-col cols="3" class="col detail__sidebar pa-6">
              <div v-if="!img.relative_path">
                <v-img
                        v-if="img.url"
                        :lazy-src="img.url ? img.url : 'без картинки'"
                        :src="img.url ? img.url : 'без картинки'"
                        :max-width="400"
                >
                </v-img>
              </div>
              <v-img
                      v-else
                      :lazy-src="url(img ? img.relative_path : '')"
                      :src="url(img ? img.relative_path : '')"
                      :max-width="400"
              >
              </v-img>
              <v-row align="center">
                <v-col cols="10" class="col pa-6">
                  <v-file-input
                          v-model="file"
                          @change="fileHandler('main-img', 814, 458)"
                          @click:clear="
                img = {};
                img.id = 'remove';
                img.image_id = '';
              "
                          label="Картинка:"
                          type="file"
                          accept="image/*"
                          ref="input1"
                  >
                  </v-file-input>
                </v-col>
                <v-col cols="2" class="col pa-6">
                  <v-btn
                          v-if="detail_img_id != ''"
                          icon
                          color="error"
                          elevation="2"
                          @click="
                img = {};
                img.id = 'remove';
                detail_img_id = '';
              "
                  >
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                </v-col>
              </v-row>
              <div v-if="!previewImg.relative_path">
                <v-img
                        v-if="previewImg.url"
                        :lazy-src="previewImg.url ? previewImg.url : 'без картинки'"
                        :src="previewImg.url ? previewImg.url : 'без картинки'"
                        :max-width="400"
                >
                </v-img>
              </div>
              <v-img
                      v-else
                      :lazy-src="url(previewImg ? previewImg.relative_path : '')"
                      :src="url(previewImg ? previewImg.relative_path : '')"
                      :max-width="400"
              >
              </v-img>
              <v-row align="center">
                <v-col cols="10" class="col pa-6">
                  <v-file-input
                          v-model="previewFile"
                          @change="fileHandler('preview-img', 850, 420)"
                          @click:clear="
                previewImg = {};
                previewImg.id = 'remove';
                previewImg.image_id = '';
              "
                          label="Превью:"
                          type="file"
                          accept="image/*"
                          ref="inputPreview"
                  >
                  </v-file-input>
                </v-col>
                <v-col cols="2" class="col pa-6">
                  <v-btn
                          v-if="preview_img_id != ''"
                          icon
                          color="error"
                          elevation="2"
                          @click="
                previewImg = {};
                previewImg.id = 'remove';
                preview_img_id = '';
              "
                  >
                    <v-icon>mdi-delete</v-icon>
                  </v-btn>
                </v-col>
              </v-row>
              <v-select
                      class="tree-select"
                      :items="authorsList"
                      item-text="name"
                      item-value="value"
                      v-model="author"
                      label="Автор"
              ></v-select>
              <v-checkbox label="Показывать автора" v-model="showAuthor">
              </v-checkbox>

              <v-checkbox label="Не отдавать в Яндекс" v-model="dont_send_to_rss">
              </v-checkbox>

              <v-checkbox label="МОЛНИЯ" v-model="lightning"> </v-checkbox>

              <v-checkbox label="Включить комментарии" v-model="allowComments">
              </v-checkbox>

              <v-checkbox
                      label="На правах рекламы"
                      v-model="advertisement"
              ></v-checkbox>

              <v-checkbox
                label="Метка Реклама (не видна читателю)"
                v-model="advertisement_mark"
              ></v-checkbox>

              <v-checkbox label="Партнерский материал" v-model="partner">
              </v-checkbox>

              <v-checkbox
                      label="Имеются противопоказания"
                      v-model="contraindications"
              >
              </v-checkbox>

              <v-checkbox v-model="activity" label="Активность"> </v-checkbox>

              <v-checkbox v-model="showInStories" label="Показывать в сторис">
              </v-checkbox>

              <v-checkbox v-model="verified" label="Проверено"> </v-checkbox>

              <div v-if="!storieImg">
                <v-img
                        v-if="storieImg"
                        :lazy-src="storieImg.url ? storieImg.url : 'без картинки'"
                        :src="storieImg.url ? storieImg.url : 'без картинки'"
                        :max-width="400"
                >
                </v-img>
              </div>

              <v-img
                      v-else
                      :lazy-src="url(storieImg ? storieImg.relative_path : '')"
                      :src="url(storieImg ? storieImg.relative_path : '')"
                      :max-width="400"
              >
              </v-img>
              <!--<v-file-input
                v-if="showInStories"
                v-model="storieFile"
                @change="fileHandler('storie-img', 500, 1200)"
                label="Картинка для истории:"
                type="file"
                accept="image/*"
                ref="inputStorie"
              ></v-file-input>-->

              <v-menu
                      ref="menu"
                      v-model="menu"
                      :close-on-content-click="false"
                      :return-value.sync="startActivity.date"
                      transition="scale-transition"
                      offset-y
                      min-width="auto"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-text-field
                          v-model="startActivity.date"
                          label="Выберите дату"
                          prepend-icon="mdi-calendar"
                          readonly
                          v-bind="attrs"
                          v-on="on"
                  ></v-text-field>
                </template>
                <v-date-picker v-model="startActivity.date" no-title scrollable>
                  <v-spacer></v-spacer>
                  <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
                  <v-btn
                          text
                          color="primary"
                          @click="$refs.menu.save(startActivity.date)"
                  >
                    OK
                  </v-btn>
                </v-date-picker>
              </v-menu>
              <vue-timepicker
                      v-model="startActivity.time"
                      format="HH:mm:ss"
              ></vue-timepicker>

              <v-text-field v-model="source" label="Источник" @blur="getAlias">
              </v-text-field>

              <v-text-field v-model="hash_tags" label="Хэш-тэги"> </v-text-field>

              <v-text-field v-model="metaDescription" label="SEO-description">
              </v-text-field>

              <v-text-field v-model="metaKeys" label="SEO-keywords"> </v-text-field>
            </v-col>

            <div v-if="message.length" class="message-box">
              <v-alert
                      v-model="message"
                      :key="i"
                      class="message"
                      :type="messageClass ? messageClass : 'primary'"
                      dismissible
              >
                {{ message }}
              </v-alert>
            </div>
          </v-row>
        </v-card>
      </v-tab-item>

      <v-tab-item>
        <v-card>
          <v-list two-line>
            <v-list-item v-for="comment in comments" :key="comment.id">
              <v-list-item-content>
                <v-row>
                  <v-col>
                    {{ comment.user_create_for_admin ? comment.user_create_for_admin.first_name : 'Гость' }}
                  </v-col>

                  <v-col cols="2">
                    {{ convertDate(comment.created_at) }}
                  </v-col>

                  <v-col cols="6">
                    {{ comment.message ? comment.message : '' }}
                  </v-col>
                </v-row>

              </v-list-item-content>

              <v-list-item-action class="is-flex">
                <v-btn icon v-if="comment.need_moderation" @click="approveComment(comment.id)">
                  <v-icon color="green lighten-1">mdi-check-circle</v-icon>
                </v-btn>
                <v-btn icon @click="removeComment(comment.id)">
                  <v-icon color="red darker-1">mdi-delete</v-icon>
                  <!--удалить-->
                </v-btn>
                <v-btn icon :to="{name: 'admin-comments-id', params: { id: comment.id, message: comment.message}}" target="_blank">
                  <v-icon color="green darker-1"> mdi-pencil </v-icon>
                  <!--изменить-->
                </v-btn>
              </v-list-item-action>

            </v-list-item>
          </v-list>
        </v-card>
      </v-tab-item>

    </v-tabs-items>
  </v-container>
</template>

<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import global from "@/mixins/global";

const nest = (items, id = null, link = "parent_id") => {
  return items
    .filter((item) => item[link] === id)
    .map((item) => ({
      ...item,
      label: item.title,
      children: nest(items, item.id),
    }));
};

export default {
  components: {
    VueTimepicker,
    Treeselect,
  },
  mixins: [global],
  async beforeRouteLeave(to, from, next) {
    if (this.confirm) {
      const out = window.confirm("Вы уверены, что хотите покинуть страницу?");
      if (!out) return;
    }

    if (this.editedInterval !== null) {
      clearInterval(this.editedInterval);
      await this.disableEdit();
    }

    next();
  },

  methods: {
    async enableEdit() {
      await this.$axios.get("/admin/news/edited_status/" + this.id + "/on").then((res) => {
        if(res.data.data.interception){
          this.$modal.show("is-interception-modal");
          clearInterval(this.editedInterval);
        }
      });
    },
    async disableEdit() {
      await this.$axios.get("/admin/news/edited_status/" + this.id + "/off")
    },
    interception(){
      this.$axios.get("/admin/news/edited_status/" + this.id + "/interception");
      this.$modal.hide("is-edited-modal");
      this.$modal.hide("is-interception-modal");
      this.editedInterval = setInterval(this.enableEdit, 60000);
      window.addEventListener("beforeunload", this.disableEdit);
    },
    getContainer(str) {
      this.$axios.get("admin/containers/type_" + str).then((res) => {
        if (str == "module") {
          this.modules = res.data.data;
          return res.data;
        } else if (str == "section") {
          this.sections = res.data.data;
          return res.data;
        } else if (str == "slider") {
          this.sliders = res.data.data;
          return res.data;
        }
      });
    },
    async getCategory() {
      await this.$axios.$get("/admin/categories").then((res) => {
        this.categories = res.data;
        return res.data;
      });
    },
    async getAuthors() {
      await this.$axios
        .$post("authorized/admin/user/profiles/list/by_group", {
          groups: [3],
        })
        .then((res) => {
          if (!res.data.users) return [];
          this.authors = {
            value: "",
            name: "",
          };
          this.authors = res.data.users.map((item) => ({
            value: item.user_id,
            name: item.first_name,
          }));
          return this.authors;
        });
    },
    url(relative_path) {
      let url = "https://api.amic.ru/" + relative_path;
      return url;
    },
    getFile(type) {
      if (type == "main-img") {
        return this.file;
      } else if (type == "preview-img") {
        return this.previewFile;
      } else if (type == "storie-img") {
        return this.storieFile;
      }
    },
    notificationHandler(message, error) {
      this.messageClass = false;
      this.message = message;

      if (error) {
        this.messageClass = "error";
      }
      const interva = setTimeout(() => {
        this.message = "";
      }, 2000);
    },
    fileHandler(type, width, height) {
      const fileData = new FormData();
      fileData.append("file", this.getFile(type));
      if (type == "main-img" && this.category.alias == "articles") {
        fileData.append("destination_width", 1900);
        fileData.append("destination_height", 800);
      }
      else if (
        type == "preview-img" &&
        this.category.parent_for_admin &&
        this.category.parent_for_admin.alias == 'video'
      ) {
        fileData.append("destination_width", 1400);
        fileData.append("destination_height", 650);
      }
      else {
        fileData.append("destination_width", width);
        fileData.append("destination_height", height);
      }
      fileData.append("title", "example");
      // TODO - добавить поле для названия фотографии. Создать метод - либо добавлять после создания, либо во время, либо до
      this.$axios
        .$post("authorized/admin/files/upload/image/news/raw", fileData, {
          headers: {
            "Content-Type": `multipart/form-data;`,
          },
        })
        .then((res) => {
          if (type == "main-img") {
            this.img = res.data;
          } else if (type == "preview-img") {
            this.previewImg = res.data;
          } else if (type == "storie-img") {
            this.storieImg = res.data;
          }
          if (res.success) {
            this.notificationHandler("Картинка удачно загрузилась!", false);
          } else {
            this.notificationHandler(res.errors.join("* "), true);
          }
          return res;
        })
        .catch((err) => {
          this.notificationHandler(err.errors.join("* "), true);
          return err;
        });
    },

    createNews(state) {
      this.confirm = false;
      this.$axios.post("admin/news/update", this.newsItem).then((res) => {
        console.log(res);
        if (res.status == 202) {
          this.notificationHandler("Публикация обновлена!", false);
        }
      });
      if (state == "save") {
        this.$router.push("/admin/publications");
      }
    },

    previewNews() {
      const path = this.isVideo ? '/preview/video' : '/preview';
      let { href } = this.$router.resolve({ path });

      this.$axios
        .post("admin/news/preview", this.newsItem)
        .then((res) => {
          let newsPreview = JSON.stringify(res.data.data);
          window.localStorage.setItem("preview", newsPreview);
          window.open(href, "_blank");
        })
        .catch((err) => this.notificationHandler(err.message, true));
    },

    shareNews() {
      const path = this.isVideo ?
        `/preview/video?uuid=${this.newsItem.id}` :
        `/preview?uuid=${this.newsItem.id}`;

      let { href } = this.$router.resolve({ path });
      window.open(href, "_blank");
    },

    deleteNews(id) {
      this.$swal
        .fire({
          title: "Вы уверены, что хотите удалить новость?",
          showCancelButton: true,
          confirmButtonText: "Удалить",
          icon: "error",
          cancelButtonText: `Не удалять`,
          confirmButtonColor: `#ab003c`,
          denyButtonColor: `#2196f3`,
        })
        .then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {
            this.$axios.post("/admin/news/remove", { id: id }).then((res) => {
              console.log(res.data);
              this.$axios
                .$get("/admin/news/list?page=1")
                .then((res) => {
                  console.log(res.data);
                  this.newsList = res.data;
                  return res.data;
                })
                .catch((err) => {
                  console.log(err);
                });
              return res;
            });
            this.$swal.fire("Удалено!", "", "error");
            this.$router.go(-1);
          } else if (result.isDenied) {
            this.$swal.fire("Отмена удаления", "", "info");
          }
        });
    },
    getAlias() {
      this.$axios
        .post("admin/alias/generation", { text: this.title })
        .then((res) => {
          if (res.status == 200) {
            this.generatedAlias = res.data.data.text;
            this.$axios
              .get(
                "admin/alias/check/news/" +
                  this.generatedAlias +
                  "/" +
                  this.category.id
              )
              .then((res) => {
                if (res.success) {
                  this.alias = this.generatedAlias;
                  return generatedAlias;
                }
              });
          }
          return res;
        });
    },

    async loadFile(File) {
      const fileData = new FormData();
      fileData.append("file", File);
      fileData.append("title", File.name);

      const file = await this.$axios
        .post("authorized/admin/files/upload/document/news", fileData)
        .then((res) => res.data.data)
        .catch((e) => console.log(e));

      await this.$axios
        .post("admin/news/file/add", {
          file_id: file.id,
          news_id: this.id,
        })
        .catch((e) => console.log(e));

      return file;
    },

    async deleteFile(file, index) {
      this.files.splice(index, 1);

      await this.$axios
        .post("admin/news/file/remove", {
          file_id: file.id,
          news_id: this.id,
        })
        .catch((e) => console.log(e));
    },

    async loadFiles(files) {
      if (!files) return;

      const promises = files.map((file) => this.loadFile(file));
      const newFiles = await Promise.all(promises);
      this.files = [...this.files, ...newFiles];

      this.filesModel = null;
    },

    convertDate(dateTampstamp) {
      const date = new Date(dateTampstamp);
      const dateString =
              date.toLocaleString("ru", {
                day: "numeric",
                month: "long",
              }) +
              " " +
              date.getFullYear() +
              ", " +
              ("0" + date.getHours()).slice(-2) +
              ":" +
              ("0" + date.getMinutes()).slice(-2);
      return dateString;
    },

    async approveComment(commentId) {
      await this.$axios
        .$get(
            "https://api.amic.ru/api/v1/admin/comments/approve/" +
            commentId
        )
        .then((res) => {
          if(res.success){
            alert('Комментарий одобрен');
          }else{
            alert('Ошибка одобрения комментария');
          }
        })
        .catch((error) => {
          alert('Ошибка одобрения комментария');
          console.log(error);
        });
    },

    async removeComment(commentId) {
      await this.$axios
        .$get(
          "https://api.amic.ru/api/v1/admin/comments/remove/" +
          commentId
        )
        .then((res) => {
          if(res.success){
            alert('Комментарий удалён');
          }else{
            alert('Ошибка удаления комментария');
          }
        })
        .catch((error) => {
          alert('Ошибка удаления комментария');
        });
    },

  },
  data() {
    return {
      confirm: true,
      sliderId: "",
      messageClass: "",
      menu: "",
      message: "",
      author: "",
      authors: [],
      storieImg: null,
      dont_send_to_rss: null,
      hash_tags: "",
      sorting: null,
      is_edited: false,
      editedInterval: null,
      showAuthor: true,
      allowComments: true,
      advertisement: false,
      advertisement_mark: false,
      partner: false,
      contraindications: false,
      modules: [],
      sliders: [],
      sections: [],
      metaDescription: "",
      editor: null,
      content: "",
      title: "",
      description: "",
      category: null,
      metaKeys: " ",
      img: {},
      detail_img_id: "",
      source: "",
      previewImg: {},
      preview_img_id: "",
      previewFile: null,
      storieFile: null,
      file: null,
      lightning: false,
      activity: true,
      alias: "",
      showInStories: false,
      generatedAlias: "",
      startActivity: {
        date: "",
        time: "",
      },
      id: "",
      categories: [],
      propertiesForAdmin: [],
      propertiesList: [],
      video: "",
      externalLink: "",
      token: "",
      files: [],
      filesModel: null,
      verified: false,
      tab: null,
      items_tab: [
        'Новость', 'Комментарии',
      ],
      comments: []
    };
  },

  validations: {},

  layout: "admin",
  // Компьютед
  computed: {
    isVideo() {
      if(!this.category) return false;

      const parentCategory = this.category.parent_for_admin;
      return parentCategory && parentCategory.alias == 'video';
    },
    start_activity() {
      return this.startActivity.date + " " + this.startActivity.time;
    },
    properties() {
      const entries = this.propertiesList.map((p) => [p.id, this[p.code]]);
      return Object.fromEntries(entries);
    },
    newsItem() {
      return {
        author: this.author,
        title: this.title,
        text: this.content,
        alias: this.generatedAlias,
        description: this.description,
        activity: this.activity,
        news_category_id: this.category.id,
        start_activity: this.start_activity,
        detail_image_id: this.img.id ? this.img.id : this.img.image_id,
        preview_image_id: this.previewImg.id
          ? this.previewImg.id
          : this.previewImg.image_id,
        source: this.source,
        slider_id: this.sliderId ? this.sliderId : "",
        section_id: this.sectionId ? this.sectionId : "",
        meta_description: this.metaDescription,
        module_id: this.moduleId ? this.moduleId : "",
        meta_key: this.metaKeys,
        allow_comments: this.allowComments,
        show_author: this.showAuthor,
        sorting: Number(this.sorting),
        lightning: this.lightning,
        show_in_stories: this.showInStories,
        id: this.id,
        hash_tags: this.hash_tags,
        dont_send_to_rss: this.dont_send_to_rss,
        properties: this.properties,
        video: this.video,
        link: this.externalLink,
        verified: this.verified,
        token: this.token,
        advertisement_mark: this.advertisement_mark,
      };
    },

    treeCategories() {
      if (!this.categories) return [];
      return nest(this.categories);
    },
    authorsList() {
      return this.authors;
    },
  },
  // Компьютед конец
  async mounted() {
    window.addEventListener("beforeunload", (event) => {
      event.preventDefault();
      event.returnValue = "";
    });

    await this.getCategory();
    await this.getAuthors();
    console.log("/admin/news/item/" + this.$route.params.id)
    await this.$axios
      .$get("/admin/news/item/" + this.$route.params.id)
      .then((res) => {
        this.author =
          res.data.author_for_admin && res.data.author_for_admin.id.length
            ? res.data.author_for_admin.id
            : "";
        this.is_edited = res.data.editor;
        this.title = res.data.title;
        this.generatedAlias = res.data.alias;
        this.description = res.data.description;
        this.startActivity.date = res.data.start_activity.split(" ")[0]
          ? res.data.start_activity.split(" ")[0]
          : "";
        this.startActivity.time = res.data.start_activity.split(" ")[1]
          ? res.data.start_activity.split(" ")[1]
          : "";
        this.img = res.data.detail_image_for_admin
          ? res.data.detail_image_for_admin
          : "";
        this.detail_img_id = res.data.detail_image_id
          ? res.data.detail_image_id
          : "";
        this.previewImg = res.data.preview_image_for_admin
          ? res.data.preview_image_for_admin
          : "";
        this.preview_img_id = res.data.preview_image_id
          ? res.data.preview_image_id
          : "";
        this.source = res.data.source;
        this.activity = res.data.activity;
        this.metaDescription = res.data.meta_description;
        this.showInStories = res.data.show_in_stories;
        this.metaKeys = res.data.meta_key;
        this.allowComments = res.data.pull_for_admin.is_show_comments;
        this.showAuthor = res.data.show_author;
        this.sorting = res.data.sorting;
        this.lightning = res.data.lightning;
        this.showInStories = res.data.show_in_stories;
        this.id = res.data.id;
        this.hash_tags = res.data.hash_tags;
        this.dont_send_to_rss = res.data.dont_send_to_rss;
        this.content = res.data.text;
        this.sliderId = res.data.slider_id;
        this.video = res.data.video ? res.data.video : "";
        this.category = res.data.category_for_admin;
        this.externalLink = res.data.link;
        this.advertisement_mark = res.data.advertisement_mark;
        this.token = res.data.token;
        this.verified = res.data.verified;
        this.files = res.data.files_for_admin.map((e) => e.file_for_admin);
        this.comments = res.data.comments_for_admin;

        this.propertiesForAdmin = res.data.properties_for_admin.map(
          (element) => ({ ...element.property, value: element.value })
        );

        this.propertiesForAdmin.forEach((property) => {
          this[property.code] = Number(property.value);
        });
        return res;
      });

    if (this.is_edited) {
      this.$modal.show("is-edited-modal");
    } else {
      await this.enableEdit();
      this.editedInterval = setInterval(this.enableEdit, 60000);
      window.addEventListener("beforeunload", this.disableEdit);
    }

    await this.$axios
      .get("admin/properties")
      .then((res) => (this.propertiesList = res.data.data));
  },
};
</script>

<style lang="less" scoped>
img {
  max-width: 250px;
}

.tree-select {
  margin-bottom: 15px;
}

.message {
  width: 400px;
  height: 100px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 1px 1px;
  background: white;
  &-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    right: 20px;
    bottom: 20px;
    position: fixed;
    justify-content: flex-end;
  }
}
</style>