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

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

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

57
pages/index.vue
View File

@ -282,6 +282,7 @@
ref="filterlist" ref="filterlist"
:lastSearchInListMode="lastSearchInListMode" :lastSearchInListMode="lastSearchInListMode"
:changePageFilter="changePageFilter" :changePageFilter="changePageFilter"
:activeTabGetter="researchSchemaGetter[0]"
class="filterList" class="filterList"
></ResearchFilterList> ></ResearchFilterList>
@ -310,19 +311,19 @@
ref="content" ref="content"
></component> --> ></component> -->
<MyContent <MyContent
:key="reRender" :key="reRender"
:pagination="pagination" :pagination="pagination"
:viewMode="'list'" :viewMode="'list'"
@changePage="changePaging" @changePage="changePaging"
:schemaItems="myActiveSchema?.search_content" :schemaItems="myActiveSchema?.search_content"
:items="listAnswer" :items="listAnswer"
ref="content" ref="content"
@ModalHandler="researchModalHandler" @ModalHandler="researchModalHandler"
@SubjectForm="SubjectFormHandler" @SubjectForm="SubjectFormHandler"
@updateForDeleteResearch="getQueryForResearch()" @updateForDeleteResearch="getQueryForResearch()"
@delete="deleteFormHandle" @delete="deleteFormHandle"
> >
</MyContent> </MyContent>
</div> </div>
<no-data v-else> <no-data v-else>
<div class="d-flex justify-content-center align-items-center"> <div class="d-flex justify-content-center align-items-center">
@ -473,7 +474,7 @@ export default {
this.$store.commit("TOGGLE_SIDEBAR_MENU"); this.$store.commit("TOGGLE_SIDEBAR_MENU");
} }
if ((this.researchSchemaGetter.length == 0)) this.getSchemas(); if (this.researchSchemaGetter.length == 0) this.getSchemas();
this.modetab = 0; this.modetab = 0;
this.state = 2; this.state = 2;
@ -893,7 +894,7 @@ export default {
// this.$refs.topheader.setSearchLine(query); // this.$refs.topheader.setSearchLine(query);
// } // }
}, },
changePaging: function (item) { changePaging(item) {
this.pagination = item; this.pagination = item;
if (this.searchingState) this.getQueryForResearch("filter"); if (this.searchingState) this.getQueryForResearch("filter");
@ -1108,16 +1109,28 @@ export default {
ResearchFilterList: defineAsyncComponent(() => ResearchFilterList: defineAsyncComponent(() =>
import("@research/components/research/components/ResearchFilterList.vue") 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: () =>
MyContent: () => import("@search/components/search/MyContent.vue"), // import("@research/components/research/components/ResearchFishModal.vue"),
ResearchFishModal: () =>
import("@research/components/research/components/ResearchFishModal.vue"),
// FilterList: () => import("@research/components/FilterList.vue"), // FilterList: () => import("@research/components/FilterList.vue"),
// FilterListSearch: () => import("@search/view/layout/FilterListSearch.vue"), // FilterListSearch: () => import("@search/view/layout/FilterListSearch.vue"),
AdvancedSearch: () => import("@research/components/research/components/AdvancedSearch.vue"), // AdvancedSearch: () =>
SubjectForm: () => import("@research/components/research/components/SubjectForm.vue"), // import("@research/components/research/components/AdvancedSearch.vue"),
// SubjectForm: () =>
// import("@research/components/research/components/SubjectForm.vue"),
}, },
}; };
</script> </script>