@abi-software/map-side-bar 2.5.3-beta.1 → 2.5.3-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.5.3-beta.1",
+  "version": "2.5.3-beta.3",
   "files": [
     "dist/*",
     "src/*",

package/src/components/SearchHistory.vue

@@ -48,13 +48,17 @@
                   popper-class="popover-dropdown"
                 >
                   <template #reference>
-                    {{ item.label }}
+                    <span class="dropdown-clickable-item" @click="search(item)">
+                      {{ item.label }}
+                    </span>
                   </template>
                   {{ item.longLabel }}
                 </el-popover>
               </template>
               <template v-else>
-                {{ item.label }}
+                <span class="dropdown-clickable-item" @click="search(item)">
+                  {{ item.label }}
+                </span>
               </template>
             </div>
             <div>
@@ -71,8 +75,20 @@
                     :disabled="savedSearchHistory.length > 1 && !item.saved"
                   >
                     <el-icon color="#8300BF">
-                      <el-icon-star-filled v-if="item.saved" />
-                      <el-icon-star v-else />
+                      <template v-if="item.saved">
+                        <svg
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"></path>
+                        </svg>
+                      </template>
+                      <template v-else>
+                        <svg
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"></path>
+                        </svg>
+                      </template>
                     </el-icon>
                   </el-button>
                 </template>
@@ -94,7 +110,9 @@
                 popper-class="popover-dropdown"
               >
                 <template #reference>
-                  <el-button circle text size="small" @click="removeFromSavedSearch(item)">
+                  <el-button circle text size="small"
+                    @click="removeFromSavedSearch(item)"
+                  >
                     <el-icon color="#8300BF">
                       <el-icon-delete />
                     </el-icon>
@@ -171,12 +189,15 @@ export default {
       localStorage.removeItem('sparc.science-sidebar-search-history')
       this.searchHistory = []
     },
+    sortFilters(a, b) {
+      return a.facetPropPath.localeCompare(b.facetPropPath);
+    },
     addSearchToHistory(filters = [], search = '') {
       search = search.trim() // remove whitespace
 
       const isExistingItem = this.searchHistory.some((item) => (
         item.search === search &&
-        JSON.stringify(item.filters) === JSON.stringify(filters)
+        JSON.stringify(item.filters.sort(this.sortFilters)) === JSON.stringify(filters.sort(this.sortFilters))
       ));
 
       if (!isExistingItem) {
@@ -206,14 +227,25 @@ export default {
         if (!item.id) {
           item['id'] = generateUUID();
         }
+
         if (!item.label) {
           const {label, longLabel} = this.searchHistoryItemLabel(item.search, item.filters);
           item['label'] = label;
           item['longLabel'] = longLabel;
         }
+
+        // filters won't work correctly with facet2
+        item.filters.forEach((filter) => {
+          if (filter.facet2) {
+            filter['facet'] = filter.facet2;
+            delete filter.facet2;
+          }
+        });
+
         if (!item.saved) {
           item['saved'] = false;
         }
+
         if (!item.updated) {
           item['updated'] = (new Date()).getTime();
         }
@@ -351,7 +383,6 @@ export default {
   transition: var(--el-transition-duration);
   transform: translateZ(0);
   box-shadow: 0 0 0 1px var(--el-border-color) inset;
-  cursor: pointer;
 }
 
 .el-dropdown-select {
@@ -385,6 +416,14 @@ export default {
     overflow: hidden;
   }
 
+  .dropdown-clickable-item {
+    cursor: pointer;
+
+    &:hover {
+      color: $app-primary-color;
+    }
+  }
+
   + .el-dropdown-menu__item {
     &::before {
       content: "";

package/src/components/SidebarContent.vue

@@ -173,7 +173,7 @@ export default {
       this.results = []
       this.loadingCards = false
     },
-    openSearch: function (filter, search = '') {
+    openSearch: function (filter, search = '', option = { withSearch: true }) {
       this.searchInput = search
       this.resetPageNavigation()
       //Proceed normally if cascader is ready
@@ -192,14 +192,16 @@ export default {
           this.$refs.filtersRef.checkShowAllBoxes()
           this.resetSearch()
         } else if (this.filter) {
-          this.searchAlgolia(this.filter, search)
+          if (option.withSearch) {
+            this.searchAlgolia(this.filter, search)
+          }
           this.$refs.filtersRef.setCascader(this.filter)
         }
       } else {
         //cascader is not ready, perform search if no filter is set,
         //otherwise waith for cascader to be ready
         this.filter = filter
-        if (!filter || filter.length == 0) {
+        if ((!filter || filter.length == 0) && option.withSearch) {
           this.searchAlgolia(this.filter, search)
         }
       }
@@ -242,9 +244,23 @@ export default {
         type: 'filter-update',
       })
     },
+    /**
+     * Transform filters for third level items to perform search
+     * because cascader keeps adding it back.
+     */
+    transformFiltersBeforeSearch: function (filters) {
+      return filters.map((filter) => {
+        if (filter.facet2) {
+          filter.facet = filter.facet2;
+          delete filter.facet2;
+        }
+        return filter;
+      });
+    },
     searchAndFilterUpdate: function () {
       this.resetPageNavigation();
-      this.searchAlgolia(this.filters, this.searchInput);
+      const transformedFilters = this.transformFiltersBeforeSearch(this.filters);
+      this.searchAlgolia(transformedFilters, this.searchInput);
       this.$refs.searchHistory.selectValue = 'Search history';
       // save history only if there has value
       if (this.filters.length || this.searchInput?.trim()) {
@@ -445,7 +461,9 @@ export default {
     searchHistorySearch: function (item) {
       this.searchInput = item.search
       this.filters = item.filters
-      this.openSearch(item.filters, item.search)
+      this.searchAndFilterUpdate();
+      // withSearch: false to prevent algoliaSearch in openSearch
+      this.openSearch([...item.filters], item.search, { withSearch: false });
     },
   },
   mounted: function () {

package/src/components.d.ts

@@ -25,8 +25,6 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
-    ElIconStar: typeof import('@element-plus/icons-vue')['Star']
-    ElIconStarFilled: typeof import('@element-plus/icons-vue')['StarFilled']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
     ElInput: typeof import('element-plus/es')['ElInput']