From 9f32a4ba01d7c644f18c32d84e44c8dd7052b0f9 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Tue, 21 Mar 2023 19:40:30 -0300
Subject: [PATCH] Add components, configurations and utils

---
 src/components/Button/VButton.global.vue      |  2 +-
 src/components/Layout/LayoutHeader.vue        | 36 ++++----------
 src/components/Map/VMap.global.vue            | 39 ++++++++++++---
 src/components/Menu/MenuList.global.vue       | 18 -------
 .../search/otus/Filter/FilterContainer.vue    |  5 --
 .../otus/Filter/FilterTaxa/FilterTaxa.vue     | 49 -------------------
 .../otus/Filter/FilterTaxa/TableTaxa.vue      | 46 -----------------
 src/modules/search/otus/Filter/FilterView.vue |  7 ---
 src/modules/search/otus/OtuSearch.vue         | 28 +++++++----
 src/modules/search/otus/SearchBar.vue         | 22 +++++++++
 10 files changed, 84 insertions(+), 168 deletions(-)
 delete mode 100644 src/components/Menu/MenuList.global.vue
 delete mode 100644 src/modules/search/otus/Filter/FilterContainer.vue
 delete mode 100644 src/modules/search/otus/Filter/FilterTaxa/FilterTaxa.vue
 delete mode 100644 src/modules/search/otus/Filter/FilterTaxa/TableTaxa.vue
 delete mode 100644 src/modules/search/otus/Filter/FilterView.vue
 create mode 100644 src/modules/search/otus/SearchBar.vue

diff --git a/src/components/Button/VButton.global.vue b/src/components/Button/VButton.global.vue
index 04ed047..3ea571c 100644
--- a/src/components/Button/VButton.global.vue
+++ b/src/components/Button/VButton.global.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="px-2 py-2 rounded-md hover:bg-opacity-80"
+    class="px-3 py-1 hover:bg-opacity-80"
     :class="{
       'bg-primary-color': primary,
       'bg-secondary-color': secondary,
diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue
index 3c14079..1499cd1 100644
--- a/src/components/Layout/LayoutHeader.vue
+++ b/src/components/Layout/LayoutHeader.vue
@@ -1,23 +1,10 @@
 <template>
-  <div 
-    class="
-      relative
-      bg-header
-      border-base-muted
-      px-2
-      sm:px-4
-      py-2.5
-      border-b
-      pl-4
-      pr-4
-      h-9
-      align-middle
-      flex
-      items-center
-      bg-primary-color
-    "
+  <div
+    class="relative bg-header border-base-muted px-2 sm:px-4 py-2.5 border-b pl-4 pr-4 h-9 align-middle flex items-center bg-primary-color"
   >
-    <div class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content">
+    <div
+      class="container flex flex-wrap justify-between items-center mx-auto font-medium text-secondary-content"
+    >
       <router-link
         to="/"
         class="flex items-center text-primary-content"
@@ -27,7 +14,7 @@
           class="mr-3 h-10"
           :src="header_logo_url"
           :alt="header_logo_text"
-        >
+        />
         <span>
           {{ header_logo_text }}
         </span>
@@ -36,7 +23,7 @@
       <NavbarMobile />
 
       <div class="relative hidden lg:flex items-center ml-auto">
-        <nav class="text-sm leading-6 font-medium">
+        <nav class="text-sm leading-6 font-normal">
           <ul class="flex space-x-8">
             <li
               v-for="(item, index) in header_links"
@@ -64,10 +51,5 @@
 import SwitchTheme from '../SwitchTheme.vue'
 import NavbarMobile from '../Navbar/NavbarMobile.vue'
 
-const {
-  header_links,
-  header_logo_text,
-  header_logo_url
-} = __APP_ENV__
-
-</script>
\ No newline at end of file
+const { header_links, header_logo_text, header_logo_url } = __APP_ENV__
+</script>
diff --git a/src/components/Map/VMap.global.vue b/src/components/Map/VMap.global.vue
index 7516ab5..9a54fb0 100644
--- a/src/components/Map/VMap.global.vue
+++ b/src/components/Map/VMap.global.vue
@@ -73,11 +73,13 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['geojson:ready'])
+const emit = defineEmits(['geojson:ready', 'geojson'])
 
 let mapObject
 let observeMap
-let geoJSONGroup = new L.FeatureGroup()
+let drawnItems
+let geoJSONGroup
+
 const leafletMap = ref(null)
 const tiles = {
   osm: L.tileLayer(map_server_tils, {
@@ -103,11 +105,24 @@ watch(
 )
 
 onMounted(() => {
+  drawnItems = new L.FeatureGroup()
+  geoJSONGroup = new L.FeatureGroup()
+
   mapObject = L.map(leafletMap.value, {
     center: props.center,
-    zoom: props.zoom
+    zoom: props.zoom,
+    worldCopyJump: true
+  })
+
+  mapObject.pm.setGlobalOptions({
+    layerGroup: drawnItems
   })
 
+  geoJSONGroup.addTo(mapObject)
+
+  mapObject.addLayer(drawnItems)
+  mapObject.addLayer(geoJSONGroup)
+
   if (props.controls) {
     mapObject.pm.addControls({
       position: 'topleft',
@@ -117,10 +132,22 @@ onMounted(() => {
       drawMarker: false,
       cutPolygon: false
     })
-  }
 
-  geoJSONGroup = new L.FeatureGroup()
-  geoJSONGroup.addTo(mapObject)
+    mapObject.on('pm:create', () => {
+      const fg = L.featureGroup()
+
+      drawnItems.eachLayer((layer) => {
+        if (
+          (layer instanceof L.Path || layer instanceof L.Marker) &&
+          layer.pm
+        ) {
+          fg.addLayer(layer)
+        }
+      })
+
+      emit('geojson', fg.toGeoJSON())
+    })
+  }
 
   tiles.osm.addTo(mapObject)
   initEvents()
diff --git a/src/components/Menu/MenuList.global.vue b/src/components/Menu/MenuList.global.vue
deleted file mode 100644
index f9b1a58..0000000
--- a/src/components/Menu/MenuList.global.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M4 6h16M4 12h16m-7 6h7"
-      />
-    </svg>
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/modules/search/otus/Filter/FilterContainer.vue b/src/modules/search/otus/Filter/FilterContainer.vue
deleted file mode 100644
index 8863068..0000000
--- a/src/modules/search/otus/Filter/FilterContainer.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="bg-base-foreground rounded-md p-4">
-    <slot />
-  </div>
-</template>
diff --git a/src/modules/search/otus/Filter/FilterTaxa/FilterTaxa.vue b/src/modules/search/otus/Filter/FilterTaxa/FilterTaxa.vue
deleted file mode 100644
index 0bde34b..0000000
--- a/src/modules/search/otus/Filter/FilterTaxa/FilterTaxa.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <FilterContainer>
-    <h3 class="text-md mb-2 font-medium">Taxon name</h3>
-    <Autocomplete
-      class="w-full mb-4"
-      url="/taxon_names/autocomplete"
-      placeholder="Search..."
-      query-param="term"
-      label="label_html"
-      @select="addTaxonName"
-    />
-
-    <TableTaxa
-      v-if="taxonNames.length"
-      :list="taxonNames"
-      @remove="removeTaxonName"
-    />
-  </FilterContainer>
-</template>
-
-<script setup>
-import FilterContainer from '../FilterContainer.vue'
-import TableTaxa from './TableTaxa.vue'
-import { ref, computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const taxonNames = ref([])
-
-const params = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
-
-function addTaxonName(item) {
-  taxonNames.value.push(item)
-}
-
-function removeTaxonName(index) {
-  taxonNames.value.splice(index, 1)
-}
-</script>
diff --git a/src/modules/search/otus/Filter/FilterTaxa/TableTaxa.vue b/src/modules/search/otus/Filter/FilterTaxa/TableTaxa.vue
deleted file mode 100644
index 544c47b..0000000
--- a/src/modules/search/otus/Filter/FilterTaxa/TableTaxa.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <VTable>
-    <VTableHeader>
-      <VTableHeaderRow>
-        <VTableHeaderCell>Name</VTableHeaderCell>
-        <VTableHeaderCell />
-      </VTableHeaderRow>
-    </VTableHeader>
-
-    <VTableBody>
-      <VTableBodyRow
-        v-for="(item, index) in list"
-        :key="item.id"
-      >
-        <VTableBodyCell v-html="item.label_html" />
-        <VTableBodyCell>
-          <VButton
-            secondary
-            @click="() => emit('remove', index)"
-          >
-            <IconTrash class="w-4 h-4" />
-          </VButton>
-        </VTableBodyCell>
-      </VTableBodyRow>
-    </VTableBody>
-  </VTable>
-</template>
-
-<script setup>
-import VTable from '@/components/Table/VTable.vue'
-import VTableBody from '@/components/Table/VTableBody.vue'
-import VTableBodyCell from '@/components/Table/VTableBodyCell.vue'
-import VTableBodyRow from '@/components/Table/VTableBodyRow.vue'
-import VTableHeader from '@/components/Table/VTableHeader.vue'
-import VTableHeaderCell from '@/components/Table/VTableHeaderCell.vue'
-import VTableHeaderRow from '@/components/Table/VTableHeaderRow.vue'
-
-defineProps({
-  list: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const emit = defineEmits(['remove'])
-</script>
diff --git a/src/modules/search/otus/Filter/FilterView.vue b/src/modules/search/otus/Filter/FilterView.vue
deleted file mode 100644
index b4705d4..0000000
--- a/src/modules/search/otus/Filter/FilterView.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <FilterTaxa />
-</template>
-
-<script setup>
-import FilterTaxa from './FilterTaxa/FilterTaxa.vue'
-</script>
diff --git a/src/modules/search/otus/OtuSearch.vue b/src/modules/search/otus/OtuSearch.vue
index 9f373e2..6b6502d 100644
--- a/src/modules/search/otus/OtuSearch.vue
+++ b/src/modules/search/otus/OtuSearch.vue
@@ -3,21 +3,27 @@
     ref="root"
     class="w-screen h-screen fixed top-0 left-0 z-[5000]"
   >
-    <div class="absolute right-0 top-0 w-96 h-screen z-[1100] p-4">
-      <!--       <h2 class="text-xl text-base-content mb-4">Search by geographic area</h2> -->
-      <FilterView />
+    <SearchBar @search="loadOTUs" />
+    <div class="relative">
+      <VMap
+        class="w-screen h-screen"
+        controls
+        @geojson="
+          ($event) =>
+            (parameters.geo_json = JSON.stringify(
+              $event.features.map((feature) => feature.geometry)[0]
+            ))
+        "
+        :zoom="4"
+      />
     </div>
-    <VMap
-      class="w-screen h-screen"
-      controls
-      :zoom="4"
-    />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
-import FilterView from './Filter/FilterView.vue'
+import { makeAPIRequest } from '@/utils/request'
+import SearchBar from './SearchBar.vue'
 
 const root = ref()
 const emit = defineEmits(['close'])
@@ -40,4 +46,8 @@ const handleKeyboard = ({ key }) => {
       break
   }
 }
+
+function loadOTUs() {
+  makeAPIRequest.get('/otus.json', { params: parameters.value })
+}
 </script>
diff --git a/src/modules/search/otus/SearchBar.vue b/src/modules/search/otus/SearchBar.vue
new file mode 100644
index 0000000..f443cea
--- /dev/null
+++ b/src/modules/search/otus/SearchBar.vue
@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="bottom-0 w-screen bg-base-foreground z-[1000] left-0 p-4 text-sm flex flex-row justify-between align-middle box-border"
+  >
+    <div>
+      <VButton
+        primary
+        @click="() => emit('search')"
+      >
+        Search
+      </VButton>
+    </div>
+    <IconClose
+      class="cursor-pointer"
+      @click="() => emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['search', 'close'])
+</script>