fix PR isssues

packages/nc-gui/components/cell/GeoData.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { GeoLocationType } from 'nocodb-sdk'
-import { Modal as AModal, useVModel } from '#imports'
-import { latLongToJoinedString } from '~~/utils/geoDataUtils'
+import { Modal as AModal, latLongToJoinedString, useVModel } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -49,14 +48,13 @@ const onClickSetCurrentLocation = () => {
   isLoading = true
   const onSuccess = (position) => {
     const crd = position.coords
-    console.log('crd', crd)
     formState.latitude = crd.latitude
     formState.longitude = crd.longitude
     isLoading = false
   }
 
   const onError = (err) => {
-    console.warn(`ERROR(${err.code}): ${err.message}`)
+    console.error(`ERROR(${err.code}): ${err.message}`)
     isLoading = false
   }
 
@@ -74,7 +72,7 @@ const onClickSetCurrentLocation = () => {
     <a-button>{{ latLongStr }}</a-button>
     <template #overlay>
       <a-form :model="formState" class="flex flex-col" @finish="handleFinish">
-        <a-form-item class="inputLat">
+        <a-form-item class="input-lat">
           <template #label>
             <div class="fixed-width">{{ $t('labels.lat') }}</div>
           </template>
@@ -91,7 +89,7 @@ const onClickSetCurrentLocation = () => {
           />
         </a-form-item>
 
-        <a-form-item class="inputLng">
+        <a-form-item class="input-lng">
           <template #label>
             <div>{{ $t('labels.lng') }}</div>
           </template>
@@ -113,7 +111,7 @@ const onClickSetCurrentLocation = () => {
             <a-button class="ml-2" @click="onClickSetCurrentLocation">{{ $t('labels.yourLocation') }}</a-button>
           </div>
         </a-form-item>
-        <a-form-item class="buttons">
+        <a-form-item class="btn-cancel-submit">
           <a-button type="text" @click="clear">{{ $t('general.cancel') }}</a-button>
           <a-button type="primary" html-type="submit">{{ $t('general.submit') }}</a-button>
         </a-form-item>
@@ -127,14 +125,14 @@ input[type='number']:focus {
   @apply ring-transparent;
 }
 
-.inputLat {
+.input-lat {
   width: 180px;
   margin-top: 1rem;
   margin-bottom: 0.5rem;
   margin-right: 0.5rem;
   margin-left: 0.5rem;
 }
-.inputLng {
+.input-lng {
   width: 180px;
   margin-right: 0.5rem;
   margin-left: 0.5rem;
@@ -143,7 +141,7 @@ input[type='number']:focus {
 .fixed-width {
   width: 24px;
 }
-.buttons {
+.btn-cancel-submit {
   margin-left: auto;
   margin-bottom: 0;
 }

packages/nc-gui/components/smartsheet/Map.vue

@@ -123,7 +123,11 @@ onMounted(async () => {
 
   markersClusterGroupRef.value = L.markerClusterGroup({
     iconCreateFunction(cluster: { getChildCount: () => number }) {
-      return L.divIcon({ html: `${cluster.getChildCount()}`, className: 'geo-map-marker-cluster', iconSize: new L.Point(40, 40) })
+      return L.divIcon({
+        html: `${cluster.getChildCount()}`,
+        className: 'bg-pink rounded-full flex items-center justify-center geo-map-marker-cluster',
+        iconSize: new L.Point(40, 40),
+      })
     },
   })
   myMap.addLayer(markersClusterGroupRef.value)
@@ -195,12 +199,13 @@ watch(view, async (nextView) => {
 })
 
 const count = computed(() => paginationData.value.totalRows)
+console.log('count', count)
 </script>
 
 <template>
   <div class="flex flex-col h-full w-full no-underline">
-    <div id="mapContainer" ref="mapContainerRef">
-      <a-tooltip placement="bottom" class="tooltip">
+    <div id="mapContainer" ref="mapContainerRef" class="w-full h-screen">
+      <a-tooltip placement="bottom" class="h-2 w-auto max-w-fit-content absolute top-10 right-10 p-10 z-500 cursor-default">
         <template #title>
           <span v-if="count > 1000"> {{ $t('msg.info.map.overLimit') }} </span>
           <span v-else-if="count > 900"> {{ $t('msg.info.map.closeLimit') }} </span>
@@ -240,10 +245,6 @@ const count = computed(() => paginationData.value.totalRows)
 </template>
 
 <style scoped lang="scss">
-#mapContainer {
-  height: 100vh;
-}
-
 :global(.geo-map-marker-cluster) {
   background-color: pink;
   border-radius: 50%;
@@ -261,14 +262,4 @@ const count = computed(() => paginationData.value.totalRows)
   max-height: 255px;
   overflow: scroll;
 }
-.tooltip {
-  height: 2rem;
-  max-width: fit-content;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 10px;
-  z-index: 500;
-  cursor: default;
-}
 </style>

packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue

@@ -29,7 +29,7 @@ const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, m
 
 const { loadMapData, loadMapMeta, updateMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
 
-const stackedByDropdown = ref(false)
+const mappedByDropdown = ref(false)
 
 watch(
   () => activeView.value?.id,
@@ -67,18 +67,14 @@ const geoDataFieldOptions = computed<SelectProps['options']>(() => {
 })
 
 const handleChange = () => {
-  stackedByDropdown.value = false
+  mappedByDropdown.value = false
 }
 </script>
 
 <template>
-  <a-dropdown v-if="!IsPublic" v-model:visible="stackedByDropdown" :trigger="['click']">
-    <div class="nc-kanban-btn">
-      <a-button
-        v-e="['c:kanban:change-grouping-field']"
-        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn"
-        :disabled="isLocked"
-      >
+  <a-dropdown v-if="!IsPublic" v-model:visible="mappedByDropdown" :trigger="['click']">
+    <div class="nc-map-btn">
+      <a-button v-e="['c:map:change-grouping-field']" class="nc-map-stacked-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <mdi-arrow-down-drop-circle-outline />
           <span class="text-capitalize !text-sm font-weight-normal">
@@ -91,7 +87,7 @@ const handleChange = () => {
     </div>
     <template #overlay>
       <div
-        v-if="stackedByDropdown"
+        v-if="mappedByDropdown"
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
         @click.stop
       >
@@ -103,7 +99,7 @@ const handleChange = () => {
           <div class="grouping-field">
             <a-select
               v-model:value="geoDataMappingFieldColumnId"
-              class="w-full nc-kanban-grouping-field-select"
+              class="w-full nc-msp-grouping-field-select"
               :options="geoDataFieldOptions"
               placeholder="Select a Mapping Field"
               @change="handleChange"

packages/nc-gui/utils/index.ts

@@ -20,3 +20,4 @@ export * from './userUtils'
 export * from './stringUtils'
 export * from './memStorage'
 export * from './browserUtils'
+export * from './geoDataUtils'