From d8e575cdaa597799c366268419bc57db837c2ee9 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 27 May 2024 20:22:52 -0300
Subject: [PATCH] Add map popup for DwC data

---
 src/assets/css/leaflet.css                    |  8 +--
 src/components/Map/VMap.client.vue            | 16 ++---
 .../Map/constants/disableLayerOptions.js      |  7 +++
 src/components/Map/constants/index.js         |  1 +
 src/components/Map/utils/geojsonOptions.js    | 61 +++++--------------
 src/constants/objectTypes.js                  |  5 ++
 .../components/Panel/PanelMap/PanelMap.vue    | 16 ++++-
 .../Panel/PanelMap/components/DwcTable.vue    | 58 ++++++++++++++++++
 .../Panel/PanelMap/components/MapPopup.vue    | 32 ++++++++++
 .../PanelMap/components/Search/OtuSearch.vue  | 29 ++++++---
 .../PanelMap/composables/useGeojsonOptions.js | 34 +++++++++++
 11 files changed, 201 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Map/constants/disableLayerOptions.js
 create mode 100644 src/components/Map/constants/index.js
 create mode 100644 src/constants/objectTypes.js
 create mode 100644 src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue
 create mode 100644 src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue
 create mode 100644 src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js

diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
index 8ee01bd..f1594e5 100644
--- a/src/assets/css/leaflet.css
+++ b/src/assets/css/leaflet.css
@@ -3,11 +3,9 @@
     saturate(0.3) brightness(0.7);
 }
 
-/* @media (prefers-color-scheme: dark) {
-  .map-tiles {
-    filter:var(--map-tiles-filter, none);
-  }
-} */
+.leaflet-fade-anim .leaflet-popup {
+  transition: none;
+}
 
 .map-point-marker {
   opacity: var(--color-map-marker-opacity);
diff --git a/src/components/Map/VMap.client.vue b/src/components/Map/VMap.client.vue
index af4f396..da0b5eb 100644
--- a/src/components/Map/VMap.client.vue
+++ b/src/components/Map/VMap.client.vue
@@ -7,12 +7,12 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+import { makeTileFromConfiguration } from './utils/makeTileFromConfiguration'
 import L from 'leaflet'
 import iconRetina from 'leaflet/dist/images/marker-icon-2x.png'
 import iconUrl from 'leaflet/dist/images/marker-icon.png'
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png'
 import geojsonDefaultOptions from './utils/geojsonOptions'
-import { makeTileFromConfiguration } from './utils/makeTileFromConfiguration'
 
 import '@geoman-io/leaflet-geoman-free'
 import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
@@ -90,7 +90,7 @@ const props = defineProps({
   },
 
   geojsonOptions: {
-    type: Object,
+    type: Function,
     default: () => ({})
   },
 
@@ -116,12 +116,12 @@ const props = defineProps({
 })
 
 const emit = defineEmits([
-  'geojson:ready',
-  'geojson',
   'add:layer',
+  'drag:layer',
   'draw:start',
   'edit:layer',
-  'drag:layer',
+  'geojson',
+  'geojson:ready',
   'zoom:change',
   'zoom:start'
 ])
@@ -318,9 +318,11 @@ onUnmounted(() => {
 
 function setGeoJSON(geojson) {
   if (geojson) {
+    const args = { L }
+
     L.geoJSON(geojson, {
-      ...geojsonDefaultOptions(L),
-      ...props.geojsonOptions
+      ...geojsonDefaultOptions(args),
+      ...props.geojsonOptions(args)
     }).addTo(geoJSONGroup)
 
     const bounds = geoJSONGroup.getBounds()
diff --git a/src/components/Map/constants/disableLayerOptions.js b/src/components/Map/constants/disableLayerOptions.js
new file mode 100644
index 0000000..2134dbd
--- /dev/null
+++ b/src/components/Map/constants/disableLayerOptions.js
@@ -0,0 +1,7 @@
+export const DISABLE_LAYER_OPTIONS = {
+  allowEditing: false,
+  allowRemoval: false,
+  allowCutting: false,
+  allowRotation: false,
+  draggable: false
+}
diff --git a/src/components/Map/constants/index.js b/src/components/Map/constants/index.js
new file mode 100644
index 0000000..b07c1f6
--- /dev/null
+++ b/src/components/Map/constants/index.js
@@ -0,0 +1 @@
+export * from './disableLayerOptions'
diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js
index a987194..0248148 100644
--- a/src/components/Map/utils/geojsonOptions.js
+++ b/src/components/Map/utils/geojsonOptions.js
@@ -1,22 +1,22 @@
 import * as Icons from '../icons'
 import * as Shape from '../shapes'
+import { DISABLE_LAYER_OPTIONS } from '../constants'
+import {
+  TYPE_MATERIAL,
+  COLLECTION_OBJECT,
+  ASSERTED_DISTRIBUTION,
+  GEOREFERENCE,
+  AGGREGATE
+} from '@/constants/objectTypes.js'
 
 const TYPES = [
-  'TypeMaterial',
-  'CollectionObject',
-  'AssertedDistribution',
-  'Georeference',
-  'Aggregate'
+  TYPE_MATERIAL,
+  COLLECTION_OBJECT,
+  ASSERTED_DISTRIBUTION,
+  GEOREFERENCE,
+  AGGREGATE
 ]
 
-const DEFAULT_OPTIONS = {
-  allowEditing: false,
-  allowRemoval: false,
-  allowCutting: false,
-  allowRotation: false,
-  draggable: false
-}
-
 function getRelevantType(base) {
   const types = base.map((b) => b.type)
 
@@ -25,39 +25,10 @@ function getRelevantType(base) {
   return types[0]
 }
 
-export default (L) => ({
+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>
-        ${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.setOptions(DISABLE_LAYER_OPTIONS)
     layer.pm.disable()
-
-    layer.bindPopup(label)
   },
 
   pointToLayer: (feature, latLng) => {
@@ -67,7 +38,7 @@ export default (L) => ({
       icon: L.divIcon(markerStyle)
     })
 
-    marker.pm.setOptions(DEFAULT_OPTIONS)
+    marker.pm.setOptions(DISABLE_LAYER_OPTIONS)
 
     return marker
   },
diff --git a/src/constants/objectTypes.js b/src/constants/objectTypes.js
new file mode 100644
index 0000000..73ff030
--- /dev/null
+++ b/src/constants/objectTypes.js
@@ -0,0 +1,5 @@
+export const TYPE_MATERIAL = 'TypeMaterial'
+export const COLLECTION_OBJECT = 'CollectionObject'
+export const ASSERTED_DISTRIBUTION = 'AssertedDistribution'
+export const GEOREFERENCE = 'Georeference'
+export const AGGREGATE = 'Aggregate'
diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index 63edb7a..beeeb90 100644
--- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
+++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -11,9 +11,16 @@
           :zoom-bounds="8"
           :geojson="store.distribution.geojson"
           :cluster-icon-create-function="makeClusterIconFor"
+          :geojson-options="geojsonOptions"
           @geojson:ready="() => (isLoading = false)"
         />
-
+        <div ref="popupElement">
+          <MapPopup
+            v-if="popupItem"
+            :items="popupItem.base"
+            @selected="dwcTableRef.show"
+          />
+        </div>
         <VButton
           class="h-6 text-sm absolute right-3 top-3 z-[400]"
           primary
@@ -56,6 +63,7 @@
         <span>{{ LEGEND[type].label }}</span>
       </div>
     </div>
+    <DwcTable ref="dwcTableRef" />
   </VCard>
 </template>
 
@@ -63,8 +71,11 @@
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useDistributionStore } from '@/modules/otus/store/useDistributionStore.js'
 import { makeClusterIconFor } from './clusters/makeClusterIconFor'
+import { useGeojsonOptions } from './composables/useGeojsonOptions.js'
+import MapPopup from './components/MapPopup.vue'
 import CachedMap from './components/CachedMap.vue'
 import OtuSearch from './components/Search/OtuSearch.vue'
+import DwcTable from './components/DwcTable.vue'
 
 const props = defineProps({
   otuId: {
@@ -91,7 +102,10 @@ const props = defineProps({
 const zoom = 2
 const isLoading = ref(true)
 const isOtuSearchVisible = ref(false)
+const dwcTableRef = ref(null)
 const store = useDistributionStore()
+const popupElement = ref(null)
+const { popupItem, geojsonOptions } = useGeojsonOptions({ popupElement })
 
 const LEGEND = {
   AssertedDistribution: {
diff --git a/src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue b/src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue
new file mode 100644
index 0000000..9bbc939
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/components/DwcTable.vue
@@ -0,0 +1,58 @@
+<template>
+  <VModal
+    v-if="isModalVisible"
+    @close="() => (isModalVisible = false)"
+  >
+    <template #header>
+      <h3 class="font-medium">{{ title }}</h3>
+    </template>
+    <VTable class="p-4 pt-0">
+      <VTableHeader>
+        <VTableHeaderRow>
+          <VTableHeaderCell>Field</VTableHeaderCell>
+          <VTableHeaderCell>Value</VTableHeaderCell>
+        </VTableHeaderRow>
+      </VTableHeader>
+      <VTableBody>
+        <VTableBodyRow
+          v-for="(value, key) in dwcData"
+          :key="key"
+        >
+          <VTableBodyCell>{{ key }} </VTableBodyCell>
+          <VTableBodyCell>{{ value }} </VTableBodyCell>
+        </VTableBodyRow>
+      </VTableBody>
+    </VTable>
+    <VSpinner v-if="isLoading" />
+  </VModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { makeAPIRequest } from '@/utils'
+
+const isLoading = ref(false)
+const isModalVisible = ref(false)
+const dwcData = ref({})
+const title = ref()
+
+function show({ label, id }) {
+  isModalVisible.value = true
+  isLoading.value = true
+  dwcData.value = {}
+  title.value = label
+
+  makeAPIRequest(`/collection_objects/${id}/dwc`)
+    .then(({ data }) => {
+      dwcData.value = data
+    })
+    .catch(() => {})
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+defineExpose({
+  show
+})
+</script>
diff --git a/src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue b/src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue
new file mode 100644
index 0000000..398ebf2
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/components/MapPopup.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="max-h-32 overflow-y-auto text-xs min-w-80">
+    <ul>
+      <li
+        v-for="item in items"
+        class="py-2 last:border-0 truncate border-b"
+        title="label"
+      >
+        <span
+          v-if="item.type === COLLECTION_OBJECT"
+          class="cursor-pointer text-secondary-color"
+          v-text="item.label"
+          @click="() => emit('selected', item)"
+        />
+        <span v-else>{{ item.label }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { COLLECTION_OBJECT } from '@/constants/objectTypes.js'
+
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['selected'])
+</script>
diff --git a/src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue b/src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue
index 1df085e..ef2c317 100644
--- a/src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue
+++ b/src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="root"
-    class="w-screen h-screen fixed top-0 left-0 z-[5000] flex flex-col"
-  >
+  <div class="w-screen h-screen fixed top-0 left-0 z-[5000] flex flex-col">
     <VSpinner v-if="isLoading" />
     <SearchBar
       :label="otu.object_tag"
@@ -23,6 +20,7 @@
         :dragging="!disableZoom"
         :zoom-bounds="maxZoom"
         :geojson="shapes"
+        :geojsonOptions="geojsonOptions"
         @geojson:ready="updateMaxZoom"
         @add:layer="(layer) => loadOTUs(JSON.stringify(layer.geometry))"
         @edit:layer="(layer) => loadOTUs(JSON.stringify(layer.geometry))"
@@ -31,6 +29,14 @@
         :zoom="4"
       />
 
+      <div ref="popupElement">
+        <MapPopup
+          v-if="popupItem"
+          :items="popupItem.base"
+          @selected="dwcTableRef.show"
+        />
+      </div>
+
       <div
         :class="[
           'h-full',
@@ -57,35 +63,42 @@
         />
       </div>
     </div>
+    <DwcTable ref="dwcTableRef" />
   </div>
 </template>
 
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useGeojsonOptions } from '../../composables/useGeojsonOptions.js'
 import TaxonWorks from '../../../../../services/TaxonWorks.js'
 import SearchBar from './SearchBar.vue'
 import ListResults from './ListResults.vue'
+import MapPopup from '../MapPopup.vue'
+import DwcTable from '../DwcTable.vue'
 
 const props = defineProps({
-  otu: {
-    type: Array,
+  shapes: {
+    type: Object,
     default: () => []
   },
 
-  shapes: {
+  otu: {
     type: Object,
     default: undefined
   }
 })
 
-const root = ref()
 const emit = defineEmits(['close'])
+
+const popupElement = ref(null)
+const dwcTableRef = ref(null)
 const mapRef = ref(null)
 const list = ref([])
 const isTableVisible = ref(false)
 const isLoading = ref()
 const maxZoom = ref(6)
 const currentZoom = ref(6)
+const { popupItem, geojsonOptions } = useGeojsonOptions({ popupElement })
 const disableZoom = computed(
   () => !!props.shapes && currentZoom.value <= maxZoom.value
 )
diff --git a/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js b/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js
new file mode 100644
index 0000000..e488aca
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/composables/useGeojsonOptions.js
@@ -0,0 +1,34 @@
+import { DISABLE_LAYER_OPTIONS } from '@/components/Map/constants'
+import { computed, ref } from 'vue'
+
+export function makeGeojsonOptions({ popupElement, popupItem }) {
+  return function () {
+    return {
+      onEachFeature: (feature, layer) => {
+        layer.pm.setOptions(DISABLE_LAYER_OPTIONS)
+        layer.pm.disable()
+
+        layer.on('popupopen', () => (popupItem.value = feature.properties))
+        layer.on('popupclose', () => (popupItem.value = null))
+
+        layer.bindPopup(popupElement.value, {
+          minWidth: 400,
+          maxWidth: 400
+        })
+      }
+    }
+  }
+}
+
+export function useGeojsonOptions({ popupElement }) {
+  const popupItem = ref(null)
+
+  const geojsonOptions = computed(() =>
+    makeGeojsonOptions({ popupElement, popupItem })
+  )
+
+  return {
+    geojsonOptions,
+    popupItem
+  }
+}