Add image source

src/components/ImageViewer/ImageSource.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p v-html="source.label" />
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  source: {
+    type: Object,
+    default: () => ({})
+  }
+})
+</script>

src/components/ImageViewer/ImageViewer.global.vue

@@ -51,6 +51,10 @@
           class="my-auto"
           :attribution="image.attribution"
         />
+        <ImageSource
+          class="my-auto"
+          :source="image.source"
+        />
       </div>
       <div class="flex justify-center">
         <GalleryThumbnailList
@@ -77,6 +81,7 @@
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
 import ImageAttribution from './ImageAttribution.vue'
 import ImageDepictions from './ImageDepictions.vue'
+import ImageSource from './ImageSource.vue'
 import ImageViewerCounter from './ImageViewerCounter.vue'
 import ControlNextImage from './ControlImageNext.vue'
 import ControlPreviousImage from './ControlImagePrevious.vue'

src/modules/otus/components/Gallery.vue

@@ -23,7 +23,7 @@ watch(
   () => props.otuId,
   async () => {
     const params = {
-      extend: ['depictions', 'attribution'],
+      extend: ['depictions', 'attribution', 'source', 'citations'],
       otu_scope: ['all']
     }
   

src/modules/otus/components/TypeSpecimen.vue

@@ -15,18 +15,9 @@
 
 <script setup>
 import { ref, watch } from 'vue'
+import { SPECIMEN_TYPES } from '../constants'
 import OtuService from '../services/OtuService'
 
-const TYPE_ORDER = [
-  'neotype',
-  'holotype',
-  'neolectotype',
-  'lectotype',
-  'syntype',
-  'paratype',
-  'paratypes'
-]
-
 const props = defineProps({
   otuId: {
     type: [String, Number],
@@ -37,11 +28,12 @@ const props = defineProps({
 const typeMaterials = ref([])
 
 watch(
-  () => props.otuId, async () => {
+  () => props.otuId,
+  () => {
   if (!props.otuId) { return }
 
   OtuService.getTypes(props.otuId).then(({ data }) => {
-    typeMaterials.value = data.type_materials_catalog_labels.sort((a, b) => TYPE_ORDER.indexOf(a.type_type) - TYPE_ORDER.indexOf(b.type_type))
+    typeMaterials.value = data.type_materials_catalog_labels.sort((a, b) => SPECIMEN_TYPES.indexOf(a.type_type) - SPECIMEN_TYPES.indexOf(b.type_type))
   })
 }, { immediate: true })
-</script>
+</script>

src/modules/otus/constants/index.js

@@ -0,0 +1 @@
+export * from './typeOrder';

src/modules/otus/constants/typeOrder.js

@@ -0,0 +1,9 @@
+export const SPECIMEN_TYPES = [
+  'neotype',
+  'holotype',
+  'neolectotype',
+  'lectotype',
+  'syntype',
+  'paratype',
+  'paratypes'
+]