base_ui/pages/admin/permit/role-permission.vue

<template>
   <NuxtLayout name="default" :menu="adminMenu">
  <div class="pages role-section-page p-3">
    <SubHeaderWithSelect
      :enableNewButton="false"
      :showProjectSelect="$attrs.showProjectSelect"
      @open-form="toggleRolesPanel()"
      title="دسترسی های کاربران"
    >
    </SubHeaderWithSelect>

    <div class="pages-content">
      <template v-if="canView">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-8 mx-auto">
              <ul class="nav nav-tabs mb-3">
                <li
                  v-for="({ id, title }, index) in roles"
                  :key="index"
                  :value="id"
                  class="nav-item"
                >
                  <a
                    class="nav-link text-center"
                    :class="{ active: activeTabIndex == index }"
                    :href="title"
                    @click.prevent="onTabClick(id, index)"
                  >
                    {{ title }}
                  </a>
                </li>
              </ul>

              <Accordion
                class="role-permission"
                canEdit="role-permission_edit"
                :role_id="role_id"
              ></Accordion>
            </div>
          </div>
        </div>
      </template>
      <no-data v-else>
        <the-content-loading v-if="fetchingData"></the-content-loading>

        <div v-else class="d-flex justify-content-center align-items-center">
          <div
            class="alert alert-warning d-flex justify-content-center align-items-center"
          >
            <span
              class="tavasi tavasi-warning-circle color-inherit ms-1 text__32"
            ></span>
            عدم دسترسی
          </div>
        </div>
      </no-data>
    </div>
  </div>
</NuxtLayout>
</template>

<script>
// import apis from "@permission/permitApi";
import apis from "~/apis/permitApi";
import adminMenu from "~/json/admin/json/menu.json";
import { defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { usePermitStore } from "~/stores/permitStore";
// import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name:"rolePermission",
  setup() {
    definePageMeta({
      name: "rolePermission",
      layout: false,
    });
  },
  components: {
    // BreadCrumb: () => import("@components/BreadCrumb.vue"),
    // Accordion: () => import("@permission/components/Accordion.vue"),
    // SubHeaderWithSelect: defineAsyncComponent(() =>
    //   import("@/components/global/SubHeaderWithSelect.vue")
    // ),
    // TheContentLoading: defineAsyncComponent(() =>
    //   import("@/components/global/TheContentLoading.vue")
    // ), 
    // TheButtonLoading: defineAsyncComponent(() =>
    //   import("@/components/global/TheButtonLoading.vue")
    // ),
    // MyTable: defineAsyncComponent(() =>
    //   import("@/components/global/MyTable.vue")
    // ),
    // NoData: defineAsyncComponent(() =>
    //   import("@/components/global/NoData.vue")
    // ),
    // BreadCrumb: defineAsyncComponent(() =>
    //   import("@/components/global/BreadCrumb.vue")
    // ),
    Accordion: defineAsyncComponent(() =>
      import("@/components/admin/components/Accordion.vue")
    ),
  },
  created() {
    this.httpService = useNuxtApp()["$http"];
  },
  data() {
    return {
      adminMenu:adminMenu,
      roles: [],
      httpService: {},
      collapseAll: false,
      role_id: undefined,
      roleSection: [],
      canView: false,
      fetchingData: false,
      activeTabIndex: 0,
    };
  },
  computed: {
    // ...mapGetters("permit", ["projectsGetter", "projectGetter"]),
    ...mapState(usePermitStore, ["projectGetter", "projectsGetter"]),
    projects() {
      return this.projectsGetter ?? [];
    },
    project_id: {
      get() {
        return this.projectGetter?.id;
      },
      set(newVal) {
        this.setProject(newVal);
      },
    },
  },
  methods: {
    // ...mapActions(["checkPermissions"]),

    // ...mapMutations("permit", ["SET_PROJECT"]),
    // ...mapActions("permit", ["getProjects"]),


    ...mapActions(useCommonStore, ["checkPermissions"]),
    ...mapActions(usePermitStore, ["SET_PROJECT"]),
    ...mapActions(usePermitStore, ["getProjects"]),

    onTabClick(id, index) {
      this.activeTabIndex = index;
      this.role_id = id;
    },
    async getRoles() {
      return await ApiService.formData(apis.roles.list, {
        project_id: this.projectGetter?.id,
      }).then((response) => {
        this.roles = response.data.data;

        this.role_id =
          this.roles && this.roles[0] ? this.roles[0].id : undefined;
      });
    },
    checkPermisionBeforGetList() {
      if (this.fetchingData) return;
      this.fetchingData = true;

      this.checkPermissions({ permission: "role-permission_view", _this: this })
        .then(() => {
          if (this.projectGetter) {
            this.getRoles()
              .then(() => {
                this.canView = true;
                this.fetchingData = false;
              })
              .catch(() => {
                this.canView = false;
                this.fetchingData = false;
              });
          } else {
            this.getProjects().then(() => {
              this.getRoles()
                .then(() => {
                  this.canView = true;
                  this.fetchingData = false;
                })
                .catch(() => {
                  this.canView = false;
                  this.fetchingData = false;
                });
            });
          }
        })
        .catch(() => {
          this.canView = false;
          this.fetchingData = false;
        });
    },
    async getProjects() {
      return await ApiService.formData(apis.projects.list).then((res) => {
        this.SET_PROJECT(res.data.data[0]);
      });
    },
    setProject(id) {
      // const id = +$ev.target.value;
      const result = this.projects.findIndex((item) => item.id === id);
      const project = this.projects[result];

      this.SET_PROJECT(project);
    },
  },
  mounted() {
    this.checkPermisionBeforGetList();
  },
  //   watch: {
  // projectGetter() {
  //   this.checkPermisionBeforGetList();
  // },
  //   },
};
</script>