Allow to show keywords in cards

radiantearth · Mar 7, 2024 · 5263cd7 · 5263cd7
1 parent 9561db7
commit 5263cd7
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 16 deletions.
diff --git a/config.js b/config.js
@@ -28,6 +28,8 @@ module.exports = {
     historyMode: "history",
     cardViewMode: "cards",
     cardViewSort: "asc",
+    showKeywordsInItemCards: false,
+    showKeywordsInCatalogCards: false,
     showThumbnailsAsAssets: false,
     stacLint: true,
     geoTiffResolution: 128,

diff --git a/docs/options.md b/docs/options.md
@@ -36,6 +36,8 @@ The following ways to set config options are possible:
 * [maxPreviewsOnMap](#maxpreviewsonmap)
 * [cardViewMode](#cardviewmode)
 * [cardViewSort](#cardviewsort)
+* [showKeywordsInItemCards](#showkeywordsinitemcards)
+* [showKeywordsInCatalogCards](#showkeywordsincatalogcards)
 * [showThumbnailsAsAssets](#showthumbnailsasassets)
 * [defaultThumbnailSize](#defaultthumbnailsize)
 * [crossOriginMedia](#crossoriginmedia)
@@ -244,6 +246,14 @@ The default sorting for lists of catalogs/collections or items. One of:
 - `"desc"`: descending sort
 - `null`: sorted as in the source files
 
+## showKeywordsInItemCards
+
+Enables keywords in the lists of items if set to `true`. Defaults to `false`.
+
+## showKeywordsInCatalogCards
+
+Enables keywords in the lists of catalogs/collections if set to `true`. Defaults to `false`.
+
 ## showThumbnailsAsAssets
 
 Defines whether thumbnails are shown in the lists of assets (`true`, default) or not.

diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
@@ -10,6 +10,7 @@
         <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
         {{ data.description | summarize }}
       </b-card-text>
+      <Keywords v-if="showKeywordsInCatalogCards && keywords.length > 0" :keywords="keywords" variant="primary" :center="!isList" />
       <b-card-text v-if="temporalExtent" class="datetime"><small v-html="temporalExtent" /></b-card-text>
     </b-card-body>
     <b-card-footer>
@@ -19,7 +20,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import StacFieldsMixin from './StacFieldsMixin';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
 import StacLink from './StacLink.vue';
@@ -30,7 +31,8 @@ import Utils from '../utils';
 export default {
   name: 'Catalog',
   components: {
-    StacLink
+    StacLink,
+    Keywords: () => import('./Keywords.vue')
   },
   filters: {
     summarize: text => Utils.summarizeMd(text, 300),
@@ -47,6 +49,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['showKeywordsInCatalogCards']),
     ...mapGetters(['getStac']),
     classes() {
       let classes = ['catalog-card'];
@@ -81,6 +84,12 @@ export default {
         return this.data.getFileFormats();
       }
       return [];
+    },
+    keywords() {
+      if (this.data) {
+        return this.data.getMetadata('keywords') || [];
+      }
+      return [];
     }
   },
   methods: {

diff --git a/src/components/Item.vue b/src/components/Item.vue
@@ -10,6 +10,7 @@
         <b-badge v-for="format in fileFormats" :key="format" variant="secondary" class="mr-1 mt-1 fileformat">{{ format | formatMediaType }}</b-badge>
         <template v-if="hasDescription">{{ data.properties.description | summarize }}</template>
       </b-card-text>
+      <Keywords v-if="showKeywordsInItemCards && keywords.length > 0" :keywords="keywords" variant="primary" center />
       <b-card-text>
         <small class="text-muted">
           <template v-if="extent">{{ extent | formatTemporalExtent }}</template>
@@ -22,7 +23,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
 import StacLink from './StacLink.vue';
 import STAC from '../models/stac';
@@ -35,7 +36,8 @@ Registry.addDependency('content-type', require('content-type'));
 export default {
   name: 'Item',
   components: {
-    StacLink
+    StacLink,
+    Keywords: () => import('./Keywords.vue')
   },
   filters: {
     summarize: text => Utils.summarizeMd(text, 150),
@@ -53,6 +55,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['showKeywordsInItemCards']),
     ...mapGetters(['getStac']),
     data() {
       return this.getStac(this.item);
@@ -69,6 +72,12 @@ export default {
       }
       return [];
     },
+    keywords() {
+      if (this.data) {
+        return this.data.getMetadata('keywords') || [];
+      }
+      return [];
+    },
     isDeprecated() {
       return this.data instanceof STAC && Boolean(this.data.properties.deprecated);
     },

diff --git a/src/components/Keywords.vue b/src/components/Keywords.vue
@@ -1,17 +1,25 @@
 <template>
-  <p class="keywords d-flex flex-wrap">
-    <b-badge v-for="keyword in keywords" :key="keyword" variant="secondary" class="mr-1 mb-1">{{ keyword }}</b-badge>
-  </p>
+  <div class="keywords d-flex flex-wrap" :class="{'justify-content-center': center}">
+    <b-badge v-for="keyword in keywords" :key="keyword" :variant="variant" class="mr-1 mb-1">{{ keyword }}</b-badge>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'Keywords',
-    props: {
-        keywords: {
-            type: Array,
-            required: true
-        }
+  name: 'Keywords',
+  props: {
+    keywords: {
+      type: Array,
+      required: true
+    },
+    variant: {
+      type: String,
+      default: 'secondary'
+    },
+    center: {
+      type: Boolean,
+      default: false
     }
+  }
 };
-</script>
+</script>
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
@@ -9,7 +9,7 @@
           <ReadMore v-if="data.description" :lines="10" :text="$t('read.more')" :text-less="$t('read.less')">
             <Description :description="data.description" />
           </ReadMore>
-          <Keywords v-if="Array.isArray(data.keywords) && data.keywords.length > 0" :keywords="data.keywords" />
+          <Keywords v-if="Array.isArray(data.keywords) && data.keywords.length > 0" :keywords="data.keywords" class="mb-3" />
           <section v-if="isCollection" class="metadata mb-4">
             <b-row v-if="licenses">
               <b-col md="4" class="label">{{ $t('catalog.license') }}</b-col>

diff --git a/src/views/Item.vue b/src/views/Item.vue
@@ -25,7 +25,7 @@
           <ReadMore v-if="data.properties.description" :lines="10" :text="$t('read.more')" :text-less="$t('read.less')">
             <Description :description="data.properties.description" />
           </ReadMore>
-          <Keywords v-if="Array.isArray(data.properties.keywords) && data.properties.keywords.length > 0" :keywords="data.properties.keywords" />
+          <Keywords v-if="Array.isArray(data.properties.keywords) && data.properties.keywords.length > 0" :keywords="data.properties.keywords" class="mb-3" />
         </section>
         <CollectionLink v-if="collectionLink" :link="collectionLink" />
         <Providers v-if="data.properties.providers" :providers="data.properties.providers" />