462 lines
12 KiB
Vue
462 lines
12 KiB
Vue
<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>
|