Rework item actions as object actions

Author: vprivat-ads

docs/actions.md

@@ -57,17 +57,17 @@ 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/items`](../src/actions/items) if you want to inspect them.
+All actions for items are stored in the folder [`src/actions/objects`](../src/actions/objects) if you want to inspect them.
 
-The actions can be enabled by adding them to the [`itemActions.config.js`](../itemActions.config.js) file.
+The actions can be enabled by adding them to the [`objectActions.config.js`](../objectActions.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/items/Stacmap.js';
+import StacMap from './src/actions/objects/StacMap.js';
 ```
 
-The path is fixed to `./src/actions/items/`, the file extension is always `.js`.
+The path is fixed to `./src/actions/objects/`, 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).
 
@@ -76,7 +76,7 @@ Lastly, add the import name to the list of exports, e.g.
 ```js
 export default {
   OtherAction,
-  Stacmap
+  StacMap
 };
 ```
 
@@ -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 [`ItemActionPlugin` interface](../src/actions/ItemActionPlugin.js)
+- items implement the [`ObjectActionPlugin` interface](../src/actions/ObjectActionPlugin.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/items`](../src/actions/items)
+- items are stored in the folder [`src/actions/objects`](../src/actions/objects)
 - 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.item` (for items) and `this.link` (for links).
+  - `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).
   - `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`

itemActions.config.js

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

objectActions.config.js

@@ -0,0 +1,9 @@
+import ActionPlugin from './ActionPlugin';
+
+export default class ObjectActionPlugin extends ActionPlugin {
+
+  constructor(object, component, id) {
+    super(id, component);
+    this.object = object;
+  }
+}

src/actions/ItemActionPlugin.js

@@ -1,15 +1,15 @@
-import ItemActionPlugin from "../ItemActionPlugin";
+import ObjectActionPlugin from "../ObjectActionPlugin";
 import URI from 'urijs';
 import i18n from "../../i18n";
 
-export default class StacMap extends ItemActionPlugin {
+export default class StacMap extends ObjectActionPlugin {
 
   get show() {
-    return true;
+    return this.object.isItem();
   }
 
   get uri() {
-    return new URI(`https://developmentseed.org/stac-map/?href=${this.item.getAbsoluteUrl()}`);
+    return new URI(`https://developmentseed.org/stac-map/?href=${this.object.getAbsoluteUrl()}`);
   }
 
   get text() {

src/actions/ObjectActionPlugin.js

@@ -10,7 +10,7 @@
         <b-icon-download v-else />
         {{ buttonText }}
       </b-button>
-      <CopyButton variant="primary" :copyText="href" :title="href" v-if="!isItem">
+      <CopyButton variant="primary" :copyText="href" :title="href">
         {{ copyButtonText }}
       </CopyButton>
       <b-button v-if="hasShowButton" @click="show" variant="primary">
@@ -43,7 +43,6 @@ import Description from './Description.vue';
 import Utils, { imageMediaTypes, mapMediaTypes } from '../utils';
 import { mapGetters, mapState } from 'vuex';
 import AssetActions from '../../assetActions.config';
-import ItemActions from '../../itemActions.config';
 import LinkActions from '../../linkActions.config';
 import { stacRequestOptions } from '../store/utils';
 import URI from 'urijs';
@@ -77,10 +76,6 @@ export default {
       type: Boolean,
       default: false
     },
-    isItem: {
-      type: Boolean,
-      default: false
-    },
     vertical: {
       type: Boolean,
       default: false
@@ -120,7 +115,7 @@ export default {
       }
     },
     actions() {
-      return Object.entries(this.isAsset ? AssetActions : this.isItem ? ItemActions : LinkActions)
+      return Object.entries(this.isAsset ? AssetActions : LinkActions)
         .map(([id, plugin]) => new plugin(this.data, this, id))
         .filter(plugin => plugin.show);
     },
@@ -152,7 +147,6 @@ export default {
     hasButtons() {
       return this.href && (this.requiresAuth
                         || this.hasDownloadButton()
-                        || !this.isItem
                         || this.hasShowButton()
                         || (this.actions && this.actions.length > 0));
     },
@@ -221,7 +215,7 @@ export default {
       }
     },
     href() {
-      if (typeof this.data.href !== 'string' && !this.isItem) {
+      if (typeof this.data.href !== 'string') {
         return null;
       }
       return this.getRequestUrl(this.data.getAbsoluteUrl());

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

@@ -19,15 +19,15 @@
         </small>
       </b-card-text>
     </b-card-body>
-    <HrefActions isItem :data="item" size="sm" />
+    <ObjectActions :data="item" size="sm" />
   </b-card>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex';
 import FileFormatsMixin from './FileFormatsMixin';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
-import HrefActions from './HrefActions.vue';
+import ObjectActions from './ObjectActions.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,
-    HrefActions,
+    ObjectActions,
     Keywords: () => import('./Keywords.vue')
   },
   filters: {
@@ -145,7 +145,7 @@ export default {
       position: relative;
     }
 
-    &:has(.actions) {
+    &:has(.obj-actions) {
       padding-bottom: 0.5rem;
     }
   }

src/components/HrefActions.vue

@@ -0,0 +1,52 @@
+<template>
+  <b-button-group class="obj-actions" :vertical="vertical" :size="size" v-if="hasButtons">
+    <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>
+</template>
+
+
+<script>
+import { BIconBoxArrowUpRight } from 'bootstrap-vue';
+import ObjectActions from '../../objectActions.config';
+
+let i = 0;
+
+export default {
+  name: 'ObjectActions',
+  components: {
+    BIconBoxArrowUpRight
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md'
+    }
+  },
+  data() {
+    return {
+      id: i++
+    };
+  },
+  computed: {
+    actions() {
+      return Object.entries(ObjectActions)
+        .map(([id, plugin]) => new plugin(this.data, this, id))
+        .filter(plugin => plugin.show);
+    },
+    hasButtons() {
+      return this.actions && this.actions.length > 0;
+    }
+  }
+};
+</script>

src/components/Item.vue

@@ -14,7 +14,7 @@
             </b-tabs>
           </b-card>
         </section>
-        <HrefActions isItem :data="data" />
+        <ObjectActions :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 HrefActions from '../components/HrefActions.vue';
+import ObjectActions from '../components/ObjectActions.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,
-    HrefActions,
+    ObjectActions,
     DeprecationNotice: () => import('../components/DeprecationNotice.vue'),
     Keywords: () => import('../components/Keywords.vue'),
     Links: () => import('../components/Links.vue'),
@@ -125,7 +125,7 @@ export default {
     align-self: center;
   }
 
-  div:has(> .actions) + .assets {
+  .obj-actions + .assets {
     margin-top: 1rem;
   }