geodata: switch info about record limits depending on the size of data in map view

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

@@ -1,23 +1,27 @@
 <script setup lang="ts">
-// import type { MapType } from 'nocodb-sdk'
-// import { UITypes } from 'nocodb-sdk'
-// import type { SelectProps } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj, inject, useViewData } from '#imports'
-// const { totalNumberOfTableRows } = useSmartsheetStoreOrThrow()
 
 const meta = inject(MetaInj)
-
 const view = inject(ActiveViewInj)
+const { syncCount, paginationData } = useViewData(meta!, view!)
+
+const count = computed(() => {
+  return paginationData.value.totalRows
+})
 
-const FOO = useViewData(meta!, view!)
+syncCount()
 </script>
 
 <template>
   <a-tooltip placement="bottom">
-    <template #title> You're getting close to the limit. The limit of markers in a Map View is 1000 records. </template>
+    <template #title>
+      <span v-if="count > 1000"> You're over the limit. </span>
+      <span v-else> You're getting close to the limit. </span>
+      <span> The limit of markers shown in a Map View is 1000 records. </span>
+    </template>
 
-    <div class="nc-warning-info flex min-w-32px h-32px items-center gap-1 px-2">
+    <div v-if="count > 900" class="nc-warning-info flex min-w-32px h-32px items-center gap-1 px-2">
-      <div>{{ FOO.paginationData.value.totalRows }} records</div>
+      <div>{{ count }} records</div>
       <mdi-map-marker-alert />
     </div>
   </a-tooltip>

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -13,14 +13,12 @@ const formatData = (list: Row[]) =>
     rowMeta: {},
   }))
 
-const { appInfo } = $(useGlobal())
-
 const appInfoDefaultLimit = 1000
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: appInfoDefaultLimit })
 
 const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
   (
-    meta: Ref<TableType | MapType | undefined>,
+    meta: Ref<TableType | undefined>,
     viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
     where?: ComputedRef<string | undefined>,
   ) => {
@@ -36,6 +34,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     const geoDataFieldColumn = ref<ColumnType | undefined>()
 
+    const view = inject(ActiveViewInj)
+
+    const { syncCount } = useViewData(meta, view!)
+
     const queryParams = computed(() => ({
       // offset: ((paginationData.value.page ?? 0) - 1) * (paginationData.value.pageSize ?? appInfoDefaultLimit),
       limit: paginationData.value.pageSize ?? appInfoDefaultLimit,
@@ -54,12 +56,11 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
       const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
         ...queryParams.value,
-        // ...params,
-        // ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-        // ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
         where: where?.value,
       })
 
+      syncCount()
+
       formattedData.value = formatData(res.list)
     }
 
@@ -108,6 +109,8 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
           oldRow: { ...insertedData },
         })
 
+        syncCount()
+
         return insertedData
       } catch (error: any) {
         message.error(await extractSdkResponseErrorMsg(error))