Refactor nomenclature panel

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

@@ -0,0 +1,40 @@
+<template>
+  <PanelNomenlcatureCitations :list="citations" />
+  <PanelNomenclatureReferences :list="sources" />
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import PanelNomenlcatureCitations from './PanelNomenclatureCitations.vue'
+import PanelNomenclatureReferences from './PanelNomenclatureReferences.vue'
+import TaxonWorks from '../../../services/TaxonWorks'
+
+const props = defineProps({
+  otuId: {
+    type: [Number, String],
+    required: true
+  },
+
+  taxonId: {
+    type: [Number, String],
+    required: true
+  }
+})
+
+const citations = ref([])
+const sources = ref([])
+
+watch(
+  () => props.taxonId,
+  async () => {
+    if (!props.taxonId) {
+      return
+    }
+    const { data } = await TaxonWorks.getTaxonNameCitations(props.taxonId)
+
+    citations.value = data.timeline
+    sources.value = data.sources
+  },
+  { immediate: true }
+)
+</script>

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue

@@ -0,0 +1,67 @@
+<template>
+  <VCard>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Nomenclature ({{ list.length }})</h2>
+      <Dropdown :items="menuOptions">
+        <template #button>
+          <IconHamburger class="text-base-soft h-4" />
+        </template>
+      </Dropdown>
+    </VCardHeader>
+
+    <ul class="text-sm">
+      <CitationRow
+        v-for="citation in citationList.first"
+        :key="citation.label"
+        :citation="citation"
+      />
+
+      <PanelNomenclatureShowMore
+        v-if="!showAll && citationList.middle.length"
+        :count="citationList.middle.length"
+        @click="showAll = true"
+      />
+      <AnimationOpacity>
+        <div v-show="showAll">
+          <CitationRow
+            v-for="citation in citationList.middle"
+            :key="citation.label"
+            :citation="citation"
+          />
+        </div>
+      </AnimationOpacity>
+
+      <CitationRow
+        v-for="citation in citationList.last"
+        :key="citation.label"
+        :citation="citation"
+      />
+    </ul>
+  </VCard>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useSplitList } from './useSplitList'
+import CitationRow from './PanelCitationRow.vue'
+import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+
+const MAX_CITATIONS = 5
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const showAll = ref(false)
+const citationList = useSplitList(props, MAX_CITATIONS)
+
+const menuOptions = computed(() => [
+  {
+    label: showAll.value ? 'Show less' : 'Show all',
+    action: () => (showAll.value = !showAll.value)
+  }
+])
+</script>

src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue

@@ -0,0 +1,67 @@
+<template>
+  <VCard>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">Nomenclature references ({{ list.length }})</h2>
+      <Dropdown :items="menuOptions">
+        <template #button>
+          <IconHamburger class="text-base-soft h-4" />
+        </template>
+      </Dropdown>
+    </VCardHeader>
+
+    <ul class="text-sm">
+      <PanelReferenceRow
+        v-for="reference in referenceList.first"
+        :key="reference"
+        :reference="reference"
+      />
+
+      <PanelNomenclatureShowMore
+        v-if="!showAll && referenceList.middle.length"
+        :count="referenceList.middle.length"
+        @click="showAll = true"
+      />
+      <AnimationOpacity>
+        <div v-show="showAll">
+          <PanelReferenceRow
+            v-for="reference in referenceList.middle"
+            :key="reference"
+            :reference="reference"
+          />
+        </div>
+      </AnimationOpacity>
+
+      <PanelReferenceRow
+        v-for="reference in referenceList.last"
+        :key="reference"
+        :reference="reference"
+      />
+    </ul>
+  </VCard>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useSplitList } from './useSplitList'
+import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import PanelReferenceRow from './PanelReferenceRow.vue'
+
+const MAX_REFERENCES = 2
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const showAll = ref(false)
+const referenceList = useSplitList(props, MAX_REFERENCES)
+
+const menuOptions = computed(() => [
+  {
+    label: showAll.value ? 'Show less' : 'Show all',
+    action: () => (showAll.value = !showAll.value)
+  }
+])
+</script>

src/modules/otus/components/Panel/PanelCitation/PanelCitationShowMore.vue → src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue

@@ -1,23 +1,12 @@
 <template>
   <div
-    class="
-      flex
-      justify-start
-      border-b
-      p-3
-      px-4
-      last:border-b-0
-      cursor-pointer
-      border-base-muted
-    "
+    class="flex justify-start border-b p-3 px-4 last:border-b-0 cursor-pointer border-base-muted"
   >
-    <div 
+    <div
       class="h-5 w-5 text-secondary-color opacity-60 mr-2 cursor-pointer"
-      @click="isExpanded = !isExpanded"
+      @click="() => (isExpanded = !isExpanded)"
     >
-      <IconPlusCircle
-        class="h-5 w-5"
-      />
+      <IconPlusCircle class="h-5 w-5" />
     </div>
     <span>... Show all ... ({{ count }})</span>
   </div>
@@ -30,4 +19,4 @@ defineProps({
     required: true
   }
 })
-</script>
+</script>

src/modules/otus/components/Panel/PanelCitation/PanelReferenceRow.vue → src/modules/otus/components/Panel/PanelNomenclature/PanelReferenceRow.vue

@@ -2,15 +2,15 @@
   <li class="border-b border-base-muted p-3 px-5">
     <span
       class="break-all block"
-      :title="source"
-      v-html="source"
+      :title="reference"
+      v-html="reference"
     />
   </li>
 </template>
 
 <script setup>
 defineProps({
-  source: {
+  reference: {
     type: String,
     required: true
   }

src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js

@@ -0,0 +1,16 @@
+import { computed } from 'vue'
+
+export function useSplitList(props, MAX_RECORDS) {
+  return computed(() => {
+    const copyArr = props.list.slice()
+    const first = copyArr.splice(0, MAX_RECORDS)
+    const last = copyArr.splice(-MAX_RECORDS)
+    const middle = copyArr
+
+    return {
+      first,
+      middle,
+      last
+    }
+  })
+}

src/modules/otus/constants/overviewLayout.js

@@ -2,7 +2,7 @@ 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 PanelNomenclature from '../components/Panel/PanelNomenclature/PanelNomenclature.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'
@@ -18,7 +18,7 @@ export const overviewLayout = {
       component: PanelTypeDesignation,
       available: [FAMILY_GROUP, GENUS_GROUP]
     },
-    { component: PanelCitations }
+    { component: PanelNomenclature }
   ],
 
   right: [