From aee74ca661ef56978e65b39256abae46d13132ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Luis=20Pereira?= <pepelui@outlook.com>
Date: Wed, 3 Aug 2022 09:49:21 -0300
Subject: [PATCH] Add image source

---
 src/components/ImageViewer/ImageSource.vue     | 15 +++++++++++++++
 .../ImageViewer/ImageViewer.global.vue         |  5 +++++
 src/modules/otus/components/Gallery.vue        |  2 +-
 src/modules/otus/components/TypeSpecimen.vue   | 18 +++++-------------
 src/modules/otus/constants/index.js            |  1 +
 src/modules/otus/constants/typeOrder.js        |  9 +++++++++
 6 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ImageViewer/ImageSource.vue
 create mode 100644 src/modules/otus/constants/index.js
 create mode 100644 src/modules/otus/constants/typeOrder.js

diff --git a/src/components/ImageViewer/ImageSource.vue b/src/components/ImageViewer/ImageSource.vue
new file mode 100644
index 0000000..4e2d3b1
--- /dev/null
+++ b/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>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index f1ed777..5a3c440 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/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'
diff --git a/src/modules/otus/components/Gallery.vue b/src/modules/otus/components/Gallery.vue
index 3f9e22c..ab388ac 100644
--- a/src/modules/otus/components/Gallery.vue
+++ b/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']
     }
   
diff --git a/src/modules/otus/components/TypeSpecimen.vue b/src/modules/otus/components/TypeSpecimen.vue
index 4f2f44f..1ea87c0 100644
--- a/src/modules/otus/components/TypeSpecimen.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/modules/otus/constants/index.js b/src/modules/otus/constants/index.js
new file mode 100644
index 0000000..44b902a
--- /dev/null
+++ b/src/modules/otus/constants/index.js
@@ -0,0 +1 @@
+export * from './typeOrder';
diff --git a/src/modules/otus/constants/typeOrder.js b/src/modules/otus/constants/typeOrder.js
new file mode 100644
index 0000000..3f4d6e3
--- /dev/null
+++ b/src/modules/otus/constants/typeOrder.js
@@ -0,0 +1,9 @@
+export const SPECIMEN_TYPES = [
+  'neotype',
+  'holotype',
+  'neolectotype',
+  'lectotype',
+  'syntype',
+  'paratype',
+  'paratypes'
+]