front/search_ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
search_ui/pages/search/(show)/[key]/[id]/index.vue

1839 lines
60 KiB
Vue
Raw Permalink Normal View History

first commit
2025-02-01 11:06:10 +00:00
<template>
<NuxtLayout name="search-layout" :menu="sidbarMenu">
<!-- <Head> -->
<!-- <Title>{{ metaTitle }}</Title> -->
<!-- <Meta name="description" :content="title" /> -->
<!-- <Style type="text/css" children="body { background-color: green; }" ></Style> -->
<!-- </Head> -->
<div class="container-fluid">
<div class="row">
<!-- #region منو سمت راست -->
<div class="col-auto col-md-3">
<template v-if="!isMajlesBuild() && showListRight">
<div
class="filter-list-container"
:class="{ expanded: showFilter }"
>
<ul
:class="buildName() + '-header-color'"
v-if="$route.name != 'research'"
class="nav nav-tabs pt-1 d-none d-xl-flex"
>
<li class="nav-item desktop">
<button
title=""
type="button"
@click.prevent="setActiveListType('Navigation', 'simple')"
class="btn nav-link"
:class="{
active: activeListType == 'simple',
}"
>
{{ listTabTitle1 }}
</button>
</li>
<li class="nav-item desktop">
<button
title=""
type="button"
@click.prevent="setActiveListType('UserHistory', 'history')"
class="btn nav-link"
:class="{
active: activeListType == 'history',
}"
>
{{ listTabTitle2 }}
</button>
</li>
</ul>
<div class="mobile-mode d-lg-none">
<button
v-if="showFilter"
class="btn mb-1"
@click.prevnet="showFilter = !showFilter"
>
<svg class="icon icon-chevron-double-right ms-1">
<use xlink:href="#icon-chevron-double-right"></use>
</svg>
</button>
</div>
<component
:key="renderResearch"
class="main-filter"
:item="getPanelComponent"
:is="panelComponentName"
ref="panelComponent"
@fishHandlerInResearch="researchModalHandler"
@content-updated="updateMainContent"
></component>
</div>
</template>
</div>
<!-- #endregion -->
<!-- #region بخش محتوای اصلی سایت -->
<div :class="columnClass">
<!-- #region بخش هِدر -->
<div
class="row align-items-center"
:class="buildName() + '-header-color'"
>
<div class="pt-2 d-flex justify-content-between align-items-center">
<div class="d-md-none">
<div class="d-flex align-items-center">
<button
name="button"
type="button"
class="toggle-mobile-nav dropdown-hamburger pe-0"
@click.prevent="toggleSidebarMenu()"
>
<span class="sr-only">باز کردن منوی کنار</span>
<svg class="s18" data-testid="sidebar-icon">
<use href="~/assets/common/img/icons.svg#sidebar"></use>
</svg>
</button>
</div>
</div>
<div class="">
<div class="nav-tabs-container nav-tabs justify-content-start">
<ul v-if="navList" class="nav al">
<li
class="nav-item desktop"
v-for="(navItem, index) in navList"
:key="index"
>
<button
:title="navItem.title"
type="button"
class="btn nav-link"
@click.prevent="setActiveTab(navItem)"
:class="{
active: activeTabGetter?.key == navItem.key,
}"
>
{{ navItem.title }}
</button>
</li>
<li
class="nav-item mobile tabs-more-btn d-lg-none d-flex align-items-center"
v-if="navList?.length > 3"
>
<div class="dropdown">
<button
class="btn"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<svg class="icon icon-Component-81--1">
<use xlink:href="#icon-Component-81--1"></use>
</svg>
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a
class="dropdown-item"
href="#"
v-for="(navItem, index) in navList"
:key="index"
@click.prevent="setActiveTab(navItem)"
:class="{
active: activeTabGetter?.key == navItem.key,
}"
v-if="index > 2"
>{{ navItem.title }}</a
>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="d-none d-lg-block">
<auto-complation
:key="'auto' + renderAutoComplation"
:showAppend="false"
class="entityTheme entity-auto-complation"
ref="autoComplationRef"
:contentKey="activeEntityViewSchemaGetter?.key"
:textSearch="$route.query?.searchtext ?? ''"
:placeholder="autoComplationPlaceholder"
@onSelectHistory="onSelectHistory"
></auto-complation>
</div>
<div class="d-lg-none">
<a
class=""
type="button"
data-bs-toggle="collapse"
data-bs-target="#mobileCollapse"
aria-expanded="false"
aria-controls="collapseExample"
name="button"
>
<svg class="icon icon-Component-198--1">
<use xlink:href="#icon-Component-198--1"></use>
</svg>
</a>
</div>
</div>
<div id="mobileCollapse" class="collapse d-lg-none">
<div class="col-12 d-flex justify-content-center">
<div class="col-10 col-sm-6">
<auto-complation
:key="'auto' + renderAutoComplation"
:showAppend="false"
class="my-2 entityTheme entity-auto-complation"
ref="autoComplationRef"
:contentKey="activeEntityViewSchemaGetter?.key"
:textSearch="$route.query?.searchtext ?? ''"
:placeholder="autoComplationPlaceholder"
@onSelectHistory="onSelectHistory"
></auto-complation>
</div>
</div>
</div>
</div>
<!-- #endregion -->
<!-- #region بخش محتوای متنی سایت -->
<div class="row">
<EntityHeader
v-if="
mainComponentName !== ('EntityCompareText2', 'EntityChartGantt')
"
@toggle-reading-mode="toggleReadingMode"
@groupEditComponent="EditComponent"
@selectedItem="selectedItemlevel"
@NewComponent="NewComponent"
@show-compare-modal="showCompareModal"
@showListHeadline="showListHeadline"
@close-compare="closeCompare()"
@change-compare="changeCompare($event)"
@switch-view="switchView"
:isCompareState="mainComponentName == 'EntityCompareText2'"
ref="headers"
class="col-12"
>
</EntityHeader>
<template v-if="!isMajlesBuild() && showListRight">
<div class="button-cloce">
<button
v-if="showFilter == false"
class="btn_close"
@click.prevnet="showFilter = !showFilter"
>
<svg class="icon icon-chevron-double-left">
<use xlink:href="#icon-chevron-double-left"></use>
</svg>
</button>
</div>
</template>
<div
v-if="hideCircleButton == false"
class="circle--button"
@click.prevent="circleButton()"
ref="circle"
>
<svg
class="icon-chevron-double-lg-left"
data-testid="chevron-double-lg-left-icon"
>
<use
href="~/assets/common/img/icons.svg#chevron-double-lg-left"
></use>
</svg>
</div>
<div class="col">
<div class="row mx-2">
<div
class="col-12"
:class="{
'col-lg':
mainComponentName != 'PropertyBuilder' &&
mainComponentName != 'EntityRepetitionWords' &&
mainComponentName !== 'EntityChartGantt',
}"
>
<component
v-if="mainComponentName"
:class="{
component_page:
mainComponentName !== 'EntityQaSection' ||
mainComponentName !== 'LibraryText' ||
mainComponentName !== 'EntityChartGantt',
}"
:readingMode="isReadingModeGetter"
:propText="mainComponentName"
:is="mainComponentName"
:slug="slug"
:selectedItem="selectedItemEntityGetter"
:editItem="editItem"
:editComponent="editComponent"
:text1Compare="text1Compare"
:text2Compare="text2Compare"
:copmareSideBySide="copmareSideBySide"
:compareLineByLine="compareLineByLine"
:routeEntityid="params.id"
:listBooks="listBooks"
:viewMode="viewMode"
@is-search-mode="closeSearchMode"
@fishHandler="fishHandler"
@termHandler="termHandler"
@statusEdit="statusEdit"
@annotationHandler="annotationHandler"
@editPropertyTags="editPropertyTags"
@close-compare="closeCompare()"
@click-node="chartGanttClickNode"
@linked-title-click="linkedTitleClick"
@column-title-click="columnTitleClick"
@handler-icon-click="handlerIconClick"
:propertyBuilderForm="
activeEntityViewSchemaGetter?.property
"
></component>
<!-- //:key="renderResearch" -->
<!-- این مقدار حذف شد به این دلیل که بعد از فیش زدن به اول صفحه میرفت -->
</div>
<div
:class="{ 'col-4': buildName() == 'hadith' }"
class="col-3 entity-tree-list"
v-if="isSearchMode || isHeadingMode"
>
<div class="container-fluid">
<!-- <div class="row">
<div
class="d-flex justify-content-between align-items-center w-100"
>
<div>سرفصل ها</div>
<button
class="close"
@click="showEntityHeading = false"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
</div> -->
<div class="row">
<text-search
@is-search-mode="closeSearchMode"
@showListHeadline="showListHeadline"
v-if="isSearchMode"
class=""
></text-search>
<entity-tree-list
:dataTree="dataTree"
@showListHeadline="showListHeadline"
@is-treelist-mode="closeTreelistMode"
v-if="isHeadingMode"
class=""
></entity-tree-list>
</div>
</div>
</div>
</div>
</div>
<!-- <base-modal
v-if="uploadForFirstTime"
@close="closeModal"
@save="saveBaseModal"
@canel="closeModal()"
:description="description"
:showHeaderCloseButton="true"
:modalTitle="modalTitle"
class="borhan-modal"
:height="getModalHeight()"
maxHeight="30em"
overflow="hidden"
:hasFooter="false"
:showSaveButton="false"
:showCloseButton="false"
>
<component
:is="slotComponentName"
:uploadForFirstTime="uploadForFirstTime"
:listData="listData"
:valueModal="valueResearchModal"
@canel="closeModal()"
@close="closeModal()"
@closeAfterSaving="closeAfterSaving"
@compare-text="compareText"
@load-text="loadText"
@word-file="wordFile"
@after-select-file="afterSelectFile()"
></component>
</base-modal> -->
<base-modal-v2
v-if="uploadForFirstTime"
@close="closeModal"
:showHeaderCloseButton="true"
:hasFooter="false"
:modalTitle="modalTitle"
:modalSize="modalWidthManagement"
:height="modalHeightManagement"
maxHeight="36em"
overflow="hidden"
:showSaveButton="true"
:showCloseButton="true"
:showDeleteButton="false"
>
<template v-slot:default> {{ modalTitle }}</template>
<template v-slot:body>
<component
:is="slotComponentName"
:uploadForFirstTime="uploadForFirstTime"
:listData="listData"
:valueModal="valueResearchModal"
:sectionItem="sectionItem"
:versionItem="versionItem"
:listItemsCompare="listItemsCompare"
:numberCurrentTab="2"
:showCurrentTab="false"
@edit-sections="editSections"
@canel="closeModal()"
@close="closeModal()"
@closeAfterSaving="closeAfterSaving"
@compare-text="compareText"
@load-text="loadText"
@word-file="wordFile"
@compare-versions-qanon="compareVersionsQanon"
:elements="dataOrganhMeta"
@after-select-file="afterSelectFile()"
height="100%"
></component>
</template>
</base-modal-v2>
</div>
<!-- #endregion -->
</div>
<!-- #endregion -->
</div>
</div>
</NuxtLayout>
</template>
<script>
import { mapActions, mapState } from "pinia";
update search
2025-02-11 07:09:05 +00:00
import { useEntityStore } from "@search/stores/entityStore";
first commit
2025-02-01 11:06:10 +00:00
import { useSearchStore } from "~/stores/searchStore";
import { useCommonStore } from "~/stores/commonStore";
import sidbarMenuDefault from "~/json/entity/entityMenu.json";
import sidbarMenuMajles from "~/json/entity/entityMenuMajles.json";
import entityApi from "~/apis/entityApi";
import repoApi from "~/apis/repoApi";
export default {
setup() {
useHead({
title: import.meta.env.VITE_ENTITY_PAGE_TITLE,
meta: [{ name: "description", content: "My page description" }],
bodyAttrs: {
class: import.meta.env.VITE_ENTITY_SYSTEM,
},
});
definePageMeta({
// names: [
// "search/key/id",
// "search/key/id/show",
// "search/key/id/list",
// "search/key/id/research",
// ],
// middleware: "redirect",
// alias: [
// "/search/key/id",
// "/search/key/id/show",
// "/search/key/id/list",
// "/search/key/id/research",
// ],
layout: false,
});
},
created() {
this.routeKey = this.$route.params.key;
this.routeId = this.$route.params.id;
this.httpService = useNuxtApp()["$http"];
},
mounted() {
sidbarMenuDefault.entity.forEach((element) => {
if (element.link.includes("/key/id/") > 0)
element.link = element.link
.replace("id", this.$route.params.id)
.replace("key", this.$route.params.key);
});
console.info("sidbarMenuDefault", sidbarMenuDefault);
if (this.$route.query?.listkey == "branch")
this.listTabTitle1 = "جلسات دوره";
this.setPanelComponentName();
this.getEntityInfo(this.routeKey, this.routeId);
this.getListInformation();
this.listData = this.listEntityGetter;
this.setShowListRight();
var font = JSON.parse(localStorage.getItem("settings"));
this.progress = font?.fontSize;
// اگر شرط سوم فعال باشه، هر سری که کامپوننت (entityview1) لود بشه ، درخواست به سرور ارسال میشه
// گرفتن دوباره اسکیما
// این کامنت موقت
let isRouterKeyFixed =
this.activeEntityViewSchemaGetter &&
this.entityViewSchemaGetter &&
this.activeEntityViewSchemaGetter?.key == this.$route.params?.key;
if (isRouterKeyFixed) {
this.updateMainContent();
} else this.getSchemas();
if (window.outerWidth < 992) {
this.$store.commit("TOGGLE_SIDEBAR_MENU");
}
if (this.activeEntityViewSchemaGetter?.tabs) {
if (this.activeTabGetter) this.setActiveTab(this.activeTabGetter);
else this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
}
const { $eventBus } = useNuxtApp();
$eventBus.on("update-component-data", () => {
this.updateComponentData();
});
this.getDataTree();
if (buildName() == "hadith") {
this.getBooksList();
}
},
watch: {
mainComponentName(newVal) {
this.setShowListRight(newVal);
// if (this.$route.name !== "show") {
// if (
// // newVal === "PropertyBuilder" ||
// // newVal === "EntityRepetitionWords" ||
// newVal === "Gantt"
// ) {
// this.showListRight = false;
// } else {
// this.showListRight = true;
// }
// }
},
similarInfoGetter(newVal) {
if (newVal.show) {
this.openModal("EntitySimilar", newVal.label, newVal.text);
}
},
statusButtonGetter(newVal) {
this.statusPage = newVal;
},
// statusRemovCheckBoxGetter(newVal) {
// this.removCheckBox();
// },
$route: {
handler(to, from) {
this.setPanelComponentName();
},
deep: true,
nested: true,
},
},
data() {
return {
routeKey: "",
routeId: "",
dataOrganhMeta: "",
renderAutoComplation: 1,
listTabTitle1: "از جستجو",
listTabTitle2: "تاریخچه",
activeListType: "simple",
// readingMode: false,
renderResearch: 1,
httpService: undefined,
slotComponentName: null,
mainComponentName: null,
tempComponentName: null,
modalTitle: null,
slug: null,
statusPage: 1,
copmareSideBySide: true,
compareLineByLine: false,
uploadForFirstTime: false,
showFilter: true,
showListRight: true,
hideCircleButton: true,
showSimilar: false,
isSearchMode: false,
isHeadingMode: false,
showEntityHeading: false,
valueResearchModal: {},
firstItem: {},
sidbarMenuDefault: sidbarMenuDefault,
sidbarMenuMajles: sidbarMenuMajles,
params: this.$route.params,
firstList: [],
listData: [],
description: "",
editItem: "",
editComponent: "",
newComponent: "",
panelComponentName: "Navigation",
text1Compare: "",
text2Compare: "",
listBooks: [],
pagination: {
page: 0,
total: 0,
pageTop: 0,
pageBottom: 1,
offset: 0, // page * per_page
limit: 25, //per_page
},
path: this.$route.path,
dataTree: [],
listBooks: [],
pagination: {
page: 0,
total: 0,
pageTop: 0,
pageBottom: 1,
offset: 0, // page * per_page
limit: 25, //per_page
},
viewMode: "table",
sectionItem: {},
versionItem: [],
listItemsCompare: {},
isPrevComponent: "text",
// text: "",
// uuid: undefined,
// texts3: "تحلیل",
// editDescription: "",
// editData: "",
// bedtimeText: "",
// showchang: true,
// editTitle: "",
// editVersion: "",
// showFish: false,
// fishModalTitle: "",
};
},
computed: {
...mapState(useEntityStore, [
"selectedItemEntityGetter",
"listEntityGetter",
"statusButtonGetter",
"similarInfoGetter",
"entityViewSchemaGetter",
"activeEntityViewSchemaGetter",
"activeTabGetter",
"isReadingModeGetter",
]),
...mapState(useCommonStore, [
"organNameGetter",
"isSidebarCollapsed",
"currentUser",
]),
autoComplationPlaceholder() {
if (this.activeEntityViewSchemaGetter?.search_placeholder)
return this.activeEntityViewSchemaGetter.search_placeholder;
else return "جستجو در عنوان";
},
navList() {
if (!isMajlesBuild()) return this.activeEntityViewSchemaGetter?.tabs;
if (this.activeEntityViewSchemaGetter?.tabs) {
let list = this.activeEntityViewSchemaGetter?.tabs;
if (!this.isDevelopMode)
list = this.activeEntityViewSchemaGetter?.tabs.filter((item) => {
item?.isDevelopMode == 1;
});
return list;
} else return [];
},
columnClass() {
if (!isMajlesBuild() && this.showListRight) {
return "col-12 col-md-9"; // وقتی شرط برقرار باشد
}
return "col-12"; // در حالت عادی
},
sidbarMenu() {
if (isMajlesBuild()) return sidbarMenuMajles;
else return sidbarMenuDefault;
},
modalWidthManagement() {
switch (this.slotComponentName) {
case "EntitiyModalCompareVersionQa":
return "modal-md";
break;
default:
return "modal-xl";
break;
}
},
modalHeightManagement() {
switch (this.slotComponentName) {
case "EntitiyModalCompareVersionQa":
return "430px";
break;
default:
return "556px";
break;
}
},
},
methods: {
...mapActions(useEntityStore, [
"SET_ITEM_ENTITY",
"SET_LIST_ENTITY",
"SET_STATUS_ENTITY_VIEWPAGE",
"SET_STATUS_BUTTON",
"SET_FONT",
"activeEntityViewSchemaSetter",
"entityViewSchemaSetter",
"activeTabSetter",
]),
...mapActions(useCommonStore, ["TOGGLE_PANEL"]),
editProperty(innerGroupItem) {
this.dataOrganhMeta = innerGroupItem;
this.openModal("TagsEdit", "ویرایش " + innerGroupItem?.label);
},
onSelectHistory(payload) {
let _id = payload.searchItem._source.qanon_id;
let _listkey = this.$route.query.listkey;
let name = "navigationView";
if (_listkey) name = "navigation";
this.$router
.push({
name: name,
params: {
id: _id,
key: this.$route.params?.key,
},
query: {
searchtext: payload.textSearch ?? undefined,
listkey: _listkey,
},
})
.catch(() => {});
},
getBooksList() {
let field_collapse = "book_title"; //"normal"
let url = repoUrl() + libraryApi.search.volume;
url = url.replace("{{field_collapse}}", field_collapse);
url = url.replace("{{offset}}", this.pagination.offset);
url = url.replace("{{limit}}", this.pagination.limit);
url = url.replace("{{filter}}", "none");
this.httpService
.postRequest(url)
.then((response) => {
this.listBooks = [];
this.listBooks = response.hits?.hits.map((item) => {
const source = item._source;
const publishDate = item._source.publish_date
? new Date(source.publish_date).toLocaleDateString("fa-IR")
: null;
// console.log(publishDate);
return {
...item,
_source: {
...source,
publish_date: publishDate,
},
};
});
})
.catch((error) => {});
},
updateComponentData() {
if (this.$route.query?.listkey == "branch")
this.listTabTitle1 = "جلسات دوره";
this.setPanelComponentName();
this.getEntityInfo(this.routeKey, this.routeId);
this.getListInformation();
this.listData = this.listEntityGetter;
this.setShowListRight();
var font = JSON.parse(localStorage.getItem("settings"));
this.progress = font?.fontSize;
// اگر شرط سوم فعال باشه، هر سری که کامپوننت (entityview1) لود بشه ، درخواست به سرور ارسال میشه
// گرفتن دوباره اسکیما
// این کامنت موقت
let isRouterKeyFixed =
this.activeEntityViewSchemaGetter &&
this.entityViewSchemaGetter &&
this.activeEntityViewSchemaGetter?.key == this.$route.params?.key;
if (isRouterKeyFixed) {
this.updateMainContent();
} else this.getSchemas();
if (window.outerWidth < 992) {
this.$store.commit("TOGGLE_SIDEBAR_MENU");
}
if (this.activeEntityViewSchemaGetter?.tabs) {
if (this.activeTabGetter) this.setActiveTab(this.activeTabGetter);
else this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
}
},
// switchViewGraph(event) {
// if (event == "show") this.mainComponentName = "EntityChartGraph";
// else this.mainComponentName = "EntityQaRelation";
// },
switchView(event) {
if (event == "show") {
if (this.activeTabGetter?.key == "graph") {
this.mainComponentName = "EntityChartGraph";
} else if (this.activeTabGetter?.key == "gantt") {
this.mainComponentName = "EntityChartGantt";
this.viewMode = "table";
}
} else {
if (this.activeTabGetter?.key == "graph") {
this.mainComponentName = "EntityQaRelation";
} else if (this.activeTabGetter?.key == "gantt") {
this.mainComponentName = "EntityChartGantt";
this.viewMode = "chart";
}
}
},
setActiveListType(componentName, listType) {
this.panelComponentName = componentName;
this.activeListType = listType;
},
toggleReadingMode(event) {
// if (event) this.readingMode = false;
// else this.readingMode = true;
},
getModalHeight() {
return this.slotComponentName === "SelectEntityText" ? "30em" : "auto";
},
// removCheckBox() {
// let remov = this.statusRemovCheckBoxGetter;
// let index;
// this.listResearch.forEach((item) => {
// if (item === remov) {
// index = this.listItem.indexOf(item);
// this.listItem.splice(index, 1);
// }
// });
// },
// datefa(item) {
// var m = this.selectedItemEntityGetter.begin_date;
// var d = new Date(m).toLocaleDateString("fa-IR");
// return d;
// },
// updateFont(event) {
// if (this.progress == "15") {
// this.progress = JSON.parse(localStorage.getItem("settings"));
// } else {
// this.progress = event.target?.value;
// this.SET_FONT(this.progress);
// const settings = {
// fontSize: this.progress,
// };
// localStorage.setItem("settings", JSON.stringify(settings));
// }
// },
/**
* مدیریت نمایش مدال تحقیق.
* @param {Object} value - مقدار شامل اطلاعات ویرایش آیتم.
*/
researchModalHandler(value) {
if (value.itemEdit._source.research_key == "term") {
this.termHandler(value);
} else if (value.itemEdit._source.research_key == "note") {
this.annotationHandler(value);
} else if (value.itemEdit._source.research_key == "fish") {
this.fishHandler(value);
} else {
// let key = value.itemEdit._source?.research_key;
let schema = this.activeEntityViewSchemaGetter.contextMenu.find(
(item) => item.key === value.itemEdit._source?.research_key
);
this.valueResearchModal = value;
this.valueResearchModal.itemSchema = schema;
this.openModal("ComponentTextFish", schema.title);
}
},
/**
* مدیریت نمایش مدال حاشیه‌نویسی.
* @param {Object} item - آیتم شامل اطلاعات schema.
*/
annotationHandler(item) {
this.valueResearchModal = item;
this.openModal("ComponentTextFish", item.itemSchema.title);
},
/**
* مدیریت نمایش مدال فیش.
* @param {Object} item - آیتم شامل اطلاعات schema.
*/
fishHandler(item) {
this.valueResearchModal = item;
this.openModal("ComponentTextFish", item.itemSchema.title);
},
/**
* مدیریت نمایش مدال اصطلاح.
* @param {Object} item - آیتم شامل اطلاعات schema.
*/
termHandler(item) {
this.valueResearchModal = item;
this.openModal("SelectTerm", "انتخاب اصطلاح ", "", "term");
},
/**
* تغییر وضعیت نمایش سرخط نهاد.
*/
showListHeadline({ isSearchMode, isHeadingMode }) {
this.isSearchMode = isSearchMode;
this.isHeadingMode = isHeadingMode;
// this.showEntityHeading = !this.showEntityHeading;
},
/**
* بررسی اینکه آیا کاربر می‌تواند یک کلید خاص را ببیند.
* @param {String} keyName - نام کلید برای بررسی.
* @returns {Boolean} - اگر کاربر می‌تواند کلید را ببیند true و در غیر اینصورت false.
*/
canSee(keyName) {
if (this.currentUser?.user_level > 1) return true;
return this.userPermisionGetter.includes(keyName);
},
async getEntityText(id) {
let key = this.routeKey;
let url = "";
if (key == "qasection" || key == "rgsection") {
url = repoUrl() + entityApi.comparison.getParent;
url = url.replace("@index_key", key);
url = url.replace("@parent_id", id);
} else {
url = repoUrl() + entityApi.comparison.getText;
url = url.replace("@index_key", key);
url = url.replace("@id", id);
}
// console.log(url)
return await this.httpService
.getRequest(url)
.then((res) => {
return res.text;
})
.catch(() => {
return "";
});
},
/**
* بارگذاری متن برای مقایسه
* @param {String} text - متنی که باید بارگذاری شود.
*/
loadText(text) {
this.text2Compare = text;
let vm = this;
this.closeModal();
this.getEntityText(this.routeId).then((text) => {
vm.text1Compare = text;
vm.mainComponentName = "EntityCompareText2";
});
},
/**
* مدیریت مقایسه فایل ورد.
* @param {String} text - متنی که باید مقایسه شود.
*/
wordFile(text) {
this.text2Compare = text;
this.closeModal();
this.getEntityText(this.routeId).then((text) => {
this.text1Compare = text;
this.mainComponentName = "EntityCompareText2";
});
},
/**
* مدیریت مقایسه متن.
* @param {String} id - شناسه متنی که باید مقایسه شود.
*/
compareText(id) {
this.mainComponentName = "EntityCompareText2";
this.closeModal();
let vm = this;
this.getEntityText(id).then((text) => {
vm.text2Compare = text;
vm.getEntityText(vm.routeId).then((text) => {
vm.text1Compare = text;
vm.mainComponentName = "EntityCompareText2";
});
});
},
/**
* بستن نمای مقایسه.
*/
closeCompare() {
if (this.activeEntityViewSchemaGetter?.tabs) {
switch (this.isPrevComponent) {
case "text":
this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
break;
case "gantt":
this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[4]);
break;
default:
this.setActiveTab(this.activeEntityViewSchemaGetter.tabs[0]);
}
}
},
/**
* بستن مدال.
*/
closeModal() {
// $("#base-modal").modal("hide");
this.slotComponentName = undefined;
this.modalTitle = undefined;
this.description = undefined;
this.listData = [];
this.valueResearchModal = {};
setTimeout(() => {
this.uploadForFirstTime = false;
}, 500);
},
closeAfterSaving() {
this.renderResearch++;
this.closeModal();
},
saveBaseModal() {},
/**
* باز کردن مدال با کامپوننت و عنوان مشخص.
* @param {String} componentName - نام کامپوننتی که باید در مدال نمایش داده شود.
* @param {String} title - عنوان مدال.
* @param {String} [description=""] - توضیحات مدال.
* @param {String} [key=undefined] - کلید برای مدال.
*/
openModal(componentName, title, description, key = undefined) {
this.slotComponentName = componentName;
this.modalTitle = title;
this.description = description;
this.uploadForFirstTime = true;
// setTimeout(() => {
// $("#base-modal").modal({ backdrop: "static", keyboard: false }, "show");
// }, 500);
},
/**
* تنظیم نمایش موارد مشابه.
* @param {Boolean} [isShow=true] - نشان می‌دهد که آیا باید موارد مشابه نمایش داده شوند یا خیر.
*/
setShowSimilar(isShow = true) {
this.showSimilar = isShow;
},
/**
* نمایش تجزیه‌گر در صورت صحیح بودن شرط.
* @param {Boolean} isShow - نشان می‌دهد که آیا باید تجزیه‌گر نمایش داده شود یا خیر.
*/
showParserIfTrue(isShow) {
if (!isShow) {
this.tempComponentName = this.mainComponentName;
this.mainComponentName = "EntityRepetitionWords";
} else {
this.mainComponentName = this.tempComponentName ?? "EntityText";
}
},
/**
* مدیریت دکمه دایره‌ای.
*/
circleButton() {
this.hideCircleButton = true;
this.isVisiablePanel = true;
},
/**
* مدیریت رویداد کامپوننت جدید.
* @param {Event} event - شیء رویداد.
*/
NewComponent(event) {
this.newComponent = event;
if (event == true) {
this.statusPage = 2;
} else {
this.statusPage = 1;
}
},
/**
* مدیریت رویداد ویرایش وضعیت.
* @param {Event} event - شیء رویداد.
*/
statusEdit(event) {
if (event == false) {
this.statusPage = 1;
}
},
/**
* مدیریت رویداد انتخاب سطح آیتم.
* @param {Event} event - شیء رویداد.
*/
selectedItemlevel(event) {
this.editItem = event;
},
/**
* مدیریت رویداد ویرایش کامپوننت.
* @param {Event} event - شیء رویداد.
*/
EditComponent(event) {
this.editComponent = event;
if (event.EditComponent == true || event.EditComponent == false) {
this.statusPage = 2;
} else {
this.statusPage = 1;
}
},
/**
* تنظیم تب فعال.
* @param {Object} tab - شیء تب که باید فعال شود.
*/
setActiveTab(tab) {
this.activeTabSetter(tab);
// close text headings and search section.
this.showListHeadline({
isSearchMode: false,
isHeadingMode: false,
});
if (this.showSimilar) this.showSimilar = tab?.key == "content";
this.mainComponentName = "EntityText";
if (tab?.key == "content") {
// if (this.activeEntityViewSchemaGetter?.key == this.routeKey)
if (this.activeEntityViewSchemaGetter?.type)
this.mainComponentName = this.activeEntityViewSchemaGetter?.type;
else this.mainComponentName = "EntityText";
} else if (tab.key == "meta") {
this.mainComponentName = "PropertyBuilder";
} else if (tab.key == "parser") {
this.mainComponentName = "EntityRepetitionWords";
} else if (tab.key == "gantt") {
this.mainComponentName = "EntityChartGantt";
} else if (tab.key == "graph") {
this.mainComponentName = "EntityChartGraph";
} else if (tab.key == "compare") {
this.mainComponentName = "EntityQaSection";
}
},
/**
* تنظیم وضعیت صفحه به ۱ برای ویرایش واگذاری.
*/
waiverEdit() {
this.statusPage = 1;
},
/**
* دریافت اطلاعات schema.
*/
getSchemas() {
let url = repoUrl() + entityApi.schema.list;
this.httpService
.postRequest(url, {
organ: this.organNameGetter,
system: "entityView",
build_state: buildState(),
})
.then((response) => {
const routeParamsKey = this.routeKey;
let schemaBasedOnRouteKeyIndex = response.data.entityView.findIndex(
(item) => item.key == routeParamsKey
);
schemaBasedOnRouteKeyIndex =
schemaBasedOnRouteKeyIndex == -1 ? 0 : schemaBasedOnRouteKeyIndex;
this.entityViewSchemaSetter(response.data.entityView);
this.activeEntityViewSchemaSetter(
response.data.entityView[schemaBasedOnRouteKeyIndex]
);
this.activeTabSetter(
response.data.entityView[schemaBasedOnRouteKeyIndex].tabs[0]
);
this.renderAutoComplation++;
this.updateMainContent();
});
},
/**
* تغییر وضعیت نمایش منوی سایدبار.
*/
toggleSidebarMenu() {
this.$store.commit("TOGGLE_SIDEBAR_MENU");
},
/**
* تغییر وضعیت نمایش پنل لیست.
*/
showToggleListPanel() {
this.showListPanel = !this.showListPanel;
},
/**
* دریافت مقدار یک داده بر اساس کلید و نوع آن (در صورت وجود).
* @param {String} key - کلید داده مورد نظر.
* @param {String} [type=""] - نوع داده (اختیاری).
* @returns {String} - مقدار داده.
*/
// getDataValue(key, type = "") {
// let value = "";
// if (this.selectedItemEntityGetter[key]) {
// value = this.selectedItemEntityGetter[key];
// if (type == "date") value = this.datefa(value);
// }
// return value;
// },
/**
* دریافت اطلاعات موجودیت بر اساس نوع و شناسه آن.
* @param {String} _entityType - نوع موجودیت.
* @param {String} _entityId - شناسه موجودیت.
*/
getEntityInfo(_entityType, _entityId) {
if (this.fetchingData) return;
this.fetchingData = true;
this.entity_type = _entityType;
if (_entityType == "qasection" || _entityType == "rgsection") {
//در این حالت استفاده ندارد تست کردم
// // برای تنظیم داده های هدر در تبهای مختلف غیر متن نیاز هست
// let url = repoUrl() + repoApi.entity.qanonList;
// url = url.replace("@index_key", _entityType);
// url = url.replace("@parent_key", "qanon_id");
// url = url.replace("@parent_id", _entityId);
// url = url.replace("@from", 0);
// url = url.replace("@countInPage", 1);
// this.httpService.getRequest(url).then((response) => {
// if (response.hits.total.value > 0) {
// let res = response.hits.hits[0];
// this.entity = { ...res, ...res._source };
// this.SET_ITEM_ENTITY(this.entity);
// setDocumentTitle(this.selectedItemEntityGetter);
// }
// this.fetchingData = false;
// });
} else {
let url = repoUrl() + repoApi.public.get;
url = url.replace("{{index_key}}", _entityType);
url = url.replace("{{entity_id}}", _entityId);
this.httpService.getRequest(url).then((res) => {
this.entity = { ...res, ...res._source };
this.SET_ITEM_ENTITY(this.entity);
this.fetchingData = false;
useHead({
title: this.selectedItemEntityGetter,
});
});
}
},
/**
* دریافت اطلاعات لیست موجودیت‌ها از localStorage در صورت عدم وجود در getter.
*/
getListInformation() {
const myList = localStorage.getItem("myList");
this.jsonList = JSON.parse(myList);
const myItem = localStorage.getItem("myItem");
this.firstItem = JSON.parse(myItem);
this.SET_LIST_ENTITY(this.jsonList);
if (this.selectedItemEntityGetter === undefined) {
this.SET_ITEM_ENTITY(this.firstItem);
useHead({
title: this.selectedItemEntityGetter,
});
// setDocumentTitle(this.selectedItemEntityGetter);
}
},
/**
* به‌روزرسانی تاریخ در عنصر با کلاس begin_date.
*/
updateDate() {
const myelement = document.getElementsByClassName("begin_date");
const date = myelement[0].innerHTML;
},
/**
* تنظیم نام کامپوننت پنل بر اساس مسیر جاری.
*/
setPanelComponentName() {
// if (this.$route.name == "entityEdit") {
// this.panelComponentName = "EntityTreeList";
// } else
if (this.$route.name == "navigationView") {
this.panelComponentName = "navigation";
} else if (this.$route.name == "entityResearch") {
this.panelComponentName = "research";
} else {
this.panelComponentName = this.$route.name;
}
},
setShowListRight(mainComponent = undefined) {
let routeName = this.$route.name;
if (mainComponent === "EntityChartGantt") {
this.showListRight = false;
} else if (routeName == "showEntity") {
this.showListRight = false;
} else if (routeName == "navigation" && !this.listEntityGetter) {
this.showListRight = false;
} else if (routeName == "research") {
this.showListRight = false;
} else this.showListRight = true;
},
/**
* دریافت کامپوننت پنل بر اساس مسیر جاری.
* @returns {String|null} - نام کامپوننت پنل.
*/
getPanelComponent() {
this.setShowListRight();
if (!this.showListRight) return null;
if (
this.activeEntityViewSchemaGetter?.entityPanel &&
this.activeEntityViewSchemaGetter?.entityPanel[this.$route.name]
)
return this.activeEntityViewSchemaGetter?.entityPanel[this.$route.name];
else return this.activeEntityViewSchemaGetter?.entityPanel[0];
},
/**
* به‌روزرسانی محتوای اصلی بر اساس کلید موجود در مسیر.
*/
updateMainContent() {
if (this.routeKey) {
if (this.activeEntityViewSchemaGetter?.key == this.routeKey)
this.mainComponentName = this.activeEntityViewSchemaGetter?.type;
else this.mainComponentName = "EntityText";
} else this.mainComponentName = "EntityText";
},
/**
* یافتن ایندکس و بازگرداندن نام کامپوننت بر اساس کلید.
* @param {String} keyName - کلید موجودیت.
* @returns {String} - نام کامپوننت.
*/
findIndexAndReturnComponentName(keyName) {
const contentIndex = this.entityViewSchemaGetter?.findIndex(
(item) => item.key == keyName
);
return this.entityViewSchemaGetter[contentIndex]?.type;
},
/**
* پنهان کردن پنل.
*/
hidePanel() {
this.hideCircleButton = false;
this.isVisiablePanel = false;
},
/**
* تغییر حالت مقایسه.
* @param {Boolean} item - وضعیت مقایسه.
*/
changeCompare(item) {
if (!item) {
this.copmareSideBySide = false;
this.compareLineByLine = true;
} else {
this.copmareSideBySide = true;
this.compareLineByLine = false;
}
},
closeSearchMode() {
this.isSearchMode = false;
},
closeTreelistMode() {
this.isHeadingMode = false;
},
getDataTree() {
if (buildName() === "majles") {
let url = repoUrl() + buildName() + "/" + entityApi.edit.treeList;
url = url.replace("@index_key", this.routeKey);
url = url.replace("@qanon_id", this.routeId);
this.httpService.getRequest(url).then((res) => {
this.dataTree = res.data;
// this.loading = false;
});
} else if (buildName() === "hadith") {
let id = this.routeId;
let url = repoUrl() + libraryApi.tree.getDataTree;
url = url.replace("@offset", 0);
url = url.replace("@limit", 500);
url = url.replace("@vol_id", id);
url = url.replace("@q", "none");
this.httpService.getRequest(url).then((res) => {
this.dataTree = this.convertToTree(res.hits.hits);
// this.loading = false;
});
}
},
/**
* تبدیل داده‌های خطی به ساختار درختی.
* @param {Array} rawData - آرایه‌ای از داده‌های ورودی که باید به ساختار درختی تبدیل شوند.
* @returns {Array} - ساختار درختی شامل آیتم‌های سطح اول و زیرآیتم‌هایشان.
*/
convertToTree(rawData) {
let prevlevel = -1; // سطح قبلی برای مقایسه (مقدار اولیه -1 به معنای بدون سطح قبلی)
let pathItems = []; // آرایه‌ای برای ذخیره مسیر آیتم‌ها در ساختار درختی
let prevItem = undefined; // آیتم قبلی که در حال پردازش است
let list = []; // لیست نهایی که شامل آیتم‌های سطح اول درخت است
rawData.forEach((el) => {
let jumpPage = el._source?.meta?.page;
// استخراج سطح و ایجاد آیتم جدید
let level = el._source?.meta?.level;
let item = {
id: el._id,
text: el._source?.content,
jumpPage: jumpPage,
children: [],
};
// قرار دادن آیتم در ساختار درختی بر اساس سطح آن
if (prevlevel == -1 || level == 1) {
// اگر این اولین آیتم است یا سطح آن 1 است، به سطح اول اضافه می‌شود
list.push(item);
pathItems.push(item);
} else if (level > prevlevel) {
// اگر سطح فعلی بیشتر از سطح قبلی باشد، آیتم فرزند آیتم قبلی می‌شود
prevItem.children.push(item);
pathItems.push(item);
} else if (level == prevlevel) {
// اگر سطح فعلی برابر با سطح قبلی باشد، آیتم به خواهر/برادر آیتم قبلی اضافه می‌شود
if (pathItems.length > 1) {
pathItems[pathItems.length - 2].children.push(item);
}
} else {
// اگر سطح فعلی کمتر از سطح قبلی باشد
let diff = prevlevel - level; // اختلاف سطح فعلی و قبلی
if (pathItems.length > diff + 1) {
pathItems[pathItems.length - 1 - diff].children.push(item);
}
}
// به‌روزرسانی مقادیر قبلی برای پردازش آیتم بعدی
prevlevel = level;
prevItem = item;
});
return list; // بازگرداندن ساختار درختی نهایی
},
chartGanttClickNode(event) {
this.openModal("EntityQaSection", event.name, "");
// .then(
// () => {
// // this.name = event.name;
// // this.y = event.y;
// // this.getChartTreeItems(this.name, this.y);
// }
// );
},
linkedTitleClick(rowItem, tableColumn, index) {
this.sectionItem = rowItem;
setTimeout(() => {
this.openModal("EntityQaHistory", "وضعیت", "");
}, 500);
},
columnTitleClick(tableColumn) {
console.log("5555555555");
this.listItemsCompare = tableColumn;
let id = this.routeId;
let payload = {
qanon_id: id,
date: tableColumn.title,
};
let url = entityApi.chart.version;
let key = this.activeEntityViewSchemaGetter?.key;
url = url.replace("@index_key", key);
this.httpService.postRequest(url, payload).then((res) => {
this.versionItem = res.data;
let data = res.data;
data.forEach((element) => {
this.text1Compare = element._source.content;
this.text2Compare = element._source.content;
});
this.openModal("EntityShowVersionsQa", tableColumn.titleTooltip, "");
});
},
handlerIconClick(tableColumn) {
this.listItemsCompare = tableColumn;
this.openModal("EntitiyModalCompareVersionQa", "مقایسه نسخه ها");
},
compareVersionsQanon(versionOneContent, versionTwoContent) {
this.text1Compare = versionOneContent;
this.text2Compare = versionTwoContent;
this.isPrevComponent = "gantt";
this.closeModal();
this.mainComponentName = "EntityCompareText2";
},
showCompareModal() {
this.isPrevComponent = "text";
this.openModal("SelectEntityText", "انتخاب متن مقایسه");
},
editSections() {
this.openModal("DraftImportEffectModal", "ویرایش");
},
chartGanttClickNode(event) {
this.openModal("EntityQaSection", event.name, "");
// .then(
// () => {
// // this.name = event.name;
// // this.y = event.y;
// // this.getChartTreeItems(this.name, this.y);
// }
// );
},
linkedTitleClick(rowItem, tableColumn, index) {
this.sectionItem = rowItem;
setTimeout(() => {
this.openModal("EntityQaHistory", "وضعیت", "");
}, 500);
},
columnTitleClick(tableColumn) {
this.listItemsCompare = tableColumn;
let id = this.$route.params.id;
let payload = {
qanon_id: id,
date: tableColumn.title,
};
let url = entityApi.chart.version;
let key = this.activeEntityViewSchemaGetter?.key;
url = url.replace("@index_key", key);
this.httpService.postRequest(url, payload).then((res) => {
this.versionItem = res.data;
let data = res.data;
data.forEach((element) => {
this.text1Compare = element._source.content;
this.text2Compare = element._source.content;
});
this.openModal("EntityShowVersionsQa", tableColumn.titleTooltip, "");
});
},
handlerIconClick(tableColumn) {
this.listItemsCompare = tableColumn;
this.openModal("EntitiyModalCompareVersionQa", "مقایسه نسخه ها");
},
compareVersionsQanon(versionOneContent, versionTwoContent) {
this.text1Compare = versionOneContent;
this.text2Compare = versionTwoContent;
this.isPrevComponent = "gantt";
this.closeModal();
this.mainComponentName = "EntityCompareText2";
},
showCompareModal() {
this.isPrevComponent = "text";
this.openModal("SelectEntityText", "انتخاب متن مقایسه");
},
editSections() {
this.openModal("DraftImportEffectModal", "ویرایش");
},
},
components: {
update search
2025-02-11 07:09:05 +00:00
AutoComplation: defineAsyncComponent(() =>
import("../../../../../../components/global/AutoComplation.vue")
),
first commit
2025-02-01 11:06:10 +00:00
EntityQaRelation: defineAsyncComponent(() =>
import("~/components/entity/components/EntityQaRelation.vue")
),
ComponentTextFish: defineAsyncComponent(() =>
import("~/components/entity/components/ComponentTextFish.vue")
),
ComparisonEntity: defineAsyncComponent(() =>
import("~/components/entity/components/ComparisonEntity.vue")
),
SelectEntityText: defineAsyncComponent(() =>
import("~/components/entity/components/SelectEntityText.vue")
),
EntitySelectTerm: defineAsyncComponent(() =>
import("~/components/entity/components/EntitySelectTerm.vue")
),
EntityText: defineAsyncComponent(() =>
import("~/components/entity/components/EntityText.vue")
),
EntityMqSection: defineAsyncComponent(() =>
import("~/components/entity/components/EntityMqSection.vue")
),
EntityQaSection: defineAsyncComponent(() =>
import("~/components/entity/components/EntityQaSection.vue")
),
EntityChartGraph: defineAsyncComponent(() =>
import("~/components/entity/components/EntityChartGraph.vue")
),
EntityChartGantt: defineAsyncComponent(() =>
import("~/components/entity/components/EntityChartGantt.vue")
),
EntityCompareText: defineAsyncComponent(() =>
import("~/components/entity/components/EntityCompareText.vue")
),
EntityCompareText2: defineAsyncComponent(() =>
import("~/components/entity/components/EntityCompareText2.vue")
),
EntitySimilar: defineAsyncComponent(() =>
import("~/components/entity/components/EntitySimilar.vue")
),
EntitySanad: defineAsyncComponent(() =>
import("~/components/entity/components/EntitySanad.vue")
),
EntityVoice: defineAsyncComponent(() =>
import("~/components/entity/components/EntityVoice.vue")
),
EntityVideo: defineAsyncComponent(() =>
import("~/components/entity/components/EntityVideo.vue")
),
EntityFile: defineAsyncComponent(() =>
import("~/components/entity/components/EntityFile.vue")
),
EntityRepetitionWords: defineAsyncComponent(() =>
import("~/components/entity/components/EntityRepetitionWords.vue")
),
LibraryText: defineAsyncComponent(() =>
import("~/components/library/components/LibraryText.vue")
),
EntityQaHistory: defineAsyncComponent(() =>
import("~/components/entity/components/EntityQaHistory.vue")
),
EntityShowVersionsQa: defineAsyncComponent(() =>
import("~/components/entity/components/EntityShowVersionsQa.vue")
),
EntitiyModalCompareVersionQa: defineAsyncComponent(() =>
import("~/components/entity/components/EntitiyModalCompareVersionQa.vue")
),
UserHistory: defineAsyncComponent(() =>
import("~/components/entity/sidebar-panels/UserHistory.vue")
),
TextSearch: defineAsyncComponent(() =>
import("~/components/entity/sidebar-panels/TextSearch.vue")
),
NavigationView: defineAsyncComponent(() =>
import("~/components/entity/sidebar-panels/Navigation.vue")
),
Navigation: defineAsyncComponent(() =>
import("~/components/entity/sidebar-panels/Navigation.vue")
),
Research: defineAsyncComponent(() =>
import("~/components/entity/sidebar-panels/Research.vue")
),
EntityTreeList: defineAsyncComponent(() =>
import("~/components/entity/sidebar-panels/EntityTreeList.vue")
),
PropertyBuilder: defineAsyncComponent(() =>
import("~/components/other/PropertyBuilder.vue")
),
TagsEdit: defineAsyncComponent(() =>
import("~/components/other/TagsEdit.vue")
),
DraftImportEffectModal: defineAsyncComponent(() =>
import("~/components/entity/modals/DraftImportEffectModal.vue")
),
},
};
</script>
<style scoped lang="scss">
.button-cloce {
position: relative;
right: 3em;
top: 1em;
z-index: 100;
.btn_close {
border-radius: 50%;
font-size: 0.8rem;
width: 2.5em;
height: 2.5em;
box-shadow: 0px 0px 7px 1px #eee;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(1.5em);
background-color: #eee;
&:hover {
filter: brightness(0.8);
}
}
}
.nav-tabs-container {
display: flex;
justify-content: center;
}
.filter-list-container {
// padding-top: 0.5em;
// // position: fixed;
// z-index: 9;
// width: 20em;
height: 100dvh;
.main-filter {
display: none;
}
.mobile-mode {
display: flex;
justify-content: flex-end;
.btn {
border-radius: 50%;
// font-size: 0.7rem;
width: 2.5em;
height: 2.5em;
box-shadow: 0px 0px 7px 1px #eee;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(1.5em);
background-color: #eee;
&:hover {
filter: brightness(0.8);
}
}
}
&.expanded {
top: 0;
bottom: 0;
background: #fff;
justify-content: center;
box-shadow: -1px 0px 7px 1px #eee;
// width: 20em;
.main-filter {
display: block;
height: 90dvh;
}
}
}
.main-filter {
padding: 0 1em;
// overflow: auto;
}
.component_page {
height: calc(100dvh - 13em);
overflow: auto;
padding-left: 1em;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #ccc #eee;
}
.entity-tree-list {
border-radius: 0.5em;
overflow-y: auto;
box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
}
@media (max-width: 575.98px) {
.component_page {
height: calc(100dvh - 15em);
padding-left: 0.5em;
}
.button-cloce {
right: 2em;
}
.filter-list-container {
margin-right: -1em;
}
.main-filter {
width: 20em !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
.component_page {
height: calc(100dvh - 16em);
}
.filter-list-container {
margin-right: -1em;
}
.main-filter {
width: 20em !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.component_page {
height: calc(100dvh - 16em);
}
.filter-list-container {
width: 20em !important;
margin-right: -1em;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
.main-filter {
height: calc(100dvh - 11em);
// overflow: auto;
}
.component_page {
height: calc(100dvh - 15em);
}
}
@media (min-width: 1200px) {
.main-filter {
height: calc(100dvh - 5em);
// overflow: auto;
}
}
</style>
Reference in New Issue Copy Permalink