Add filter for keywords in catalog overview

src/components/Catalogs.vue

@@ -6,9 +6,19 @@
       <ViewButtons class="mr-2" v-model="view" />
       <SortButtons v-if="isComplete && catalogs.length > 1" v-model="sort" />
     </header>
-    <SearchBox v-if="isComplete && catalogs.length > 1" class="mt-1 mb-1" v-model="searchTerm" :placeholder="filterPlaceholder" />
+    <section v-if="isComplete && catalogs.length > 1" class="catalog-filter mb-2">
+      <SearchBox v-model="searchTerm" :placeholder="filterPlaceholder" />
+      <multiselect
+        v-if="allKeywords.length > 0" v-model="selectedKeywords" multiple :options="allKeywords"
+        :placeholder="$t('multiselect.keywordsPlaceholder')"
+        :selectLabel="$t('multiselect.selectLabel')"
+        :selectedLabel="$t('multiselect.selectedLabel')"
+        :deselectLabel="$t('multiselect.deselectLabel')"
+        :limitText="limitText"
+      />
+    </section>
     <Pagination ref="topPagination" v-if="showPagination" :pagination="pagination" placement="top" @paginate="paginate" />
-    <b-alert v-if="searchTerm && catalogView.length === 0" variant="warning" show>{{ $t('catalogs.noMatches') }}</b-alert>
+    <b-alert v-if="hasSearchCritera && catalogView.length === 0" variant="warning" class="mt-2" show>{{ $t('catalogs.noMatches') }}</b-alert>
     <section class="list">
       <Loading v-if="loading" fill top />
       <component :is="cardsComponent" v-bind="cardsComponentProps">
@@ -39,7 +49,8 @@ export default {
     Loading,
     Pagination: () => import('./Pagination.vue'),
     SearchBox: () => import('./SearchBox.vue'),
-    SortButtons: () => import('./SortButtons.vue')
+    SortButtons: () => import('./SortButtons.vue'),
+    Multiselect: () => import('vue-multiselect')
   },
   mixins: [
     ViewMixin
@@ -73,7 +84,8 @@ export default {
   data() {
     return {
       searchTerm: '',
-      sort: 0
+      sort: 0,
+      selectedKeywords: []
     };
   },
   computed: {
@@ -109,25 +121,40 @@ export default {
       // Check whether any pagination links are available
       return Object.values(this.pagination).some(link => !!link);
     },
+    allCatalogs() {
+      return this.catalogs.map(catalog => {
+          let stac = this.getStac(catalog);
+          return stac ? stac : catalog;
+      });
+    },
+    hasSearchCritera() {
+      return this.searchTerm || this.selectedKeywords.length > 0;
+    },
     catalogView() {
       if (this.hasMore) {
         return this.catalogs;
       }
-      let catalogs = this.catalogs.map(catalog => {
-          let stac = this.getStac(catalog);
-          return stac ? stac : catalog;
-      });
       // Filter
-      if (this.searchTerm) {
+      let catalogs = this.allCatalogs;
+      if (this.hasSearchCritera) {
         catalogs = catalogs.filter(catalog => {
-          let haystack = [ catalog.title ];
-          if (catalog instanceof STAC && this.isComplete) {
-            haystack.push(catalog.id);
-            if (Array.isArray(catalog.keywords)) {
-              haystack = haystack.concat(catalog.keywords);
+          if (this.selectedKeywords.length > 0 && catalog instanceof STAC && Array.isArray(catalog.keywords)) {
+            let hasKeywords = this.selectedKeywords.every(keyword => catalog.keywords.includes(keyword));
+            if (!hasKeywords) {
+              return false;
+            }
+          }
+          if (this.searchTerm) {
+            let haystack = [ catalog.title ];
+            if (catalog instanceof STAC && this.isComplete) {
+              haystack.push(catalog.id);
+              if (Array.isArray(catalog.keywords)) {
+                haystack = haystack.concat(catalog.keywords);
+              }
             }
+            return Utils.search(this.searchTerm, haystack);
           }
-          return Utils.search(this.searchTerm, haystack);
+          return true;
         });
       }
       // Sort
@@ -138,6 +165,22 @@ export default {
         }
       }
       return catalogs;
+    },
+    allKeywords() {
+      if (!this.isComplete) {
+        return [];
+      }
+      let keywords = [];
+      for(let catalog of this.allCatalogs) {
+        if (catalog instanceof STAC && Array.isArray(catalog.keywords)) {
+          for(let keyword of catalog.keywords) {
+            if (!keywords.includes(keyword)) {
+              keywords.push(keyword);
+            }
+          }
+        }
+      }
+      return keywords.sort();
     }
   },
   created() {
@@ -157,7 +200,26 @@ export default {
         Utils.scrollTo(this.$refs.topPagination.$el);
       }
       this.$emit('paginate', link);
+    },
+    limitText(count) {
+      return this.$t("multiselect.andMore", {count});
     }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.catalog-filter {
+  display: flex;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  gap: 1rem;
+  align-items: stretch;
+
+  > * {
+    flex-grow: 1;
+    min-width: 300px;
+    width: 50%;
+  }
+}
+</style>

src/components/SearchBox.vue

@@ -42,13 +42,14 @@ export default {
 <style lang="scss">
 #stac-browser .search-box {
   position: relative;
+  box-sizing: border-box;
 
   input, .icon {
-    height: 1.5em;
     font-size: 1em;
     margin: 0;
   }
   input {
+    min-height: 1.5em;
     padding: 0.25em 0.3em;
     padding-left: 1.9em;
     z-index: 1;
@@ -59,14 +60,15 @@ export default {
     width: calc(100% - 1.9em - 0.25em - 2px);
   }
   .icon {
+    height: 1.5em;
     user-select: none;
-    margin-top: 0.3em;
+    margin-top: -0.75em;
     margin-left: 0.3em;
     width: 1em;
     z-index: 2;
     position: absolute;
-    top: 0;
+    top: 50%;
     left: 0;
   }
 }
-</style>
+</style>

src/components/SearchFilter.vue

@@ -580,8 +580,6 @@ export default {
 };
 </script>
 
-<style src=""></style>
-
 <style lang="scss">
 @import '../theme/variables.scss';
 
@@ -591,55 +589,9 @@ $primary-color: map-get($theme-colors, "primary");
 
 @import '~vue2-datepicker/scss/index.scss';
 
-// Multiselect related style
-@import '~vue-multiselect/dist/vue-multiselect.min.css';
-#stac-browser {
-  .multiselect__tags:focus-within {
-    border-color: #48cce1;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(24, 129, 145, 0.25);
-  }
-
-  .multiselect__select:before {
-    color: #495057;
-    border-color: #495057 transparent transparent;
-  }
-  
-  .multiselect__tags,
-  .multiselect__single {
-    border-color: #ced4da;
-    padding-left: 0.75rem;
-    font-size: 16px;
-  }
-
-  .multiselect__input,
-  .multiselect__single {
-    padding: 4px 0 3px 0;
-  }
-
-  .multiselect__tag,
-  .multiselect__tag-icon:hover,
-  .multiselect__option--highlight,
-  .multiselect__option--highlight:after {
-    background-color: map-get($theme-colors, "primary");
-  }
-
-  .multiselect__option--selected.multiselect__option--highlight,
-  .multiselect__option--selected.multiselect__option--highlight:after {
-    background-color: map-get($theme-colors, "secondary");
-  }
-
-  .multiselect__placeholder {
-    color: #999;
-    font-size: 16px;
-  }
-}
-
-.queryables {
-  .dropdown-menu {
-    max-height: 90vh;
-    overflow: auto;
-  }
+.queryables .dropdown-menu {
+  max-height: 90vh;
+  overflow: auto;
 }
 
 // General item filter style

src/locales/de/texts.json

@@ -154,7 +154,8 @@
   "multiselect": {
     "andMore": "und {count} weitere",
     "deselectLabel": "Enter zum Entfernen",
-    "placeholder": "Option wählen",
+    "placeholder": "Option auswählen",
+    "keywordsPlaceholder": "Schlüsselwörter auswählen",
     "selectLabel": "Enter zum Selektieren",
     "selectedLabel": "Selektiert"
   },

src/locales/en/texts.json

@@ -155,6 +155,7 @@
     "andMore": "and {count} more",
     "deselectLabel": "Press enter to remove",
     "placeholder": "Select option",
+    "keywordsPlaceholder": "Select keywords",
     "selectLabel": "Press enter to select",
     "selectedLabel": "Selected"
   },

src/theme/page.scss

@@ -11,7 +11,7 @@ body {
     display: flex;
     flex-direction: column;
     max-width: 100%;
-	height: 100%;
+    height: 100%;
     min-height: 100%;
     gap: $block-margin;
 
@@ -235,4 +235,55 @@ body {
             }
         }
     }
-}
+}
+
+@import '~vue-multiselect/dist/vue-multiselect.min.css';
+
+// Datepicker related style
+$default-color: map-get($theme-colors, "secondary");
+$primary-color: map-get($theme-colors, "primary");
+
+// Multiselect related style
+#stac-browser {
+
+  .multiselect__tags:focus-within {
+    border-color: #48cce1;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(24, 129, 145, 0.25);
+  }
+
+  .multiselect__select:before {
+    color: #495057;
+    border-color: #495057 transparent transparent;
+  }
+
+  .multiselect__tags,
+  .multiselect__single {
+    border-color: #ccc;
+    padding-left: 0.75rem;
+    font-size: 16px;
+    height: 100%;
+  }
+
+  .multiselect__input,
+  .multiselect__single {
+    padding: 4px 0 3px 0;
+  }
+
+  .multiselect__tag,
+  .multiselect__tag-icon:hover,
+  .multiselect__option--highlight,
+  .multiselect__option--highlight:after {
+    background-color: map-get($theme-colors, "primary");
+  }
+
+  .multiselect__option--selected.multiselect__option--highlight,
+  .multiselect__option--selected.multiselect__option--highlight:after {
+    background-color: map-get($theme-colors, "secondary");
+  }
+
+  .multiselect__placeholder {
+    color: #999;
+    font-size: 16px;
+  }
+}