From d1d6426e78fe14fe888bb02636e2f6a093154470 Mon Sep 17 00:00:00 2001
From: W Beecher Baker <wbbaker@purdue.edu>
Date: Tue, 10 Sep 2024 16:06:52 -0400
Subject: [PATCH] add image thumbnails to inventory list

---
 .../Panel/PanelSpecimens/ImageThumbnail.vue   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/modules/otus/components/Panel/PanelSpecimens/ImageThumbnail.vue

diff --git a/src/modules/otus/components/Panel/PanelSpecimens/ImageThumbnail.vue b/src/modules/otus/components/Panel/PanelSpecimens/ImageThumbnail.vue
new file mode 100644
index 0000000..cde592d
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelSpecimens/ImageThumbnail.vue
@@ -0,0 +1,55 @@
+<template>
+  <VCard class="mb-4">
+    <ClientOnly>
+      <img
+          v-if="imageInfo"
+          :src="imageInfo.thumb"
+          alt="Collection thumbnail"
+          class="object-cover"
+      />
+      <div v-if="errorMessage" class="text-red-500">
+        {{ errorMessage }}
+      </div>
+    </ClientOnly>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
+import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
+
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    required: true
+  }
+})
+
+// An image description from TaxonWorks, with thumbnail, various resolutions, etc.
+const imageInfo = ref(null)
+const isLoading = ref(false)
+const errorMessage = ref(null)
+
+watch(
+    () => props.imageUrl,
+    async () => {
+      isLoading.value = true
+      errorMessage.value = false
+      try {
+        const response = await useOtuPageRequest('component:thumbnail', () =>
+            TaxonWorks.getImageFromUrl(props.imageUrl)
+        )
+        imageInfo.value = response.data
+      }
+      catch (e) {
+        console.error(e)
+        errorMessage.value = `Error loading image: ${e}`
+      }
+      finally {
+        isLoading.value = false
+      }
+    },
+    {immediate: true}
+  )
+</script>
\ No newline at end of file