base_ui/pages/data-setting/admin-guide-list.vue

<template>
  <div>
    <Multiselect
      :allow-empty="false"
      :searchable="true"
      :close-on-select="true"
      :show-labels="false"
      :value="value"
      :options="options"
      class="multi mb-2"
      @select="select"
      label="label"
      track-by="key"
      placeholder="دسته"
      :hide-selected="false"
      :max-height="200"
      :max-width="200"
    >
    </Multiselect>
    <MyTable
      height="auto"
      maxHeight="calc(100vh - 9em)"
      class="my-table"
      ref="sectionsTable"
      :hasSearch="false"
      :tableActions="tableActions"
      :items="sections"
      :tableColumns="tableColumns"
      :paginationInfo="pagination"
      :totalPages="pagination.pages"
      @delete-table-item="deleteItem"
      @edit-table-item="editTableItem"
      @page-changed="pageChanged"
      @page-limit-changed="pageLimitChanged"
      @sort-changed="sortChanged"
    >
      <!-- :fetchingData="fetchingData" :totalPages="pagination.pages"
      @delete-table-item="deleteItem" @edit-table-item="toggleRolesPanel"
      @page-changed="pageChanged" @page-limit-changed="pageLimitChanged"
      @sort-changed="sortChanged" -->
      <!-- :paginationInfo="pagination"
      :sortingInfo="sorting -->
    </MyTable>
    <base-modal
      v-if="openSubjectForm"
      modalSize="modal-lg"
      :hasFooter="false"
      @close="closeModal"
    >
      <component
        :is="slotComponentName"
        :editList="editList"
        @close="closeModal"
      ></component>
    </base-modal>
  </div>
</template>
<script>
import settingsApi from "~/apis/settingsApi";

import { mapState, mapActions } from "pinia";
import searchApi from "~/apis/searchApi";
import { useStorage } from "@vueuse/core";

export default {
  name: "guidesList",
  setup() {
    definePageMeta({
      name: "guidesList",
    });
  },
  computed: {
    ...mapState(useSearchStore, ["helpSchemaGetter"]),
    ...mapState(["organNameGetter"]),
    myActiveSchema() {
      return this.helpSchemaGetter?.find((item) => {
        return item.key == "help";
      });
    },
  },
  mounted() {
    let localStoageHelpSchema = useStorage("settingSchema",undefined).value;

    if (localStoageHelpSchema) {
      let helpSchema = JSON.parse(localStoageHelpSchema);
      this.helpSchemaSetter(helpSchema);
      this.options = this.myActiveSchema?.category;
      this.value = this.myActiveSchema?.category[0];
    } else {
      this.getSchemas();
    }
    this.getList();
  },
  data() {
    return {
      options: [{ name: "جستجو" }, { name: "محتوا" }, { name: "مطالعه" }],
      httpService: undefined,
      value: "",
      editList: "",
      slotComponentName: "",
      modalTitle: "",
      openSubjectForm: false,
      listSections: [],
      sections: [],
      tableActions: [
        {
          showOutside: true,
          show: true,
          icon: "tavasi tavasi-Component-242--1",
          title: this.$t("Edit"),
          to: {
            name: "undefined",
          },
          selected: false,
          disabled: false,
          howToOpen: "",
          href: "",
          class: "edit-btn",
          action: "edit-table-item",
          can: "item-info_edit",
        },
        {
          showOutside: true,
          show: true,
          icon: "tavasi tavasi-Component-295--1",
          title: this.$t("Delete"),
          to: {
            name: "undefined",
          },
          selected: false,
          disabled: false,
          howToOpen: "",
          href: "",
          class: "delete-btn",
          action: "delete-table-item",
          can: "item-list_delete",
        },
      ],
      tableColumns: [
        {
          isLink: true,
          key: "title",
          title: "عنوان سوال",
          width: "1",
        },
        {
          key: "description",
          title: "توضیحات",
          width: "6",
        },
      ],
      pagination: {
        page: 1,
        pages: 0,
        total: 0,
        offset: 0,
        limit: 10,
      },
      sorting: "",
    };
  },
  beforeMount() {
    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
  },
  methods: {
    ...mapActions("search", ["helpSchemaSetter"]),

    openModal(componentName, title) {
      this.openSubjectForm = true;
      this.slotComponentName = componentName;
      this.modalTitle = title;
      setTimeout(() => {
        $("#meta-item-modal").modal(
          { backdrop: "static", keyboard: false },
          "show"
        );
      }, 500);
    },
    closeModal() {
      $("#base-modal").modal({
        show: false,
      });

      setTimeout(() => {
        this.openSubjectForm = false;
        this.getList();
      }, 1000);
    },
    editTableItem(item) {
      this.editList = this.listSections[item];
      this.openModal("editModalItem", "فیلتر ها");
    },
    deleteItem(item) {
      this.mySwalConfirm({
        title: "هشدار!!!",
        html: "تمامی اطلاعات  پاک خواهد. آیا مطمئن هستید؟ ",
      }).then((result) => {
        if (result.isConfirmed) {
          var id = this.listSections[item]?._id;
          let url = settingsApi.help.delete;
          url = url.replace("{{id}}", id);
          this.httpService.postRequest(url).then((response) => {
            this.mySwalToast({
              title: "با موفقیت حذف شد",
              // html: response.data.message,
              icon: "success",
            });
            this.getList();
          });
        }
      });
    },
    getList() {
      let url = settingsApi.help.list;
      url = url.replace("{{key_option}}", this.value?.key);
      url = url.replace("{{offset}}", this.pagination?.offset);
      url = url.replace("{{limit}}", this.pagination?.limit);
      this.httpService.getRequest(url).then((response) => {
        let list = response.hits?.hits;
        this.listSections = list;
        if (this.sections.length >= 0) this.sections = [];
        // this.sections = response.hits.hits;
        list.forEach((element) => {
          this.sections.push(element?._source.meta);
        });

        const total = response.hits.total.value;

        const pages = Math.ceil(total / this.pagination.limit);
        const pagination = {
          total: total,
          pages: pages == 0 ? 1 : pages,
        };

        this.pagination = { ...this.pagination, ...pagination };

        // this.pagination = { ...this.pagination, ...response.pagination };
      });
    },
    getSchemas() {
      this.httpService
        .postRequest(searchApi.schema.list, {
          organ: this.organNameGetter,
          system: "setting",
          build_state: buildState(),
        })
        .then((response) => {
          this.helpSchemaSetter(response.data?.setting);
          this.options = this.myActiveSchema?.category;
          this.value = this.myActiveSchema?.category[0];
          // this.options = response;
        });
    },
    select(e) {
      this.value = e;
      this.getList();
    },

    resetPagination() {
      this.pagination = {
        pages: 0,
        total: 0,
        page: 1,
        offset: 0,
        limit: 10,
      };
    },
    pageLimitChanged(paging) {
      this.resetPagination();
      this.pagination.limit = paging?.limit;

      this.getList();
    },
    pageChanged(paging) {
      let page = paging.pageNumber;
      page -= 1;
      this.pagination.offset = page * paging.limit;
      this.pagination.limit = paging.limit;
      this.pagination.page = paging.pageNumber;

      this.getList();
    },
    sortChanged(sorting) {
      this.pagination.page = this.pagination.offset = 0;
      this.sorting = sorting;

      this.getList();
    },
  },
};
</script>
<style scoped>
.multi {
  width: 200px;
  border: 2px solid rgb(127, 170, 170);
  border-radius: 0.5rem;
}
</style>