load notes for collection objects from API, and render them in PanelS…

…peciments

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

@@ -70,6 +70,7 @@
               :specimen="specimen"
               :otu-id="otuId"
               :images="getSpecimenImages(specimen)"
+              :notes="getNotes(specimen)"
           />
         </li>
       </ul>
@@ -93,7 +94,8 @@ const props = defineProps({
 
 const inventoryDWC = ref("Loading...")
 const inventoryGallery = ref(undefined)
-const isLoading = ref({dwc: false, gallery: false})
+const inventoryNotes = ref(undefined)
+const isLoading = ref({dwc: false, gallery: false, notes: false})
 const page = ref(1)
 const perPage = ref(20)
 const total = ref("???")
@@ -108,6 +110,13 @@ const getSpecimenImages = (specimen) => {
   )
 }
 
+const getNotes = (specimen) => {
+  return !inventoryNotes.value ? [] : inventoryNotes.value.filter(
+      // just the notes for this specimen
+      n => n.note_object_id === specimen.dwc_occurrence_object_id
+  )
+}
+
 watch(
   () => [props.otuId , page.value],
   async () => {
@@ -126,6 +135,17 @@ watch(
       // console.log({panel: "specimens", headers, data})
       inventoryDWC.value = data
       total.value = Number(headers['pagination-total'])
+
+      // Nested API request: Get notes for all specimens
+      const collectionObjectIds = data.map(s => s.dwc_occurrence_object_id)
+      useOtuPageRequest('panel:notes', () =>
+        TaxonWorks.getCollectionObjectsNotes(collectionObjectIds)
+      ).then(({data}) => {
+        inventoryNotes.value = data
+      }).catch(
+          e => console.error(`Error loading notes: ${e}`)
+      ).finally(() => isLoading.value = {...isLoading.value, notes: false})
+
     }).catch(
         e => inventoryDWC.value = `Error loading Darwin Core: ${e}`
     ).finally(() => isLoading.value = {...isLoading.value, dwc: false})

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

@@ -13,6 +13,9 @@ For further reference see https://dwc.tdwg.org/terms/.
         :images="images"
         :only-thumbs="true"
     />
+    <li v-for="note in notes" :key="note.id" class="my-2">
+      Note: {{ note.text }}
+    </li>
   </ul>
 </template>
 
@@ -32,6 +35,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  notes: {
+    type: Array,
+    default: [],
+  },
 })
 
 function genusSpecies(specimen) {

src/modules/otus/services/TaxonWorks.js

@@ -80,6 +80,18 @@ export default class TaxonWorks {
     return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc_gallery.json${perPage(opt)}`, opt)
   }
 
+  static getCollectionObjectsNotes(collectionObjectIds, opt) {
+    const processedOpt = {
+      ...opt,
+        params: {
+            ...opt?.params,
+            note_object_type: "CollectionObject",
+            "note_object_id[]": collectionObjectIds,
+        }
+    }
+    return makeAPIRequest.get(`/notes/`, processedOpt)
+  }
+
   /** Load image info (thumbnail, etc) from a URL such as one in a Darwin Core 'associatedMedia' field. */
   static getImageFromUrl(url, opt) {
     // sanity check that this is the kind of URL we're looking for