Support collection links everywhere radiantearth/stac-spec#1236

radiantearth · Jun 14, 2023 · 2689b44 · 2689b44
1 parent a621102
commit 2689b44
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 19 deletions.
diff --git a/src/components/CollectionLink.vue b/src/components/CollectionLink.vue
@@ -0,0 +1,45 @@
+<template>
+  <section v-if="collection" class="parent-collection card-list mb-4">
+    <h2>{{ $tc('stacCollection') }}</h2>
+    <Catalog :catalog="collection" :showThumbnail="showThumbnail" />
+  </section>
+</template>
+
+<script>
+import Catalog from './Catalog.vue';
+import { mapGetters } from 'vuex';
+import Utils from '../utils';
+
+export default {
+  name: "CollectionLink",
+  components: {
+    Catalog
+  },
+  props: {
+    link: {
+      type: Object,
+      required: true
+    },
+    showThumbnail: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(['getStac']),
+    collection() {
+      return this.getStac(this.link);
+    }
+  },
+  watch: {
+    link: {
+      immediate: true,
+      handler(newLink) {
+        if (Utils.isObject(newLink)) {
+          this.$store.dispatch("load", { url: newLink.href });
+        }
+      }
+    }
+  }
+};
+</script>
diff --git a/src/views/Catalog.vue b/src/views/Catalog.vue
@@ -38,6 +38,7 @@
         <Assets v-if="hasItemAssets && !hasItems" :assets="data.item_assets" :definition="true" />
         <Providers v-if="hasProviders" :providers="data.providers" />
         <Metadata :title="$t('metadata.title')" class="mb-4" :type="data.type" :data="data" :ignoreFields="ignoredMetadataFields" />
+        <CollectionLink v-if="collectionLink" :link="collectionLink" />
         <Links v-if="linkPosition === 'right'" :title="$t('additionalResources')" :links="additionalLinks" />
       </b-col>
       <b-col class="catalogs-container" v-if="hasCatalogs">
@@ -76,6 +77,7 @@ export default {
     BTabs,
     BTab,
     Catalogs,
+    CollectionLink: () => import('../components/CollectionLink.vue'),
     DeprecationNotice: () => import('../components/DeprecationNotice.vue'),
     Description,
     Items,
@@ -126,7 +128,7 @@ export default {
   },
   computed: {
     ...mapState(['data', 'url', 'apiItems', 'apiItemsLink', 'apiItemsPagination']),
-    ...mapGetters(['additionalLinks', 'catalogs', 'isCollection', 'items', 'hasMoreCollections', 'getApiItemsLoading', 'parentLink', 'rootLink']),
+    ...mapGetters(['additionalLinks', 'catalogs', 'collectionLink', 'isCollection', 'items', 'hasMoreCollections', 'getApiItemsLoading', 'parentLink', 'rootLink']),
     hasThumbnails() {
       return this.thumbnails.length > 0;
     },

diff --git a/src/views/Item.vue b/src/views/Item.vue
@@ -27,10 +27,7 @@
           </ReadMore>
           <Keywords v-if="Array.isArray(data.properties.keywords) && data.properties.keywords.length > 0" :keywords="data.properties.keywords" />
         </section>
-        <section class="item-collection card-list mb-4" v-if="collection">
-          <h2>{{ $tc('stacCollection') }}</h2>
-          <Catalog :catalog="collection" :showThumbnail="false" />
-        </section>
+        <CollectionLink v-if="collectionLink" :link="collectionLink" />
         <Providers v-if="data.properties.providers" :providers="data.properties.providers" />
         <Metadata :data="data" type="Item" :ignoreFields="ignoredMetadataFields" />
       </b-col>
@@ -45,7 +42,6 @@ import Description from '../components/Description.vue';
 import ReadMore from "vue-read-more-smooth";
 import ShowAssetMixin from '../components/ShowAssetMixin';
 import { BTabs, BTab } from 'bootstrap-vue';
-import Utils from '../utils';
 import { addSchemaToDocument, createItemSchema } from '../schema-org';
 
 export default {
@@ -55,7 +51,7 @@ export default {
     Assets,
     BTabs,
     BTab,
-    Catalog: () => import('../components/Catalog.vue'),
+    CollectionLink: () => import('../components/CollectionLink.vue'),
     Description,
     DeprecationNotice: () => import('../components/DeprecationNotice.vue'),
     Links: () => import('../components/Links.vue'),
@@ -84,10 +80,7 @@ export default {
   },
   computed: {
     ...mapState(['data', 'url']),
-    ...mapGetters(['additionalLinks', 'collectionLink', 'getStac', 'parentLink']),
-    collection() {
-      return this.getStac(this.collectionLink);
-    }
+    ...mapGetters(['additionalLinks', 'collectionLink', 'parentLink'])
   },
   watch: {
     data: {
@@ -100,14 +93,6 @@ export default {
           console.error(error);
         }
       }
-    },
-    collectionLink: {
-      immediate: true,
-      handler(newLink) {
-        if (Utils.isObject(newLink)) {
-          this.$store.dispatch("load", { url: newLink.href });
-        }
-      }
     }
   }
 };