Extend item actions to catalogs and collections

Author: vprivat-ads

docs/actions.md

@@ -1,13 +1,13 @@
 # Actions <!-- omit in toc -->
 
-STAC Browser has a pluggable interface to share or open assets, items and links with other services, which we call "actions".
+STAC Browser has a pluggable interface to share or open assets, catalogs, collections, items and links with other services, which we call "actions".
 
-An action adds a button to an asset, item or link if certain requirements are met, which can then be executed by users.
+An action adds a button to an asset, catalog, collection, item or link if certain requirements are met, which can then be executed by users.
 For example, you could open COPC files in a dedicated COPC Viewer, which otherwise you could only download.
 
 - [User Guide](#user-guide)
   - [Assets](#assets)
-  - [Items](#items)
+  - [Catalogs, Collections and Items](#catalogs-collections-and-items)
   - [Links](#links)
 - [Developer Guide](#developer-guide)
 
@@ -51,25 +51,25 @@ export default {
 
 Save the file and restart / rebuild STAC Browser.
 
-### Items
+### Catalogs, Collections and Items
 
 The following actions are available:
 
 - `stac-map`: Allows to open items through stac-map at <https://developmentseed.org/stac-map/>.
 
-All actions for items are stored in the folder [`src/actions/objects`](../src/actions/objects) if you want to inspect them.
+All actions for catalogs, collections and items are stored in the folder [`src/actions/stac`](../src/actions/stac) if you want to inspect them.
 
-The actions can be enabled by adding them to the [`objectActions.config.js`](../objectActions.config.js) file.
+The actions can be enabled by adding them to the [`stacActions.config.js`](../stacActions.config.js) file.
 Open the file and you'll see a number of imports and exports.
 Import the file for the action that you want to enable, e.g. for stac-map:
 
 ```js
-import StacMap from './src/actions/objects/StacMap.js';
+import StacMap from './src/actions/stac/StacMap.js';
 ```
 
-The path is fixed to `./src/actions/objects/`, the file extension is always `.js`.
+The path is fixed to `./src/actions/stac/`, the file extension is always `.js`.
 In-between add the file name from the list above.
-The import name should be the file name without extension (i.e. `Stacmap` again).
+The import name should be the file name without extension (i.e. `StacMap` again).
 
 Lastly, add the import name to the list of exports, e.g.
 
@@ -121,17 +121,17 @@ Save the file and rebuild / restart STAC Browser.
 Implementing actions for assets, items and links follows a very similar pattern.
 The main difference is that each action implements its own interface:
 - assets implement the [`AssetActionPlugin` interface](../src/actions/AssetActionPlugin.js)
-- items implement the [`ObjectActionPlugin` interface](../src/actions/ObjectActionPlugin.js)
+- catalogs, collections and items implement the [`StacActionPlugin` interface](../src/actions/StacActionPlugin.js)
 - links implement the [`LinkActionPlugin` interface](../src/actions/LinkActionPlugin.js)
 Similarly, actions are stored in their own folder:
 - assets are stored in the folder [`src/actions/assets`](../src/actions/assets)
-- items are stored in the folder [`src/actions/objects`](../src/actions/objects)
+- catalogs, collections and items are stored in the folder [`src/actions/stac`](../src/actions/stac)
 - links are stored in the folder [`src/actions/links`](../src/actions/links)
 
 All interfaces look as follows:
 
 - `constructor(data: object, component: Vue, id: string)`
-  - `data`: The asset, item or link object, it is available in the class through `this.asset` (for assets), `this.object` (for items) and `this.link` (for links).
+  - `data`: The asset, catalog, collection, item or link object, it is available in the class through `this.asset` (for assets), `this.object` (for items) and `this.link` (for links).
   - `component`: The parent Asset/Item/Link Vue component (available in the class through `this.component`)
   - `id`: Internal ID of the asset, item or link, not meant to be used.
 - `get btnOptions() : object`

objectActions.config.js

@@ -1,6 +1,6 @@
 import ActionPlugin from './ActionPlugin';
 
-export default class ObjectActionPlugin extends ActionPlugin {
+export default class StacActionPlugin extends ActionPlugin {
 
   constructor(object, component, id) {
     super(id, component);

src/actions/ObjectActionPlugin.js renamed to src/actions/StacActionPlugin.js

@@ -1,8 +1,8 @@
-import ObjectActionPlugin from "../ObjectActionPlugin";
+import StacActionPlugin from "../StacActionPlugin";
 import URI from 'urijs';
 import i18n from "../../i18n";
 
-export default class StacMap extends ObjectActionPlugin {
+export default class StacMap extends StacActionPlugin {
 
   get show() {
     return this.object.isItem();

src/actions/objects/StacMap.js renamed to src/actions/stac/StacMap.js

@@ -19,15 +19,15 @@
         </small>
       </b-card-text>
     </b-card-body>
-    <ObjectActions :data="item" size="sm" />
+    <StacActions :data="item" footer vertical size="sm" />
   </b-card>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex';
 import FileFormatsMixin from './FileFormatsMixin';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
-import ObjectActions from './ObjectActions.vue';
+import StacActions from './StacActions.vue';
 import StacLink from './StacLink.vue';
 import { STAC } from 'stac-js';
 import { formatTemporalExtent, formatTimestamp, formatMediaType } from '@radiantearth/stac-fields/formatters';
@@ -40,7 +40,7 @@ export default {
   name: 'Item',
   components: {
     StacLink,
-    ObjectActions,
+    StacActions,
     Keywords: () => import('./Keywords.vue')
   },
   filters: {

src/components/Item.vue

@@ -1,5 +1,15 @@
 <template>
-  <b-button-group class="obj-actions" :vertical="vertical" :size="size" v-if="hasButtons">
+  <!-- add card footer (for items search) -->
+  <b-card-footer v-if="footer && hasButtons">
+    <b-button-group class="obj-actions" :vertical="vertical" :size="size">
+      <b-button v-for="action of actions" v-bind="action.btnOptions" :key="action.id" variant="primary" @click="action.onClick">
+        <component v-if="action.icon" :is="action.icon" class="mr-1" />
+        {{ action.text }}
+      </b-button>
+    </b-button-group>
+  </b-card-footer>
+  <!-- add only button group (for item/collection vue) -->
+  <b-button-group v-else-if="hasButtons" class="obj-actions" :vertical="vertical" :size="size">
     <b-button v-for="action of actions" v-bind="action.btnOptions" :key="action.id" variant="primary" @click="action.onClick">
       <component v-if="action.icon" :is="action.icon" class="mr-1" />
       {{ action.text }}
@@ -10,12 +20,12 @@
 
 <script>
 import { BIconBoxArrowUpRight } from 'bootstrap-vue';
-import ObjectActions from '../../objectActions.config';
+import StacActions from '../../stacActions.config';
 
 let i = 0;
 
 export default {
-  name: 'ObjectActions',
+  name: 'StacActions',
   components: {
     BIconBoxArrowUpRight
   },
@@ -24,6 +34,10 @@ export default {
       type: Object,
       required: true
     },
+    footer: {
+      type: Boolean,
+      default: false
+    },
     vertical: {
       type: Boolean,
       default: false
@@ -40,7 +54,7 @@ export default {
   },
   computed: {
     actions() {
-      return Object.entries(ObjectActions)
+      return Object.entries(StacActions)
         .map(([id, plugin]) => new plugin(this.data, this, id))
         .filter(plugin => plugin.show);
     },

src/components/ObjectActions.vue renamed to src/components/StacActions.vue

@@ -35,6 +35,7 @@
             </b-tabs>
           </b-card>
         </section>
+        <StacActions :data="data" />
         <Assets v-if="hasAssets" :assets="assets" :context="data" :shown="selectedReferences" @showAsset="showAsset" />
         <Assets v-if="hasItemAssets && !hasItems" :assets="itemAssets" :context="data" :definition="true" />
         <Providers v-if="providers" :providers="providers" />
@@ -63,6 +64,7 @@
 import { mapState, mapGetters } from 'vuex';
 import Catalogs from '../components/Catalogs.vue';
 import Description from '../components/Description.vue';
+import StacActions from '../components/StacActions.vue';
 import Items from '../components/Items.vue';
 import ReadMore from "vue-read-more-smooth";
 import ShowAssetLinkMixin from '../components/ShowAssetLinkMixin';
@@ -85,6 +87,7 @@ export default {
     CollectionLink: () => import('../components/CollectionLink.vue'),
     DeprecationNotice: () => import('../components/DeprecationNotice.vue'),
     Description,
+    StacActions,
     Items,
     Keywords: () => import('../components/Keywords.vue'),
     Links: () => import('../components/Links.vue'),
@@ -439,6 +442,10 @@ export default {
     }
   }
 
+  .obj-actions + .assets, .obj-actions + .providers, .obj-actions + .metadata {
+    margin-top: 1rem;
+  }
+
   .metadata .card-columns {
     column-count: 1;
 

src/views/Catalog.vue

@@ -14,7 +14,7 @@
             </b-tabs>
           </b-card>
         </section>
-        <ObjectActions :data="data" />
+        <StacActions :data="data" />
         <Assets v-if="hasAssets" :assets="assets" :context="data" :shown="selectedReferences" @showAsset="showAsset" />
         <Links v-if="additionalLinks.length > 0" :title="$t('additionalResources')" :links="additionalLinks" :context="data" />
       </b-col>
@@ -39,7 +39,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
 import Description from '../components/Description.vue';
-import ObjectActions from '../components/ObjectActions.vue';
+import StacActions from '../components/StacActions.vue';
 import ReadMore from "vue-read-more-smooth";
 import ShowAssetLinkMixin from '../components/ShowAssetLinkMixin';
 import DeprecationMixin from '../components/DeprecationMixin';
@@ -55,7 +55,7 @@ export default {
     BTab,
     CollectionLink: () => import('../components/CollectionLink.vue'),
     Description,
-    ObjectActions,
+    StacActions,
     DeprecationNotice: () => import('../components/DeprecationNotice.vue'),
     Keywords: () => import('../components/Keywords.vue'),
     Links: () => import('../components/Links.vue'),

src/views/Item.vue

@@ -35,13 +35,17 @@
             :count="totalCount" :apiFilters="collectionFilters"
           >
             <template #catalogFooter="slot">
-              <b-button-group v-if="itemSearch || canFilterItems(slot.data)" vertical size="sm">
+              <b-button-group v-if="itemSearch || canFilterItems(slot.data) || hasActions(slot.data)" vertical size="sm">
                 <b-button v-if="itemSearch" variant="outline-primary" :pressed="selectedCollections[slot.data.id]" @click="selectForItemSearch(slot.data)">
                   <b-icon-check-square v-if="selectedCollections[slot.data.id]" />
                   <b-icon-square v-else />
                   <span class="ml-2">{{ $t('search.selectForItemSearch') }}</span>
                 </b-button>
                 <StacLink :button="{variant: 'outline-primary', disabled: !canFilterItems(slot.data)}" :data="slot.data" :title="$t('search.filterCollection')" :state="{itemFilterOpen: 1}" />
+                <b-button v-for="action of actions(slot.data)" v-bind="action.btnOptions" :key="action.id" variant="outline-primary" @click="action.onClick">
+                  <component v-if="action.icon" :is="action.icon" class="mr-1" />
+                  {{ action.text }}
+                </b-button>
               </b-button-group>
             </template>
           </Catalogs>
@@ -68,14 +72,16 @@ import Utils from '../utils';
 import SearchFilter from '../components/SearchFilter.vue';
 import Loading from '../components/Loading.vue';
 import ErrorAlert from '../components/ErrorAlert.vue';
+import StacActions from '../../stacActions.config';
 import { getDisplayTitle, createSTAC, ItemCollection } from '../models/stac';
 import { STAC } from 'stac-js';
-import { BIconCheckSquare, BIconSquare, BTabs, BTab } from 'bootstrap-vue';
+import { BIconBoxArrowUpRight, BIconCheckSquare, BIconSquare, BTabs, BTab } from 'bootstrap-vue';
 import { getErrorCode, getErrorMessage, processSTAC, stacRequest } from '../store/utils';
 
 export default {
   name: "Search",
   components: {
+    BIconBoxArrowUpRight,
     BIconCheckSquare,
     BIconSquare,
     BTab,
@@ -242,6 +248,14 @@ export default {
       }
       return false;
     },
+    actions(data) {
+      return Object.entries(StacActions)
+        .map(([id, plugin]) => new plugin(data, this, id))
+        .filter(plugin => plugin.show);
+    },
+    hasActions(data) {
+      return this.actions(data).length > 0;
+    },
     async loadResults(link) {
       this.error = null;
       this.errorId = null;

src/views/Search.vue

@@ -0,0 +1,5 @@
+// import StacMap from './src/actions/stac/StacMap.js';
+
+export default {
+  // StacMap,
+};