<template> <NuxtLayout name="default" :menu="adminMenu"> <div class="pages role-page px-3 pb-0 pt-2"> <sub-header-with-select canCreate="roles_new" @open-form="toggleRolesPanel" :showProjectSelect="$attrs.showProjectSelect" title="نقش ها" ></sub-header-with-select> <div class="pages-content pb-0 pt-2"> <template v-if="canView"> <my-table :tableActions="tableActions" height="auto" maxHeight="calc(100vh - 9em)" class="my-table" ref="rolesTable" :hasSearch="false" :paginationInfo="pagination" :sortingInfo="sorting" :items="roles" :fetchingData="fetchingData" :tableColumns="tableColumns" :totalPages="pagination.pages" @delete-table-item="deleteItem" @edit-table-item="toggleRolesPanel" @page-changed="pageChanged" @page-limit-changed="pageLimitChanged" @sort-changed="sortChanged" ></my-table> </template> <NoData 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> </NoData> <div class="side-panel" v-if="showPanel"> <div class="side-panel-header"> <h6 class="">مدیریت نقش ها</h6> </div> <div class="side-panel-content"> <form class="section-form" role="section" @submit.prevent="save()"> <div class="form-group"> <label for="title">عنوان نقش</label> <input type="text" class="form-control" id="title" name="title" v-model="selectedItemClone.title" /> </div> <div class="side-panel-footer mt-4"> <div> <button type="submit" class="btn btn-outline-primary" :disabled="loading" @click.prevent="save()" > <the-button-loading v-if="loading" :style="{ transform: 'scale(0.5)' }" ></the-button-loading> ثبت </button> <button :disabled="loading" @click.prevent="showPanel = false" type="button" class="btn btn-default" data-dismiss="modal" > لغو </button> </div> <div> <button v-if="selectedItemClone.id" @click="deleteItem(selectedItemClone.id)" title="حذف" class="btn delete-btn btn-outline-danger" type="button" > <svg class="icon icon-Component-295--1"> <use xlink:href="#icon-Component-295--1"></use> </svg> حذف </button> </div> </div> </form> </div> </div> </div> </div> </NuxtLayout> </template> <script> // import permitApi from "@permission/permitApi"; import apis from "~/apis/permitApi"; import adminMenu from "~/json/admin/json/menu.json"; // import { mapGetters, mapMutations, mapActions } from "vuex"; import { defineAsyncComponent } from "vue"; import { mapActions, mapState } from "pinia"; import { useCommonStore } from "~/stores/commonStore"; import { usePermitStore } from "~/stores/permitStore"; export default { name: "Roles", setup() { definePageMeta({ name: "Roles", layout: false, }); }, mounted() { this.checkPermisionBeforGetList(); }, created() { this.httpService = useNuxtApp()["$http"]; }, watch: { projectGetter() { this.showPanel = false; this.checkPermisionBeforGetList(); }, }, data() { return { adminMenu:adminMenu, httpService: {}, tableActions: [ { showOutside: true, show: true, icon: "Component-242--1", title: "ویرایش", 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: "Component-295--1", title: "حذف", to: { name: "undefined", }, selected: false, disabled: false, howToOpen: "", href: "", class: "delete-btn", action: "delete-table-item", can: "item-list_delete", }, ], canView: false, fetchingData: false, tableColumns: [ { isLink: true, key: "title", title: "عنوان", width: "2", }, ], pagination: { page: 1, pages: 0, total: 0, offset: 0, // page * per_page limit: 10, //per_page }, sorting: { sortby: "id", sortorder: "asc", // asc | desc | none }, roles: [], loading: false, showPanel: false, selectedItemClone: { title: "", id: undefined, // project_id: undefined, }, prevSelectedItemIndex: undefined, }; }, computed: { // ...mapGetters("permit", ["projectGetter"]), ...mapState(usePermitStore, ["projectGetter"]), }, methods: { // ...mapActions(["checkPermissions"]), // ...mapMutations("permit", ["SET_PROJECT"]), ...mapActions(useCommonStore, ["checkPermissions"]), ...mapActions(usePermitStore, ["SET_PROJECT"]), async getRoles() { this.fetchingData = true; const payload = { // project_id: this.projectGetter?.id, isown: 3, ...this.sorting, ...this.pagination, }; return await ApiService.formData(permitApi.roles.list, payload) .then((res) => { this.roles = res.data.data; this.pagination = { ...this.pagination, ...res.data.pagination }; }) .finally(() => { this.fetchingData = false; this.changeDetectionCounter++; }); }, save() { const url = this.selectedItemClone.id ? permitApi.roles.edit : permitApi.roles.add; ApiService.formData(url, this.selectedItemClone).then((res) => { this.getRoles(); this.mySwalToast({ title: "تبریک", html: res.data.message, icon: "success", }); this.showPanel = false; this.resetForm(); }); }, deleteItem(index) { let sectionId = this.roles[index].id; const data = { // project_id: this.projectGetter?.id, id: sectionId, }; this.mySwalConfirm({ title: "هشدار", html: "از حذف این بخش مطمئن هستید؟", icon: "warning", }).then((result) => { if (result.isConfirmed) { ApiService.formData(permitApi.roles.delete, data).then((res) => { this.getRoles(); this.mySwalToast({ title: "تبریک", html: res.data.message, icon: "success", }); }); } }); }, updateList() { this.resetPagination(); this.getRoles(); }, resetPagination() { this.pagination = { pages: 0, total: 0, page: 1, offset: 0, limit: 10, }; }, pageLimitChanged(paging) { this.resetPagination(); this.pagination.limit = paging.limit; this.getRoles(); }, 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.getRoles(); }, sortChanged(sorting) { // keep limit status. // reset page and offset values. this.pagination.page = this.pagination.offset = 0; this.sorting = sorting; this.getRoles(); }, toggleRolesPanel(index = undefined) { if (index !== undefined) { if (this.prevSelectedItemIndex !== undefined) this.roles[this.prevSelectedItemIndex].active = false; this.prevSelectedItemIndex = index; this.roles[index].active = true; this.selectedItemClone = structuredClone(this.roles[index]); } else this.resetForm(); this.showPanel = true; }, resetForm() { this.selectedItemClone = { title: "", id: undefined, // project_id: this.projectGetter?.id, }; }, checkPermisionBeforGetList() { if (this.fetchingData) return; this.fetchingData = true; this.checkPermissions({ permission: "roles_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(permitApi.projects.list).then((res) => { this.SET_PROJECT(res.data.data[0]); }); }, }, components: { // SubHeaderWithSelect: defineAsyncComponent(() => // import("@/components/global/SubHeaderWithSelect.vue") // ), // TheContentLoading: defineAsyncComponent(() => // import("@/components/global/TheContentLoading.vue") // ), // MyTable: defineAsyncComponent(() => // import("@/components/global/MyTable.vue") // ), // NoData: defineAsyncComponent(() => // import("@/components/global/NoData.vue") // ), // TheButtonLoading: defineAsyncComponent(() => // import("@/components/global/TheButtonLoading.vue") // ), }, }; </script> <style scoped lang="scss"></style>