base_ui/pages/admin/about/index.vue

<template>
  <NuxtLayout name="default" :menu="adminMenu">
    <div class="m-2">
      <the-content-loading v-if="fetchingData"></the-content-loading>
      <!-- 
      <my-quillr
        :parentButtonLoading="buttonLoading"
        v-else
        :tinyText="tinyText"
        @input="onSave"
        @on-save="onSave"
      ></my-quillr> -->
      <quill-editor
        v-else
        :content="tinyText"
        ref="quillEditor"
        content-type="html"
        theme="snow"
        @input="onInputChange"
        :options="editorOptions"
        
      ></quill-editor>
      
      <button @click="onSave" type="button" class="btn btn-primary mt-3">
        ذخیره
      </button>
    </div>
  </NuxtLayout>
</template>

<script>
import { render } from "vue";
import settingsApi from "~/apis/settingsApi";
import adminMenu from "~/json/admin/json/menu.json";

export default {
  name: "dataSettingAboutUs",
  setup() {
    definePageMeta({
      name: "dataSettingAboutUs",
      layout: false,
    });
  },
  created() {
    this.httpService = useNuxtApp()["$http"];
  },
  mounted() {
    this.getData();
  },
  watch: {
    // $route: {
    //   handler: function () {
    //     this.$store.state.collapsed = false;
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  data() {
    return {
      adminMenu: adminMenu,
      httpService: {},
      buttonLoading: false,
      tinyText: "",
      render: 0,

      fetchingData: false,
      data: undefined,
      editorOptions: {
        theme: "snow", // تم ویرایشگر: 'snow' یا 'bubble'
        placeholder: "متن خود را بنویسید...",
        modules: {
          toolbar: [
            [{ header: [1, 2, 3, false] }], // سطح هدینگ‌ها
            ["bold", "italic", "underline", "strike"], // دکمه‌های استایل متن
            [{ color: [] }, { background: [] }], // رنگ متن و پس‌زمینه
            [{ list: "ordered" }, { list: "bullet" }], // لیست‌های شماره‌دار و نقطه‌ای
            ["blockquote", "code-block"], // نقل‌قول و کد
            [{ align: [] }, { direction: "rtl" }], // تراز بندی متن
            ["link", "image", "video"], // افزودن لینک، تصویر، و ویدیو
            ["clean"], // حذف فرمت‌ها
          ],
        },
      },
    };
  },

  methods: {
    getData() {
      var vm = this;
      this.fetchingData = true;

      var url = settingsApi.app.getByKey;
      url = url.replace("{{key_option}}", "about_text");
      // let url = apis.admin.get.replace('{{system}}', this.$route.meta.apiKey)

      this.httpService
        .getRequest(repoUrl() + url)
        .then((response) => {
          console.log("🚀 ~ .then ~ response:", response);
          vm.fetchingData = false;

          this.tinyText = response.hits.hits[0]._source.value;
          this.data = response.hits.hits[0]._source;
          
        })
        .catch((error) => {})
        .finally(() => {
          vm.fetchingData = false;
        });
    },
    onInputChange(event) {
      // console.log("🚀 ~ onInputChange ~ event:", event);
      // this.tinyText = event
    },
    onSave(newContent) {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      // var url = apis.admin.save;
      // const payload = { ...this.data, ...{ value: newContent } }

      var url = settingsApi.app.saveByKey;
      url = url.replace("{{key_option}}", "about_text");
      const payload = { value: newContent };

      this.httpService
        .postRequest(url, payload)
        .then((response) => {
          mySwalToast({
            title: "تبریک",
            html: response.data.message,
            icon: "success",
          });
        })
        .catch((error) => {})
        .finally(() => {
          this.buttonLoading = false;
        });
    },
  },
};
</script>