Merge pull request #28 from SpeciesFileGroup/widget_geographic_search

Widget geographic search
wbbaker · Mar 27, 2023 · c9f1f5e · c9f1f5e
2 parents b86c1e7 + fe1d86a
commit c9f1f5e
Show file tree

Hide file tree

Showing 24 changed files with 1,046 additions and 268 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@geoman-io/leaflet-geoman-free": "^2.14.2",
     "axios": "^1.3.4",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.3",

diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css
@@ -8,8 +8,8 @@
   --color-base-foreground: 255, 255, 255;
   --color-base-background: 245, 247, 251;
   --color-base-muted: 226, 232, 240;
-  --color-base-soft: 156,163,175;
-  --color-base-lighter: 55,65,81;
+  --color-base-soft: 156, 163, 175;
+  --color-base-lighter: 55, 65, 81;
   --color-base-border: 203, 213, 225;
   --color-base-content: 0, 0, 0;
 
@@ -22,15 +22,15 @@
 .dark {
   --color-primary: 23, 23, 23;
   --color-primary-content: 255, 255, 255;
-  
+
   --color-secondary: 14, 165, 233;
   --color-secondary-content: 255, 255, 255;
 
   --color-base-background: 23, 23, 23;
   --color-base-foreground: 38, 38, 38;
   --color-base-muted: 48, 48, 48;
-  --color-base-soft: 200,200,200;
+  --color-base-soft: 200, 200, 200;
   --color-base-lighter: 220, 220, 220;
-  --color-base-border: 38, 38, 38;
+  --color-base-border: 70, 70, 70;
   --color-base-content: 255, 255, 255;
-}
+}
diff --git a/src/components/Autocomplete/Autocomplete.global.vue b/src/components/Autocomplete/Autocomplete.global.vue
@@ -1,69 +1,29 @@
 <template>
-  <div
-    class="
-      autocomplete
-      md:block 
-      md:mr-0
-      mr-3
-      relative
-      w-fit"
-  >
-    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-      <IconSearch class="w-5 h-5 text-gray-500" />
+  <div class="autocomplete md:block md:mr-0 mr-3 relative w-fit">
+    <div
+      class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
+    >
+      <IconSearch class="w-4 h-4 text-gray-500" />
     </div>
     <input
       v-model="typed"
       type="text"
-      class="
-        autocomplete__input
-        block
-        box-border
-        min-w-full
-        p-1.5
-        pl-10
-        text-base-content
-        rounded
-        border
-        sm:text-sm
-        placeholder:text-sm
-        dark:border-slate-700
-        border-gray-300
-        dark:placeholder:text-slate-400
-        focus:ring-primary-500
-        focus:border-primary-500"
+      class="autocomplete__input block box-border min-w-full p-1.5 pl-10 text-base-content rounded border sm:text-sm placeholder:text-sm dark:border-slate-700 border-gray-300 dark:placeholder:text-slate-400 focus:ring-primary-500 focus:border-primary-500"
       :placeholder="placeholder"
-    >
+    />
     <AutocompleteSpinner
       v-if="isSearching"
       class="absolute top-2 right-2 h-5 w-5"
     />
 
     <ul
       v-if="list.length"
-      class="
-        autocomplete__list
-        list
-        absolute
-        z-[500]
-        max-h-52
-        w-full
-        overflow-y-auto
-        border
-        bg-base-foreground
-        border-base-border
-        !m-0"
+      class="autocomplete__list list absolute z-[500] max-h-52 w-full overflow-y-auto border bg-base-foreground border-base-border !m-0"
     >
       <li
         v-for="item in list"
         :key="item.id"
-        class="
-          autocomplete__item
-          p-2 border-b 
-          text-xs
-          cursor-pointer
-          hover:bg-secondary-color
-          hover:bg-opacity-5
-          border-base-border"
+        class="autocomplete__item p-2 border-b text-xs cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />
@@ -112,37 +72,36 @@ const isSearching = ref(false)
 const delay = 500
 let timeout
 
-watch(typed, newVal => {
+watch(typed, (newVal) => {
   clearTimeout(timeout)
 
   if (newVal.length) {
     timeout = setTimeout(() => {
       isSearching.value = true
-      makeAPIRequest.get(props.url, {
-        params: {
-          ...props.params,
-          [props.queryParam]: typed.value,
-        }
-      }).then(({ data }) => {
-        isSearching.value = false
-        list.value = data
-      })
+      makeAPIRequest
+        .get(props.url, {
+          params: {
+            ...props.params,
+            [props.queryParam]: typed.value
+          }
+        })
+        .then(({ data }) => {
+          isSearching.value = false
+          list.value = data
+        })
     }, delay)
   } else {
     list.value = []
   }
 })
 
-const selectItem = item => {
+const selectItem = (item) => {
   emit('select', item)
   typed.value = ''
 }
-
-
 </script>
 
 <style lang="scss" scoped>
-
 .autocomplete {
   &__list {
     display: none;
@@ -161,4 +120,4 @@ const selectItem = item => {
     display: block;
   }
 }
-</style>
+</style>
diff --git a/src/components/Button/VButton.global.vue b/src/components/Button/VButton.global.vue
@@ -0,0 +1,28 @@
+<template>
+  <button
+    type="button"
+    class="px-3 py-1 hover:bg-opacity-80"
+    :class="{
+      'bg-primary-color': primary,
+      'bg-secondary-color': secondary,
+      'text-primary-content': primary,
+      'text-secondary-content': secondary
+    }"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup>
+const props = defineProps({
+  primary: {
+    type: Boolean,
+    default: false
+  },
+
+  secondary: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
diff --git a/src/components/Icon/IconSearch.global.vue b/src/components/Icon/IconSearch.global.vue
@@ -1,7 +1,7 @@
 <template>
-  <svg 
+  <svg
     xmlns="http://www.w3.org/2000/svg"
-    class="w-5 h-5 text-gray-500"
+    class="text-gray-500"
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"
@@ -10,10 +10,9 @@
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
-      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
     />
   </svg>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
diff --git a/src/components/Icon/IconTrash.global.vue b/src/components/Icon/IconTrash.global.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+    />
+  </svg>
+</template>
diff --git 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>
+const { header_links, header_logo_text, header_logo_url } = __APP_ENV__
+</script>