Merge pull request #34 from SpeciesFileGroup/widget_geographic_search

Update autocomplete style. Add map error message
wbbaker · Mar 27, 2023 · c29d681 · c29d681
2 parents 0c7d270 + 7a24e6e
commit c29d681
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/Autocomplete/Autocomplete.global.vue b/src/components/Autocomplete/Autocomplete.global.vue
@@ -18,12 +18,12 @@
 
     <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 shadow-md"
     >
       <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 px-3 py-2 border-b text-xs cursor-pointer hover:bg-secondary-color hover:bg-opacity-5 border-base-border truncate"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />

diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -12,7 +12,7 @@
       />
 
       <VButton
-        class="h-6 text-sm absolute right-3 top-3 z-[3000]"
+        class="h-6 text-sm absolute right-3 top-3 z-[400]"
         primary
         @click="() => (isOtuSearchVisible = true)"
       >
@@ -26,7 +26,13 @@
       />
     </div>
     <div
-      class="text-xs flex flex-row p-2 gap-2"
+      v-if="errorMessage"
+      class="flex flex-row p-2 text-xs italic"
+    >
+      * {{ errorMessage }}
+    </div>
+    <div
+      class="flex flex-row p-2 gap-2 text-xs"
       v-if="currentShapeTypes.length"
     >
       <div
@@ -67,6 +73,7 @@ const geojson = ref(undefined)
 const isLoading = ref(true)
 const isOtuSearchVisible = ref(false)
 const currentShapeTypes = ref([])
+const errorMessage = ref(null)
 
 const LEGEND = {
   AssertedDistribution: {
@@ -94,14 +101,14 @@ watch(
     isLoading.value = true
 
     const { data } = await TaxonWorks.getOtuDistribution(props.otuId)
-    const features = removeDuplicateShapes(data)
 
     if (data.request_too_large) {
       geojson.value = null
+      errorMessage.value = data.message
     } else {
       geojson.value = {
         ...data,
-        features
+        features: removeDuplicateShapes(data)
       }
     }
   },