Refactor code

src/components/Gallery/GalleryThumbnail.vue

@@ -5,6 +5,7 @@
   >
     <img 
       class="max-h-20 max-w-24 h-20 w-24 object-cover rounded"
+      :alt="title"
       :src="image.thumb"
     >
   </div>

src/modules/otus/components/CommonNames.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import OtuService from '../services/OtuService'
+import TaxonWorks from '../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -20,7 +20,7 @@ watch(
   () => props.otuId,
   id => {
     if (id) {
-      OtuService.getDescendants(id, { 
+      TaxonWorks.getOtuDescendants(id, { 
         max_descendants_depth: 0,
         extend: ['common_names']
       }).then(({ data }) => {

src/modules/otus/components/Citation/CitationList.vue → src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue

@@ -8,7 +8,7 @@
 
     <div class="text-sm">
       <CitationRow
-        v-for="citation in citationList.start"
+        v-for="citation in citationList.first"
         :key="citation.id"
         :citation="citation"
       />
@@ -40,9 +40,9 @@
 
 <script setup>
 import { ref, watch, computed } from 'vue'
-import OtuService from '../../services/OtuService'
-import CitationRow from './CitationRow.vue'
-import CitationRowShowMore from './CitationRowShowMore.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+import CitationRow from './PanelCitationRow.vue'
+import CitationRowShowMore from './PanelCitationShowMore.vue'
 
 const MAX_CITATIONS = 3
 
@@ -57,21 +57,27 @@ const showAll = ref(false)
 const citations = ref([])
 const citationList = computed(() => {
   const copyArr = citations.value.slice()
-
-  const start = copyArr.splice(0, MAX_CITATIONS)
+  const first = copyArr.splice(0, MAX_CITATIONS)
   const last = copyArr.splice(-MAX_CITATIONS)
   const middle = copyArr
+
   return {
-    start,
+    first,
     middle,
     last
   }
 })
 
-watch(() => props.otuId, async () => {
-  if (!props.otuId) { return }
+watch(
+  () => props.otuId,
+  async () => {
+    if (!props.otuId) { return }
 
-  citations.value = (await OtuService.getTaxonNameCitations(props.otuId)).data
-}, { immediate: true })
+    citations.value = (await TaxonWorks.getTaxonNameCitations(props.otuId)).data
+  },
+  {
+    immediate: true
+  }
+)
 
 </script>

src/modules/otus/components/Content/Content.vue → src/modules/otus/components/Panel/PanelContent/PanelContent.vue

@@ -3,7 +3,6 @@
     <ContentTopic
       v-for="(text, title) in contentList"
       :key="title"
-      class="last:mb-0"
       :title="title"
       :text-list="text"
     />
@@ -12,8 +11,8 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
-import OtuService from '../../services/OtuService'
-import ContentTopic from './ContentTopic.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+import ContentTopic from './PanelContentTopic.vue'
 
 const props = defineProps({
   otuId: {
@@ -40,7 +39,7 @@ watch(
   () => props.otuId,
   id => {
     if (id) {
-      OtuService.getContent(id).then(({ data }) => {
+      TaxonWorks.getOtuContent(id).then(({ data }) => {
         contents.value = data
       })
     } else {

src/modules/otus/components/Descendants.vue → src/modules/otus/components/Panel/PanelDescendants/Descendants.vue

@@ -8,7 +8,7 @@
     <VCardContent class="text-sm">
       <ul class="tree ml-2">
         <AnimationOpacity>
-          <TreeView
+          <DescendantsTree
             v-if="taxonomy && (taxonomy.nomenclatural_synonyms.length || taxonomy.descendants.length)"
             :taxonomy="taxonomy" 
           />
@@ -19,9 +19,9 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
-import TreeView from '@/components/TreeView.vue'
-import OtuService from '../services/OtuService';
+import { ref, watch } from 'vue'
+import DescendantsTree from './DescendantsTree.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -35,7 +35,7 @@ const taxonomy = ref(null)
 watch(() => props.otuId, async () => {
   if (!props.otuId) { return }
 
-  OtuService.getDescendants(props.otuId, { max_descendants_depth: 1 }).then(({ data }) => {
+  TaxonWorks.getOtuDescendants(props.otuId, { max_descendants_depth: 1 }).then(({ data }) => {
     taxonomy.value = data
   })
 }, { immediate: true })

src/components/TreeView.vue → src/modules/otus/components/Panel/PanelDescendants/DescendantsTree.vue

@@ -13,7 +13,7 @@
       :to="{ name: 'otus-id', params: { id: taxonomy.otu_id } }"
       v-html="taxonomy.name"
     />
-    <SynonymList 
+    <DescendantsSynonymList 
       v-if="taxonomy.nomenclatural_synonyms.length"
       class="pb-4"
       :list="taxonomy.nomenclatural_synonyms"
@@ -28,7 +28,7 @@
           :key="item.otu_id"
         >
           <AnimationOpacity>
-            <TreeView
+            <DescendantsTree
               v-if="isTreeVisible"
               :taxonomy="item"
             />
@@ -40,9 +40,9 @@
 </template>
 
 <script setup>
-import TreeView from '@/components/TreeView.vue'
-import SynonymList from './SynonymList.vue'
-import OtuService from '@/modules/otus/services/OtuService'
+import DescendantsTree from './DescendantsTree.vue'
+import DescendantsSynonymList from './DescendantsSynonymList.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
 import { ref, watch } from 'vue'
 
 const props = defineProps({
@@ -71,7 +71,7 @@ watch(
 
 const loadDescendants = () => {
   if (descendants.value.length) { return }
-  OtuService.getDescendants(props.taxonomy.otu_id, { max_descendants_depth: 1 }).then(({ data }) => {
+  TaxonWorks.getOtuDescendants(props.taxonomy.otu_id, { max_descendants_depth: 1 }).then(({ data }) => {
     descendants.value = data.descendants
   })
 }

src/modules/otus/components/Gallery.vue → src/modules/otus/components/Panel/PanelGallery/Gallery.vue

@@ -8,7 +8,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import OtuService from '../services/OtuService'
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -27,7 +27,7 @@ watch(
       otu_scope: ['all']
     }
   
-    images.value = (await OtuService.getOtuImages(props.otuId, params)).data
+    images.value = (await TaxonWorks.getOtuImages(props.otuId, params)).data
   },
   { immediate: true }
 )

src/modules/otus/components/Map.vue → src/modules/otus/components/Panel/PanelMap/PanelMap.vue

@@ -23,7 +23,7 @@
 
 <script setup>
 import { ref, watch } from "vue"
-import OtuService from "../services/OtuService"
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -42,7 +42,7 @@ watch(
     if(newId === oldId) return
     isLoading.value = true
 
-    OtuService.getGeoJSON(props.otuId).then(({ data }) => {
+    TaxonWorks.getOtuDistribution(props.otuId).then(({ data }) => {
       geojson.value = data.request_too_large
         ? null
         : data

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

@@ -0,0 +1,44 @@
+<template>
+  <VCard>
+    <VCardHeader>
+      <h1 class="text-md">
+        Type
+      </h1>
+    </VCardHeader>
+    <VCardContent class="text-sm">
+      <p v-html="typeDesignationLabel" />
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+
+const props = defineProps({
+  taxonId: {
+    type: [String, Number],
+    required: true
+  }
+})
+
+const typeDesignation = ref({})
+const typeDesignationLabel = computed(() =>
+  [
+    typeDesignation.value.subject_object_tag || '', 
+    typeDesignation.value.subject_status_tag || '',
+    typeDesignation.value.object_object_tag || ''
+  ].join(' '))
+
+watch(
+  () => props.taxonId,
+  async () => {
+    if (!props.taxonId) { return }
+
+    TaxonWorks.getTaxonTypeDesignation(props.taxonId).then(({ data }) => {
+      typeDesignation.value = data.type_taxon_name_relationship
+    })
+  },
+  { immediate: true }
+)
+</script>

src/modules/otus/components/TypeSpecimen.vue → src/modules/otus/components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue

@@ -15,8 +15,8 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { SPECIMEN_TYPES } from '../constants'
-import OtuService from '../services/OtuService'
+import { SPECIMEN_TYPES } from '../../../constants'
+import TaxonWorks from '../../../services/TaxonWorks'
 
 const props = defineProps({
   otuId: {
@@ -32,7 +32,7 @@ watch(
   () => {
   if (!props.otuId) { return }
 
-  OtuService.getTypes(props.otuId).then(({ data }) => {
+  TaxonWorks.getOtuTypeMaterial(props.otuId).then(({ data }) => {
     typeMaterials.value = data.type_materials_catalog_labels.sort((a, b) => SPECIMEN_TYPES.indexOf(a.type_type) - SPECIMEN_TYPES.indexOf(b.type_type))
   })
 }, { immediate: true })

src/modules/otus/constants/index.js

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

src/modules/otus/constants/overviewLayout.js

@@ -0,0 +1,29 @@
+import { FAMILY_GROUP, GENUS_GROUP, SPECIES_GROUP } from './index.js'
+import PanelGallery from '../components/Panel/PanelGallery/Gallery.vue'
+import PanelTypeSpecimen from '../components/Panel/PanelTypeSpecimen/PanelTypeSpecimen.vue'
+import PanelTypeDesignation from '../components/Panel/PanelTypeDesignation/PanelTypeDesignation.vue'
+import PanelCitations from '../components/Panel/PanelCitation/PanelCitation.vue'
+import PanelMap from '../components/Panel/PanelMap/PanelMap.vue'
+import PanelDescendants from '../components/Panel/PanelDescendants/Descendants.vue'
+import PanelContent from '../components/Panel/PanelContent/PanelContent.vue'
+
+export const overviewLayout = {
+  left: [
+    { component: PanelGallery },
+    {
+      component: PanelTypeSpecimen,
+      available: [SPECIES_GROUP]
+    },
+    {
+      component: PanelTypeDesignation,
+      available: [FAMILY_GROUP, GENUS_GROUP]
+    },
+    { component: PanelCitations }
+  ],
+
+  right: [
+    { component: PanelMap },
+    { component: PanelDescendants },
+    { component: PanelContent }
+  ]
+}