From 45b88a8e9db8d94c3c4317018761d016a2fccb64 Mon Sep 17 00:00:00 2001
From: Beecher Baker <wbbaker@purdue.edu>
Date: Tue, 6 Aug 2024 16:36:42 -0400
Subject: [PATCH] add details to Inventory panel and rename it from
 CollectionObjects panel

---
 .../PanelCollectionObjects.vue                |  85 ----------
 .../Panel/PanelCollectionObjects/main.js      |   6 -
 .../Panel/PanelInventory/PanelInventory.vue   | 160 ++++++++++++++++++
 .../components/Panel/PanelInventory/main.js   |   6 +
 .../otus/constants/layouts/overview.js        |   2 +-
 src/modules/otus/services/TaxonWorks.js       |   5 +-
 6 files changed, 170 insertions(+), 94 deletions(-)
 delete mode 100644 src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
 delete mode 100644 src/modules/otus/components/Panel/PanelCollectionObjects/main.js
 create mode 100644 src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
 create mode 100644 src/modules/otus/components/Panel/PanelInventory/main.js

diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue b/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
deleted file mode 100644
index ce1f709..0000000
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/PanelCollectionObjects.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <VCard>
-    <ClientOnly>
-      <VSpinner
-          v-if="isLoading.collectionObjects || isLoading.inventory"
-          logo-class="w-8 h-8"
-          legend=""
-      />
-    </ClientOnly>
-    <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Collection Objects</h2>
-      <PanelDropdown panel-key="panel:collection-objects" />
-    </VCardHeader>
-    <VCardContent class="text-sm">
-      <h3>Collection Objects</h3>
-      <p v-html="collectionObjects"/>
-      <h3>Inventory</h3>
-      <p v-html="inventory"/>
-    </VCardContent>
-  </VCard>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import PanelDropdown from '../PanelDropdown.vue'
-import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
-import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
-
-const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
-
-const props = defineProps({
-  otuId: {
-    type: [String, Number],
-    required: true
-  }
-})
-
-const collectionObjects = ref("Loading...")
-const inventory = ref("Loading...")
-const isLoading = ref({collectionObjects: false, inventory: false})
-
-watch(
-    () => props.otuId,
-    async () => {
-      if (!props.otuId) {
-        collectionObjects.value = 'No OTU specified.'
-        inventory.value = 'No OTU specified.'
-        return
-      }
-
-      isLoading.value = {...isLoading.value, collectionObjects: true}
-      useOtuPageRequest('panel:collection-objects', () =>
-        TaxonWorks.getCollectionObjects(props.otuId)
-      ).then(({data}) => {
-        collectionObjects.value = `Collection objects for ${props.otuId}: ${JSON.stringify(data)}`
-        console.log({data})
-      }).catch(
-          e => collectionObjects.value = `Error: ${e}`
-      ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
-    },
-    {immediate: true}
-  )
-
-watch(
-    () => props.otuId,
-    async () => {
-      if (!props.otuId) {
-        inventory.value = 'No OTU specified.'
-        return
-      }
-
-      isLoading.value = {...isLoading.value, inventory: true}
-      useOtuPageRequest('panel:inventory', () =>
-        TaxonWorks.getInventory(props.otuId)
-      ).then(({data}) => {
-        inventory.value = `Inventory for ${props.otuId}: ${JSON.stringify(data)}`
-        console.log({data})
-      }).catch(
-          e => inventory.value = `Error: ${e}`
-      ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
-    },
-    {immediate: true}
-  )
-
-</script>
diff --git a/src/modules/otus/components/Panel/PanelCollectionObjects/main.js b/src/modules/otus/components/Panel/PanelCollectionObjects/main.js
deleted file mode 100644
index 8b202c9..0000000
--- a/src/modules/otus/components/Panel/PanelCollectionObjects/main.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import PanelCollectionObjects from "./PanelCollectionObjects.vue";
-
-export default {
-  id: 'panel:collection-objects',
-  component: PanelCollectionObjects
-}
\ No newline at end of file
diff --git a/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
new file mode 100644
index 0000000..fffa445
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelInventory/PanelInventory.vue
@@ -0,0 +1,160 @@
+<template>
+  <VCard>
+    <ClientOnly>
+      <VSpinner
+          v-if="isLoading.collectionObjects || isLoading.inventory"
+          logo-class="w-8 h-8"
+          legend=""
+      />
+    </ClientOnly>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Collection Objects</h2>
+      <PanelDropdown panel-key="panel:inventory" />
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <h3>Inventory</h3>
+      <p v-if="typeof inventory === 'string'" v-html="inventory"/>
+      <ul v-else class="tree ml-2">
+        <li v-for="inventoryItem in inventory" :key="inventoryItem.id" class="mt-1">
+          <details>
+            <summary class="cursor-pointer">
+              {{ makeInventoryLabel(inventoryItem) }}
+            </summary>
+            <ul class="m-2 ml-6 list-disc">
+              <li v-for="detail in makeInventoryDetails(inventoryItem)" v-html="detail" :key="detail.id"/>
+              <li>
+                <details>
+                  <summary class="cursor-pointer">Full Record</summary>
+                  <dl class="m-2 ml-6">
+                    <template v-for="entry in Object.entries(inventoryItem)">
+                      <dt>{{ entry[0] }}</dt>
+                      <dd class="ml-4 mb-2">{{ entry[1] }}</dd>
+                    </template>
+                  </dl>
+                </details>
+              </li>
+            </ul>
+          </details>
+        </li>
+      </ul>
+      <h3 class="pt-2">Collection Objects</h3>
+      <p v-if="typeof collectionObjects === 'string'" v-html="collectionObjects"/>
+      <ul v-else  class="tree ml-2">
+        <li v-for="collectionObject in collectionObjects" :key="collectionObject.id">
+          <details>
+            <summary>
+              {{ collectionObject.id }} — length {{JSON.stringify(collectionObject).length}}
+            </summary>
+            <ul class="m-2 ml-6 list-disc">
+              <li v-for="entry in Object.entries(collectionObject)" :key="entry.id">
+                <em>{{ entry[0] }}:</em> {{ entry[1] }}
+              </li>
+            </ul>
+            <p v-html="JSON.stringify(collectionObject, null, 1)"/>
+          </details>
+        </li>
+      </ul>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import PanelDropdown from '../PanelDropdown.vue'
+import { useOtuPageRequest } from "@/modules/otus/helpers/useOtuPageRequest.js"
+import TaxonWorks from "@/modules/otus/services/TaxonWorks.js"
+
+const props = defineProps({
+  otuId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const collectionObjects = ref("Loading...")
+const inventory = ref("Loading...")
+const isLoading = ref({collectionObjects: false, inventory: false})
+
+/** Based on taxonpages-orthoptera PanelSpecimentRecords. */
+function makeInventoryLabel(item) {
+  return [
+    item.catalogNumber,
+    makeLocationDescription(item),
+    item.year,
+    // `length ${JSON.stringify(item).length}`,
+  ].filter(Boolean).join("; ")
+}
+
+function makeInventoryDetails(item) {
+  return [
+    makeInventoryCollectionDate(item),
+    item.recordedBy && `Recorded by ${item.recordedBy}`,
+    item.identifiedBy && `Identified by ${item.identifiedBy}, ${item.dateIdentified}`,
+    item.georeferencedBy && `Georeferenced by ${item.georeferencedBy}${makeGeoreferenceUncertainty(item)}`,
+    // CollectionObject #1234
+    item.dwc_occurrence_object_id && `${item.dwc_occurrence_object_type} #${item.dwc_occurrence_object_id}`,
+  ]
+}
+
+function makeLocationDescription(item) {
+  return [
+    item.country && item.country,
+    item.stateProvince && item.stateProvince,
+    item.county && `${item.county} County`,
+  ].filter(Boolean).join(", ")
+}
+
+function makeInventoryCollectionDate(item) {
+  if (!item.year) return null
+  const date = new Date(item.year, item.month, item.day)
+  return `Collected ${date.toLocaleDateString()}`
+}
+
+function makeGeoreferenceUncertainty(item) {
+  return item.coordinateUncertaintyInMeters && ` to within ${item.coordinateUncertaintyInMeters} meters`
+}
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        collectionObjects.value = 'No OTU specified.'
+        inventory.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = {...isLoading.value, collectionObjects: true}
+      useOtuPageRequest('panel:inventory', () =>
+        TaxonWorks.getCollectionObjects(props.otuId)
+      ).then(({data}) => {
+        collectionObjects.value = data
+        console.log(data)
+      }).catch(
+          e => collectionObjects.value = `Error: ${e}`
+      ).finally(() => isLoading.value = {...isLoading.value, collectionObjects: false})
+    },
+    {immediate: true}
+  )
+
+watch(
+    () => props.otuId,
+    async () => {
+      if (!props.otuId) {
+        inventory.value = 'No OTU specified.'
+        return
+      }
+
+      isLoading.value = {...isLoading.value, inventory: true}
+      useOtuPageRequest('panel:inventory', () =>
+        TaxonWorks.getInventory(props.otuId)
+      ).then(({data}) => {
+        inventory.value = data
+        console.log(data)
+      }).catch(
+          e => inventory.value = `Error: ${e}`
+      ).finally(() => isLoading.value = {...isLoading.value, inventory: false})
+    },
+    {immediate: true}
+  )
+
+</script>
diff --git a/src/modules/otus/components/Panel/PanelInventory/main.js b/src/modules/otus/components/Panel/PanelInventory/main.js
new file mode 100644
index 0000000..1c3a28a
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelInventory/main.js
@@ -0,0 +1,6 @@
+import PanelInventory from "./PanelInventory.vue";
+
+export default {
+  id: 'panel:inventory',
+  component: PanelInventory
+}
\ No newline at end of file
diff --git a/src/modules/otus/constants/layouts/overview.js b/src/modules/otus/constants/layouts/overview.js
index a5f52a2..bceeed6 100644
--- a/src/modules/otus/constants/layouts/overview.js
+++ b/src/modules/otus/constants/layouts/overview.js
@@ -8,7 +8,7 @@ export const DEFAULT_OVERVIEW_LAYOUT = {
           'panel:type-specimen',
           'panel:nomenclature',
           'panel:nomenclature-references',
-          'panel:collection-objects'
+          'panel:inventory'
         ],
         [
           'panel:map',
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 88024fb..9c11a45 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -68,9 +68,10 @@ export default class TaxonWorks {
         @with_buffered_determinations = boolean_param(params, :with_buffered_determinations)
         @with_buffered_other_labels = boolean_param(params, :with_buffered_other_labels)
      */
-    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&with_buffered_determination=true`, opt)
+    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&with_buffered_determination=true`, opt)
     // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}&descendants=true`, opt)
-    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+    return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}`, opt)
+    // return makeAPIRequest.get(`/collection_objects?otu_id[]=${otuId}/dwc.json`, opt)
   }
 
   static getInventory(otuId, opt) {