From 55ee6bba0965a54edf5d02eebb6e5c42ec64141e Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Thu, 22 Jun 2023 13:11:20 -0300
Subject: [PATCH] Update DwC button, fix map label for aggregate maps, split
 nomenclature panels

---
 src/components/Map/utils/geojsonOptions.js    | 41 ++++++-----
 src/modules/otus/components/DWCDownload.vue   | 20 +++---
 .../PanelNomenclature/PanelNomenclature.vue   | 67 +++++++++++++++--
 .../PanelNomenclatureCitations.vue            | 71 -------------------
 .../PanelNomenclatureReferences.vue           | 20 +++---
 .../PanelReferenceRow.vue                     |  0
 src/modules/otus/constants/overviewLayout.js  |  4 +-
 src/modules/otus/services/TaxonWorks.js       |  4 --
 8 files changed, 112 insertions(+), 115 deletions(-)
 delete mode 100644 src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
 rename src/modules/otus/components/Panel/{PanelNomenclature => PanelNomenclatureReferences}/PanelNomenclatureReferences.vue (75%)
 rename src/modules/otus/components/Panel/{PanelNomenclature => PanelNomenclatureReferences}/PanelReferenceRow.vue (100%)

diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js
index 7c67716..a987194 100644
--- a/src/components/Map/utils/geojsonOptions.js
+++ b/src/components/Map/utils/geojsonOptions.js
@@ -27,23 +27,32 @@ function getRelevantType(base) {
 
 export default (L) => ({
   onEachFeature: (feature, layer) => {
+    const labels = (feature.properties.base || [])
+      .map((item) => item.label)
+      .filter(Boolean)
+
+    if (!labels.length) {
+      return
+    }
+
     const label = `
-    <div class="max-h-32 overflow-y-auto text-xs">
-    <ul>
-    ${feature.properties.base
-      .map(
-        (item) =>
-          `
-          <li 
-            class="py-2 last:border-0 truncate border-b"
-            title="${item.label}"
-          >
-            ${item.label}
-          </li>
-          `
-      )
-      .join('')}
-      </ul></div>`
+      <div class="max-h-32 overflow-y-auto text-xs">
+        <ul>
+        ${labels
+          .map(
+            (label) =>
+              `
+              <li 
+                class="py-2 last:border-0 truncate border-b"
+                title="${label}"
+              >
+                ${label}
+              </li>
+              `
+          )
+          .join('')}
+        </ul>
+      </div>`
 
     layer.pm.setOptions(DEFAULT_OPTIONS)
     layer.pm.disable()
diff --git a/src/modules/otus/components/DWCDownload.vue b/src/modules/otus/components/DWCDownload.vue
index ae77638..7ec2a9f 100644
--- a/src/modules/otus/components/DWCDownload.vue
+++ b/src/modules/otus/components/DWCDownload.vue
@@ -2,7 +2,11 @@
   <VButton
     primary
     class="text-sm flex items-center"
-    @click="download"
+    @click="
+      () => {
+        downloadCSV()
+      }
+    "
   >
     <IconDownload class="w-4 h-4 mr-1" />
     DwC
@@ -10,8 +14,7 @@
 </template>
 
 <script setup>
-import TaxonWorks from '../services/TaxonWorks'
-import { downloadTextFile } from '../utils/files'
+const { url, project_token } = __APP_ENV__
 
 const props = defineProps({
   otu: {
@@ -20,11 +23,10 @@ const props = defineProps({
   }
 })
 
-function download() {
-  TaxonWorks.getDwC(props.otu.id).then(({ data }) => {
-    downloadTextFile(data, 'text/csv', 'dwc_records')
-  })
+function downloadCSV() {
+  window.open(
+    `${url}/otus/${props.otu.id}/inventory/dwc?project_token=${project_token}`,
+    '_self'
+  )
 }
-
-downloadTextFile
 </script>
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
index 09e2f6f..f272516 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclature.vue
@@ -1,12 +1,59 @@
 <template>
-  <PanelNomenlcatureCitations :list="store.catalog.timeline" />
-  <PanelNomenclatureReferences :list="store.catalog.sources" />
+  <VCard>
+    <VCardHeader class="flex justify-between">
+      <h2 class="text-md">
+        Nomenclature ({{ store.catalog.timeline.length }})
+      </h2>
+      <PanelDropdown
+        :menu-options="menuOptions"
+        panel-key="taxonomy"
+      />
+    </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"
+      />
+    </ul>
+    <AnimationOpacity>
+      <ul
+        class="text-sm"
+        v-show="showAll"
+      >
+        <CitationRow
+          v-for="citation in citationList.middle"
+          :key="citation.label"
+          :citation="citation"
+        />
+      </ul>
+    </AnimationOpacity>
+    <ul class="text-sm">
+      <CitationRow
+        v-for="citation in citationList.last"
+        :key="citation.label"
+        :citation="citation"
+      />
+    </ul>
+  </VCard>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue'
+import { splitList } from './splitList'
 import { useOtuStore } from '@/modules/otus/store/store'
-import PanelNomenlcatureCitations from './PanelNomenclatureCitations.vue'
-import PanelNomenclatureReferences from './PanelNomenclatureReferences.vue'
+import CitationRow from './PanelCitationRow.vue'
+import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import PanelDropdown from '../PanelDropdown.vue'
+
+const MAX_CITATIONS = 2
 
 const props = defineProps({
   otuId: {
@@ -31,4 +78,16 @@ const props = defineProps({
 })
 
 const store = useOtuStore()
+
+const showAll = ref(false)
+const citationList = computed(() =>
+  splitList(store.catalog.timeline, 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/PanelNomenclatureCitations.vue b/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
deleted file mode 100644
index 22c5932..0000000
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureCitations.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <VCard>
-    <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Nomenclature ({{ list.length }})</h2>
-      <PanelDropdown
-        :menu-options="menuOptions"
-        panel-key="taxonomy"
-      />
-    </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"
-      />
-    </ul>
-    <AnimationOpacity>
-      <ul
-        class="text-sm"
-        v-show="showAll"
-      >
-        <CitationRow
-          v-for="citation in citationList.middle"
-          :key="citation.label"
-          :citation="citation"
-        />
-      </ul>
-    </AnimationOpacity>
-    <ul class="text-sm">
-      <CitationRow
-        v-for="citation in citationList.last"
-        :key="citation.label"
-        :citation="citation"
-      />
-    </ul>
-  </VCard>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import { splitList } from './splitList'
-import CitationRow from './PanelCitationRow.vue'
-import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
-import PanelDropdown from '../PanelDropdown.vue'
-
-const MAX_CITATIONS = 2
-
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const showAll = ref(false)
-const citationList = computed(() => splitList(props.list, 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/PanelNomenclatureReferences/PanelNomenclatureReferences.vue
similarity index 75%
rename from src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
rename to src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue
index d6f646d..774fc77 100644
--- a/src/modules/otus/components/Panel/PanelNomenclature/PanelNomenclatureReferences.vue
+++ b/src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.vue
@@ -1,7 +1,9 @@
 <template>
   <VCard>
     <VCardHeader class="flex justify-between">
-      <h2 class="text-md">Nomenclature references ({{ list.length }})</h2>
+      <h2 class="text-md">
+        Nomenclature references ({{ store.catalog.sources.length }})
+      </h2>
       <PanelDropdown
         :menu-options="menuOptions"
         panel-key="taxonomy"
@@ -41,22 +43,20 @@
 
 <script setup>
 import { computed, ref } from 'vue'
-import { splitList } from './splitList'
-import PanelNomenclatureShowMore from './PanelNomenclatureShowMore.vue'
+import { splitList } from '../PanelNomenclature/splitList'
+import { useOtuStore } from '@/modules/otus/store/store'
+import PanelNomenclatureShowMore from '../PanelNomenclature/PanelNomenclatureShowMore.vue'
 import PanelReferenceRow from './PanelReferenceRow.vue'
 import PanelDropdown from '../PanelDropdown.vue'
 
 const MAX_REFERENCES = 2
 
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  }
-})
+const store = useOtuStore()
 
 const showAll = ref(false)
-const referenceList = computed(() => splitList(props.list, MAX_REFERENCES))
+const referenceList = computed(() =>
+  splitList(store.catalog.sources, MAX_REFERENCES)
+)
 
 const menuOptions = computed(() => [
   {
diff --git a/src/modules/otus/components/Panel/PanelNomenclature/PanelReferenceRow.vue b/src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelReferenceRow.vue
similarity index 100%
rename from src/modules/otus/components/Panel/PanelNomenclature/PanelReferenceRow.vue
rename to src/modules/otus/components/Panel/PanelNomenclatureReferences/PanelReferenceRow.vue
diff --git a/src/modules/otus/constants/overviewLayout.js b/src/modules/otus/constants/overviewLayout.js
index 49dc2fd..31cc0d9 100644
--- a/src/modules/otus/constants/overviewLayout.js
+++ b/src/modules/otus/constants/overviewLayout.js
@@ -3,6 +3,7 @@ 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 PanelNomenclature from '../components/Panel/PanelNomenclature/PanelNomenclature.vue'
+import PanelNomenclatureReference from '../components/Panel/PanelNomenclatureReferences/PanelNomenclatureReferences.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'
@@ -19,7 +20,8 @@ export const overviewLayout = {
       component: PanelTypeDesignation,
       available: [FAMILY_GROUP, GENUS_GROUP]
     },
-    { component: PanelNomenclature }
+    { component: PanelNomenclature },
+    { component: PanelNomenclatureReference }
   ],
 
   right: [
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index f6f92ed..55cb24a 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -65,10 +65,6 @@ export default class TaxonWorks {
     })
   }
 
-  static getDwC(otuId) {
-    return makeAPIRequest.get(`/otus/${otuId}/inventory/dwc`)
-  }
-
   static getCachedMap(id) {
     return makeAPIRequest.get(`/cached_maps/${id}`)
   }