use new images endpoint to complement Darwin Core info; render images…

… using GalleryImage, for interactivity.

src/modules/otus/components/Panel/PanelSpecimens/PanelSpecimens.vue

@@ -2,23 +2,28 @@
   <VCard>
     <ClientOnly>
       <VSpinner
-          v-if="isLoading"
+          v-if="isLoading.dwc"
           logo-class="w-8 h-8"
           legend=""
       />
     </ClientOnly>
     <VCardHeader class="flex justify-between">
       <h2 class="text-md">
         In the Collection
-        <span v-if="Array.isArray(inventoryDWC)"> [{{ inventoryDWC.length }}]</span>
+        <!-- Where I was: Pagination links via <router-link> and new refs page, perPage, total -->
+        <span v-if="Array.isArray(inventoryDWC)"> ({{ inventoryDWC.length }})</span>
       </h2>
       <PanelDropdown panel-key="panel:specimens" />
     </VCardHeader>
     <VCardContent class="text-sm">
       <p v-if="typeof inventoryDWC === 'string'" v-html="inventoryDWC"/>
       <ul v-else class="tree ml-2">
         <li v-for="specimen in inventoryDWC" :key="specimen.id" class="mt-1">
-          <SpecimenSummary :specimen="specimen" :otu-id="otuId"/>
+          <SpecimenSummary
+              :specimen="specimen"
+              :otu-id="otuId"
+              :images="getSpecimenImages(specimen)"
+          />
         </li>
       </ul>
     </VCardContent>
@@ -41,7 +46,22 @@ const props = defineProps({
 })
 
 const inventoryDWC = ref("Loading...")
-const isLoading = ref(false)
+const inventoryGallery = ref(undefined)
+const isLoading = ref({dwc: false, gallery: false})
+const page = ref(1)
+const perPage = ref(5)
+// TODO populate once the API has this info
+const total = ref(20)
+
+const getSpecimenImages = (specimen) => {
+  return !inventoryGallery.value ? [] : inventoryGallery.value.filter(
+      // just the images for this specimen
+      i => i.dwc_occurrence_id === specimen.id
+  ).reduce(
+      // extract image records from the rest of the API response
+      (result, i) => [...result, ...i.images], []
+  )
+}
 
 watch(
   () => props.otuId,
@@ -51,16 +71,24 @@ watch(
       return
     }
 
-    isLoading.value = true
+    isLoading.value = {...isLoading.value, dwc: true}
     useOtuPageRequest('panel:specimens', () =>
-      TaxonWorks.getOtuInventoryDarwinCore(props.otuId)
+      TaxonWorks.getDescendantsDarwinCore(props.otuId, {per: 5})
     ).then(({data}) => {
       inventoryDWC.value = data
     }).catch(
-        e => inventoryDWC.value = `Error: ${e}`
-    ).finally(() => isLoading.value = false)
+        e => inventoryDWC.value = `Error loading Darwin Core: ${e}`
+    ).finally(() => isLoading.value = {...isLoading.value, dwc: false})
+
+    isLoading.value = {...isLoading.value, gallery: true}
+    useOtuPageRequest('panel:gallery', () =>
+      TaxonWorks.getDescendantsImageGallery(props.otuId)
+    ).then(({data}) => {
+      inventoryGallery.value = data
+    }).catch(
+        e => console.error(`Error loading gallery: ${e}`)
+    ).finally(() => isLoading.value = {...isLoading.value, gallery: false})
   },
   {immediate: true}
 )
-
 </script>

src/modules/otus/components/Panel/PanelSpecimens/SpecimenSummary.vue

@@ -9,28 +9,30 @@ For further reference see https://dwc.tdwg.org/terms/.
   <ul class="tree m-2 ml-6 relative">
     <li class="my-2">{{ describeSpecimen(specimen) }}</li>
     <li class="my-2">{{describeDetails(specimen).join(', ')}}</li>
-    <li v-if="specimen.associatedMedia" class="my-2 flex flex-row gap-4">
-      <ImageThumbnail
-          v-for="imageUrl in specimen.associatedMedia.split('|')"
-          :imageUrl="imageUrl.trim()"
-      />
-    </li>
+    <GalleryImage
+        v-if="images.length"
+        :images="images"
+        :only-thumbs="true"
+    />
   </ul>
 </template>
 
 <script setup>
-
 import ImageThumbnail from "@/modules/otus/components/Panel/PanelSpecimens/ImageThumbnail.vue"
 
 const props = defineProps({
   specimen: {
     type: Object,  // Darwin Core schema -- see above for references
     required: true,
   },
+  images: {
+    type: Array,
+    default: [],
+  },
   otuId: {
     type: Number,
     required: true,
-  }
+  },
 })
 
 function genusSpecies(specimen) {