@abi-software/map-side-bar 2.5.3-beta.5 → 2.5.3-beta.7

package/src/components/SidebarContent.vue

@@ -15,6 +15,7 @@
           class="button"
           @click="searchEvent"
           size="large"
+          :disabled="!searchInput.trim()"
         >
           Search
         </el-button>
@@ -95,6 +96,7 @@ var handleErrors = async function (response) {
 }
 
 var initial_state = {
+  filters: [],
   searchInput: '',
   lastSearch: '',
   results: [],
@@ -172,7 +174,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
@@ -191,14 +193,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)
         }
       }
@@ -223,31 +227,49 @@ export default {
       this.openSearch(this.filter, this.searchInput)
     },
     clearSearchClicked: function () {
-      this.searchInput = ''
-      this.resetPageNavigation()
-      this.searchAlgolia(this.filters, this.searchInput)
-      this.$refs.searchHistory.selectValue = 'Full search history'
+      this.searchInput = '';
+      this.searchAndFilterUpdate();
     },
     searchEvent: function (event = false) {
       if (event.keyCode === 13 || event instanceof MouseEvent) {
-        this.resetPageNavigation()
-        this.searchAlgolia(this.filters, this.searchInput)
-        this.$refs.searchHistory.selectValue = 'Full search history'
-        this.$refs.searchHistory.addSearchToHistory(
-          this.filters,
-          this.searchInput
-        )
+        this.searchInput = this.searchInput.trim();
+        this.searchAndFilterUpdate();
       }
     },
     filterUpdate: function (filters) {
       this.filters = [...filters]
-      this.resetPageNavigation()
-      this.searchAlgolia(filters, this.searchInput)
+      this.searchAndFilterUpdate();
       this.$emit('search-changed', {
         value: filters,
         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();
+      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()) {
+        this.$refs.searchHistory.addSearchToHistory(
+          this.filters,
+          this.searchInput
+        );
+      }
+    },
     searchAlgolia(filters, query = '') {
       // Algolia search
 
@@ -439,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 () {
@@ -487,6 +511,9 @@ export default {
   height: 100%;
   flex-flow: column;
   display: flex;
+  border: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .step-item {
@@ -499,21 +526,30 @@ export default {
   width: 298px !important;
   height: 40px;
   padding-right: 14px;
-  align-items: left;
+
+  :deep(.el-input__inner) {
+    font-family: inherit;
+  }
 }
 
 .header {
-  border: solid 1px #292b66;
-  background-color: #292b66;
-  text-align: left;
-
   .el-button {
+    font-family: inherit;
+
     &:hover,
     &:focus {
       background: $app-primary-color;
       box-shadow: -3px 2px 4px #00000040;
       color: #fff;
     }
+
+    &:disabled {
+      color: #fff;
+      background: $app-primary-color;
+      border-color: transparent;
+      cursor: default;
+      opacity: 0.9 !important;
+    }
   }
 }
 
@@ -560,6 +596,7 @@ export default {
   background-color: #ffffff;
   overflow-y: scroll;
   scrollbar-width: thin;
+  border-radius: var(--el-border-radius-base);
 }
 
 .content :deep(.el-loading-spinner .path) {

package/src/components.d.ts

@@ -16,9 +16,14 @@ declare module 'vue' {
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
+    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
     ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']