search_ui/components/entity/components/EntityImportEffect.vue
2025-02-01 14:36:10 +03:30

465 lines
12 KiB
Vue

<template>
<div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center mb-3">
<span class="font-weight-semi-bold"> قانون اثرگذار: &nbsp;&nbsp;</span>
<span class="mb-0">{{ entity.title }}</span>
</div>
</div>
<div
class="mb-3 d-flex justify-content-between align-items-center d-block d-md-none"
>
<button class="btn btn-primary" @click="toggleSidebar">
پیشنهاد هوشمند برای قانون
</button>
<button
@click.prevent="openModal"
:disabled="Boolean(entity?.islock)"
type="button"
class="btn btn-primary me-auto"
>
<svg class="icon icon-Component-133--1">
<use xlink:href="#icon-Component-133--1"></use>
</svg>
افزودن
</button>
</div>
<div class="row mt-2">
<div class="sidebar col-md-4" :class="{ show: sidebarOpen }">
<div class="d-flex justify-content-between align-items-center mb-3">
<h6 class="font-weight-semi-bold">
پیشنهاد هوشمند برای قانون اثرپذیر:
</h6>
<button class="btn d-block d-md-none" @click="toggleSidebar">
<svg class="icon icon-Component-21--1">
<use xlink:href="#icon-Component-21--1"></use>
</svg>
</button>
</div>
<ul class="matching-laws-list firefox-scrollbar">
<li
v-for="(effLaw, index) in effectiveLaws.matching_laws"
:key="index"
>
<button
@click.prevent="openModal(effLaw, 2)"
type="button"
class="btn"
>
<strong> {{ index + 1 }}.&nbsp; </strong>
{{ effLaw.title }}
</button>
</li>
</ul>
</div>
<div class="col-12 col-md-8">
<div class="d-flex align-items-center mb-3">
<h6 class="font-weight-semi-bold mb-0">فهرست تنقیحات قانون جاری</h6>
<button
@click.prevent="openModal"
type="button"
class="btn btn-primary me-auto d-none d-md-block"
:disabled="Boolean(entity?.islock)"
>
<svg class="icon icon-Component-133--1">
<use xlink:href="#icon-Component-133--1"></use>
</svg>
افزودن
</button>
</div>
<my-table
:height="' calc(100dvh - 31em)'"
:hasSearch="false"
:fetchingData="fetchingData"
:items="listEffects"
:tableActions="tableActions"
:tableColumns="tableColumns"
:paginationInfo="pagination"
:sortingInfo="sorting"
@edit-table-item="onEditTableItem"
@delete-table-item="onDeleteTableItem"
/>
</div>
</div>
<base-modal-v2
v-if="showModal"
@close="closeModal"
:showHeaderCloseButton="true"
:hasFooter="Boolean(!entity?.islock)"
@save="saveEffectModal"
modalSize="modal-lg"
:modalTitle="modalTitle"
maxHeight="30em"
:showDeleteButton="false"
>
<slot> {{ modalTitle }}</slot>
<slot name="body">
<EntityImportEffectModal
ref="effectmodal"
:numberCurrentTab="numberCurrentTab"
:selectedLawId="selectedLawId"
:entity="entity"
:effectData="currentEffect"
></EntityImportEffectModal>
</slot>
</base-modal-v2>
</div>
</template>
<script>
import repoApi from "~/apis/repoApi";
import aiToolsApi from "~/apis/aiToolsApi";
import { mapState } from "pinia";
export default {
props: {
entityProp: {
default() {
return {};
},
},
},
beforeMount() {
this.httpService = useNuxtApp()["$http"];
this.entity = this.entityProp;
},
mounted() {
this.listEffects = [];
if (this.entity?.effects) this.listEffects = this.entity?.effects;
this.tableColumns = this.draftActiveStepGetter?.table_columns;
this.getEffectiveLaws();
},
data() {
return {
tableActions: [
{
showOutside: true,
show: true,
icon: "tavasi tavasi-Component-242--1",
title: "ویرایش",
to: {
name: "undefined",
},
selected: false,
disabled: false,
howToOpen: "",
href: "",
class: "edit-btn",
action: "edit-table-item",
// can: "subject-",
},
{
showOutside: true,
show: true,
icon: "tavasi tavasi-Component-295--1",
title: "حذف",
to: {
name: "undefined",
},
selected: false,
disabled: false,
howToOpen: "",
href: "",
class: "delete-btn",
action: "delete-table-item",
},
],
pagination: {
pages: 0,
total: 0,
page: 1,
offset: 0,
limit: 10,
},
sorting: {
sortby: "created",
sortorder: undefined, // asc | desc | none
},
listEffects: [],
effectiveLaws: [],
httpService: undefined,
fetchingData: false,
sidebarOpen: false,
showModal: false,
modalTitle: null,
selectedLawId: undefined,
numberCurrentTab: 1,
entity: {},
formData: "",
currentEffect: {},
tableColumns: [],
};
},
computed: {
...mapState("entity", [
"draftActiveStepGetter",
"draftActiveSchemaGetter",
]),
...mapState(["isSidebarCollapsed", "currentUser"]),
},
methods: {
//داخل مدال اصلی ذخیره انجام می شود و دیگر نیازی به ذخیره از طریق دیگر نیست
isChanged() {
return false;
},
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
},
saveEffectModal() {
this.formData = this.$refs.effectmodal.getFormDataForSave();
// console.log(this.formData);
this.saveEntityProperty().then(() => {
this.closeModal();
});
},
async saveEntityProperty() {
if (this.fetchingData) return;
this.fetchingData = true;
let field_key = this.draftActiveStepGetter.key;
let payload = {};
payload[field_key] = this.formData;
let url = "";
if (this.formData.id) {
url = repoUrl() + repoApi.public.updateProperty_byid;
url = url.replace("{{prop_id}}", this.formData.id);
} else {
url = repoUrl() + repoApi.public.updateProperty;
}
let key = this.draftActiveSchemaGetter.index_key;
url = url.replace("{{index_key}}", key);
url = url.replace("{{entity_id}}", this.entity?._id);
url = url.replace("{{property}}", field_key);
// let index = listEffects.findIndex((item) => item?.id == this.formData.id);
// if (index != -1) {
// listEffects[index] = this.formData;
// }
return await this.httpService
.postRequest(url, payload)
.then((res) => {
this.entity = res._source;
this.entity["_id"] = res._id;
this.entity["id"] = res._id;
this.listEffects = this.entity?.effects;
this.mySwalToast({
html: res?.message ?? "با موفقیت ثبت شد.",
});
this.fetchingData = false;
return true;
})
.catch((err) => {
this.fetchingData = false;
return err;
});
},
deleteEntityProperty() {
if (!this.currentEffect) return;
let field_key = this.draftActiveStepGetter.key;
let payload = {};
let url = "";
let item_data = [];
if (!this.entity?.id || !this.entity[field_key]) return;
item_data = this.entity[field_key];
if (this.currentEffect?.id) {
url = repoUrl() + repoApi.public.deleteProperty_byid;
url = url.replace("{{prop_id}}", this.currentEffect?.id);
//edit state
let index = item_data.findIndex(
(item) => item?.id == this.currentEffect.id
);
if (index != -1) {
item_data.splice(index, 1);
}
} else {
// error
return;
}
payload[field_key] = item_data;
this.entity[field_key] = item_data;
let key = this.draftActiveSchemaGetter.index_key;
url = url.replace("{{index_key}}", key);
url = url.replace("{{entity_id}}", this.entity?._id);
url = url.replace("{{property}}", field_key);
let vm = this;
this.httpService
.postRequest(url, payload)
.then((res) => {
// console.log(res);
vm.entity = { ...res, ...res._source };
vm.listEffects = vm.entity._source?.effects;
this.mySwalToast({
title: "موفق",
html: res.message,
icon: "success",
});
})
.catch((err) => {
this.mySwalToast({
title: "خطا!!!",
html: err?.message,
icon: "error",
});
})
.finally(() => {});
},
getEffectiveLaws() {
let payload = {
caption: this.entity.title,
};
let url = aiToolsApi.nlp.effective_laws;
this.httpService.postRequest(url, payload).then((res) => {
this.effectiveLaws = res;
});
},
onEditTableItem(index) {
if (index < 0 || index >= this.listEffects.length) return;
this.selectedLawId = this.currentEffect?.to_qanon_id;
this.currentEffect = this.listEffects[index];
this.numberCurrentTab = 2;
this.showModal = true;
},
onDeleteTableItem(index) {
this.mySwalConfirm({
title: "هشدار!!!",
html: `از حذف اطلاعات جاری اطمینان دارید؟ `,
icon: "warning",
}).then((result) => {
if (result.isConfirmed) {
if (index < 0 || index >= this.listEffects.length) return;
this.currentEffect = this.listEffects[index];
this.deleteEntityProperty();
}
});
},
resetPagination() {
this.pagination = {
pages: 0,
total: 0,
page: 0,
offset: 0,
limit: 10,
};
},
pageLimitChanged(paging) {
this.resetPagination();
this.pagination.limit = paging.limit;
},
pageChanged(paging) {
let page = paging.pageNumber;
page -= 1;
this.pagination.offset = this.pagination.page * paging.limit;
this.pagination.limit = paging.limit;
this.pagination.page = paging.pageNumber;
},
sortChanged(sorting) {
this.resetPagination();
this.sorting = sorting;
},
openModal(effLaw, number = 1) {
this.showModal = true;
this.numberCurrentTab = number;
this.selectedLawId = effLaw.id;
this.currentEffect = undefined;
},
closeModal() {
this.showModal = false;
},
},
};
</script>
<style scoped lang="scss">
.matching-laws-list {
overflow-y: auto;
padding: 0.5em;
// min-height: 28em;
// max-height: 28em;
height: calc(100dvh - 28em);
border-radius: 0.25em;
background-color: #fbfbfb;
li:hover {
background-color: var(--list-background-color);
}
}
@media (max-width: 575.98px) {
.sidebar {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100dvh;
background-color: #fff;
color: black;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1050;
overflow-y: auto;
&.show {
transform: translateX(0);
margin-right: 0.6em;
}
.tree-section {
height: 95%;
}
}
.matching-laws-list {
height: calc(100dvh - 4em) !important ;
}
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
.sidebar {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100dvh;
background-color: #fff;
color: black;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 1050;
overflow-y: auto;
&.show {
transform: translateX(0);
margin-right: 0.6em;
}
.tree-section {
height: 95%;
}
}
.matching-laws-list {
height: calc(100dvh - 4em) !important ;
}
}
</style>