front/research_ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

تغییرات

Browse Source
This commit is contained in:
Mehdi104797 2025-03-03 13:25:44 +03:30
parent 6e3dfe3671
commit c3aa6605ff
2 changed files with 351 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

451
components/research/components/ResearchFilterList.vue
View File

@ -1,5 +1,9 @@
<template>
<div class="main-filter" ref="filterdiv">
<div
class="main-filter filter-list"
ref="filterdiv"
:style="{ boxShadow: $attrs.boxShadow }"
>
<!-- <div class="button-hiden text__12" ref="button" :style="{ height: $attrs.height}">
<button class="btn btn-primary" @click.prevent="hidenfilter">
<svg class="icon icon-chevron-double-right ms-1">
@ -8,8 +12,30 @@
بستن فیلتر
</button>
</div> -->
<div class="search-items filter-list firefox-scrollbar mt-2">
<div
class="d-flex justify-content-end justify-content-lg-between header_filter mx-3"
>
<h6 class="d-none d-lg-block">محدود کردن</h6>
<div class="d-felx">
<button class="btn p-0" @click="toggleAllFilters">
<template v-if="allFiltersOpen">
<svg class="icon icon-collapse-all">
<use xlink:href="#icon-collapse-all"></use>
</svg>
</template>
<template v-else>
<svg class="icon icon-expand-all">
<use xlink:href="#icon-expand-all"></use>
</svg>
</template>
</button>
<!-- <button class="btn p-0 me-2 d-lg-none " @click="hidenfilter()">
<svg class="icon icon-Component-21--1"><use xlink:href="#icon-Component-21--1"></use></svg>
</button> -->
</div>
</div>
<div class="d-flex justify-content-start toggle_all_filters"></div>
<div class="search-items filter-list firefox-scrollbar">
<div :key="reRender">
<div>
<a
@ -18,39 +44,58 @@
class="filters__delete text__12"
>حذف فیلترها
</a>
<filter-items
<search-filter
:key="filterListKey"
:filters="filterItems"
@remove-filter="delFilterItem"
></filter-items>
></search-filter>
</div>
<div
v-for="(filter, index) in researchSchemaGetter[0].filter"
v-if="
researchSchemaGetter &&
listFilter &&
listFilter[filter?.source_key]?.buckets.length > 0
"
class="filters__sec"
v-if="myActiveSchema?.length"
v-for="(filter, index) in myActiveSchema"
class="filters__sec px-4"
:key="index"
>
<div class="main-title">{{ filter.title }}</div>
<ul>
<template
v-if="
listFilter && listFilter[filter.source_key]?.buckets.length > 0
"
>
<div
class="d-flex align-items-center justify-content-between border-bottom"
@click="toggleFilter(index)"
>
<div class="main-title mb-2" style="font-family: sahel-semi-bold">
{{ filter.title }}
</div>
<button class="btn">
<template v-if="subsets[index]">
<svg class="icon icon-Component3611">
<use xlink:href="#icon-Component3611"></use>
</svg>
</template>
<template v-else>
<svg class="icon icon-Component-359--1">
<use xlink:href="#icon-Component-359--1"></use>
</svg>
</template>
</button>
</div>
<ul class="p-1" v-if="subsets[index]">
<li
v-for="(item, i) in getFilterItems(
filter?.source_key,
filter.source_key,
filter.by_more
)"
:key="i"
>
<a
@click.prevent="
toggelClick($event.target, filter.filter_key, item.key)
"
@click.prevent="toggelClick($event.target, filter, item.key)"
class="text-filter mt-2"
>
<span class="title text__14">{{ getTitle(item) }}</span>
<span class="text__14">{{ getTitle(item) }}</span>
<span class="num text__12">{{ getCount(item) }}</span>
</a>
</li>
@ -74,6 +119,7 @@
>
</li>
</ul>
</template>
</div>
</div>
</div>
@ -82,35 +128,81 @@
<script>
import { mapState, mapActions } from "pinia";
import { useEntityStore } from "@search/stores/entityStore";
import { useSearchStore } from "@search/stores/searchStore";
import { useResearchStore } from "@research/stores/researchStore";
/**
*
* @vue-prop {Array} [listAggregations=[]] - یک آرایه حاوی جمع‌بندی‌های لیست.
* @vue-prop {Array} [selectedFilterItems=[]] - یک آرایه حاوی موارد فیلتر انتخاب شده.
* @vue-prop {Array} [activeTabGetter=[]] - تب یا اسکیمای فعال
*
* @vue-data {Number} [reRender=1] - شمارنده برای بازنگری مجدد کامپوننت
* @vue-data {Number} [filterListKey=1] - کلید برای بازنگری لیست فیلترها
* @vue-data {Number} [maxItem=5] - حداکثر تعداد آیتم‌های نمایش داده شده در هر فیلتر
* @vue-data {Number} [isHideFilter=0] - وضعیت پنهان یا نمایش داده شدن فیلترها
* @vue-data {Array} [listFilter=[]] - لیست فیلترها
* @vue-data {Array} [filterSelect=[]] - فیلترهای انتخاب شده
* @vue-data {Array} [filterItems=[]] - آیتم‌های فیلتر
* @vue-data {Array} [filter_schema=[]] - اسکیماهای فیلتر
* @vue-data {String} [filterUrl=""] - آدرس فیلتر شده
* @vue-data {Object} [filter_expand2={}] - وضعیت باز یا بسته بودن فیلترها
* @vue-data {Boolean} [tagsExpanded=false] - وضعیت باز یا بسته بودن تگ‌ها
*
*
* @vue-computed {array} [mapState.searchListActiveTabGetter] - discription
* @vue-computed {array} [mapState.searchChartActiveTabGetter] - discription
* @vue-computed {array} [mapState.searchActiveTabGetter] - discription
* @vue-computed {Function} [myActiveSchema] - discription
* @vue-computed {Function} [listTags] - discription
*/
export default {
name: "FilterList",
props: ["changePageFilter", "listAggregations", "selectedFilterItems"],
props: [
"listAggregations",
"selectedFilterItems",
"filterKey",
"activeTabGetter",
],
data() {
return {
subsets: {}, // وضعیت باز یا بسته بودن هر فیلتر
allFiltersOpen: false, // وضعیت باز یا بسته بودن همه فیلترها
showSubset: true,
reRender: 1,
filterKeyName: this.filterKey,
filterListKey: 1,
maxItem: 5,
isHideFilter: 0,
listFilter: [],
filterSelect: [],
filterItems: [],
filterListKey: 1,
filterUrl: "",
filter_schema: [],
filterUrl: "",
filter_expand2: {},
maxItem: 5,
tagsExpanded: false,
isHideFilter: 0,
windowWidth: window?.innerWidth,
};
},
computed: {
...mapState(useSearchStore, [
"searchSchemaGetter",
"searchActiveTabGetter",
"selectionFilterItemsGetter",
]),
...mapState(useResearchStore, ["researchSchemaGetter"]),
...mapState(useEntityStore, ["qruleActiveSchemaGetter"]),
myActiveSchema() {
return this.activeTabGetter?.filter;
// if (this.$route.name == "searchResult")
// return this.searchActiveTabGetter?.filter; // برای بخش جستجو
// else if (this.$route.name == "/search/lists") {
// return this.searchActiveTabGetter?.filter; // برای بخش جستجو
// // return this.searchListActiveTabGetter?.filter; // برای بخش فهرست و نمودار
// } else if (this.$route.name == "searchChart") return this.searchChartActiveTabGetter?.filter; // برای بخش فهرست و نمودار
// else if (this.$route.name == "qrule") return this.qruleActiveSchemaGetter?.filter; // برای بخش فهرست و نمودار
},
listTags() {
if (
@ -122,27 +214,6 @@ export default {
},
},
watch: {
// changePageFilter(newVal) {
// if (this.$route.name === "searchResult") {
// if (newVal == 0) {
// this.$refs.filterdiv.classList.remove("hide");
// this.$refs.filterdiv.classList.add("show");
// } else {
// this.$refs.filterdiv.classList.remove("show");
// this.$refs.filterdiv.classList.add("hide");
// }
// } else {
// if (newVal == 0) {
// this.$refs.filterdiv.classList.remove("d-none");
// this.$refs.filterdiv.classList.remove("hide");
// this.$refs.filterdiv.classList.add("show");
// } else {
// this.$refs.filterdiv.classList.remove("show");
// this.$refs.filterdiv.classList.add("hide");
// }
// }
// },
filterItems(newVal) {
// this.selectionFilterItemsSetter(newVal)
this.$emit("filterItems", newVal);
@ -157,24 +228,24 @@ export default {
},
mounted() {
window.addEventListener("resize", this.handleResize);
if (this.$route.name === "searchResult") {
if (this.$route.path === "/search") {
// this.$refs.filterbuttom.classList.add("d-none");
// this.$refs.button.classList.add("d-none");
// this.$refs.filterdiv.classList.remove("show");
} else if (this.$route.name === "searchCategory") {
} else if (this.$route.path === "searchCategory") {
// this.$refs.filterbuttom.classList.remove("show");
// this.$refs.filterdiv.classList.add("d-none");
// this.$refs.filterbuttom.classList.add("d-none");
// this.hidenfilter();
} else if (this.$route.name === "searchNavigation") {
} else if (this.$route.path === "/search/lists") {
this.setAnswer(this.listAggregations);
this.filterItems = this.selectedFilterItems;
this.selectedFilterItems.forEach((element) => {
this.filterSelect.push(element.id);
});
this.searchfilter();
this.filterUpdate();
// this.filterSelect = this.selectedFilterItems
} else if (this.$route.name !== "searchCategory") {
} else if (this.$route.path !== "searchCategory") {
// this.$refs.filterbuttom.classList.add("d-none");
// this.$refs.button.classList.add("d-none");
// this.$refs.filterdiv.classList.remove("hide");
@ -190,36 +261,18 @@ export default {
},
methods: {
...mapActions(useSearchStore, ["selectionFilterItemsSetter"]),
// handleResize() {
// this.windowWidth = window.innerWidth;
// if (this.$route.name === "searchCategory") {
// this.$refs.filterdiv.classList.add("d-none");
// if (this.windowWidth < 991) {
// this.$refs.filterbuttom.classList.add("d-none");
// this.$refs.filterbuttom.classList.add("hide");
// // this.$refs.filterbuttom.classList.add("d-none");
// } else if (this.windowWidth > 991) {
// this.$refs.filterbuttom.classList.remove("d-none");
// this.$refs.filterbuttom.classList.remove("hide");
// }
// // if (!this.$refs.filterdiv.classList.contains("d-none")) {}
// } else {
// if (this.windowWidth > 991) {
// this.$refs.filterdiv.classList.remove("hide");
// this.$refs.filterdiv.classList.add("show");
// this.$refs.filterbuttom.classList.remove("d-none");
// this.$refs.button.classList.remove("hide");
// } else if (this.windowWidth < 991) {
// this.$refs.filterdiv.classList.remove("show");
// this.$refs.filterdiv.classList.add("hide");
// this.$refs.filterbuttom.classList.add("hide");
// this.$refs.button.classList.add("hide");
// }
// }
// },
toggleAllFilters() {
this.allFiltersOpen = !this.allFiltersOpen;
this.myActiveSchema.forEach((filter, index) => {
this.subsets[index] = this.allFiltersOpen;
});
},
toggleFilter(index) {
this.subsets[index] = !this.subsets[index];
},
/**
* نمایش فیلتر
*/
showfilter: function () {
// this.$refs.filterdiv.classList.add("show");
// this.$refs.filterdiv.classList.remove("d-none");
@ -231,6 +284,9 @@ export default {
this.isHideFilter = 0;
this.$emit("changeHideFilter", this.isHideFilter);
},
/**
* پنهان کردن فیلتر
*/
hidenfilter: function () {
// this.$refs.filterdiv.classList.remove("show");
// this.$refs.filterdiv.classList.add("hide");
@ -240,41 +296,47 @@ export default {
this.isHideFilter = 1;
this.$emit("changeHideFilter", this.isHideFilter);
},
/**
* تنظیم پاسخ فیلترها
* @param {Array} list - لیست فیلترها
* @param {Boolean} emptyPrevFilter - آیا فیلترهای قبلی را خالی کند یا خیر
*/
setAnswer: function (list, emptyPrevFilter = true) {
// console.log(list)
this.listFilter = list;
this.reRender++;
},
/**
* بازنشانی فیلترها
*/
resetFilter() {
this.filterSelect = [];
this.filterItems = [];
this.listFilter = [];
this.filterListKey++;
},
/**
* خالی کردن فیلترها
*/
emptyFilter: function () {
this.filterSelect = [];
this.filterItems = [];
this.filterListKey++;
this.$el.querySelectorAll("a.active").forEach((el) => {
this.$el?.querySelectorAll("a.active").forEach((el) => {
el.classList.remove("active");
});
this.searchfilter();
this.filterUpdate();
},
// toggelClick(el, type, item) {
// var key = type + "#" + item;
// if (el.classList.contains("active")) {
// this.delFilter(key);
// el.classList.remove("active");
// } else {
// this.addFilter(key);
// this.filterItems.push({ id: key, title: item });
// el.classList.add("active");
// }
// // this.selectionFilterItemsSetter(this.filterItems);
// this.filterListKey++;
// },
toggelClick(el, type, item) {
var key = type + "#" + item;
/**
* مدیریت کلیک برای افزودن یا حذف فیلتر
* @param {Element} el - عنصر HTML
* @param {String} type - نوع فیلتر
* @param {String} item - آیتم فیلتر
*/
toggelClick(el, filter, item) {
this.filterKeyName = this.filterKeyName
? this.filterKeyName
: "filter_key";
var key = filter[this.filterKeyName] + "#" + item;
var foundIndex = -1;
// جستجو در آرایه filterItems برای یافتن ایتم مورد نظر
@ -289,17 +351,20 @@ export default {
// اگر ایتم در آرایه وجود داشت، آن را حذف کن
this.delFilter(key);
// this.filterItems.splice(foundIndex, 1);
el.classList.remove("active");
el?.classList.remove("active");
} else {
// اگر ایتم در آرایه وجود نداشت، آن را اضافه کن
this.addFilter(key);
this.filterItems.push({ id: key, title: item });
el.classList.add("active");
el?.classList.add("active");
}
// this.selectionFilterItemsSetter(this.filterItems);
this.filterListKey++;
},
/**
* حذف یک آیتم فیلتر
* @param {String} key - کلید فیلتر
*/
delFilterItem(key) {
var index = this.filterItems.indexOf(key);
if (index != -1) {
@ -308,8 +373,12 @@ export default {
// this.selectionFilterItemsSetter(this.filterItems);
}
this.filterListKey++;
this.searchfilter();
this.filterUpdate();
},
/**
* حذف فیلتر
* @param {String} key - کلید فیلتر
*/
delFilter(key) {
var index = this.filterSelect.indexOf(key);
if (index != -1) {
@ -317,14 +386,21 @@ export default {
this.filterItems.splice(index, 1);
}
this.filterListKey++;
this.searchfilter();
this.filterUpdate();
},
/**
* افزودن فیلتر
* @param {String} key - کلید فیلتر
*/
addFilter(key) {
this.filterSelect.push(key);
this.filterListKey++;
this.searchfilter();
this.filterUpdate();
},
searchfilter() {
/**
* جستجوی فیلترها و ایجاد URL فیلتر شده
*/
filterUpdate() {
this.filterSelect.sort(function (x, y) {
return y - x;
});
@ -342,15 +418,29 @@ export default {
});
this.$emit("filterUpdate", this.filterUrl);
},
/**
* بررسی وضعیت باز یا بسته بودن فیلتر
* @param {String} key - کلید فیلتر
* @returns {Boolean} وضعیت باز یا بسته بودن فیلتر
*/
isFilterExpand(key) {
if (!(key in this.filter_expand2))
this.$set(this.filter_expand2, key, false);
if (!(key in this.filter_expand2)) this.filter_expand2[key] = false;
return this.filter_expand2[key];
},
/**
* تنظیم وضعیت باز یا بسته بودن فیلتر
* @param {String} key - کلید فیلتر
* @param {Boolean} state - وضعیت باز یا بسته بودن فیلتر
*/
setFilterExpand(key, state = false) {
this.$set(this.filter_expand2, key, state);
this.filter_expand2[key] = state;
},
/**
* دریافت آیتم‌های فیلتر
* @param {String} key - کلید فیلتر
* @param {Number} by_more - تعداد آیتم‌ها
* @returns {Array} لیست آیتم‌های فیلتر
*/
getFilterItems(key, by_more = 0) {
if (!(key in this.listFilter)) return [];
@ -362,18 +452,35 @@ export default {
else return this.listFilter[key].buckets.slice(0, this.maxItem);
} else return this.listFilter[key].buckets;
},
/**
* دریافت عنوان آیتم
* @param {Object} item - آیتم فیلتر
* @param {String} item.key - کلید آیتم فیلتر
* @returns {String} عنوان آیتم یا "نامشخص" در صورتی که کلید موجود نباشد
*/
getTitle(item) {
if (item && item.key && item.key != "") return item.key;
else return "نامشخص";
},
/**
* دریافت تعداد موردهای مرتبط با یک مورد خاص.
* @param {Object} item - مورد موردنظر.
* @returns {Number} تعداد موردها.
*/
getCount(item) {
if (item.total && item.total.value)
return item.total.value; //برای حالت کولپس اجزاء مثل قانون
else return item.doc_count;
},
},
components: {
SearchFilter: defineAsyncComponent(() =>
import("@search/components/search/SearchFilter.vue")
),
},
};
</script>
<style lang="scss" scoped>
.accordion {
margin-top: 24px;
@ -525,7 +632,7 @@ export default {
}
</style> -->
<style lang="scss" scoped>
// .main-filter {
.main-filter {
// background-color: green;
// z-index: 2;
// width: 16.3%;
@ -534,40 +641,32 @@ export default {
// margin-right: 16.5%;
// top: 8.9em;
// top: 0;
// background-color: #fff;
// width: 95%;
// margin: 5px auto;
// height: 100%;
// }
background-color: #fff;
width: 95%;
margin: 5px auto;
height: 100%;
}
.button-hiden {
padding: 1em;
display: flex;
justify-content: flex-end;
// position: relative;
// top: 21px;
// left: 17px;
// z-index: 9;
.btn {
background-color: var(--primary-color);
font-size: 0.7rem;
border-radius: 0.5em;
border: 1px solid var(--primary-color);
* {
color: #fff;
&::before {
color: inherit;
position: relative;
top: 21px;
left: 17px;
z-index: 9;
button {
font-size: 10px;
background-color: #fff;
border-radius: 0px;
border: none;
}
}
.body-filter {
width: 95%;
height: 78vh;
margin: 0 auto;
// background-color: gold;
overflow: auto;
}
}
// .body-filter {
// height: calc(100dvh - 13em);
// overflow: auto;
// }
.text-filter {
display: flex;
justify-content: space-between !important;
@ -583,46 +682,48 @@ export default {
display: block;
}
@media (max-width: 575.98px) {
// .main-filter {
// width: 100%;
// height: 99.5vh;
// top: 0;
// margin: 0;
// }
.main-filter {
width: 100%;
height: 99.5vh;
top: 0;
margin: 0;
}
// .search-items {
// height: calc(100vh - 3em);
// border-left: 1px solid #f2f2e6;
// }
// .body-filter {
// height: 100%;
// }
.body-filter {
height: 100%;
}
}
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
// .main-filter {
// width: 26em;
// height: 98.2vh;
// top: 11.9em;
// margin-right: 3.5%;
// }
.main-filter {
width: 26em;
height: 98.2vh;
top: 11.9em;
margin-right: 3.5%;
}
// .search-items {
// height: calc(100vh - 4em);
// }
// .body-filter {
// height: 100%;
// }
.body-filter {
height: 100%;
}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
// .main-filter {
// width: 23em;
// height: 83.2vh;
// top: 8.9em;
// margin-right: 6.5%;
// }
// .body-filter {
// height: 100%;
// }
.main-filter {
width: 23em;
height: 83.2vh;
top: 8.9em;
margin-right: 6.5%;
}
.body-filter {
height: 100%;
}
// .search-items {
// height: calc(100vh - 3em);
//
// }
}
@media only screen and (min-width: 992px) and (max-width: 1049.98px) {

31
pages/index.vue
View File

@ -282,6 +282,7 @@
ref="filterlist"
:lastSearchInListMode="lastSearchInListMode"
:changePageFilter="changePageFilter"
:activeTabGetter="researchSchemaGetter[0]"
class="filterList"
></ResearchFilterList>
@ -473,7 +474,7 @@ export default {
this.$store.commit("TOGGLE_SIDEBAR_MENU");
}
if ((this.researchSchemaGetter.length == 0)) this.getSchemas();
if (this.researchSchemaGetter.length == 0) this.getSchemas();
this.modetab = 0;
this.state = 2;
@ -893,7 +894,7 @@ export default {
// this.$refs.topheader.setSearchLine(query);
// }
},
changePaging: function (item) {
changePaging(item) {
this.pagination = item;
if (this.searchingState) this.getQueryForResearch("filter");
@ -1108,16 +1109,28 @@ export default {
ResearchFilterList: defineAsyncComponent(() =>
import("@research/components/research/components/ResearchFilterList.vue")
),
MyContent: defineAsyncComponent(() =>
import("@search/components/search/MyContent.vue")
),
ResearchFishModal: defineAsyncComponent(() =>
import("@research/components/research/components/ResearchFishModal.vue")
),
AdvancedSearch: defineAsyncComponent(() =>
import("@research/components/research/components/AdvancedSearch.vue")
),
SubjectForm: defineAsyncComponent(() =>
import("@research/components/research/components/SubjectForm.vue")
),
MyContent: () => import("@search/components/search/MyContent.vue"),
ResearchFishModal: () =>
import("@research/components/research/components/ResearchFishModal.vue"),
// MyContent: () => import("@search/components/search/MyContent.vue"),
// ResearchFishModal: () =>
// import("@research/components/research/components/ResearchFishModal.vue"),
// FilterList: () => import("@research/components/FilterList.vue"),
// FilterListSearch: () => import("@search/view/layout/FilterListSearch.vue"),
AdvancedSearch: () => import("@research/components/research/components/AdvancedSearch.vue"),
SubjectForm: () => import("@research/components/research/components/SubjectForm.vue"),
// AdvancedSearch: () =>
// import("@research/components/research/components/AdvancedSearch.vue"),
// SubjectForm: () =>
// import("@research/components/research/components/SubjectForm.vue"),
},
};
</script>