API landing page shows map of collections #14

Author: m-mohr

src/components/Catalogs.vue

@@ -3,10 +3,10 @@
     <header>
       <h2 class="title mr-2">{{ title }}</h2>
       <b-badge v-if="catalogCount !== null" pill variant="secondary" class="mr-4">{{ catalogCount }}</b-badge>
-      <ViewButtons class="mr-2" v-model="view" />
-      <SortButtons v-if="isComplete && catalogs.length > 1" v-model="sort" />
+      <ViewButtons v-if="!simple" class="mr-2" v-model="view" />
+      <SortButtons v-if="!simple && isComplete && catalogs.length > 1" v-model="sort" />
     </header>
-    <section v-if="isComplete && catalogs.length > 1" class="catalog-filter mb-2">
+    <section v-if="!simple && 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"
@@ -17,6 +17,7 @@
         :limitText="limitText"
       />
     </section>
+    <slot></slot>
     <Pagination v-if="showPagination" ref="topPagination" class="mb-3" :pagination="pagination" placement="top" @paginate="paginate" />
     <b-alert v-if="hasSearchCritera && catalogView.length === 0" variant="warning" class="mt-2" show>{{ $t('catalogs.noMatches') }}</b-alert>
     <section class="list">
@@ -79,7 +80,11 @@ export default {
     count: {
       type: Number,
       default: null
-    }
+    },
+    simple: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {

src/components/Items.vue

@@ -3,7 +3,7 @@
     <header>
       <h2 class="title mr-2">{{ $tc('stacItem', items.length ) }}</h2>
       <b-badge v-if="itemCount !== null" pill variant="secondary" class="mr-4">{{ itemCount }}</b-badge>
-      <SortButtons v-if="!api && items.length > 1" v-model="sort" />
+      <SortButtons v-if="!simple && !api && items.length > 1" v-model="sort" />
     </header>
 
     <Pagination
@@ -101,6 +101,10 @@ export default {
     count: {
       type: Number,
       default: null
+    },
+    simple: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/components/Map.vue

@@ -12,7 +12,8 @@
       :target="selectedItems.target" container="#stac-browser"
     >
       <section class="popover-items">
-        <Items :stac="stac" :items="selectedItems.items" />
+        <Catalogs v-if="itemsAreCollections" :catalogs="selectedItems.items" collectionsOnly simple />
+        <Items v-else :stac="stac" :items="selectedItems.items" simple />
       </section>
       <div class="text-center">
         <b-button target="_blank" variant="danger" @click="resetSelectedItems">{{ $t('mapping.close') }}</b-button>
@@ -41,6 +42,7 @@ export default {
   name: 'Map',
   components: {
     BPopover,
+    Catalogs: () => import('../components/Catalogs.vue'),
     Items: () => import('../components/Items.vue'),
     LayerControl,
     TextControl
@@ -58,7 +60,7 @@ export default {
       default: null
     },
     items: {
-      type: Object,
+      type: [Object, Array], // Array = Collections, Object = Items
       default: null
     },
     noscroll: {
@@ -79,7 +81,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['getStac'])
+    ...mapGetters(['getStac']),
+    itemsAreCollections() {
+      return Array.isArray(this.items);
+    },
   },
   watch: {
     async stac() {
@@ -218,7 +223,7 @@ export default {
     margin-right: -0.75rem;
     padding: 0.5rem 0.75rem 0  0.75rem;
 
-    .items {
+    .items, .catalogs {
       margin-bottom: 0 !important;
     }
 

src/views/Catalog.vue

@@ -42,11 +42,13 @@
         <Links v-if="linkPosition === 'right'" :title="$t('additionalResources')" :links="additionalLinks" :context="data" />
       </b-col>
       <b-col class="catalogs-container" v-if="hasCatalogs">
-        <Catalogs :catalogs="catalogs" :hasMore="!!nextCollectionsLink" @loadMore="loadMoreCollections" />
+        <Catalogs :catalogs="catalogs" :hasMore="!!nextCollectionsLink" @loadMore="loadMoreCollections">
+          <Map v-if="isCollectionApi && !isCollection && apiCatalogPriority !== 'childs'" class="mb-2" :stac="data" :items="catalogs" v-bind="catalogs" noscroll popover />
+        </Catalogs>
       </b-col>
       <b-col class="items-container" v-if="hasItems">
         <Items
-          :stac="data" :items="items" :api="isApi"
+          :stac="data" :items="items" :api="isItemsApi"
           :showFilters="showFilters" :apiFilters="filters"
           :pagination="itemPages" :loading="apiItemsLoading"
           @paginate="paginateItems" @filterItems="filterItems"
@@ -135,7 +137,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(['data', 'url', 'apiItems', 'apiItemsLink', 'apiItemsPagination', 'nextCollectionsLink', 'stateQueryParameters']),
+    ...mapState(['data', 'url', 'apiItems', 'apiItemsLink', 'apiItemsPagination', 'apiCatalogPriority', 'nextCollectionsLink', 'stateQueryParameters']),
     ...mapGetters(['catalogs', 'collectionLink', 'isCollection', 'items', 'getApiItemsLoading', 'parentLink', 'rootLink']),
     cssStacType() {
       if (Utils.hasText(this.data?.type)) {
@@ -204,11 +206,14 @@ export default {
       }
       return pages;
     },
-    isApi() {
+    isCollectionApi() {
+      return this.data && this.data.getApiCollectionsLink();
+    },
+    isItemsApi() {
       return Boolean(this.apiItemsLink);
     },
     hasItems() {
-      return this.items.length > 0 || this.isApi;
+      return this.items.length > 0 || this.isItemsApi;
     },
     hasCatalogs() {
       return this.catalogs.length > 0;