PR fixes: geodata column layout, expanded form in shared view

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { GeoLocationType } from 'nocodb-sdk'
 import { Modal as AModal, latLongToJoinedString, useVModel } from '#imports'
+import GeoDataIcon from '~icons/mdi/map-marker'
 
 interface Props {
   modelValue?: string | null
@@ -20,10 +21,13 @@ let isExpanded = $ref(false)
 
 let isLoading = $ref(false)
 
+let isLocationSet = $ref(false)
+
 const [latitude, longitude] = (vModel.value || '').split(';')
 
 const latLongStr = computed(() => {
   const [latitude, longitude] = (vModel.value || '').split(';')
+  if (latitude) isLocationSet = true
   return latitude && longitude ? `${latitude}; ${longitude}` : 'Set location'
 })
 
@@ -69,7 +73,18 @@ const onClickSetCurrentLocation = () => {
 
 <template>
   <a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click">
-    <a-button>{{ latLongStr }}</a-button>
+    <div
+      v-if="!isLocationSet"
+      class="group cursor-pointer flex gap-1 items-center mx-auto max-w-32 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+    >
+      <div class="flex items-center gap-2">
+        <GeoDataIcon class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]" />
+        <div class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs">
+          {{ latLongStr }}
+        </div>
+      </div>
+    </div>
+    <div v-else>{{ latLongStr }}</div>
     <template #overlay>
       <a-form :model="formState" class="flex flex-col" @finish="handleFinish">
         <a-form-item>

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

@@ -3,7 +3,7 @@ import 'leaflet/dist/leaflet.css'
 import L, { LatLng } from 'leaflet'
 import 'leaflet.markercluster'
 import { ViewTypes } from 'nocodb-sdk'
-import { OpenNewRecordFormHookInj, latLongToJoinedString, onMounted, provide, ref } from '#imports'
+import { OpenNewRecordFormHookInj, latLongToJoinedString, onMounted, provide, ref, IsPublicInj } from '#imports'
 import type { Row as RowType } from '~/lib'
 
 const route = useRoute()
@@ -23,6 +23,8 @@ const mapContainerRef = ref<HTMLElement>()
 
 const myMapRef = ref<L.Map>()
 
+const isPublic = inject(IsPublicInj, ref(false))
+
 const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
@@ -199,7 +201,6 @@ watch(view, async (nextView) => {
 })
 
 const count = computed(() => paginationData.value.totalRows)
-
 </script>
 
 <template>
@@ -219,8 +220,7 @@ const count = computed(() => paginationData.value.totalRows)
       </a-tooltip>
     </div>
   </div>
-
-  <Suspense>
+  <Suspense v-if="!isPublic">
     <LazySmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"
       v-model="expandedFormDlg"
@@ -230,8 +230,7 @@ const count = computed(() => paginationData.value.totalRows)
       :view="view"
     />
   </Suspense>
-
-  <Suspense>
+  <Suspense v-if="!isPublic">
     <LazySmartsheetExpandedForm
       v-if="expandedFormOnRowIdDlg"
       :key="route.query.rowId"

tests/playwright/pages/Dashboard/index.ts

@@ -10,6 +10,7 @@ import { SettingsPage } from './Settings';
 import { ViewSidebarPage } from './ViewSidebar';
 import { GalleryPage } from './Gallery';
 import { KanbanPage } from './Kanban';
+import { MapPage } from './Map';
 import { ImportAirtablePage } from './Import/Airtable';
 import { ImportTemplatePage } from './Import/ImportTemplate';
 import { WebhookFormPage } from './WebhookForm';
@@ -24,6 +25,7 @@ export class DashboardPage extends BasePage {
   readonly gallery: GalleryPage;
   readonly form: FormPage;
   readonly kanban: KanbanPage;
+  readonly map: MapPage;
   readonly expandedForm: ExpandedFormPage;
   readonly webhookForm: WebhookFormPage;
   readonly childList: ChildList;
@@ -43,6 +45,7 @@ export class DashboardPage extends BasePage {
     this.gallery = new GalleryPage(this);
     this.form = new FormPage(this);
     this.kanban = new KanbanPage(this);
+    this.map = new MapPage(this);
     this.expandedForm = new ExpandedFormPage(this);
     this.webhookForm = new WebhookFormPage(this);
     this.childList = new ChildList(this);