From c3aa6605ff449226a04817f0fb29a4b0f77654bc Mon Sep 17 00:00:00 2001
From: Mehdi104797 <92753457+Mehdi104797@users.noreply.github.com>
Date: Mon, 3 Mar 2025 13:25:44 +0330
Subject: [PATCH] =?UTF-8?q?=D8=AA=D8=BA=DB=8C=DB=8C=D8=B1=D8=A7=D8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ResearchFilterList.vue         | 531 +++++++++++-------
 pages/index.vue                               |  57 +-
 2 files changed, 351 insertions(+), 237 deletions(-)

diff --git a/components/research/components/ResearchFilterList.vue b/components/research/components/ResearchFilterList.vue
index a955535..9aa1eb4 100644
--- a/components/research/components/ResearchFilterList.vue
+++ b/components/research/components/ResearchFilterList.vue
@@ -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,62 +44,82 @@
             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>
-            <li
-              v-for="(item, i) in getFilterItems(
-                filter?.source_key,
-                filter.by_more
-              )"
-              :key="i"
+          <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)"
             >
-              <a
-                @click.prevent="
-                  toggelClick($event.target, filter.filter_key, item.key)
+              <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.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>
-                <span class="num text__12">{{ getCount(item) }}</span>
-              </a>
-            </li>
-            <li
-              v-if="
-                filter.by_more &&
-                listFilter &&
-                listFilter[filter.source_key]?.buckets.length > maxItem
-              "
-              style="color: #3f4abc"
-            >
-              <a
-                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>
+                <a
+                  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>
+          </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,49 +632,41 @@ export default {
 }
 </style> -->
 <style lang="scss" scoped>
-// .main-filter {
-// background-color: green;
-// z-index: 2;
-// width: 16.3%;
-// height: 82.6vh;
-// position: fixed;
-// margin-right: 16.5%;
-// top: 8.9em;
-// top: 0;
-// background-color: #fff;
-// width: 95%;
-// margin: 5px auto;
-// height: 100%;
-// }
+.main-filter {
+  // background-color: green;
+  // z-index: 2;
+  // width: 16.3%;
+  // height: 82.6vh;
+  // position: fixed;
+  // margin-right: 16.5%;
+  // top: 8.9em;
+  // top: 0;
+  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 {
-//   height: calc(100dvh - 13em);
-//   overflow: auto;
-// }
+.body-filter {
+  width: 95%;
+  height: 78vh;
+  margin: 0 auto;
+  // background-color: gold;
+  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%;
+  // height: calc(100vh - 4em);
+
   // }
+  .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);
+  // height: calc(100vh - 3em);
+  //
   // }
 }
 @media only screen and (min-width: 992px) and (max-width: 1049.98px) {
diff --git a/pages/index.vue b/pages/index.vue
index c3b59a2..887927a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -282,6 +282,7 @@
               ref="filterlist"
               :lastSearchInListMode="lastSearchInListMode"
               :changePageFilter="changePageFilter"
+              :activeTabGetter="researchSchemaGetter[0]"
               class="filterList"
             ></ResearchFilterList>
 
@@ -310,19 +311,19 @@
                 ref="content"
               ></component> -->
               <MyContent
-              :key="reRender"
-              :pagination="pagination"
-              :viewMode="'list'"
-              @changePage="changePaging"
-              :schemaItems="myActiveSchema?.search_content"
-              :items="listAnswer"
-              ref="content"
-              @ModalHandler="researchModalHandler"
-              @SubjectForm="SubjectFormHandler"
-              @updateForDeleteResearch="getQueryForResearch()"
-              @delete="deleteFormHandle"
-            >
-            </MyContent>
+                :key="reRender"
+                :pagination="pagination"
+                :viewMode="'list'"
+                @changePage="changePaging"
+                :schemaItems="myActiveSchema?.search_content"
+                :items="listAnswer"
+                ref="content"
+                @ModalHandler="researchModalHandler"
+                @SubjectForm="SubjectFormHandler"
+                @updateForDeleteResearch="getQueryForResearch()"
+                @delete="deleteFormHandle"
+              >
+              </MyContent>
             </div>
             <no-data v-else>
               <div class="d-flex justify-content-center align-items-center">
@@ -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>