<template>
<NuxtLayout name="default" :menu="adminMenu">
<div class="pages section-page px-3 pb-0 pt-2">
<sub-header-with-select
canCreate="sections_new"
@open-form="toggleRolesPanel"
:showProjectSelect="$attrs.showProjectSelect"
:title="$t('Sections')"
>
</sub-header-with-select>
<div class="pages-content pb-0 pt-2">
<the-content-loading v-if="fetchingData"></the-content-loading>
<template v-if="canView">
<my-table
:tableActions="tableActions"
height="auto"
maxHeight="calc(100vh - 15em)"
class="my-table"
ref="sectionsTable"
:hasSearch="false"
:paginationInfo="pagination"
:sortingInfo="sorting"
:items="sections"
: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>
<no-data v-else>
<p class="text-center p-3">
<span class="tavasi tavasi-warning-circle"></span>
</p>
</no-data>
<!-- <div class="side-panel" v-if="showRoles">
<div class="panel-form-header">
<h6 class="">{{ $t("DepartmentManagement") }}</h6>
</div>
<div class="side-panel-content">
<form class="form" role="section" @submit.prevent="save()">
<div class="form-group">
<label for="section_title">{{ $t("SectionTitle") }}</label>
<input
type="text"
class="form-control"
id="section_title"
name="section_title"
v-model="selectedItemClone.section_title"
/>
</div>
<div class="form-group">
<label for="action_title">{{ $t("ActionTitle") }} </label>
<input
type="text"
class="form-control"
id="action_title"
name="action_title"
v-model="selectedItemClone.action_title"
/>
</div>
<div class="form-group">
<label for="section_tag"> {{ $t("SectionTag") }}</label>
<input
type="text"
dir="ltr"
class="form-control"
id="section_tag"
name="section_tag"
v-model="selectedItemClone.section_tag"
/>
</div>
<div class="form-group">
<label for="action_tag"> {{ $t("ActionTag") }}</label>
<input
type="text"
dir="ltr"
class="form-control"
id="action_tag"
name="action_tag"
v-model="selectedItemClone.action_tag"
/>
</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"></the-button-loading>
{{ $t("Submit") }}
</button>
<button
:disabled="loading"
@click.prevent="showRoles = false"
type="button"
class="btn btn-default"
data-dismiss="modal"
>
{{ $t("Cancel") }}
</button>
</div>
</div>
</form>
</div>
</div> -->
</div>
</div>
</NuxtLayout>
</template>
<script>
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";
export default {
name: "sections",
setup() {
definePageMeta({
name: "sections",
layout: false,
});
},
mounted() {
this.checkPermisionBeforGetList();
},
created() {
this.httpService = useNuxtApp()["$http"];
},
watch: {
projectGetter() {
this.showRoles = false;
this.checkPermisionBeforGetList();
},
getPanelStatus() {
this.toggleRolesPanel();
},
},
data() {
return {
adminMenu: adminMenu,
tableActions: [
{
showOutside: true,
show: true,
icon: "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: "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",
},
],
httpService: {},
canView: false,
fetchingData: false,
changeDetectionCounter: 1,
sections: [],
loading: false,
showRoles: false,
showBackButton: false,
selectedItemClone: {
action_tag: "",
action_title: "",
section_tag: "",
section_title: "",
project_id: undefined,
id: undefined,
},
prevSelectedItemIndex: undefined,
sorting: {
sortby: "",
sortorder: "", // asc | desc
},
pagination: {
page: 1,
pages: 0,
total: 0,
offset: 0, // page * per_page
limit: 10, //per_page
},
fetchingData: false,
tableColumns: [
{
isLink: true,
key: "section_title",
title: this.$t("Title"),
// title: "عنوان",
width: "2",
},
{
key: "action_title",
title: this.$t("Action"),
// "فرایند",
width: "2",
},
{
key: "section_tag",
title: this.$t("SectionTag"),
// "برچسب بخش",
width: "4",
},
{
key: "action_tag",
title: this.$t("ActionTag"),
// "برچسب فرایند",
width: "4",
},
],
};
},
computed: {
// ...mapGetters("permit", ["projectGetter"]),
// ...mapGetters(["getPanelStatus"]),
...mapState(usePermitStore, ["projectGetter"]),
...mapState(useCommonStore, ["getPanelStatus"]),
},
methods: {
...mapActions(useCommonStore, ["checkPermissions"]),
// ...mapMutations("permit", ["SET_PROJECT"]),
...mapActions(usePermitStore, ["SET_PROJECT"]),
async getSections() {
this.fetchingData = true;
const payload = {
project_id: this.projectGetter?.id,
isown: 3,
...this.sorting,
...this.pagination,
};
let url = "permit/" + apis.sections.list;
return await this.httpService
.postRequest(url, payload)
.then((res) => {
this.sections = res.data.data;
this.pagination = { ...this.pagination, ...res.data.pagination };
})
.finally(() => {
this.fetchingData = false;
this.changeDetectionCounter++;
});
},
save() {
const url = this.selectedItemClone.id
? apis.sections.edit
: apis.sections.add;
this.httpService.postRequest(url, this.selectedItemClone).then((res) => {
this.getSections();
this.mySwalToast({
title: "تبریک",
html: "اطلاعات با موفقیت ذخیره شد.",
icon: "success",
});
this.showRoles = false;
this.resetForm();
});
},
deleteItem(index) {
let sectionId = this.sections[index].id;
const data = {
project_id: this.projectGetter?.id,
id: sectionId,
};
this.mySwalConfirm({
title: "هشدار",
html: "از حذف این بخش مطمئن هستید؟",
icon: "warning",
}).then((result) => {
if (result.isConfirmed) {
this.httpService
.postRequest(apis.sections.delete, data)
.then((res) => {
this.getSections();
this.mySwalToast({
title: "تبریک",
html: "بخش با موفقیت حذف گردید.",
icon: "success",
});
});
}
});
},
updateList() {
this.resetPagination();
this.getSections();
},
resetPagination() {
this.pagination = {
pages: 0,
total: 0,
page: 1,
offset: 0,
limit: 10,
};
},
pageLimitChanged(paging) {
this.resetPagination();
this.pagination.limit = paging.limit;
this.getSections();
},
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.getSections();
},
sortChanged(sorting) {
// keep limit status.
// reset page and offset values.
this.pagination.page = this.pagination.offset = 0;
this.sorting = sorting;
this.getSections();
},
toggleRolesPanel(index = undefined) {
if (index !== undefined) {
if (this.prevSelectedItemIndex !== undefined)
this.sections[this.prevSelectedItemIndex].active = false;
this.prevSelectedItemIndex = index;
this.sections[index].active = true;
this.selectedItemClone = structuredClone(this.sections[index]);
} else this.resetForm();
this.showRoles = true;
},
resetForm() {
this.selectedItemClone = {
id: undefined,
action_tag: "",
action_title: "",
section_tag: "",
section_title: "",
project_id: this.projectGetter?.id,
};
},
checkPermisionBeforGetList() {
if (this.fetchingData) return;
this.fetchingData = true;
this.checkPermissions({ permission: "sections_view", _this: this })
.then(() => {
console.info("then");
if (this.projectGetter) {
this.getSections()
.then(() => {
this.canView = true;
this.fetchingData = false;
})
.catch(() => {
this.canView = false;
this.fetchingData = false;
});
} else {
console.info("getProjects");
this.getProjects().then(() => {
this.getSections()
.then(() => {
this.canView = true;
this.fetchingData = false;
})
.catch(() => {
this.canView = false;
this.fetchingData = false;
});
});
}
})
.catch((err) => {
console.info(err);
this.canView = false;
this.fetchingData = false;
});
},
async getProjects() {
return await this.httpService
.postRequest(apis.projects.list)
.then((res) => {
console.log(
"🚀 ~ returnawaitthis.httpService.postRequest ~ res:",
res
);
this.SET_PROJECT(res.data.data[0]);
});
},
},
components: {
// BreadCrumb: () => import("@components/BreadCrumb.vue"),
// 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")
// ),
},
};
</script>