base_ui/layouts/jahat/layout/EntityList.vue

657 lines
16 KiB
Vue
Raw Permalink Normal View History

2025-02-01 09:34:55 +00:00
<template>
<!-- <div style="height: 100vh; overflow: auto"> -->
<div>
<!-- <button
class="filters__open-btn--top btn buttonshow"
id="buttonshow"
@click="showfilter"
>
<svg
data-v-46e9fe5b=""
data-testid="chevron-double-lg-left-icon"
class="s12 icon-chevron-double-lg-left"
>
<use
data-v-46e9fe5b=""
href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
></use>
</svg>
</button> -->
<div class="button-change">
<switch-component
@change-mode="topRepeatInListMode = !topRepeatInListMode"
name="top-repeat"
></switch-component>
<!-- "critions" -->
<div
v-if="entity_type != getEntityTypeId('answer')"
class="record-problem"
>
<a
v-can="'issues_create'"
title="ثبت مساله"
href="ثبت مساله"
class="text__14 text__blue button"
@click.prevent="openIssueModal"
>ثبت {{ getEntityName(entity_type) }}</a
>
</div>
</div>
<div v-if="topRepeatInListMode">
<div
ref="filterdiv"
class="jahat__sidebar scroll-needed hide"
id="showDiv"
:class="{ expanded: !isSidebarCollapsed }"
>
<ul class="sidebar-menu sidebar-menu--simple buttonhide">
<li>
<a
href="javascript:void(0)"
@click.prevent="updateListSpecial(1)"
class="text__14"
>{{ entitiesTitle }} جدید</a
>
</li>
<li>
<a
href="javascript:void(0)"
@click.prevent="updateListSpecial(2)"
class="text__14"
>{{ entitiesTitle }} ویرایشی</a
>
</li>
<li>
<a
href="javascript:void(0)"
@click.prevent="updateListSpecial(3)"
class="text__14"
>{{ entitiesTitle }} تولیدی من</a
>
</li>
<li>
<a
href="javascript:void(0)"
@click.prevent="updateListSpecial(4)"
class="text__14"
>{{ entitiesTitle }} مشارکتی من</a
>
</li>
<button
type="bu"
@click.prevent="hidefilter"
class="text__14 btn btnHide"
id="btnHide"
>
<svg
data-v-46e9fe5b=""
data-testid="chevron-double-lg-left-icon"
class="s12 icon-chevron-double-lg-left"
>
<use
data-v-46e9fe5b=""
href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
></use>
</svg>
&nbsp; بستن
</button>
</ul>
</div>
<div
class="jahat__content-container"
:class="{ expanded: !isSidebarCollapsed }"
>
<!-- <div
v-if="entity_type == getEntityTypeId('issue')"
class="jahat__fixed-btn"
>
<a
v-can="'issues_create'"
title="ثبت مساله"
href="ثبت مساله"
class="text__14 text__blue button"
@click.prevent="openIssueModal"
>ثبت مساله</a
>
</div> -->
<the-content-loading v-if="fetchingData"></the-content-loading>
<div v-if="canView">
<div v-if="!fetchingData">
<EntityContent
v-if="pagination.total"
:creationFilters="creationFilters"
:subjectFilters="subjectFilters"
@add-filter="updateListAfterFilterAdded"
@remove-filter="updateListAfterFilterRemoved"
@delete-entity="deleteEntity"
@edit-entity="editEntity"
@open-subject-modal="openSubjectModal"
:type="listType"
:entities="listEntity"
class="entity-content"
:class="{ 'chart-and-list-mode': topRepeatInListMode }"
/>
<no-data v-else>
<p class="text-center p-3">مسئله ای ثبت نشده است.</p>
</no-data>
</div>
</div>
<no-data v-else>
<p class="text-center p-3">
<span class="tavasi tavasi-warning-circle"></span>
عدم دسترسی
</p>
</no-data>
<jahat-pagination
v-if="pagination.total"
:paginationInfo="pagination"
@page-changed="pageChanged"
@page-limit-changed="pageLimitChanged"
@sort-changed="sortChanged"
>
</jahat-pagination>
<jahat-modal
@close-modal="closeModal"
:showHeaderCloseButton="true"
v-if="showModal"
title="ایجاد مسئله"
>
<problem-modal
v-if="showIssueModal"
:data="entity"
@close-modal="closeModal"
@problem-added="closeModal"
>
</problem-modal>
<subject-form
v-if="showSubjectModal"
@update-list="closeModal"
@delete-item="updateListSpecial"
projectTagsName="jahat"
></subject-form>
</jahat-modal>
</div>
</div>
<div v-else>
<ChartContent
:class="{ 'chart-and-list-mode': topRepeatInListMode }"
class="ChartContent"
></ChartContent>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from "pinia";
import { entityMixin } from "~/jahat/mixins/entityMixin";
import { commonMixin } from "~/jahat/mixins/commonMixin";
import repoApi from "~/apis/repoApi";
// import { propertyModalMixin } from "~/jahat/mixins/propertyModalMixin";
export default {
mixins: [entityMixin, commonMixin],
mounted() {
this.checkPermissions({
permission: `${this.$route.name}_list`,
_this: this,
})
.then(() => {
this.entity_type =
this.$route.meta.entityType === undefined
? 1
: this.$route.meta.entityType;
this.entitiesTitle = this.getEntityTitle(this.entity_type);
this.getList(this.entity_type);
this.canView = true;
})
.catch(() => {
this.canView = false;
});
},
watch: {
$route: {
handler(newRoute, oldRoute) {
this.checkPermissions({
permission: `${newRoute.name}_list`,
_this: this,
})
.then(() => {
this.entity_type =
this.$route.meta.entityType === undefined
? 1
: this.$route.meta.entityType;
this.entitiesTitle = this.getEntityTitle(this.entity_type);
if (oldRoute.name != newRoute.name) {
newRoute.query.page = undefined;
history.pushState({}, document.title, newRoute.path);
// this.$router.replace({ query: {...this.$route.query, page: undefined}})
this.resetPagination();
}
this.fetchingData = false;
this.getList(this.entity_type);
this.canView = true;
})
.catch(() => {
this.canView = false;
});
},
nested: true,
// immediate: true,
},
},
data() {
return {
topRepeatInListMode: true,
subjectFilters: new Map(),
creationFilters: new Map(),
showSubjectModal: false,
showIssueModal: false,
canView: true,
// modal: "answer-modal",
entity_type: 1,
entitiesTitle: "مسائل",
listType: 1,
listEntity: [],
entity: {},
modal: undefined,
modal_title: null,
modal_data: {
entity: {},
keyName: "",
index: -1,
},
showfilters: 2,
};
},
computed: {
...mapState(["schemasGetter", "isSidebarCollapsed"]),
},
methods: {
...mapActions(["checkPermissions"]),
...mapActions("list", [
"SET_SELECTED_PROJECT",
"SET_LIST_ID",
"SET_LIST",
"SET_SELECTED_ITEM",
]),
//mehdi
showfilter() {
this.$refs.filterdiv.classList.add("show");
this.$refs.filterdiv.classList.remove("hide");
document.getElementById("buttonshow").style.display = "none";
document.getElementById("btnHide").style.display = "inline-block";
// document.getElementById("showDiv").style.display = "inline-block";
},
hidefilter() {
this.$refs.filterdiv.classList.remove("show");
this.$refs.filterdiv.classList.add("hide");
document.getElementById("buttonshow").style.display = "inline-block";
document.getElementById("btnHide").style.display = "none";
},
//mehdi
openSubjectModal(entity) {
this.showSubjectModal = true;
this.entity = entity._source;
this.SET_SELECTED_ITEM(this.entity);
this.beforeShowModal();
},
openIssueModal() {
this.showIssueModal = true;
this.entity = {
title: "",
description: "",
// weight: 0,
};
// console.log(this.entity);
this.beforeShowModal();
},
deleteEntity(entity) {
this.mySwalConfirm({
title: "هشدار!!!",
html: `از حذف این مورد اطمینان دارید؟ `,
icon: "warning",
}).then((result) => {
setTimeout(() => {
this.updateListSpecial(1);
}, 1000);
if (result.isConfirmed) {
let url = repoApi.entity.delete_jahat;
url = url.replace("{{entity_id}}", entity._id);
this.httpService
.postRequest(url)
.then((res) => {
this.getList(this.entity_type);
this.mySwalToast({
html: res.data.message,
icon: "success",
});
// this.getListSpecial(this.entity_type, this.listType);
// this.updateListSpecial()
})
.catch((err) => {
// this.mySwalToast({
// title: "خطا!!!",
// html: err.message,
// icon: "error",
// });
});
}
});
},
editEntity(entity) {
this.showIssueModal = true;
this.entity = entity._source;
this.beforeShowModal();
},
openModal(modal, property = null, index = -1) {
this.modal = modal;
// this.modal_data.entity = this.entity;
// this.modal_data.index = index;
// this.modal_data.keyName = property;
// this.modal_title = ev.target?.title ?? 'بدون عنوان';
this.beforeShowModal();
},
beforeShowModal() {
this.showModal = true;
setTimeout(() => {
$("#jahat-modal").modal(
{ backdrop: "static", keyboard: false },
"show"
);
}, 500);
},
closeModal() {
$("#jahat-modal").modal("hide");
setTimeout(() => {
this.showModal = false;
this.showSubjectModal = false;
this.showIssueModal = false;
this.updateListSpecial(1);
}, 500);
},
updateListAfterFilterAdded(filter, filterObject = "subjectFilters") {
if (!this[filterObject].has(filter.id)) {
this[filterObject].set(filter.id, filter);
this.getList(this.entity_type);
}
this.updateListSpecial();
},
updateListAfterFilterRemoved(filter, filterObject = "subjectFilters") {
if (this[filterObject].has(filter.id)) {
this[filterObject].delete(filter.id);
this.getList(this.entity_type);
}
},
updateListSpecial(listType = 0) {
this.listType = listType;
if (listType == 0) this.getList(this.entity_type);
else this.getListSpecial(this.entity_type, listType);
},
// addToList(input) {
// let e = {};
// e._source = { ...input.item };
// this.listEntity.unshift(e);
// this.paginationInfo.total += 1;
// },
},
};
</script>
<style scoped lang="scss">
.showBtn {
display: none;
}
.btn-hide {
display: none;
}
.jahat__sidebar {
top: 55px;
padding-right: 100px;
}
.btnHide {
display: none;
}
.btnHide svg {
transform: rotate(180deg);
}
.jahat__fixed-btn {
// top: calc(var(--headerHeight) + 7px);
// left: 8em
}
.button-change {
left: 1em;
width: 100%;
height: 40px;
position: absolute;
top: 6em;
display: flex;
justify-content: flex-end;
align-items: center;
// margin-top: 0rem;
// z-index: 9;
// background-color: white;
// padding: 2rem;
div {
margin: 0 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.buttonshow {
position: fixed;
color: inherit;
right: 5px;
top: 65px;
width: 50px;
height: 50px;
z-index: 999999;
}
.btnHide {
position: absolute;
display: inline-block;
left: 0px;
}
.btnHide svg {
transform: rotate(180deg);
}
.m1 {
background-color: red;
}
.hide {
transform: translateX(80%);
display: none;
}
.show {
transform: translateX(0);
}
#showDiv {
top: 55px;
}
.titelAnswerText {
max-width: 150px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
.buttonshow {
position: fixed;
color: inherit;
right: 5px;
top: 65px;
width: 50px;
height: 50px;
z-index: 999999;
}
.btnHide {
position: absolute;
display: inline-block;
left: 0px;
}
.btnHide svg {
transform: rotate(180deg);
}
.hide {
transform: translateX(80%);
display: none;
}
.show {
transform: translateX(0);
}
#showDiv {
top: 55px;
}
.titelAnswerText {
max-width: 150px;
}
}
@media (max-width: 575.98px) {
.button-change {
left: 0em;
top: 8em;
}
.buttonshow {
position: fixed;
color: inherit;
right: 5px;
top: 95px;
width: 50px;
height: 50px;
z-index: 999999;
}
.button-change {
margin-top: 2rem;
}
.btnHide {
position: absolute;
display: inline-block;
left: 0px;
}
.m1 {
background-color: red;
}
.hide {
display: none;
}
.show {
transform: translateX(0);
}
#showDiv {
top: 95px;
}
.titelAnswer {
display: none;
}
.jahat-header__pagination {
top: 0px !important;
position: relative !important ;
}
.jahat__sidebar {
top: 108px !important;
}
}
</style>
<!-- <style lang="scss">
// @media only screen and (max-width: 575.98px) {
// .jahat__content-container {
// .problem-detail {
// .problem-detail__section {
// .problem-slider {
// .flickity {
// .flickity-viewport {
// .flickity-slider {
// // .jahat-system .problem-slider__cell {
// // width: 100% !important;
// // }
// // .jahat-system .problem-files--answer .problem-files__cell {
// // width: 100% !important;
// // }
// // .flickity-slider .problem-files__cell .is-selected {
// // width: 100% !important;
// // }
// .problem-slider__cell{
// width: 100%;
// }
// .problem-files__cell {
// width: 100% !important;
// // height: 170px;
// }
// .problem-slider__pic {
// img {
// width: 95%;
// }
// }
// }
// }
// }
// }
// .problem-section__content{
// .problem-files{
// .flickity {
// .flickity-viewport {
// .flickity-slider {
// .problem-slider__cell{
// width: 100%;
// }
// .problem-files__cell {
// width: 100% !important;
// // height: 170px;
// }
// .problem-slider__pic {
// img {
// width: 95%;
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
</style> -->