Use ItemId for UUIDs in most remaining places

src/components/Group/GroupMembership.vue

@@ -8,7 +8,7 @@
       <span>{{ membership.group.members_count }}</span>
     </td>
     <td>
-      <samp class="tag">{{ membership.group.id }}</samp>
+      <ItemId :item-id="membership.group.id" />
     </td>
     <td>
       <RoleTag v-if="role" :role="role" />
@@ -19,9 +19,11 @@
 
 <script>
 import { getRole } from '@/helpers'
+import ItemId from '@/components/ItemId.vue'
 import RoleTag from '@/components/Memberships/RoleTag.vue'
 export default {
   components: {
+    ItemId,
     RoleTag
   },
   props: {

src/components/Memberships/Member.vue

@@ -15,9 +15,9 @@
       </span>
     </td>
     <td>
-      <span v-if="user">{{ user.email }}</span>
-      <samp v-else-if="group" class="tag">{{ group.id }}</samp>
-      <span v-else>—</span>
+      <template v-if="user">{{ user.email }}</template>
+      <ItemId v-else-if="group" :item-id="group.id" />
+      <template v-else>—</template>
     </td>
     <td>
       <form v-if="editing" v-on:submit.prevent="isLoggedUser ? updateModal = true : updateLevel() ">
@@ -114,15 +114,19 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
+import { updateMembership, deleteMembership } from '@/api'
 import { ROLES } from '@/config'
 import { getRole, errorParser } from '@/helpers'
-import RoleTag from './RoleTag'
-import { updateMembership, deleteMembership } from '@/api'
-import { mapState } from 'vuex'
+
+import ItemId from '@/components/ItemId.vue'
 import Modal from '@/components/Modal.vue'
+import RoleTag from './RoleTag'
 
 export default {
   components: {
+    ItemId,
     RoleTag,
     Modal
   },

src/components/Process/Workers/Versions/Details.vue

@@ -63,13 +63,7 @@
                 <tr>
                   <td class="label">ID</td>
                   <td>
-                    <button
-                      class="button is-small is-light"
-                      v-on:click="copyId"
-                      title="Copy the worker version ID to your clipboard"
-                    >
-                      copy
-                    </button>
+                    <ItemId :item-id="version.id" />
                   </td>
                 </tr>
                 <tr v-if="withConfiguration">
@@ -91,9 +85,14 @@
 <script>
 // Displays a single worker version with dynamic loading of the related version in a dropdown
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
-import { ago } from '@/helpers/text.js'
 import { errorParser } from '@/helpers'
+import { ago } from '@/helpers/text'
+import ItemId from '@/components/ItemId.vue'
+
 export default {
+  components: {
+    ItemId
+  },
   props: {
     workerVersionId: {
       type: String,
@@ -178,15 +177,6 @@ export default {
   methods: {
     ...mapActions('process', ['getWorkerVersion', 'getWorker', 'getConfiguration']),
     ...mapMutations('notifications', ['notify']),
-    async copyId () {
-      if (!this.version.id) return
-      try {
-        await navigator.clipboard.writeText(this.version.id)
-        this.notify({ type: 'success', text: 'Worker version ID copied to clipboard' })
-      } catch (err) {
-        this.notify({ type: 'error', text: `Failed to copy worker version ID '${this.version.id}': ${err}` })
-      }
-    },
     async retrieveVersion () {
       if (this.version) return
       this.loading = true

src/components/Process/Workers/WorkerRuns/WorkerRunDetails.vue

@@ -6,7 +6,7 @@
       <span class="loader is-size-2 mx-auto"></span>
     </div>
     <div v-else-if="error" class="notification is-danger">
-      Failed to load worker run {{ workerRunId }}: {{ error }}
+      Failed to load worker run <ItemId :item-id="workerRunId" />: {{ error }}
     </div>
     <div v-else-if="workerRun">
       <div class="mb-5">

src/views/Group/Manage.vue

@@ -14,7 +14,7 @@
     <template v-else>
       <div class="level">
         <div class="level-left is-block">
-          <h1 class="title">
+          <h1 class="title mb-0">
             {{ group.name }}
             <span
               class="has-tooltip-right is-size-4"
@@ -24,9 +24,7 @@
               <i v-else class="icon-lock"></i>
             </span>
           </h1>
-          <span>
-            Identifier <samp class="tag">{{ group.id }}</samp>
-          </span>
+          <ItemId class="subtitle" label="Group ID:" :item-id="group.id" />
         </div>
         <div class="level-right">
           <!-- edit group -->
@@ -91,15 +89,19 @@
 </template>
 
 <script>
+import { mapState, mapActions, mapMutations } from 'vuex'
+
 import { ROLES } from '@/config'
 import { getRole, errorParser } from '@/helpers'
-import { mapState, mapActions, mapMutations } from 'vuex'
-import ListMembers from '@/components/Memberships/ListMembers.vue'
+
+import ItemId from '@/components/ItemId.vue'
 import Modal from '@/components/Modal.vue'
-import Create from '@/views/Group/Create'
+import ListMembers from '@/components/Memberships/ListMembers.vue'
+import Create from '@/views/Group/Create.vue'
 
 export default {
   components: {
+    ItemId,
     ListMembers,
     Create,
     Modal

src/views/ImageElements.vue

@@ -4,17 +4,63 @@
 
     <div class="columns">
       <ul class="column">
-        <li class="field is-horizontal" v-for="(value, key) in displayableDetails" :key="key">
-          <b class="field-label">{{ key }}</b>
-          <span v-if="key !== 'url'" class="field-body">{{ value }}</span>
-          <a
-            v-else
-            target="_blank"
-            class="field-body"
-            :href="fullImage"
-          >
-            Full IIIF image
-          </a>
+        <li class="field is-horizontal">
+          <div class="field-label">
+            <label class="label">ID</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <ItemId class="control" :item-id="imageId" />
+            </div>
+          </div>
+        </li>
+        <template v-if="image">
+          <li class="field is-horizontal">
+            <div class="field-label">
+              <label class="label">Status</label>
+            </div>
+            <div class="field-body">
+              <div class="field is-capitalized">
+                {{ image.status }}
+              </div>
+            </div>
+          </li>
+          <li class="field is-horizontal">
+            <div class="field-label">
+              <label class="label">Width</label>
+            </div>
+            <div class="field-body">
+              <div class="field">
+                {{ image.width }}
+              </div>
+            </div>
+          </li>
+          <li class="field is-horizontal">
+            <div class="field-label">
+              <label class="label">Height</label>
+            </div>
+            <div class="field-body">
+              <div class="field">
+                {{ image.height }}
+              </div>
+            </div>
+          </li>
+        </template>
+        <li class="field is-horizontal" v-if="fullImage">
+          <div class="field-label">
+            <label class="label">URL</label>
+          </div>
+          <div class="field-body">
+            <div class="field">
+              <a
+                target="_blank"
+                class="control"
+                :href="fullImage"
+              >
+                Full IIIF image
+              </a>
+            </div>
+          </div>
         </li>
       </ul>
       <div class="column is-narrow image-column">
@@ -24,6 +70,7 @@
         />
       </div>
     </div>
+
     <div v-if="loading">
       Loading…
     </div>
@@ -51,20 +98,23 @@
 
 <script>
 import { mapStores } from 'pinia'
-import { corporaMixin } from '@/mixins'
+
 import { retrieveImage } from '@/api'
 import { iiifUri } from '@/helpers'
+import { corporaMixin } from '@/mixins'
+import { useImageStore } from '@/stores'
+
+import ItemId from '@/components/ItemId.vue'
 import Paginator from '@/components/Paginator.vue'
 import ElementList from '@/components/Navigation/ElementList.vue'
-import { useImageStore } from '@/stores'
 
 // Displayed image details retrieved from the backend
-const DETAILS = ['id', 'status', 'width', 'height', 'url']
 export default {
   mixins: [
     corporaMixin
   ],
   components: {
+    ItemId,
     Paginator,
     ElementList
   },
@@ -75,13 +125,13 @@ export default {
     }
   },
   data: () => ({
-    imageDetails: null,
+    image: null,
     loading: false,
     opened: false
   }),
   async mounted () {
     try {
-      this.imageDetails = (await retrieveImage(this.imageId)).data
+      this.image = (await retrieveImage(this.imageId)).data
     } catch (err) {
       this.$store.commit('notifications/notify', { type: 'error', text: 'An error occurred retrieving image details.' })
     }
@@ -92,20 +142,13 @@ export default {
       if (!this.imageStore.elements?.results?.length) return null
       return this.imageStore.elements.results[0].corpus.id
     },
-    displayableDetails () {
-      if (!this.imageStore.elements || this.imageStore.elements.imageId !== this.imageId) return
-      if (!this.imageDetails) return { id: this.imageId }
-      return Object.fromEntries(
-        Object.entries(this.imageDetails).filter(([key]) => DETAILS.includes(key))
-      )
-    },
     imageThumbnail () {
-      if (!this.imageDetails) return
-      return iiifUri({ image: this.imageDetails }, { height: 200 })
+      if (!this.image) return
+      return iiifUri({ image: this.image }, { height: 200 })
     },
     fullImage () {
-      if (!this.imageDetails) return
-      return iiifUri({ image: this.imageDetails })
+      if (!this.image) return
+      return iiifUri({ image: this.image })
     }
   },
   methods: {