From bd8c562adb0735612cd4cbe9575ececc71ac4ce0 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 15 Mar 2023 16:41:30 -0300
Subject: [PATCH 1/2] Refactor nomenclature panel

---
 .../Panel/PanelCitation/PanelCitation.vue     | 112 ------------------
 .../PanelCitationRow.vue                      |   0
 .../PanelNomenclature/PanelNomenclature.vue   |  40 +++++++
 .../PanelNomenclatureCitations.vue            |  67 +++++++++++
 .../PanelNomenclatureReferences.vue           |  67 +++++++++++
 .../PanelNomenclatureShowMore.vue}            |  21 +---
 .../PanelReferenceRow.vue                     |   6 +-
 .../Panel/PanelNomenclature/useSplitList.js   |  16 +++
 src/modules/otus/constants/overviewLayout.js  |   4 +-
 9 files changed, 200 insertions(+), 133 deletions(-)
 delete mode 100644 src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
 rename src/modules/otus/components/Panel/{PanelCitation => PanelNomenclature}/PanelCitationRow.vue (100%)
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
 rename src/modules/otus/components/Panel/{PanelCitation/PanelCitationShowMore.vue => PanelNomenclature/PanelNomenclatureShowMore.vue} (50%)
 rename src/modules/otus/components/Panel/{PanelCitation => PanelNomenclature}/PanelReferenceRow.vue (76%)
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js

diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue b/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
deleted file mode 100644
index deb0fff..0000000
--- a/src/modules/otus/components/Panel/PanelCitation/PanelCitation.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <VCard>
-    <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Nomenclature ({{ citations.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"
-      />
-
-      <CitationRowShowMore
-        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>
-  <VCard>
-    <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Nomenclature references ({{ sources.length }})</h2>
-    </VCardHeader>
-    <ul class="text-sm">
-      <PanelReferenceRow
-        v-for="source in sources"
-        :key="source"
-        :source="source"
-      />
-    </ul>
-  </VCard>
-</template>
-
-<script setup>
-import { ref, watch, computed } from 'vue'
-import TaxonWorks from '../../../services/TaxonWorks'
-import CitationRow from './PanelCitationRow.vue'
-import CitationRowShowMore from './PanelCitationShowMore.vue'
-import PanelReferenceRow from './PanelReferenceRow.vue'
-
-const MAX_CITATIONS = 5
-
-const props = defineProps({
-  otuId: {
-    type: [Number, String],
-    required: true
-  },
-
-  taxonId: {
-    type: [Number, String],
-    required: true
-  }
-})
-
-const showAll = ref(false)
-const citations = ref([])
-const sources = ref([])
-const citationList = computed(() => {
-  const copyArr = citations.value.slice()
-  const first = copyArr.splice(0, MAX_CITATIONS)
-  const last = copyArr.splice(-MAX_CITATIONS)
-  const middle = copyArr
-
-  return {
-    first,
-    middle,
-    last
-  }
-})
-
-const menuOptions = computed(() => [
-  {
-    label: showAll.value ? 'Show less' : 'Show all',
-    action: () => (showAll.value = !showAll.value)
-  }
-])
-
-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>
diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelCitationRow.vue
similarity index 100%
rename from src/modules/otus/components/Panel/PanelCitation/PanelCitationRow.vue
rename to src/modules/otus/components/Panel/PanelNomenclature/PanelCitationRow.vue
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
new file mode 100644
index 0000000..69d73f8
--- /dev/null
+++ b/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>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
new file mode 100644
index 0000000..b106424
--- /dev/null
+++ b/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>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
new file mode 100644
index 0000000..2c0e5c2
--- /dev/null
+++ b/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>
diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelCitationShowMore.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue
similarity index 50%
rename from src/modules/otus/components/Panel/PanelCitation/PanelCitationShowMore.vue
rename to src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureShowMore.vue
index 9c726c8..67d9f13 100644
--- a/src/modules/otus/components/Panel/PanelCitation/PanelCitationShowMore.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/modules/otus/components/Panel/PanelCitation/PanelReferenceRow.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelReferenceRow.vue
similarity index 76%
rename from src/modules/otus/components/Panel/PanelCitation/PanelReferenceRow.vue
rename to src/modules/otus/components/Panel/PanelNomenclature/PanelReferenceRow.vue
index a5ee9d4..f7ab61e 100644
--- a/src/modules/otus/components/Panel/PanelCitation/PanelReferenceRow.vue
+++ b/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
   }
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js b/src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js
new file mode 100644
index 0000000..a2ebf42
--- /dev/null
+++ b/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
+    }
+  })
+}
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/overviewLayout.js
index 3acf41e..cf6e74b 100644
--- a/src/modules/otus/constants/overviewLayout.js
+++ b/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: [

From ce708e15d6a75871bc960f49539465df67dad4a0 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Wed, 15 Mar 2023 16:47:28 -0300
Subject: [PATCH 2/2] Refactor

---
 .../PanelNomenclatureCitations.vue               |  4 ++--
 .../PanelNomenclatureReferences.vue              |  4 ++--
 .../Panel/PanelNomenclature/splitList.js         | 14 ++++++++++++++
 .../Panel/PanelNomenclature/useSplitList.js      | 16 ----------------
 4 files changed, 18 insertions(+), 20 deletions(-)
 create mode 100644 src/modules/otus/components/Panel/PanelNomenclature/splitList.js
 delete mode 100644 src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js

diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
index b106424..537c26f 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
@@ -42,7 +42,7 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-import { useSplitList } from './useSplitList'
+import { splitList } from './splitList'
 import CitationRow from './PanelCitationRow.vue'
 import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
 
@@ -56,7 +56,7 @@ const props = defineProps({
 })
 
 const showAll = ref(false)
-const citationList = useSplitList(props, MAX_CITATIONS)
+const citationList = computed(() => splitList(props.list, MAX_CITATIONS))
 
 const menuOptions = computed(() => [
   {
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
index 2c0e5c2..cb6f664 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
@@ -42,7 +42,7 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { useSplitList } from './useSplitList'
+import { splitList } from './splitList'
 import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
 import PanelReferenceRow from './PanelReferenceRow.vue'
 
@@ -56,7 +56,7 @@ const props = defineProps({
 })
 
 const showAll = ref(false)
-const referenceList = useSplitList(props, MAX_REFERENCES)
+const referenceList = computed(() => splitList(props.list, MAX_REFERENCES))
 
 const menuOptions = computed(() => [
   {
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/splitList.js b/src/modules/otus/components/Panel/PanelNomenclature/splitList.js
new file mode 100644
index 0000000..db071d1
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelNomenclature/splitList.js
@@ -0,0 +1,14 @@
+import { computed } from 'vue'
+
+export function splitList(list, MAX_RECORDS) {
+  const copyArr = list.slice()
+  const first = copyArr.splice(0, MAX_RECORDS)
+  const last = copyArr.splice(-MAX_RECORDS)
+  const middle = copyArr
+
+  return {
+    first,
+    middle,
+    last
+  }
+}
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js b/src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js
deleted file mode 100644
index a2ebf42..0000000
--- a/src/modules/otus/components/Panel/PanelNomenclature/useSplitList.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
-    }
-  })
-}