تغییرات

components/research/components/AdvancedSearch.vue

@@ -40,8 +40,8 @@
 
 <script>
 
-import { useResearchStore } from "../../../stores/researchStore";
-
+import { useResearchStore } from "@research/stores/researchStore";
+import { useSearchStore } from "@research/stores/searchStore";
 import { mapState } from "pinia";
 
 export default {
@@ -53,7 +53,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(useSearchStore, ["searchActiveTabGetter"]),
+    // ...mapState(useSearchStore, ["searchActiveTabGetter"]),
     ...mapState(useResearchStore, ["researchSchemaGetter"]),
   },
   watch: {

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,59 +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>
@@ -79,38 +128,81 @@
 
 <script>
 import { mapState, mapActions } from "pinia";
-import { useSearchStore } from "~/stores/searchStore";
-import { useResearchStore } from "../../../stores/researchStore";
+import { useEntityStore } from "@search/stores/entityStore";
+import { useSearchStore } from "@search/stores/searchStore";
+/** 
+ * 
+ * @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,59 +214,38 @@ 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)
+    filterItems(newVal) {
+      // this.selectionFilterItemsSetter(newVal)
       this.$emit("filterItems", newVal);
     },
     $route: {
       handler: function (to, from) {},
     },
   },
-  
+
   beforeDestroy() {
     window.removeEventListener("resize", this.handleResize);
   },
   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.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,19 +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) {
@@ -310,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) {
@@ -319,21 +386,27 @@ 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;
       });
       this.filterUrl = "";
       var prevType = "";
       this.filterSelect.forEach((item) => {
-
         var items = item.split("#");
 
         if (prevType == items[0]) {
@@ -345,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 [];
 
@@ -365,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;
@@ -528,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;
@@ -586,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) {

layouts/ResearchLayout.vue

@@ -0,0 +1,56 @@
+<template>
+  <main >
+      <the-sidebar :showUserAvatar="true" :menu="$attrs.menu"></the-sidebar>
+
+    <section
+      class="main-page__content"
+      :class="{ expanded: !isSidebarCollapsed }"
+    >
+      <slot name="named-slot"></slot>
+      <slot></slot>
+    </section>
+  </main>
+</template>
+
+<script>
+// import { mapActions, mapState } from "pinia";
+import { useCommonStore } from "~/stores/commonStore";
+import { clearBodyClass } from "@manuals/utilities";
+import { mapState } from "pinia";
+
+export default {
+  beforeMount() {
+    clearBodyClass();
+    // this.uuid = Math.floor(Math.random() * 100);
+    // document.title = import.meta.env.VITE_SEARCH_PAGE_TITLE;
+  },
+  // mounted() {
+  // this.setBodyClass(this.$attrs.bodyClass);
+  // },
+  destroyed() {
+    clearBodyClass();
+  },
+  data() {
+    return {
+      uuid: undefined,
+    };
+  },
+  computed: {
+    ...mapState(useCommonStore, ["isSidebarCollapsed"]),
+  },
+  // methods: {
+  // ...mapActions(useCommonStore, ["setBodyClass"]),
+  // },
+};
+</script>
+
+<style lang="scss">
+/*@import "../../assets/scss/projects/tahrir/tahrir";*/
+/*@import "../../assets/scss/projects/list/list";*/
+// @import "../assets/search/scss/search";
+@import "../assets/research/scss/research";
+.search-system .modal-backdrop.show {
+  display: block;
+  background-color: #0000003b;
+}
+</style>

layouts/readme.md

@@ -0,0 +1,5 @@
+Layouts are wrappers around pages that contain a common User Interface for several pages, such as
+a header and footer display. Layouts are Vue files using <slot /> components to display the page
+content. The layouts/default.vue file will be used by default. Custom layouts can be set as part of
+your page metadata.
+If you only have a single layout in your application, we recommend using app.vue with <NuxtPage /> instead.

stores/researchStore.ts

@@ -68,11 +68,11 @@ export const useResearchStore = defineStore("researchStore", {
     // },
   },
   actions: {
-    researchSchemaSetter(researchSchema = undefined) {
+    researchSchemaSetter(researchSchema = []) {
       this.researchSchema = researchSchema;
     },
 
-    researchActiveSchemaSetter(researchActiveSchema = undefined) {
+    researchActiveSchemaSetter(researchActiveSchema = []) {
       this.researchActiveSchema = researchActiveSchema;
     },
     researchDomainActiveSetter(domain: domain) {

stores/searchStore.ts

@@ -0,0 +1,210 @@
+import type {
+  activeSearchChartSchema,
+  activeSearchListSchema,
+  Domain,
+  searchActiveTab,
+  searchChartActiveTab,
+  searchListActiveTab,
+  searchSchema,
+  searchSynonymForm,
+  searchSynonymTitle,
+  selectionFilterItems,
+} from "~/types/searchTypes";
+
+import type {
+  isReturnFromItemshowPage,
+  list,
+  listComponentName,
+  listId,
+  projects,
+  selectedItem,
+  selectedProject,
+} from "~/types/listTypes";
+
+export const useSearchStore = defineStore("searchStore", {
+  persist: {
+    storage: piniaPluginPersistedstate.localStorage(),
+  },  state: () => ({
+    selectedProject: undefined as selectedProject | undefined,
+    isReturnFromItemshowPage: false as isReturnFromItemshowPage,
+    list: undefined as list | undefined,
+    listId: undefined as listId | undefined,
+    listComponentName: "ItemList" as listComponentName | undefined,
+    projects: [] as projects[],
+    // pieData: [],
+    selectedItem: undefined as selectedItem | undefined,
+
+
+    // activeTab: undefined,
+
+    searchActiveTab: undefined as searchActiveTab | undefined,
+    searchSchema: undefined as searchSchema | undefined,
+
+    searchActiveSchema: undefined as searchActiveTab | undefined,
+
+    searchListActiveTab: undefined as searchListActiveTab | undefined,
+    searchListSchema: undefined as searchListActiveTab[] | undefined,
+    activeSearchListSchema: undefined as activeSearchListSchema | undefined,
+
+    searchChartActiveTab: undefined as searchChartActiveTab | undefined,
+    searchChartSchema: undefined as searchChartActiveTab[] | undefined,
+    activeSearchChartSchema: undefined as activeSearchChartSchema | undefined,
+
+    searchSynonymTitle: undefined as searchSynonymTitle | undefined,
+    searchSynonymForm: undefined as searchSynonymForm | undefined,
+
+    selectionFilterItems: [] as selectionFilterItems,
+  }),
+  getters: {
+    projectsGetter(state) {
+      return state.projects;
+    },
+    selectedProjectGetter(state) {
+      return state.selectedProject;
+    },
+    listIdGetter(state) {
+      return state.listId;
+    },
+    listComponentNameGetter(state) {
+      return state.listComponentName;
+    },
+    selectedItemGetter(state) {
+      return state.selectedItem;
+    },
+    isReturnFromItemshowPageGetter(state) {
+      return state.isReturnFromItemshowPage;
+    },
+    listGetter(state) {
+      return state.list;
+    },
+
+    searchSynonymTitleGetter(state) {
+      return state.searchSynonymTitle;
+    },
+    searchSynonymFormGetter(state) {
+      return state.searchSynonymForm;
+    },
+
+  
+    // activeTabGetter(state) {
+    //   return state.activeTab;
+    // },
+
+    // search page
+    searchActiveTabGetter(state) {
+      return state.searchActiveTab;
+    },
+    searchSchemaGetter(state) {
+      return state.searchSchema;
+    },
+
+    searchActiveSchemaGetter(state) {
+      return state.searchActiveSchema;
+    },
+
+    // search list
+    searchListActiveTabGetter(state) {
+      return state.searchListActiveTab;
+    },
+    searchListSchemaGetter(state) {
+      return state.searchListSchema;
+    },
+    searchListActiveSchemaGetter(state) {
+      return state.activeSearchListSchema;
+    },
+
+    // search chart
+    searchChartActiveTabGetter(state) {
+      return state.searchChartActiveTab;
+    },
+    searchChartSchemaGetter(state) {
+      return state.searchChartSchema;
+    },
+    searchChartActiveSchemaGetter(state) {
+      return state.activeSearchChartSchema;
+    },
+    selectionFilterItemsGetter(state) {
+      return state.selectionFilterItems;
+    },
+  },
+  actions: {
+    SET_SELECTED_PROJECT(selectedProject = undefined) {
+      this.selectedProject = selectedProject;
+    },
+    SET_LIST_ID(listId = undefined) {
+      this.listId = listId;
+    },
+    SET_LIST_COMPONENT_NAME(
+      payload = { selectedItem: undefined, listComponentName: undefined }
+    ) {
+      this.selectedItem = payload.selectedItem;
+      this.listComponentName = payload.listComponentName;
+    },
+    SET_SELECTED_ITEM(selectedItem = undefined) {
+      this.selectedItem = selectedItem;
+    },
+    SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(isReturnFromItemshowPage = false) {
+      this.isReturnFromItemshowPage = isReturnFromItemshowPage;
+    },
+    SET_LIST(list = undefined) {
+      this.list = list;
+    },
+    
+    searchSynonymFormSetter(searchSynonymForm = undefined) {
+      this.searchSynonymForm = searchSynonymForm;
+    },
+    searchSynonymTitleSetter(searchSynonymTitle = undefined) {
+      this.searchSynonymTitle = searchSynonymTitle;
+    },
+
+   
+    // activeTabSetter(activeTab = undefined) {
+    //   this.activeTab = activeTab;
+    // },
+
+    // search page
+    searchActiveTabSetter(searchActiveTab: searchActiveTab = undefined) {
+      this.searchActiveTab = searchActiveTab;
+    },
+    searchSchemaSetter(searchSchema = undefined) {
+      this.searchSchema = searchSchema;
+    },
+ 
+    searchActiveSchemaSetter(searchActiveSchema = undefined) {
+      this.searchActiveSchema = searchActiveSchema;
+    },
+
+    // search list
+    searchListActiveTabSetter(searchListActiveTab = undefined) {
+      this.searchListActiveTab = searchListActiveTab;
+    },
+    searchListSchemaSetter(searchListSchema = undefined) {
+      this.searchListSchema = searchListSchema;
+    },
+    searchListActiveSchemaSetter(activeSearchListSchema = undefined) {
+      this.activeSearchListSchema = activeSearchListSchema;
+    },
+
+    // search chart
+    searchChartActiveTabSetter(searchChartActiveTab = undefined) {
+      this.searchChartActiveTab = searchChartActiveTab;
+    },
+    searchChartSchemaSetter(searchChartSchema = undefined) {
+      this.searchChartSchema = searchChartSchema;
+    },
+    searchChartActiveSchemaSetter(activeSearchChartSchema = undefined) {
+      this.activeSearchChartSchema = activeSearchChartSchema;
+    },
+    selectionFilterItemsSetter(selectionFilterItems = []) {
+      this.selectionFilterItems = <selectionFilterItems>selectionFilterItems;
+    },
+  },
+});
+// export default {
+//   namespaced:true,
+
+//   state,
+//   actions,
+//   mutations,
+//   getters
+// };