From 038013d47e75550de11414831a0d546d30c72c5d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:09 +0000
Subject: [PATCH 01/40] feat(nc-gui): prefill shared form setup

---
 .../dlg/share-and-collaborate/SharePage.vue   | 98 ++++++++++++++-----
 packages/nc-gui/lang/en.json                  |  9 +-
 packages/nc-gui/lib/enums.ts                  |  7 ++
 3 files changed, 88 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index ebc85cc9ca..dd559457b8 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType, KanbanType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import { useMetas } from '#imports'
+import { useMetas, PreFilledMode } from '#imports'
 
 const { view: _view, $api } = useSmartsheetStoreOrThrow()
 const { $e } = useNuxtApp()
@@ -44,6 +44,10 @@ const activeView = computed<(ViewType & { meta: object & Record<string, any> })
   },
 })
 
+const isPublicShared = computed(() => {
+  return !!activeView.value?.uuid
+})
+
 const url = computed(() => {
   return sharedViewUrl() ?? ''
 })
@@ -145,6 +149,16 @@ const surveyMode = computed({
   },
 })
 
+const preFilledMode = computed({
+  get: () => parseProp(activeView.value?.meta)?.preFilledMode || PreFilledMode.Default,
+  set: (preFilled) => {
+    if (!activeView.value?.meta) return
+
+    activeView.value.meta = { ...activeView.value.meta, preFilledMode: preFilled }
+    savePreFilledMode()
+  },
+})
+
 function sharedViewUrl() {
   if (!activeView.value) return
 
@@ -254,9 +268,10 @@ async function updateSharedView() {
   return true
 }
 
-const isPublicShared = computed(() => {
-  return !!activeView.value?.uuid
-})
+async function savePreFilledMode() {
+  await updateSharedView()
+  $e(`a:view:share:${preFilledMode.value}-prefilled-mode`)
+}
 </script>
 
 <template>
@@ -307,11 +322,7 @@ const isPublicShared = computed(() => {
           <div
             v-if="
               activeView &&
-              (activeView.type === ViewTypes.GRID ||
-                activeView.type === ViewTypes.KANBAN ||
-                activeView.type === ViewTypes.GALLERY ||
-                activeView.type === ViewTypes.MAP ||
-                activeView.type === ViewTypes.CALENDAR)
+              [ViewTypes.GRID, ViewTypes.KANBAN, ViewTypes.GALLERY, ViewTypes.MAP, ViewTypes.CALENDAR].includes(activeView.type)
             "
             class="flex flex-row justify-between"
           >
@@ -325,23 +336,54 @@ const isPublicShared = computed(() => {
             />
           </div>
 
-          <div v-if="activeView?.type === ViewTypes.FORM" class="flex flex-row justify-between">
-            <div class="text-black">{{ $t('activity.surveyMode') }}</div>
-            <a-switch
-              v-model:checked="surveyMode"
-              v-e="['c:share:view:surver-mode:toggle']"
-              data-testid="nc-modal-share-view__surveyMode"
-            >
-            </a-switch>
-          </div>
-          <div v-if="activeView?.type === ViewTypes.FORM && !isEeUI" class="flex flex-row justify-between">
-            <div class="text-black">{{ $t('activity.rtlOrientation') }}</div>
-            <a-switch
-              v-model:checked="withRTL"
-              v-e="['c:share:view:rtl-orientation:toggle']"
-              data-testid="nc-modal-share-view__RTL"
+          <template v-if="activeView?.type === ViewTypes.FORM">
+            <div class="flex flex-row justify-between">
+              <div class="text-black">{{ $t('activity.surveyMode') }}</div>
+              <a-switch
+                v-model:checked="surveyMode"
+                v-e="['c:share:view:surver-mode:toggle']"
+                data-testid="nc-modal-share-view__surveyMode"
+              >
+              </a-switch>
+            </div>
+            <div v-if="!isEeUI" class="flex flex-row justify-between">
+              <div class="text-black">{{ $t('activity.rtlOrientation') }}</div>
+              <a-switch
+                v-model:checked="withRTL"
+                v-e="['c:share:view:rtl-orientation:toggle']"
+                data-testid="nc-modal-share-view__RTL"
+              >
+              </a-switch>
+            </div>
+          </template>
+        </div>
+        <div
+          v-if="activeView?.type === ViewTypes.FORM"
+          class="nc-pre-filled-mode-wrapper flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md"
+        >
+          <div>
+            <div class="text-black">{{ $t('activity.preFilledFields.title') }}</div>
+
+            <a-select
+              v-model:value="preFilledMode"
+              class="nc-pre-filled-mode !rounded-md w-full"
+              dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
             >
-            </a-switch>
+              <template #suffixIcon>
+                <GeneralIcon icon="arrowDown" class="text-gray-700" />
+              </template>
+              <a-select-option v-for="mode of Object.values(PreFilledMode)" :key="mode" :value="mode">
+                <div class="flex gap-2 items-center">
+                  <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
+                  <component
+                    :is="iconMap.check"
+                    v-if="preFilledMode === mode"
+                    id="nc-selected-item-icon"
+                    class="text-primary w-4 h-4"
+                  />
+                </div>
+              </a-select-option>
+            </a-select>
           </div>
         </div>
       </template>
@@ -367,4 +409,10 @@ const isPublicShared = computed(() => {
     line-height: 1rem !important;
   }
 }
+
+.nc-pre-filled-mode-wrapper {
+  .nc-pre-filled-mode.ant-select {
+    @apply !p-0 mt-2;
+  }
+}
 </style>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index f7c5751ed5..710665b281 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -926,7 +926,14 @@
     "startCommenting": "Start commenting!",
     "clearForm": "Clear Form",
     "addFieldFromFormView": "Add Field",
-    "selectAllFields": "Select all fields"
+    "selectAllFields": "Select all fields",
+    "preFilledFields": {
+      "title": "Pre-filled Fields",
+      "default": "Allow pre-filling fields",
+      "disabled": "Disable pre-filling fields",
+      "locked": "Lock pre-filled fields as read-only",
+      "hidden": "Hide pre-filled fields"
+    }
   },
   "tooltip": {
     "reachedSourceLimit": "Limited to only one data source for the moment",
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index d490484794..5001d068c9 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -136,3 +136,10 @@ export enum ImportSource {
   URL = 'url',
   STRING = 'string',
 }
+
+export enum PreFilledMode {
+  Default = 'default',
+  Disabled = 'disabled',
+  Locked = 'locked',
+  Hidden = 'hidden',
+}

From d7729b5de52c9615487e736912c3c5564b900fa0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:09 +0000
Subject: [PATCH 02/40] fix(nc-gui): small changes in share form store

---
 .../nc-gui/composables/useSharedFormViewStore.ts   | 14 +++++++++++---
 packages/nc-gui/lib/types.ts                       |  3 ++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 4be41faebc..f303af99f2 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -30,6 +30,7 @@ import {
   useProvideSmartsheetRowStore,
   useViewsStore,
   watch,
+  PreFilledMode,
 } from '#imports'
 import type { SharedViewMeta } from '#imports'
 
@@ -65,6 +66,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   const { t } = useI18n()
 
+  const route = useRoute()
+
   const formState = ref<Record<string, any>>({})
 
   const { state: additionalState } = useProvideSmartsheetRowStore(
@@ -79,9 +82,14 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const fieldRequired = (fieldName = 'This field') =>
     helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
 
-  const formColumns = computed(() =>
-    columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
-  )
+  const formColumns = computed(() => {
+    const filterdFormColumns = columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt))
+    // if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
+
+    // }
+
+    return filterdFormColumns
+  })
 
   const loadSharedView = async () => {
     passwordError.value = null
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 7109e5e316..cd61b37e47 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -2,7 +2,7 @@ import type { BaseType, ColumnType, FilterType, MetaType, PaginatedType, Roles,
 import type { I18n } from 'vue-i18n'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import type { UploadFile } from 'ant-design-vue'
-import type { ImportSource, ImportType, TabType } from './enums'
+import type { ImportSource, ImportType, PreFilledMode, TabType } from './enums'
 import type { rolePermissions } from './acl'
 
 interface User {
@@ -115,6 +115,7 @@ interface SharedViewMeta extends Record<string, any> {
   theme?: Partial<ThemeConfig>
   allowCSVDownload?: boolean
   rtl?: boolean
+  preFilledMode?: PreFilledMode
 }
 
 interface SharedView {

From 2973185708d0d5f53cbf1de60a1ac2e3f4f7aa5f Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:09 +0000
Subject: [PATCH 03/40] feat(nc-gui): allow prefill shared form setup

---
 .../composables/useSharedFormViewStore.ts     | 70 ++++++++++++++++---
 .../[typeOrId]/form/[viewId]/index/index.vue  |  3 +-
 .../[typeOrId]/form/[viewId]/index/survey.vue |  3 +-
 3 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index f303af99f2..6e7b971125 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -49,8 +49,15 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
-  const columns =
-    ref<(ColumnType & { required?: BoolType; show?: BoolType; label?: StringOrNullType; enable_scanner?: BoolType })[]>()
+  const columns = ref<
+    (ColumnType & {
+      required?: BoolType
+      show?: BoolType
+      label?: StringOrNullType
+      enable_scanner?: BoolType
+      read_only?: boolean
+    })[]
+  >()
   const sharedViewMeta = ref<SharedViewMeta>({})
   const formResetHook = createEventHook<void>()
 
@@ -82,14 +89,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const fieldRequired = (fieldName = 'This field') =>
     helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
 
-  const formColumns = computed(() => {
-    const filterdFormColumns = columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt))
-    // if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
-
-    // }
-
-    return filterdFormColumns
-  })
+  const formColumns = computed(() =>
+    columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
+  )
 
   const loadSharedView = async () => {
     passwordError.value = null
@@ -126,6 +128,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
       await setMeta(viewMeta.model)
 
+      handlePreFillForm()
+
       // if base is not defined then set it with an object containing source
       if (!base.value?.sources)
         baseStore.setProject({
@@ -245,6 +249,52 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     v$.value?.$reset()
   }
 
+  function handlePreFillForm() {
+    // http://localhost:3000/#/nc/form/070dbc84-f3ca-43a3-808a-3547a873933f?Multiselect=a,b
+    if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
+      console.log('router', route.query)
+      columns.value = columns.value?.map((c) => {
+        if ((c.label || c.title) && route.query?.[c.label!] === undefined && route.query?.[c.title!] === undefined) {
+          return c
+        }
+
+        switch (sharedViewMeta.value.preFilledMode) {
+          case PreFilledMode.Hidden: {
+            c.show = false
+          }
+          case PreFilledMode.Locked: {
+            c.read_only = true
+          }
+        }
+        switch (c.uidt) {
+          case UITypes.SingleSelect:
+          case UITypes.MultiSelect: {
+            const allValues = (c.dtxp as string)?.split(',').map((o) => o?.replace(/^['"]|['"]$/g, ''))
+            let options = ((route.query?.[c.label!] || route.query?.[c.title!]) as string)?.split(',').filter((op) => {
+              console.log('options', op, allValues, allValues.includes(op))
+              if (allValues.includes(op)) return true
+            })
+            console.log('c', options, c)
+            if (options.length) {
+              formState.value[c.title!] = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
+            }
+            break
+          }
+          case UITypes.User: {
+            break
+          }
+          default: {
+            formState.value[c.title!] = route.query?.[c.label!] || route.query?.[c.title!]
+          }
+        }
+
+        return c
+      })
+
+      console.log('column', columns.value)
+    }
+  }
+
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal) => {
     if (nextVal && sharedFormView.value?.show_blank_form) {
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index ac9aa25d17..6c929fec4a 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -200,7 +200,8 @@ const onDecode = async (scannedCodeValue: string) => {
                           { 'layout-list': parseProp(field?.meta)?.isList },
                         ]"
                         :column="field"
-                        edit-enabled
+                        :edit-enabled="!field?.read_only"
+                        :read-only="field?.read_only"
                       />
                       <a-button
                         v-if="field.enable_scanner"
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index 0f104e3e9b..1939f39844 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -297,7 +297,8 @@ onMounted(() => {
                 :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
                 :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
-                edit-enabled
+                :edit-enabled="!field?.read_only"
+                :read-only="field?.read_only"
               />
 
               <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">

From 35dd69fa81eda7e09cef7e63819c85b10e48f3c4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:09 +0000
Subject: [PATCH 04/40] fix(nc-gui): use only title for query params in prefill
 form

---
 .../composables/useSharedFormViewStore.ts     | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 6e7b971125..c977d19579 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -7,6 +7,7 @@ import type {
   FormColumnType,
   FormType,
   LinkToAnotherRecordType,
+  SelectOptionsType,
   StringOrNullType,
   TableType,
 } from 'nocodb-sdk'
@@ -254,9 +255,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
       console.log('router', route.query)
       columns.value = columns.value?.map((c) => {
-        if ((c.label || c.title) && route.query?.[c.label!] === undefined && route.query?.[c.title!] === undefined) {
-          return c
-        }
+        if (!c.title || !route.query?.[c.title]) return c
 
         switch (sharedViewMeta.value.preFilledMode) {
           case PreFilledMode.Hidden: {
@@ -269,22 +268,32 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         switch (c.uidt) {
           case UITypes.SingleSelect:
           case UITypes.MultiSelect: {
-            const allValues = (c.dtxp as string)?.split(',').map((o) => o?.replace(/^['"]|['"]$/g, ''))
-            let options = ((route.query?.[c.label!] || route.query?.[c.title!]) as string)?.split(',').filter((op) => {
-              console.log('options', op, allValues, allValues.includes(op))
-              if (allValues.includes(op)) return true
-            })
+            const limitOptions = Array.isArray(parseProp(c.meta).limitOptions)
+              ? parseProp(c.meta).limitOptions.reduce((ac, op) => {
+                  if (op?.id) {
+                    ac[op.id] = op
+                  }
+                  return ac
+                }, {})
+              : {}
+            const queryOptions = (route.query?.[c.title] as string)?.split(',')
+            let options = ((c.colOptions || []) as SelectOptionsType).options
+              .filter((op) => {
+                if (queryOptions.includes(op?.title!) && (limitOptions[op?.id!] ? limitOptions[op?.id!]?.show : true)) return true
+              })
+              .map((op) => op.title)
             console.log('c', options, c)
             if (options.length) {
-              formState.value[c.title!] = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
+              formState.value[c.title] = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
             }
+            console.log('form state', formState.value[c.title])
             break
           }
           case UITypes.User: {
             break
           }
           default: {
-            formState.value[c.title!] = route.query?.[c.label!] || route.query?.[c.title!]
+            formState.value[c.title] = route.query?.[c.title]
           }
         }
 

From 9a57f4fca0aca7db1e2c2797ec72ceeb13bac8c2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:10 +0000
Subject: [PATCH 05/40] feat(nc-gui): prefill user, text & numeric fields

---
 .../dlg/share-and-collaborate/SharePage.vue   |   2 +-
 .../nc-gui/components/smartsheet/Cell.vue     |  10 +-
 .../composables/useSharedFormViewStore.ts     | 103 +++++++++++++-----
 packages/nc-gui/utils/cell.ts                 |  11 ++
 4 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index dd559457b8..8368d6766b 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType, KanbanType, ViewType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import { useMetas, PreFilledMode } from '#imports'
+import { PreFilledMode, useMetas } from '#imports'
 
 const { view: _view, $api } = useSmartsheetStoreOrThrow()
 const { $e } = useNuxtApp()
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 56165395fc..22b8d300af 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -29,6 +29,7 @@ import {
   isJSON,
   isManualSaved,
   isMultiSelect,
+  isNumericFieldType,
   isPercent,
   isPhoneNumber,
   isPrimary,
@@ -142,14 +143,7 @@ const navigate = (dir: NavigateDir, e: KeyboardEvent) => {
 }
 
 const isNumericField = computed(() => {
-  return (
-    isInt(column.value, abstractType.value) ||
-    isFloat(column.value, abstractType.value) ||
-    isDecimal(column.value) ||
-    isCurrency(column.value) ||
-    isPercent(column.value) ||
-    isDuration(column.value)
-  )
+  return isNumericFieldType(column.value, abstractType.value)
 })
 
 // disable contexxtmenu event propagation when cell is in
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index c977d19579..87fea962cf 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -11,15 +11,18 @@ import type {
   StringOrNullType,
   TableType,
 } from 'nocodb-sdk'
-import { ErrorMessages, RelationTypes, UITypes, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'
+import { ErrorMessages, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import { isString } from '@vue/shared'
 import { filterNullOrUndefinedObjectProperties } from '~/helpers/parsers/parserHelpers'
 import {
+  PreFilledMode,
   SharedViewPasswordInj,
   computed,
   createEventHook,
   extractSdkResponseErrorMsg,
+  isNumericFieldType,
   message,
+  parseProp,
   provide,
   ref,
   storeToRefs,
@@ -31,7 +34,6 @@ import {
   useProvideSmartsheetRowStore,
   useViewsStore,
   watch,
-  PreFilledMode,
 } from '#imports'
 import type { SharedViewMeta } from '#imports'
 
@@ -67,9 +69,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const { metas, setMeta } = useMetas()
 
   const baseStore = useBase()
-  const { base } = storeToRefs(baseStore)
+  const { base, sqlUis } = storeToRefs(baseStore)
 
   const basesStore = useBases()
+
   const { basesUser } = storeToRefs(basesStore)
 
   const { t } = useI18n()
@@ -129,8 +132,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
       await setMeta(viewMeta.model)
 
-      handlePreFillForm()
-
       // if base is not defined then set it with an object containing source
       if (!base.value?.sources)
         baseStore.setProject({
@@ -149,6 +150,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       if (viewMeta.users) {
         basesUser.value.set(viewMeta.base_id, viewMeta.users)
       }
+
+      handlePreFillForm()
     } catch (e: any) {
       if (e.response && e.response.status === 404) {
         notFound.value = true
@@ -255,47 +258,87 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
       console.log('router', route.query)
       columns.value = columns.value?.map((c) => {
-        if (!c.title || !route.query?.[c.title]) return c
+        if (!c.title || !route.query?.[c.title] || isSystemColumn(c) || (isVirtualCol(c) && !isLinksOrLTAR(c)) || isAttachment(c))
+          return c
 
         switch (sharedViewMeta.value.preFilledMode) {
           case PreFilledMode.Hidden: {
             c.show = false
+            break
           }
           case PreFilledMode.Locked: {
             c.read_only = true
+            break
           }
         }
+
         switch (c.uidt) {
           case UITypes.SingleSelect:
-          case UITypes.MultiSelect: {
-            const limitOptions = Array.isArray(parseProp(c.meta).limitOptions)
-              ? parseProp(c.meta).limitOptions.reduce((ac, op) => {
-                  if (op?.id) {
-                    ac[op.id] = op
-                  }
-                  return ac
-                }, {})
-              : {}
+          case UITypes.MultiSelect:
+          case UITypes.User: {
+            const limitOptions = (parseProp(c.meta).limitOptions || []).reduce((ac, op) => {
+              if (op?.id) {
+                ac[op.id] = op
+              }
+              return ac
+            }, {})
+
             const queryOptions = (route.query?.[c.title] as string)?.split(',')
-            let options = ((c.colOptions || []) as SelectOptionsType).options
-              .filter((op) => {
-                if (queryOptions.includes(op?.title!) && (limitOptions[op?.id!] ? limitOptions[op?.id!]?.show : true)) return true
-              })
-              .map((op) => op.title)
-            console.log('c', options, c)
-            if (options.length) {
-              formState.value[c.title] = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
+
+            let options: string[] = []
+
+            if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(c.uidt as UITypes)) {
+              options = ((c.colOptions as SelectOptionsType)?.options || [])
+                .filter((op) => {
+                  if (
+                    op?.id &&
+                    op?.title &&
+                    queryOptions.includes(op.title) &&
+                    (limitOptions[op.id] ? limitOptions[op.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
+                  ) {
+                    return true
+                  }
+                  return false
+                })
+                .map((op) => op.title as string)
+
+              if (options.length) {
+                formState.value[c.title] = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
+              }
+            } else {
+              options = (meta.value?.base_id ? basesUser.value.get(meta.value.base_id) || [] : [])
+                .filter((user) => {
+                  if (
+                    user?.id &&
+                    user?.email &&
+                    queryOptions.includes(user.email) &&
+                    (limitOptions[user.id] ? limitOptions[user.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
+                  ) {
+                    return true
+                  }
+                  return false
+                })
+                .map((user) => user.email)
+
+              if (options.length) {
+                formState.value[c.title] = !parseProp(c.meta)?.is_multi ? options[0] : options.join(',')
+              }
             }
-            console.log('form state', formState.value[c.title])
-            break
-          }
-          case UITypes.User: {
             break
           }
           default: {
-            formState.value[c.title] = route.query?.[c.title]
+            if (isNumericFieldType(c, getColAbstractType(c))) {
+              if (!isNaN(parseInt(route.query?.[c.title] as string))) {
+                formState.value[c.title] = parseInt(route.query?.[c.title] as string)
+              }
+            } else {
+              formState.value[c.title] = route.query?.[c.title]
+            }
           }
         }
+        console.log('c', c)
+
+        console.log('form state', formState.value)
 
         return c
       })
@@ -304,6 +347,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     }
   }
 
+  function getColAbstractType(c: ColumnType) {
+    return (c?.source_id ? sqlUis.value[c?.source_id] : Object.values(sqlUis.value)[0]).getAbstractType(c)
+  }
+
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal) => {
     if (nextVal && sharedFormView.value?.show_blank_form) {
diff --git a/packages/nc-gui/utils/cell.ts b/packages/nc-gui/utils/cell.ts
index 4df66dab79..66e73c81a5 100644
--- a/packages/nc-gui/utils/cell.ts
+++ b/packages/nc-gui/utils/cell.ts
@@ -82,3 +82,14 @@ export const renderValue = (result?: any) => {
     return dayjs(d).isValid() ? dayjs(d).format('YYYY-MM-DD HH:mm') : d
   })
 }
+
+export const isNumericFieldType = (column: ColumnType, abstractType: any) => {
+  return (
+    isInt(column, abstractType) ||
+    isFloat(column, abstractType) ||
+    isDecimal(column) ||
+    isCurrency(column) ||
+    isPercent(column) ||
+    isDuration(column)
+  )
+}

From eaeb3b57b70affee99dfeea0b886042ebdd95cfd Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:10 +0000
Subject: [PATCH 06/40] feat(nc-gui): add prefill support for rating, url,
 checkbox, year, data & dateTime fields

---
 .../composables/useSharedFormViewStore.ts     | 225 ++++++++++++------
 1 file changed, 156 insertions(+), 69 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 87fea962cf..cd23ad7e06 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -1,5 +1,6 @@
 import useVuelidate from '@vuelidate/core'
 import { helpers, minLength, required } from '@vuelidate/validators'
+import dayjs from 'dayjs'
 import type { Ref } from 'vue'
 import type {
   BoolType,
@@ -11,7 +12,16 @@ import type {
   StringOrNullType,
   TableType,
 } from 'nocodb-sdk'
-import { ErrorMessages, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import {
+  ErrorMessages,
+  RelationTypes,
+  UITypes,
+  getDateFormat,
+  getDateTimeFormat,
+  isLinksOrLTAR,
+  isSystemColumn,
+  isVirtualCol,
+} from 'nocodb-sdk'
 import { isString } from '@vue/shared'
 import { filterNullOrUndefinedObjectProperties } from '~/helpers/parsers/parserHelpers'
 import {
@@ -258,9 +268,17 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
       console.log('router', route.query)
       columns.value = columns.value?.map((c) => {
-        if (!c.title || !route.query?.[c.title] || isSystemColumn(c) || (isVirtualCol(c) && !isLinksOrLTAR(c)) || isAttachment(c))
+        if (
+          !c.title ||
+          !route.query?.[c.title] ||
+          isSystemColumn(c) ||
+          (isVirtualCol(c) && !isLinksOrLTAR(c)) ||
+          isAttachment(c)
+        ) {
           return c
+        }
 
+        // Update column
         switch (sharedViewMeta.value.preFilledMode) {
           case PreFilledMode.Hidden: {
             c.show = false
@@ -272,77 +290,15 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
           }
         }
 
-        switch (c.uidt) {
-          case UITypes.SingleSelect:
-          case UITypes.MultiSelect:
-          case UITypes.User: {
-            const limitOptions = (parseProp(c.meta).limitOptions || []).reduce((ac, op) => {
-              if (op?.id) {
-                ac[op.id] = op
-              }
-              return ac
-            }, {})
-
-            const queryOptions = (route.query?.[c.title] as string)?.split(',')
-
-            let options: string[] = []
-
-            if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(c.uidt as UITypes)) {
-              options = ((c.colOptions as SelectOptionsType)?.options || [])
-                .filter((op) => {
-                  if (
-                    op?.id &&
-                    op?.title &&
-                    queryOptions.includes(op.title) &&
-                    (limitOptions[op.id] ? limitOptions[op.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
-                  ) {
-                    return true
-                  }
-                  return false
-                })
-                .map((op) => op.title as string)
-
-              if (options.length) {
-                formState.value[c.title] = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
-              }
-            } else {
-              options = (meta.value?.base_id ? basesUser.value.get(meta.value.base_id) || [] : [])
-                .filter((user) => {
-                  if (
-                    user?.id &&
-                    user?.email &&
-                    queryOptions.includes(user.email) &&
-                    (limitOptions[user.id] ? limitOptions[user.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
-                  ) {
-                    return true
-                  }
-                  return false
-                })
-                .map((user) => user.email)
-
-              if (options.length) {
-                formState.value[c.title] = !parseProp(c.meta)?.is_multi ? options[0] : options.join(',')
-              }
-            }
-            break
-          }
-          default: {
-            if (isNumericFieldType(c, getColAbstractType(c))) {
-              if (!isNaN(parseInt(route.query?.[c.title] as string))) {
-                formState.value[c.title] = parseInt(route.query?.[c.title] as string)
-              }
-            } else {
-              formState.value[c.title] = route.query?.[c.title]
-            }
-          }
+        // Prefill form state
+        const preFillValue = getPreFillValue(c, (route.query?.[c.title] as string).trim())
+        if (preFillValue !== undefined) {
+          formState.value[c.title] = preFillValue
         }
-        console.log('c', c)
-
-        console.log('form state', formState.value)
 
         return c
       })
-
+      console.log('form state', formState.value)
       console.log('column', columns.value)
     }
   }
@@ -351,6 +307,137 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     return (c?.source_id ? sqlUis.value[c?.source_id] : Object.values(sqlUis.value)[0]).getAbstractType(c)
   }
 
+  function getPreFillValue(c: ColumnType, value: string) {
+    let preFillValue: any = ''
+    switch (c.uidt) {
+      case UITypes.SingleSelect:
+      case UITypes.MultiSelect:
+      case UITypes.User: {
+        const limitOptions = (parseProp(c.meta).limitOptions || []).reduce((ac, op) => {
+          if (op?.id) {
+            ac[op.id] = op
+          }
+          return ac
+        }, {})
+
+        const queryOptions = value.split(',')
+
+        let options: string[] = []
+
+        if ([UITypes.SingleSelect, UITypes.MultiSelect].includes(c.uidt as UITypes)) {
+          options = ((c.colOptions as SelectOptionsType)?.options || [])
+            .filter((op) => {
+              if (
+                op?.id &&
+                op?.title &&
+                queryOptions.includes(op.title) &&
+                (limitOptions[op.id] ? limitOptions[op.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
+              ) {
+                return true
+              }
+              return false
+            })
+            .map((op) => op.title as string)
+
+          if (options.length) {
+            preFillValue = c.uidt === UITypes.SingleSelect ? options[0] : options.join(',')
+          }
+        } else {
+          options = (meta.value?.base_id ? basesUser.value.get(meta.value.base_id) || [] : [])
+            .filter((user) => {
+              if (
+                user?.id &&
+                user?.email &&
+                queryOptions.includes(user.email) &&
+                (limitOptions[user.id] ? limitOptions[user.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
+              ) {
+                return true
+              }
+              return false
+            })
+            .map((user) => user.email)
+
+          if (options.length) {
+            preFillValue = !parseProp(c.meta)?.is_multi ? options[0] : options.join(',')
+          }
+        }
+        break
+      }
+      case UITypes.Checkbox: {
+        if (['true', '1'].includes(value.toLowerCase())) {
+          preFillValue = true
+        } else if (['false', '0'].includes(value.toLowerCase())) {
+          preFillValue = false
+        }
+        break
+      }
+      case UITypes.Rating: {
+        if (!isNaN(Number(value))) {
+          preFillValue = Number(value) > parseProp(c.meta).max ? parseProp(c.meta).max : Number(preFillValue)
+        }
+        break
+      }
+      case UITypes.URL: {
+        if (parseProp(c.meta).validate) {
+          if (isValidURL(value)) {
+            preFillValue = value
+          }
+        } else {
+          preFillValue = value
+        }
+        break
+      }
+      case UITypes.Year: {
+        if (/^\d+$/.test(preFillValue)) {
+          preFillValue = Number(value)
+        }
+        break
+      }
+      case UITypes.Date:
+      case UITypes.DateTime: {
+        let parsedDateOrDateTime = dayjs(value, getDateTimeFormat(value))
+
+        if (!parsedDateOrDateTime.isValid()) {
+          parsedDateOrDateTime = dayjs(value, getDateFormat(value))
+        }
+
+        if (parsedDateOrDateTime.isValid()) {
+          preFillValue =
+            c.uidt === UITypes.Date
+              ? parsedDateOrDateTime.format('YYYY-MM-DD')
+              : parsedDateOrDateTime.utc().format('YYYY-MM-DD HH:mm:ssZ')
+        }
+        break
+      }
+      case UITypes.Time: {
+        let parsedTime = dayjs(value)
+
+        if (!parsedTime.isValid()) {
+          parsedTime = dayjs(value, 'HH:mm:ss')
+        }
+        if (!parsedTime.isValid()) {
+          parsedTime = dayjs(`1999-01-01 ${value}`)
+        }
+        if (parsedTime.isValid()) {
+          preFillValue = parsedTime.format(baseStore.isMysql(c.source_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ')
+        }
+      }
+      case UITypes.LinkToAnotherRecord: {
+        break
+      }
+      default: {
+        if (isNumericFieldType(c, getColAbstractType(c))) {
+          if (!isNaN(Number(value))) {
+            preFillValue = Number(value)
+          }
+        } else {
+          preFillValue = value
+        }
+      }
+    }
+    return preFillValue
+  }
+
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal) => {
     if (nextVal && sharedFormView.value?.show_blank_form) {

From b9bfbeab571285f69bf84bf1d877e40ddef3bf29 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:10 +0000
Subject: [PATCH 07/40] fix(nc-gui): hide system columns in shared form

---
 .../composables/useSharedFormViewStore.ts     | 30 ++++++++++++++++---
 packages/nc-gui/composables/useViewData.ts    |  2 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index cd23ad7e06..3acda5c249 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -104,7 +104,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
 
   const formColumns = computed(() =>
-    columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
+    columns.value?.filter((c) => c.show).filter((col) => !isSystemColumn(col) && (!isVirtualCol(col) || isLinksOrLTAR(col.uidt))),
   )
 
   const loadSharedView = async () => {
@@ -313,7 +313,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       case UITypes.SingleSelect:
       case UITypes.MultiSelect:
       case UITypes.User: {
-        const limitOptions = (parseProp(c.meta).limitOptions || []).reduce((ac, op) => {
+        const limitOptions = (parseProp(c.meta).isLimitOption ? parseProp(c.meta).limitOptions || [] : []).reduce((ac, op) => {
           if (op?.id) {
             ac[op.id] = op
           }
@@ -331,7 +331,11 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
                 op?.id &&
                 op?.title &&
                 queryOptions.includes(op.title) &&
-                (limitOptions[op.id] ? limitOptions[op.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
+                (limitOptions[op.id]
+                  ? limitOptions[op.id]?.show
+                  : parseProp(c.meta).isLimitOption
+                  ? !(parseProp(c.meta).limitOptions || []).length
+                  : true)
               ) {
                 return true
               }
@@ -349,7 +353,11 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
                 user?.id &&
                 user?.email &&
                 queryOptions.includes(user.email) &&
-                (limitOptions[user.id] ? limitOptions[user.id]?.show : !(parseProp(c.meta).limitOptions || []).length)
+                (limitOptions[user.id]
+                  ? limitOptions[user.id]?.show
+                  : parseProp(c.meta).isLimitOption
+                  ? !(parseProp(c.meta).limitOptions || []).length
+                  : true)
               ) {
                 return true
               }
@@ -421,8 +429,22 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         if (parsedTime.isValid()) {
           preFillValue = parsedTime.format(baseStore.isMysql(c.source_id) ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ')
         }
+        break
       }
       case UITypes.LinkToAnotherRecord: {
+        if (isBt(c)) {
+          const queryOptions = value.split(',')
+
+          // console.log('column bt', queryOptions, c)
+        }
+        break
+      }
+      case UITypes.Links: {
+        if (isMm(c)) {
+          const queryOptions = value.split(',')
+
+          // console.log('column mm', queryOptions, c)
+        }
         break
       }
       default: {
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 853f28a53e..8ce1235199 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -297,7 +297,7 @@ export function useViewData(
           fk_column_id: c.id,
           fk_view_id: viewMeta.value?.id,
           ...(fieldById[c.id!] ? fieldById[c.id!] : {}),
-          meta: { ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta) }, // TODO: discuss with @pranav
+          meta: { ...parseProp(fieldById[c.id!]?.meta), ...parseProp(c.meta) },
           order: (fieldById[c.id!] && fieldById[c.id!].order) || order++,
           id: fieldById[c.id!] && fieldById[c.id!].id,
         }))

From f3b46bd72a6f214b72486777d4c49b5acdea3613 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:10 +0000
Subject: [PATCH 08/40] fix(nc-gui): grayed out shared form field if prefilled
 fields are locked

---
 .../nc-gui/components/cell/MultiSelect.vue    |  2 +-
 .../nc-gui/components/cell/SingleSelect.vue   |  2 +-
 packages/nc-gui/components/cell/User.vue      |  1 +
 .../dlg/share-and-collaborate/SharePage.vue   |  2 +-
 .../composables/useSharedFormViewStore.ts     | 29 +++-----
 packages/nc-gui/lang/en.json                  |  3 +-
 .../index/[typeOrId]/form/[viewId]/index.vue  | 10 +--
 .../[typeOrId]/form/[viewId]/index/index.vue  | 71 ++++++++++---------
 .../[typeOrId]/form/[viewId]/index/survey.vue | 67 +++++++++--------
 9 files changed, 94 insertions(+), 93 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 5c5a205f2a..333a35c01f 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -394,7 +394,7 @@ const onFocus = () => {
     @click="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
-      <a-checkbox-group v-model:value="vModel" class="nc-field-layout-list">
+      <a-checkbox-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list">
         <a-checkbox
           v-for="op of options"
           :key="op.title"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 57ccd9ee38..3d7d6ee3e4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -315,7 +315,7 @@ const onFocus = () => {
     @keydown.enter.stop.prevent="toggleMenu"
   >
     <div v-if="!isEditColumn && isForm && parseProp(column.meta)?.isList" class="w-full max-w-full">
-      <a-radio-group v-model:value="vModel" class="nc-field-layout-list">
+      <a-radio-group v-model:value="vModel" :disabled="readOnly || !editAllowed" class="nc-field-layout-list">
         <a-radio
           v-for="op of options"
           :key="op.title"
diff --git a/packages/nc-gui/components/cell/User.vue b/packages/nc-gui/components/cell/User.vue
index 3331110136..ec04f34400 100644
--- a/packages/nc-gui/components/cell/User.vue
+++ b/packages/nc-gui/components/cell/User.vue
@@ -323,6 +323,7 @@ const filterOption = (input: string, option: any) => {
       <component
         :is="isMultiple ? CheckboxGroup : RadioGroup"
         v-model:value="vModelListLayout"
+        :disabled="readOnly || !editAllowed"
         class="nc-field-layout-list"
         @update:value="
           (value) => {
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 8368d6766b..c28ef0ae84 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -191,7 +191,7 @@ function sharedViewUrl() {
     dashboardUrl1 = `${baseUrl}${appInfo.value?.dashboardPath}`
   }
 
-  return encodeURI(`${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}`)
+  return encodeURI(`${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}`)
 }
 
 const toggleViewShare = async () => {
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 3acda5c249..b37d6ac59a 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -264,15 +264,14 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   }
 
   function handlePreFillForm() {
-    // http://localhost:3000/#/nc/form/070dbc84-f3ca-43a3-808a-3547a873933f?Multiselect=a,b
     if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
-      console.log('router', route.query)
       columns.value = columns.value?.map((c) => {
         if (
           !c.title ||
           !route.query?.[c.title] ||
           isSystemColumn(c) ||
-          (isVirtualCol(c) && !isLinksOrLTAR(c)) ||
+          isVirtualCol(c) ||
+          // (isVirtualCol(c) && !isLinksOrLTAR(c)) || // Todo: Enable this after linksOrLTAR prefill supported
           isAttachment(c)
         ) {
           return c
@@ -298,8 +297,6 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
         return c
       })
-      console.log('form state', formState.value)
-      console.log('column', columns.value)
     }
   }
 
@@ -308,7 +305,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   }
 
   function getPreFillValue(c: ColumnType, value: string) {
-    let preFillValue: any = ''
+    let preFillValue: any
     switch (c.uidt) {
       case UITypes.SingleSelect:
       case UITypes.MultiSelect:
@@ -381,7 +378,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
       case UITypes.Rating: {
         if (!isNaN(Number(value))) {
-          preFillValue = Number(value) > parseProp(c.meta).max ? parseProp(c.meta).max : Number(preFillValue)
+          preFillValue = Number(value) > parseProp(c.meta).max ? parseProp(c.meta).max : Number(value)
         }
         break
       }
@@ -396,7 +393,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         break
       }
       case UITypes.Year: {
-        if (/^\d+$/.test(preFillValue)) {
+        if (/^\d+$/.test(value)) {
           preFillValue = Number(value)
         }
         break
@@ -431,22 +428,12 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         }
         break
       }
-      case UITypes.LinkToAnotherRecord: {
-        if (isBt(c)) {
-          const queryOptions = value.split(',')
-
-          // console.log('column bt', queryOptions, c)
-        }
-        break
-      }
+      case UITypes.LinkToAnotherRecord:
       case UITypes.Links: {
-        if (isMm(c)) {
-          const queryOptions = value.split(',')
-
-          // console.log('column mm', queryOptions, c)
-        }
+        // Todo: create an api which will fetch query params records and then autofill records
         break
       }
+
       default: {
         if (isNumericFieldType(c, getColAbstractType(c))) {
           if (!isNaN(Number(value))) {
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 710665b281..92d2dbe81d 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -932,7 +932,8 @@
       "default": "Allow pre-filling fields",
       "disabled": "Disable pre-filling fields",
       "locked": "Lock pre-filled fields as read-only",
-      "hidden": "Hide pre-filled fields"
+      "hidden": "Hide pre-filled fields",
+      "lockedFieldTooltip": "Pre-filled value"
     }
   },
   "tooltip": {
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index fb2e45ff2c..79b671de02 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -87,6 +87,10 @@ p {
         &:not(.layout-list) {
           @apply rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500 overflow-hidden;
 
+          &.readonly {
+            @apply bg-gray-50 cursor-not-allowed;
+          }
+
           & > div {
             @apply !bg-transparent;
           }
@@ -110,7 +114,7 @@ p {
         input,
         textarea,
         &.nc-virtual-cell {
-          @apply bg-white dark:(bg-slate-500 text-white);
+          @apply bg-white dark:(bg-slate-500 text-white) disabled:bg-transparent;
 
           .ant-btn {
             @apply dark:(bg-slate-300);
@@ -120,9 +124,7 @@ p {
             @apply dark:(bg-slate-700 text-white);
           }
         }
-        &:not(.layout-list) > div {
-          @apply bg-white dark:(bg-slate-500 text-white);
-        }
+
         &.layout-list > div {
           .ant-btn {
             @apply dark:(bg-slate-300);
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 6c929fec4a..6658252457 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -180,40 +180,45 @@ const onDecode = async (scannedCodeValue: string) => {
                   </div>
 
                   <div>
-                    <LazySmartsheetDivDataCell class="flex relative">
-                      <LazySmartsheetVirtualCell
-                        v-if="isVirtualCol(field)"
-                        :model-value="null"
-                        class="mt-0 nc-input nc-cell"
-                        :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                        :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
-                        :column="field"
-                      />
+                    <NcTooltip :disabled="!field?.read_only">
+                      <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
 
-                      <LazySmartsheetCell
-                        v-else
-                        v-model="formState[field.title]"
-                        class="nc-input truncate"
-                        :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                        :class="[
-                          `nc-form-input-${field.title?.replaceAll(' ', '')}`,
-                          { 'layout-list': parseProp(field?.meta)?.isList },
-                        ]"
-                        :column="field"
-                        :edit-enabled="!field?.read_only"
-                        :read-only="field?.read_only"
-                      />
-                      <a-button
-                        v-if="field.enable_scanner"
-                        class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
-                        :alt="$t('activity.fillByCodeScan')"
-                        @click="showCodeScannerForFieldTitle(field.title)"
-                      >
-                        <div class="flex items-center gap-1">
-                          <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
-                        </div>
-                      </a-button>
-                    </LazySmartsheetDivDataCell>
+                      <LazySmartsheetDivDataCell class="flex relative">
+                        <LazySmartsheetVirtualCell
+                          v-if="isVirtualCol(field)"
+                          :model-value="null"
+                          class="mt-0 nc-input nc-cell"
+                          :data-testid="`nc-form-input-cell-${field.label || field.title}`"
+                          :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                          :column="field"
+                          :read-only="field?.read_only"
+                        />
+
+                        <LazySmartsheetCell
+                          v-else
+                          v-model="formState[field.title]"
+                          class="nc-input truncate"
+                          :data-testid="`nc-form-input-cell-${field.label || field.title}`"
+                          :class="[
+                            `nc-form-input-${field.title?.replaceAll(' ', '')}`,
+                            { 'layout-list': parseProp(field?.meta)?.isList },
+                          ]"
+                          :column="field"
+                          :edit-enabled="!field?.read_only"
+                          :read-only="field?.read_only"
+                        />
+                        <a-button
+                          v-if="field.enable_scanner"
+                          class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
+                          :alt="$t('activity.fillByCodeScan')"
+                          @click="showCodeScannerForFieldTitle(field.title)"
+                        >
+                          <div class="flex items-center gap-1">
+                            <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
+                          </div>
+                        </a-button>
+                      </LazySmartsheetDivDataCell>
+                    </NcTooltip>
 
                     <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-sm mt-2">
                       <template v-if="isVirtualCol(field)">
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index 1939f39844..bac5a0c11b 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -280,38 +280,43 @@ onMounted(() => {
               <LazyCellRichText :value="field?.description" class="!h-auto -ml-1" is-form-field read-only sync-value-change />
             </div>
 
-            <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
-              <LazySmartsheetVirtualCell
-                v-if="isVirtualCol(field)"
-                v-model="formState[field.title]"
-                class="mt-0 nc-input h-auto"
-                :row="{ row: {}, oldRow: {}, rowMeta: {} }"
-                :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
-                :column="field"
-              />
-
-              <LazySmartsheetCell
-                v-else
-                v-model="formState[field.title]"
-                class="nc-input h-auto"
-                :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
-                :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
-                :column="field"
-                :edit-enabled="!field?.read_only"
-                :read-only="field?.read_only"
-              />
-
-              <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                  {{ error.$message }}
+            <NcTooltip :disabled="!field?.read_only">
+              <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
+
+              <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
+                <LazySmartsheetVirtualCell
+                  v-if="isVirtualCol(field)"
+                  v-model="formState[field.title]"
+                  class="mt-0 nc-input h-auto"
+                  :row="{ row: {}, oldRow: {}, rowMeta: {} }"
+                  :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
+                  :column="field"
+                  :read-only="field?.read_only"
+                />
+
+                <LazySmartsheetCell
+                  v-else
+                  v-model="formState[field.title]"
+                  class="nc-input h-auto"
+                  :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
+                  :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
+                  :column="field"
+                  :edit-enabled="!field?.read_only"
+                  :read-only="field?.read_only"
+                />
+
+                <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                  <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                    {{ error.$message }}
+                  </div>
+
+                  <div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center">
+                    {{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }}
+                    <MaterialSymbolsKeyboardReturn class="mx-1 text-primary" /> {{ $t('msg.makeLineBreak') }}
+                  </div>
                 </div>
-
-                <div v-if="field.uidt === UITypes.LongText" class="text-sm text-gray-500 flex flex-wrap items-center">
-                  {{ $t('general.shift') }} <MdiAppleKeyboardShift class="mx-1 text-primary" /> + {{ $t('general.enter') }}
-                  <MaterialSymbolsKeyboardReturn class="mx-1 text-primary" /> {{ $t('msg.makeLineBreak') }}
-                </div>
-              </div>
-            </LazySmartsheetDivDataCell>
+              </LazySmartsheetDivDataCell>
+            </NcTooltip>
           </div>
 
           <div class="ml-1 mt-4 flex w-full text-lg">

From 88cbb34cb1cac2e09abe385076d2f489ff46773e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:11 +0000
Subject: [PATCH 09/40] fix(nc-gui): allow user email or id in prefilled form

---
 .../nc-gui/components/smartsheet/Form.vue     | 65 +++++++++++++++----
 .../composables/useSharedFormViewStore.ts     |  2 +-
 packages/nc-gui/lang/en.json                  |  3 +-
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 9dbb379ce3..e7aa20daf9 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -214,12 +214,26 @@ async function submitForm() {
   submitted.value = true
 }
 
+async function getPreFilledLink() {
+  if (isLocked.value || !isUIAllowed('dataInsert')) return
+
+  const preFilledData = { ...formState, ...state.value }
+
+  console.log('preFilled Data', preFilledData)
+
+  for (const c of visibleColumns.value) {
+    if (c.title && preFilledData[c.title] && preFilledData[c.title].trim()) {
+      
+    }
+  }
+}
+
 async function clearForm() {
   if (isLocked.value || !isUIAllowed('dataInsert')) return
 
   formState = reactive<Record<string, any>>({})
   state.value = {}
-  await formRef.value.clearValidate()
+  await formRef.value?.clearValidate()
   reloadEventHook.trigger()
 }
 
@@ -566,6 +580,7 @@ watch(submitted, (v) => {
     const intvl = setInterval(() => {
       if (--secondsRemain.value < 0) {
         submitted.value = false
+        clearForm()
         clearInterval(intvl)
       }
     }, 1000)
@@ -736,7 +751,16 @@ useEventListener(
                   </div>
 
                   <div v-if="formViewData.submit_another_form || !isPublic" class="text-right mt-4">
-                    <NcButton type="primary" size="medium" @click="submitted = false">
+                    <NcButton
+                      type="primary"
+                      size="medium"
+                      @click="
+                        () => {
+                          submitted = false
+                          clearForm()
+                        }
+                      "
+                    >
                       {{ $t('activity.submitAnotherForm') }}
                     </NcButton>
                   </div>
@@ -1289,18 +1313,31 @@ useEventListener(
                     >
                       {{ $t('activity.clearForm') }}
                     </NcButton>
-                    <NcButton
-                      html-type="submit"
-                      type="primary"
-                      size="small"
-                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                      class="nc-form-submit nc-form-focus-element"
-                      data-testid="nc-form-submit"
-                      data-title="nc-form-submit"
-                      @click="submitForm"
-                    >
-                      {{ $t('general.submit') }}
-                    </NcButton>
+                    <div class="flex items-center gap-3">
+                      <NcButton
+                        type="primary"
+                        size="small"
+                        :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length || isLocked"
+                        class="nc-form-get-pre-filled-link nc-form-focus-element"
+                        data-testid="nc-form-get-pre-filled-link"
+                        data-title="nc-form-get-pre-filled-link"
+                        @click="getPreFilledLink"
+                      >
+                        {{ $t('activity.getPreFilledLink') }}
+                      </NcButton>
+                      <NcButton
+                        html-type="submit"
+                        type="primary"
+                        size="small"
+                        :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                        class="nc-form-submit nc-form-focus-element"
+                        data-testid="nc-form-submit"
+                        data-title="nc-form-submit"
+                        @click="submitForm"
+                      >
+                        {{ $t('general.submit') }}
+                      </NcButton>
+                    </div>
                   </div>
                 </a-form>
 
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index b37d6ac59a..072df3b768 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -349,7 +349,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
               if (
                 user?.id &&
                 user?.email &&
-                queryOptions.includes(user.email) &&
+                (queryOptions.includes(user.email) || queryOptions.includes(user.id)) &&
                 (limitOptions[user.id]
                   ? limitOptions[user.id]?.show
                   : parseProp(c.meta).isLimitOption
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 92d2dbe81d..0d6151e040 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -934,7 +934,8 @@
       "locked": "Lock pre-filled fields as read-only",
       "hidden": "Hide pre-filled fields",
       "lockedFieldTooltip": "Pre-filled value"
-    }
+    },
+    "getPreFilledLink": "Get Pre-filled Link"
   },
   "tooltip": {
     "reachedSourceLimit": "Limited to only one data source for the moment",

From a798b55eabb12dfbc490edf64a8bb85672a9fb50 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:11 +0000
Subject: [PATCH 10/40] fix(nc-gui): allow prefill date, datetime, time only in
 iso format

---
 .../composables/useSharedFormViewStore.ts     | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 072df3b768..c9e6e8ac08 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -277,22 +277,22 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
           return c
         }
 
-        // Update column
-        switch (sharedViewMeta.value.preFilledMode) {
-          case PreFilledMode.Hidden: {
-            c.show = false
-            break
-          }
-          case PreFilledMode.Locked: {
-            c.read_only = true
-            break
-          }
-        }
-
-        // Prefill form state
         const preFillValue = getPreFillValue(c, (route.query?.[c.title] as string).trim())
         if (preFillValue !== undefined) {
+          // Prefill form state
           formState.value[c.title] = preFillValue
+
+          // Update column
+          switch (sharedViewMeta.value.preFilledMode) {
+            case PreFilledMode.Hidden: {
+              c.show = false
+              break
+            }
+            case PreFilledMode.Locked: {
+              c.read_only = true
+              break
+            }
+          }
         }
 
         return c
@@ -398,19 +398,22 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         }
         break
       }
-      case UITypes.Date:
-      case UITypes.DateTime: {
-        let parsedDateOrDateTime = dayjs(value, getDateTimeFormat(value))
-
-        if (!parsedDateOrDateTime.isValid()) {
-          parsedDateOrDateTime = dayjs(value, getDateFormat(value))
+      case UITypes.Date: {
+        const parsedDate = dayjs(value, 'YYYY-MM-DD')
+        if (parsedDate.isValid()) {
+          preFillValue = parsedDate.format('YYYY-MM-DD')
         }
+        break
+      }
+      case UITypes.DateTime: {
+        let parsedDateTime = dayjs(value, 'YYYY-MM-DD HH:mm:ss')
 
-        if (parsedDateOrDateTime.isValid()) {
-          preFillValue =
-            c.uidt === UITypes.Date
-              ? parsedDateOrDateTime.format('YYYY-MM-DD')
-              : parsedDateOrDateTime.utc().format('YYYY-MM-DD HH:mm:ssZ')
+        if (parsedDateTime.isValid()) {
+          preFillValue = parsedDateTime.utc().format('YYYY-MM-DD HH:mm:ssZ')
+        } else if (dayjs(value).toISOString() === value) {
+          if (parsedDateTime.isValid() && parsedDateTime.toISOString() === value) {
+            preFillValue = dayjs(value).format('YYYY-MM-DD HH:mm:ssZ')
+          }
         }
         break
       }

From 497d049374e973face6fdc11d38e9cf1937f11c9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:11 +0000
Subject: [PATCH 11/40] feat(nc-gui): get prefill link option

---
 .../nc-gui/components/smartsheet/Form.vue     | 39 +++++++++++++++----
 .../index/[typeOrId]/form/[viewId]/index.vue  | 15 ++++++-
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index e7aa20daf9..7f0949135a 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -70,9 +70,13 @@ const enum NcForm {
   subheading = 'nc-form-sub-heading',
 }
 
-const { isMobileMode, user } = useGlobal()
+const { isMobileMode, user, getBaseUrl, appInfo } = useGlobal()
 
-const formRef = ref()
+const { dashboardUrl } = useDashboard()
+
+const workspaceStore = useWorkspace()
+
+const { copy } = useCopy()
 
 const { $api, $e } = useNuxtApp()
 
@@ -82,6 +86,8 @@ const { base } = storeToRefs(useBase())
 
 const { getPossibleAttachmentSrc } = useAttachment()
 
+const formRef = ref()
+
 let formState = reactive<Record<string, any>>({})
 
 const secondsRemain = ref(0)
@@ -215,17 +221,36 @@ async function submitForm() {
 }
 
 async function getPreFilledLink() {
-  if (isLocked.value || !isUIAllowed('dataInsert')) return
+  if (isLocked.value || !isUIAllowed('dataInsert') || !view.value?.uuid) return
 
   const preFilledData = { ...formState, ...state.value }
 
-  console.log('preFilled Data', preFilledData)
+  const searchParams = new URLSearchParams()
 
   for (const c of visibleColumns.value) {
-    if (c.title && preFilledData[c.title] && preFilledData[c.title].trim()) {
-      
+    if (c.title && preFilledData[c.title] && !isVirtualCol(c)) {
+      searchParams.append(c.title, preFilledData[c.title])
     }
   }
+
+  // get base url for workspace
+  const baseUrl = getBaseUrl(workspaceStore.activeWorkspaceId)
+
+  let dashboardUrl1 = dashboardUrl.value
+
+  if (baseUrl) {
+    dashboardUrl1 = `${baseUrl}${appInfo.value?.dashboardPath}`
+  }
+
+  copy(
+    encodeURI(
+      `${dashboardUrl1}#/nc/form/${view.value?.uuid}${parseProp(view.value?.meta).surveyMode ? '/survey' : ''}${
+        searchParams.toString() ? `?${searchParams.toString()}` : ''
+      }`,
+    ),
+  )
+
+  message.info(t('msg.info.copiedToClipboard'))
 }
 
 async function clearForm() {
@@ -1317,7 +1342,7 @@ useEventListener(
                       <NcButton
                         type="primary"
                         size="small"
-                        :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length || isLocked"
+                        :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length || isLocked || !view?.uuid"
                         class="nc-form-get-pre-filled-link nc-form-focus-element"
                         data-testid="nc-form-get-pre-filled-link"
                         data-title="nc-form-get-pre-filled-link"
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index 79b671de02..6e889598d0 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -89,6 +89,11 @@ p {
 
           &.readonly {
             @apply bg-gray-50 cursor-not-allowed;
+
+            input,
+            textarea {
+              @apply !bg-transparent;
+            }
           }
 
           & > div {
@@ -111,11 +116,17 @@ p {
           }
         }
 
+        &:not(.readonly) {
+          input,
+          textarea,
+          &.nc-virtual-cell {
+            @apply bg-white !disabled:bg-transparent;
+          }
+        }
+
         input,
         textarea,
         &.nc-virtual-cell {
-          @apply bg-white dark:(bg-slate-500 text-white) disabled:bg-transparent;
-
           .ant-btn {
             @apply dark:(bg-slate-300);
           }

From dc31d4db28f396ef09d9dab0f49c54bfb946883e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:11 +0000
Subject: [PATCH 12/40] fix(nc-gui): prefill iso date format issue

---
 .../nc-gui/components/general/ColorPicker.vue |  6 +----
 .../nc-gui/components/smartsheet/Form.vue     |  7 ------
 .../composables/useSharedFormViewStore.ts     | 22 +++++++++----------
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index dffd7c9bc5..c3e748a653 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -104,15 +104,11 @@ watch(picked, (n, _o) => {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
 }
-.color-selector:not(.new-design):hover {
+.color-selector:hover {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
 }
 
-.color-selector.new-design:hover {
-  box-shadow: 0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe;
-}
-
 .color-selector.selected:not(.new-design) {
   filter: brightness(90%);
   -webkit-filter: brightness(90%);
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 7f0949135a..107e3ba98e 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -360,13 +360,6 @@ async function showOrHideColumn(column: Record<string, any>, show: boolean, isSi
     await $api.dbView.formColumnUpdate(column.id, column)
 
     fields.value[fieldIndex] = column as any
-    // await saveOrUpdate(
-    //   {
-    //     ...column,
-    //     show,
-    //   },
-    //   fieldIndex,
-    // )
 
     reloadEventHook.trigger()
 
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index c9e6e8ac08..95b83c5ceb 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -276,8 +276,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         ) {
           return c
         }
-
-        const preFillValue = getPreFillValue(c, (route.query?.[c.title] as string).trim())
+        const preFillValue = getPreFillValue(c, decodeURIComponent(route.query?.[c.title] as string).trim())
         if (preFillValue !== undefined) {
           // Prefill form state
           formState.value[c.title] = preFillValue
@@ -399,21 +398,20 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         break
       }
       case UITypes.Date: {
-        const parsedDate = dayjs(value, 'YYYY-MM-DD')
-        if (parsedDate.isValid()) {
-          preFillValue = parsedDate.format('YYYY-MM-DD')
+        const parsedDate = dayjs(value)
+        if ((parsedDate.isValid() && parsedDate.toISOString() === value) || dayjs(value, 'YYYY-MM-DD').isValid()) {
+          preFillValue = dayjs(value).format('YYYY-MM-DD')
         }
         break
       }
       case UITypes.DateTime: {
-        let parsedDateTime = dayjs(value, 'YYYY-MM-DD HH:mm:ss')
+        const parsedDateTime = dayjs(value)
 
-        if (parsedDateTime.isValid()) {
-          preFillValue = parsedDateTime.utc().format('YYYY-MM-DD HH:mm:ssZ')
-        } else if (dayjs(value).toISOString() === value) {
-          if (parsedDateTime.isValid() && parsedDateTime.toISOString() === value) {
-            preFillValue = dayjs(value).format('YYYY-MM-DD HH:mm:ssZ')
-          }
+        if (
+          (parsedDateTime.isValid() && parsedDateTime.toISOString() === value) ||
+          dayjs(value, 'YYYY-MM-DD HH:mm:ss').isValid()
+        ) {
+          preFillValue = dayjs(value).utc().format('YYYY-MM-DD HH:mm:ssZ')
         }
         break
       }

From 865b7cebea613b4c2b128138a2a1eea5913a1e1c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:11 +0000
Subject: [PATCH 13/40] fic(nc-gui): add tooltip on disabled get prefilled link
 btn

---
 .../nc-gui/components/smartsheet/Form.vue     | 26 +++++++++++--------
 packages/nc-gui/lang/en.json                  |  3 ++-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 107e3ba98e..c22db474cb 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1332,17 +1332,21 @@ useEventListener(
                       {{ $t('activity.clearForm') }}
                     </NcButton>
                     <div class="flex items-center gap-3">
-                      <NcButton
-                        type="primary"
-                        size="small"
-                        :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length || isLocked || !view?.uuid"
-                        class="nc-form-get-pre-filled-link nc-form-focus-element"
-                        data-testid="nc-form-get-pre-filled-link"
-                        data-title="nc-form-get-pre-filled-link"
-                        @click="getPreFilledLink"
-                      >
-                        {{ $t('activity.getPreFilledLink') }}
-                      </NcButton>
+                      <NcTooltip :disabled="!!view?.uuid">
+                        <template #title>{{$t('tooltip.formIsNotShared')}}</template>
+                        <NcButton
+                          v-if="isUIAllowed('dataInsert') && visibleColumns.length"
+                          type="primary"
+                          size="small"
+                          :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length || isLocked || !view?.uuid"
+                          class="nc-form-get-pre-filled-link nc-form-focus-element"
+                          data-testid="nc-form-get-pre-filled-link"
+                          data-title="nc-form-get-pre-filled-link"
+                          @click="getPreFilledLink"
+                        >
+                          {{ $t('activity.getPreFilledLink') }}
+                        </NcButton>
+                      </NcTooltip>
                       <NcButton
                         html-type="submit"
                         type="primary"
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 0d6151e040..47736cda95 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -965,7 +965,8 @@
     "clearMetadata": "Clear all metadata from meta tables.",
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
-    "clientCA": "Select CA file"
+    "clientCA": "Select CA file",
+    "formIsNotShared": "Form is not shared"
   },
   "placeholder": {
     "selectSlackChannels": "Select Slack channels",

From cd56db5f5327a922cc5005ceee4d965d9e308746 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:11 +0000
Subject: [PATCH 14/40] fix(nc-gui): prefilled select input css

---
 .../nc-gui/components/dlg/share-and-collaborate/SharePage.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index c28ef0ae84..775cd3ed7c 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -413,6 +413,10 @@ async function savePreFilledMode() {
 .nc-pre-filled-mode-wrapper {
   .nc-pre-filled-mode.ant-select {
     @apply !p-0 mt-2;
+
+    &.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
+      @apply !border-brand-500 !shadow-none
+    }
   }
 }
 </style>

From d449bbd1bb62feaa2d22232ad348f3f4ed3de3b2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH 15/40] fix(nc-gui): small changes

---
 .../nc-gui/components/dlg/share-and-collaborate/SharePage.vue | 4 ++--
 packages/nc-gui/components/smartsheet/Form.vue                | 2 +-
 .../nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue     | 3 +++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 775cd3ed7c..b6b282ef3e 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -414,8 +414,8 @@ async function savePreFilledMode() {
   .nc-pre-filled-mode.ant-select {
     @apply !p-0 mt-2;
 
-    &.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
-      @apply !border-brand-500 !shadow-none
+    &.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+      @apply !border-brand-500 !shadow-none;
     }
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index c22db474cb..019306f309 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1333,7 +1333,7 @@ useEventListener(
                     </NcButton>
                     <div class="flex items-center gap-3">
                       <NcTooltip :disabled="!!view?.uuid">
-                        <template #title>{{$t('tooltip.formIsNotShared')}}</template>
+                        <template #title>{{ $t('tooltip.formIsNotShared') }}</template>
                         <NcButton
                           v-if="isUIAllowed('dataInsert') && visibleColumns.length"
                           type="primary"
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
index 6e889598d0..6657d3b99f 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
@@ -151,6 +151,9 @@ p {
           & > div {
             @apply w-full;
           }
+          &.readonly > div {
+            @apply px-3 py-1;
+          }
 
           textarea {
             @apply px-3;

From 18c352c4b331e9229d475cbce3592f707e1a8d6c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH 16/40] fix(nc-gui): disable autofocus json field in form view

---
 packages/nc-gui/components/cell/Json.vue     |  1 +
 packages/nc-gui/components/monaco/Editor.vue | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index e39ff2e06c..7b2270d6b5 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -184,6 +184,7 @@ watch(isExpanded, () => {
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
         :hide-minimap="true"
         :disable-deep-compare="true"
+        :auto-focus="!isForm"
         @update:model-value="localValue = $event"
         @keydown.enter.stop
       />
diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index a353cbca43..06ad6884b7 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -12,9 +12,18 @@ interface Props {
   validate?: boolean
   disableDeepCompare?: boolean
   readOnly?: boolean
+  autoFocus: boolean
 }
 
-const { hideMinimap, lang = 'json', validate = true, disableDeepCompare = false, modelValue, readOnly } = defineProps<Props>()
+const {
+  hideMinimap,
+  lang = 'json',
+  validate = true,
+  disableDeepCompare = false,
+  modelValue,
+  readOnly,
+  autoFocus = true,
+} = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
@@ -120,7 +129,7 @@ onMounted(async () => {
       }
     })
 
-    if (!isDrawerOrModalExist()) {
+    if (!isDrawerOrModalExist() && autoFocus) {
       // auto focus on json cells only
       editor.focus()
     }

From 67f8eb2fe4d1d1e0ba56082176ffa5c06a42e264 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH 17/40] chore(nc-gui): lint

---
 packages/nc-gui/composables/useSharedFormViewStore.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 95b83c5ceb..3a788a23ba 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -12,16 +12,7 @@ import type {
   StringOrNullType,
   TableType,
 } from 'nocodb-sdk'
-import {
-  ErrorMessages,
-  RelationTypes,
-  UITypes,
-  getDateFormat,
-  getDateTimeFormat,
-  isLinksOrLTAR,
-  isSystemColumn,
-  isVirtualCol,
-} from 'nocodb-sdk'
+import { ErrorMessages, RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import { isString } from '@vue/shared'
 import { filterNullOrUndefinedObjectProperties } from '~/helpers/parsers/parserHelpers'
 import {

From 8bd4215c00e0a7223862d59f6ea5a795b37cd412 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH 18/40] fix(nc-gui): move get prefill link in share form modal

---
 .../dlg/share-and-collaborate/SharePage.vue   | 110 ++++++++++++++----
 .../nc-gui/components/smartsheet/Form.vue     |  70 ++++-------
 .../composables/useSharedFormViewStore.ts     |   2 +-
 packages/nc-gui/lang/en.json                  |   6 +-
 packages/nc-gui/lib/enums.ts                  |   3 +-
 packages/nc-gui/lib/types.ts                  |   1 +
 packages/nc-gui/store/views.ts                |   5 +
 7 files changed, 123 insertions(+), 74 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index b6b282ef3e..f197402783 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -7,6 +7,8 @@ const { view: _view, $api } = useSmartsheetStoreOrThrow()
 const { $e } = useNuxtApp()
 const { getBaseUrl, appInfo } = useGlobal()
 
+const { t } = useI18n()
+
 const { dashboardUrl } = useDashboard()
 
 const viewStore = useViewsStore()
@@ -52,6 +54,10 @@ const url = computed(() => {
   return sharedViewUrl() ?? ''
 })
 
+const forPreFillUrl = computed(() => {
+  return sharedViewUrl(true) ?? ''
+})
+
 const passwordProtectedLocal = ref(false)
 
 const passwordProtected = computed(() => {
@@ -149,17 +155,31 @@ const surveyMode = computed({
   },
 })
 
-const preFilledMode = computed({
-  get: () => parseProp(activeView.value?.meta)?.preFilledMode || PreFilledMode.Default,
-  set: (preFilled) => {
+const formPreFill = computed({
+  get: () => ({
+    preFillEnabled: parseProp(activeView.value?.meta)?.preFillEnabled ?? false,
+    preFilledMode: parseProp(activeView.value?.meta)?.preFilledMode || t('general.default'),
+  }),
+  set: (value) => {
     if (!activeView.value?.meta) return
 
-    activeView.value.meta = { ...activeView.value.meta, preFilledMode: preFilled }
+    if (formPreFill.value.preFillEnabled !== value.preFillEnabled) {
+      $e(`a:view:share:prefilled-mode-${value.preFillEnabled ? 'enabled' : 'disabled'}`)
+    }
+
+    if (formPreFill.value.preFilledMode !== value.preFilledMode) {
+      $e(`a:view:share:${value.preFillEnabled || 'default'}-prefilled-mode`)
+    }
+
+    activeView.value.meta = {
+      ...activeView.value.meta,
+      ...value,
+    }
     savePreFilledMode()
   },
 })
 
-function sharedViewUrl() {
+function sharedViewUrl(isPreFillUrl: boolean = false) {
   if (!activeView.value) return
 
   let viewType
@@ -191,7 +211,13 @@ function sharedViewUrl() {
     dashboardUrl1 = `${baseUrl}${appInfo.value?.dashboardPath}`
   }
 
-  return encodeURI(`${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}`)
+  return encodeURI(
+    `${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}${
+      isPreFillUrl && formPreFill.value.preFillEnabled && viewStore.preFillFormSearchParams
+        ? `?${viewStore.preFillFormSearchParams}`
+        : ''
+    }`,
+  )
 }
 
 const toggleViewShare = async () => {
@@ -270,7 +296,6 @@ async function updateSharedView() {
 
 async function savePreFilledMode() {
   await updateSharedView()
-  $e(`a:view:share:${preFilledMode.value}-prefilled-mode`)
 }
 </script>
 
@@ -361,29 +386,74 @@ async function savePreFilledMode() {
           v-if="activeView?.type === ViewTypes.FORM"
           class="nc-pre-filled-mode-wrapper flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md"
         >
-          <div>
+          <div class="flex flex-row justify-between">
             <div class="text-black">{{ $t('activity.preFilledFields.title') }}</div>
+            <a-switch
+              :checked="formPreFill.preFillEnabled"
+              v-e="['c:share:view:surver-mode:toggle']"
+              data-testid="nc-modal-share-view__surveyMode"
+              @update:checked="
+                (value) => {
+                  formPreFill = {
+                    ...formPreFill,
+                    preFillEnabled: value,
+                  }
+                }
+              "
+            >
+            </a-switch>
+          </div>
+          <div v-if="formPreFill.preFillEnabled">
+            <!-- <div class="text-black">{{ $t('activity.preFilledFields.title') }}</div> -->
 
             <a-select
-              v-model:value="preFilledMode"
+              :value="formPreFill.preFilledMode"
+              :allow-clear="formPreFill.preFilledMode !== t('general.default')"
               class="nc-pre-filled-mode !rounded-md w-full"
               dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
+              @update:value="
+                (value) => {
+                  formPreFill = {
+                    ...formPreFill,
+                    preFilledMode: value || '',
+                  }
+                }
+              "
             >
               <template #suffixIcon>
                 <GeneralIcon icon="arrowDown" class="text-gray-700" />
               </template>
-              <a-select-option v-for="mode of Object.values(PreFilledMode)" :key="mode" :value="mode">
-                <div class="flex gap-2 items-center">
-                  <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
-                  <component
-                    :is="iconMap.check"
-                    v-if="preFilledMode === mode"
-                    id="nc-selected-item-icon"
-                    class="text-primary w-4 h-4"
-                  />
-                </div>
-              </a-select-option>
+              <template v-for="mode of Object.values(PreFilledMode)" :key="mode">
+                <a-select-option v-if="mode !== PreFilledMode.Default" :value="mode">
+                  <div class="flex gap-2 items-center">
+                    <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
+                    <component
+                      :is="iconMap.check"
+                      v-if="formPreFill.preFilledMode === mode"
+                      id="nc-selected-item-icon"
+                      class="text-primary w-4 h-4"
+                    />
+                  </div>
+                </a-select-option>
+              </template>
             </a-select>
+
+            <NcTooltip
+              :disabled="!!viewStore.preFillFormSearchParams"
+              :class="{
+                '!cursor-not-allowed': !viewStore.preFillFormSearchParams,
+              }"
+            >
+              <template #title> {{ $t('tooltip.fillTheFormFieldFirst') }} </template>
+              <div
+                class="mt-0.5 border-t-1 border-gray-100 pt-3"
+                :class="{
+                  'pointer-events-none': !viewStore.preFillFormSearchParams,
+                }"
+              >
+                <GeneralCopyUrl v-model:url="forPreFillUrl" />
+              </div>
+            </NcTooltip>
           </div>
         </div>
       </template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 019306f309..705a787d24 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -43,6 +43,7 @@ import {
   useViewColumnsOrThrow,
   useViewData,
   watch,
+  useViewsStore,
 } from '#imports'
 import type { ImageCropperConfig } from '~/lib'
 
@@ -104,6 +105,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view)
 
+const { preFillFormSearchParams } = storeToRefs(useViewsStore())
+
 const reloadEventHook = inject(ReloadViewDataHookInj, createEventHook())
 
 reloadEventHook.on(async () => {
@@ -199,6 +202,22 @@ const updateView = useDebounceFn(
   { maxWait: 2000 },
 )
 
+const updatePreFillFormSearchParams = useDebounceFn(() => {
+  if (isLocked.value || !isUIAllowed('dataInsert')) return
+
+  const preFilledData = { ...formState, ...state.value }
+
+  const searchParams = new URLSearchParams()
+
+  for (const c of visibleColumns.value) {
+    if (c.title && preFilledData[c.title] && !isVirtualCol(c) && !(UITypes.Attachment === c.uidt)) {
+      searchParams.append(c.title, preFilledData[c.title])
+    }
+  }
+
+  preFillFormSearchParams.value = searchParams.toString()
+}, 250)
+
 async function submitForm() {
   if (isLocked.value || !isUIAllowed('dataInsert')) return
 
@@ -220,38 +239,6 @@ async function submitForm() {
   submitted.value = true
 }
 
-async function getPreFilledLink() {
-  if (isLocked.value || !isUIAllowed('dataInsert') || !view.value?.uuid) return
-
-  const preFilledData = { ...formState, ...state.value }
-
-  const searchParams = new URLSearchParams()
-
-  for (const c of visibleColumns.value) {
-    if (c.title && preFilledData[c.title] && !isVirtualCol(c)) {
-      searchParams.append(c.title, preFilledData[c.title])
-    }
-  }
-
-  // get base url for workspace
-  const baseUrl = getBaseUrl(workspaceStore.activeWorkspaceId)
-
-  let dashboardUrl1 = dashboardUrl.value
-
-  if (baseUrl) {
-    dashboardUrl1 = `${baseUrl}${appInfo.value?.dashboardPath}`
-  }
-
-  copy(
-    encodeURI(
-      `${dashboardUrl1}#/nc/form/${view.value?.uuid}${parseProp(view.value?.meta).surveyMode ? '/survey' : ''}${
-        searchParams.toString() ? `?${searchParams.toString()}` : ''
-      }`,
-    ),
-  )
-
-  message.info(t('msg.info.copiedToClipboard'))
-}
 
 async function clearForm() {
   if (isLocked.value || !isUIAllowed('dataInsert')) return
@@ -639,6 +626,10 @@ watch([focusLabel, activeRow], () => {
   }
 })
 
+watch([formState, state], () => {
+  updatePreFillFormSearchParams()
+})
+
 useEventListener(
   formRef,
   'focusout',
@@ -1332,21 +1323,6 @@ useEventListener(
                       {{ $t('activity.clearForm') }}
                     </NcButton>
                     <div class="flex items-center gap-3">
-                      <NcTooltip :disabled="!!view?.uuid">
-                        <template #title>{{ $t('tooltip.formIsNotShared') }}</template>
-                        <NcButton
-                          v-if="isUIAllowed('dataInsert') && visibleColumns.length"
-                          type="primary"
-                          size="small"
-                          :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length || isLocked || !view?.uuid"
-                          class="nc-form-get-pre-filled-link nc-form-focus-element"
-                          data-testid="nc-form-get-pre-filled-link"
-                          data-title="nc-form-get-pre-filled-link"
-                          @click="getPreFilledLink"
-                        >
-                          {{ $t('activity.getPreFilledLink') }}
-                        </NcButton>
-                      </NcTooltip>
                       <NcButton
                         html-type="submit"
                         type="primary"
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 3a788a23ba..2518baeeb7 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -255,7 +255,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   }
 
   function handlePreFillForm() {
-    if (Object.keys(route.query).length && sharedViewMeta.value.preFilledMode !== PreFilledMode.Disabled) {
+    if (Object.keys(route.query).length && sharedViewMeta.value.preFillEnabled) {
       columns.value = columns.value?.map((c) => {
         if (
           !c.title ||
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 47736cda95..062905a936 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -928,9 +928,7 @@
     "addFieldFromFormView": "Add Field",
     "selectAllFields": "Select all fields",
     "preFilledFields": {
-      "title": "Pre-filled Fields",
-      "default": "Allow pre-filling fields",
-      "disabled": "Disable pre-filling fields",
+      "title": "Enable Pre-fill",
       "locked": "Lock pre-filled fields as read-only",
       "hidden": "Hide pre-filled fields",
       "lockedFieldTooltip": "Pre-filled value"
@@ -966,7 +964,7 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "formIsNotShared": "Form is not shared"
+    "fillTheFormFieldFirst": "Fill the form fields first"
   },
   "placeholder": {
     "selectSlackChannels": "Select Slack channels",
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index 5001d068c9..abcd362f0f 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -138,8 +138,7 @@ export enum ImportSource {
 }
 
 export enum PreFilledMode {
-  Default = 'default',
-  Disabled = 'disabled',
+  Default = '',
   Locked = 'locked',
   Hidden = 'hidden',
 }
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index cd61b37e47..24c1d997f5 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -115,6 +115,7 @@ interface SharedViewMeta extends Record<string, any> {
   theme?: Partial<ThemeConfig>
   allowCSVDownload?: boolean
   rtl?: boolean
+  preFillEnabled?: boolean
   preFilledMode?: PreFilledMode
 }
 
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index f32ca96271..48f24a6555 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -116,6 +116,8 @@ export const useViewsStore = defineStore('viewsStore', () => {
   // Used for Grid View Pagination
   const isPaginationLoading = ref(true)
 
+  const preFillFormSearchParams = ref('')
+
   const loadViews = async ({
     tableId,
     ignoreLoading,
@@ -282,6 +284,8 @@ export const useViewsStore = defineStore('viewsStore', () => {
     if (!view) return
     if (!view.base_id) return
 
+    preFillFormSearchParams.value = ''
+
     const tableName = tablesStore.baseTables.get(view.base_id)?.find((t) => t.id === view.fk_model_id)?.title
 
     const baseName = bases.basesList.find((p) => p.id === view.base_id)?.title
@@ -322,6 +326,7 @@ export const useViewsStore = defineStore('viewsStore', () => {
     activeSorts,
     activeNestedFilters,
     isActiveViewLocked,
+    preFillFormSearchParams,
   }
 })
 

From ed0987b3d3a85c59a32d8a3581a2aa51b0fbebcf Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH 19/40] chore(nc-gui): lint

---
 .../dlg/share-and-collaborate/SharePage.vue   |  2 +-
 .../nc-gui/components/smartsheet/Form.vue     | 37 +++++++------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index f197402783..e2a866f4ef 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -389,8 +389,8 @@ async function savePreFilledMode() {
           <div class="flex flex-row justify-between">
             <div class="text-black">{{ $t('activity.preFilledFields.title') }}</div>
             <a-switch
-              :checked="formPreFill.preFillEnabled"
               v-e="['c:share:view:surver-mode:toggle']"
+              :checked="formPreFill.preFillEnabled"
               data-testid="nc-modal-share-view__surveyMode"
               @update:checked="
                 (value) => {
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 705a787d24..b9cc44a185 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -42,7 +42,6 @@ import {
   useRoles,
   useViewColumnsOrThrow,
   useViewData,
-  watch,
   useViewsStore,
 } from '#imports'
 import type { ImageCropperConfig } from '~/lib'
@@ -71,13 +70,7 @@ const enum NcForm {
   subheading = 'nc-form-sub-heading',
 }
 
-const { isMobileMode, user, getBaseUrl, appInfo } = useGlobal()
-
-const { dashboardUrl } = useDashboard()
-
-const workspaceStore = useWorkspace()
-
-const { copy } = useCopy()
+const { isMobileMode, user } = useGlobal()
 
 const { $api, $e } = useNuxtApp()
 
@@ -239,7 +232,6 @@ async function submitForm() {
   submitted.value = true
 }
 
-
 async function clearForm() {
   if (isLocked.value || !isUIAllowed('dataInsert')) return
 
@@ -1322,20 +1314,19 @@ useEventListener(
                     >
                       {{ $t('activity.clearForm') }}
                     </NcButton>
-                    <div class="flex items-center gap-3">
-                      <NcButton
-                        html-type="submit"
-                        type="primary"
-                        size="small"
-                        :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
-                        class="nc-form-submit nc-form-focus-element"
-                        data-testid="nc-form-submit"
-                        data-title="nc-form-submit"
-                        @click="submitForm"
-                      >
-                        {{ $t('general.submit') }}
-                      </NcButton>
-                    </div>
+
+                    <NcButton
+                      html-type="submit"
+                      type="primary"
+                      size="small"
+                      :disabled="!isUIAllowed('dataInsert') || !visibleColumns.length"
+                      class="nc-form-submit nc-form-focus-element"
+                      data-testid="nc-form-submit"
+                      data-title="nc-form-submit"
+                      @click="submitForm"
+                    >
+                      {{ $t('general.submit') }}
+                    </NcButton>
                   </div>
                 </a-form>
 

From 48432c40afea233b2bb9ebfdd1b42d52a935d759 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:12 +0000
Subject: [PATCH 20/40] fix(nc-gui): invalid queryselector char issue

---
 packages/nc-gui/components/smartsheet/Form.vue | 10 +++++++---
 tests/playwright/pages/Dashboard/Form/index.ts | 10 ++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index b9cc44a185..123ac8b385 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -606,9 +606,13 @@ watch([formState, state.value], async () => {
 
 watch(activeRow, (newValue) => {
   if (newValue) {
-    document
-      .querySelector(`.nc-form-field-item-${newValue?.replaceAll(' ', '')}`)
-      ?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    const field = document.querySelector(`.nc-form-field-item-${CSS.escape(newValue?.replaceAll(' ', ''))}`)
+
+    if (field) {
+      setTimeout(() => {
+        field?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }, 50)
+    }
   }
 })
 
diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index 0f18392039..bba939f9e7 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -116,7 +116,10 @@ export class FormPage extends BasePage {
       await src.dragTo(dst);
     } else if (mode === 'hideField') {
       // in form-v2, hide field will be using right sidebar
-      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
+      await this.formFields
+        .locator(`[data-testid="nc-form-field-item-${CSS.escape(field)}"]`)
+        .locator('.nc-switch')
+        .click();
     }
   }
 
@@ -132,7 +135,10 @@ export class FormPage extends BasePage {
       await src.dragTo(dst, { trial: true });
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
-      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
+      await this.formFields
+        .locator(`[data-testid="nc-form-field-item-${CSS.escape(field)}"]`)
+        .locator('.nc-switch')
+        .click();
     }
   }
 

From 0d9db02f683e121cd509e4ebdbcb639e5ad06f33 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:13 +0000
Subject: [PATCH 21/40] fix(nc-gui): prefill issue if query param key is
 encoded

---
 packages/nc-gui/composables/useSharedFormViewStore.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 2518baeeb7..dce85a3107 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -257,9 +257,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   function handlePreFillForm() {
     if (Object.keys(route.query).length && sharedViewMeta.value.preFillEnabled) {
       columns.value = columns.value?.map((c) => {
+        const queryParam = route.query?.[c.title as string] || route.query?.[encodeURIComponent(c.title as string)]
         if (
           !c.title ||
-          !route.query?.[c.title] ||
+          !queryParam ||
           isSystemColumn(c) ||
           isVirtualCol(c) ||
           // (isVirtualCol(c) && !isLinksOrLTAR(c)) || // Todo: Enable this after linksOrLTAR prefill supported
@@ -267,7 +268,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         ) {
           return c
         }
-        const preFillValue = getPreFillValue(c, decodeURIComponent(route.query?.[c.title] as string).trim())
+
+        const preFillValue = getPreFillValue(c, decodeURIComponent(queryParam as string).trim())
         if (preFillValue !== undefined) {
           // Prefill form state
           formState.value[c.title] = preFillValue

From 979430b0e7d289b3974fd90a340be0a4a95fc849 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:13 +0000
Subject: [PATCH 22/40] test: pw test fails issue

---
 tests/playwright/pages/Dashboard/Form/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index bba939f9e7..ba46e39625 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -117,7 +117,7 @@ export class FormPage extends BasePage {
     } else if (mode === 'hideField') {
       // in form-v2, hide field will be using right sidebar
       await this.formFields
-        .locator(`[data-testid="nc-form-field-item-${CSS.escape(field)}"]`)
+        .locator(`[data-testid="nc-form-field-item-${window.CSS.escape(field)}"]`)
         .locator('.nc-switch')
         .click();
     }
@@ -136,7 +136,7 @@ export class FormPage extends BasePage {
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
       await this.formFields
-        .locator(`[data-testid="nc-form-field-item-${CSS.escape(field)}"]`)
+        .locator(`[data-testid="nc-form-field-item-${window.CSS.escape(field)}"]`)
         .locator('.nc-switch')
         .click();
     }

From d07ed1638e75511cc4048a0f894415166d15a559 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:13 +0000
Subject: [PATCH 23/40] test(nc-gui): pw test fail issue

---
 tests/playwright/pages/Dashboard/Form/index.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index ba46e39625..0f18392039 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -116,10 +116,7 @@ export class FormPage extends BasePage {
       await src.dragTo(dst);
     } else if (mode === 'hideField') {
       // in form-v2, hide field will be using right sidebar
-      await this.formFields
-        .locator(`[data-testid="nc-form-field-item-${window.CSS.escape(field)}"]`)
-        .locator('.nc-switch')
-        .click();
+      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
     }
   }
 
@@ -135,10 +132,7 @@ export class FormPage extends BasePage {
       await src.dragTo(dst, { trial: true });
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
-      await this.formFields
-        .locator(`[data-testid="nc-form-field-item-${window.CSS.escape(field)}"]`)
-        .locator('.nc-switch')
-        .click();
+      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
     }
   }
 

From 3662a5ce609d6411e7741d646c1ebc12786aa103 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:13 +0000
Subject: [PATCH 24/40] fix(nc-gui): update prefill enable switch testid

---
 .../components/dlg/share-and-collaborate/SharePage.vue       | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index e2a866f4ef..e053d9830f 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -391,7 +391,7 @@ async function savePreFilledMode() {
             <a-switch
               v-e="['c:share:view:surver-mode:toggle']"
               :checked="formPreFill.preFillEnabled"
-              data-testid="nc-modal-share-view__surveyMode"
+              data-testid="nc-modal-share-view__preFill"
               @update:checked="
                 (value) => {
                   formPreFill = {
@@ -404,13 +404,12 @@ async function savePreFilledMode() {
             </a-switch>
           </div>
           <div v-if="formPreFill.preFillEnabled">
-            <!-- <div class="text-black">{{ $t('activity.preFilledFields.title') }}</div> -->
-
             <a-select
               :value="formPreFill.preFilledMode"
               :allow-clear="formPreFill.preFilledMode !== t('general.default')"
               class="nc-pre-filled-mode !rounded-md w-full"
               dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
+              data-testid="nc-modal-share-view__preFillMode"
               @update:value="
                 (value) => {
                   formPreFill = {

From c71bcab080936a611edbcf4af2325e280356a332 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:13 +0000
Subject: [PATCH 25/40] fix(nc-gui): use existing copy link component for
 prefill link

---
 .../dlg/share-and-collaborate/SharePage.vue   | 93 +++++++------------
 1 file changed, 35 insertions(+), 58 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index e053d9830f..f986170996 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -54,10 +54,6 @@ const url = computed(() => {
   return sharedViewUrl() ?? ''
 })
 
-const forPreFillUrl = computed(() => {
-  return sharedViewUrl(true) ?? ''
-})
-
 const passwordProtectedLocal = ref(false)
 
 const passwordProtected = computed(() => {
@@ -179,7 +175,7 @@ const formPreFill = computed({
   },
 })
 
-function sharedViewUrl(isPreFillUrl: boolean = false) {
+function sharedViewUrl() {
   if (!activeView.value) return
 
   let viewType
@@ -213,9 +209,7 @@ function sharedViewUrl(isPreFillUrl: boolean = false) {
 
   return encodeURI(
     `${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}${
-      isPreFillUrl && formPreFill.value.preFillEnabled && viewStore.preFillFormSearchParams
-        ? `?${viewStore.preFillFormSearchParams}`
-        : ''
+      formPreFill.value.preFillEnabled && viewStore.preFillFormSearchParams ? `?${viewStore.preFillFormSearchParams}` : ''
     }`,
   )
 }
@@ -403,57 +397,40 @@ async function savePreFilledMode() {
             >
             </a-switch>
           </div>
-          <div v-if="formPreFill.preFillEnabled">
-            <a-select
-              :value="formPreFill.preFilledMode"
-              :allow-clear="formPreFill.preFilledMode !== t('general.default')"
-              class="nc-pre-filled-mode !rounded-md w-full"
-              dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
-              data-testid="nc-modal-share-view__preFillMode"
-              @update:value="
-                (value) => {
-                  formPreFill = {
-                    ...formPreFill,
-                    preFilledMode: value || '',
-                  }
+
+          <a-select
+            v-if="formPreFill.preFillEnabled"
+            :value="formPreFill.preFilledMode"
+            :allow-clear="formPreFill.preFilledMode !== t('general.default')"
+            class="nc-pre-filled-mode !rounded-md w-full !mt-0"
+            dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
+            data-testid="nc-modal-share-view__preFillMode"
+            @update:value="
+              (value) => {
+                formPreFill = {
+                  ...formPreFill,
+                  preFilledMode: value || '',
                 }
-              "
-            >
-              <template #suffixIcon>
-                <GeneralIcon icon="arrowDown" class="text-gray-700" />
-              </template>
-              <template v-for="mode of Object.values(PreFilledMode)" :key="mode">
-                <a-select-option v-if="mode !== PreFilledMode.Default" :value="mode">
-                  <div class="flex gap-2 items-center">
-                    <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
-                    <component
-                      :is="iconMap.check"
-                      v-if="formPreFill.preFilledMode === mode"
-                      id="nc-selected-item-icon"
-                      class="text-primary w-4 h-4"
-                    />
-                  </div>
-                </a-select-option>
-              </template>
-            </a-select>
-
-            <NcTooltip
-              :disabled="!!viewStore.preFillFormSearchParams"
-              :class="{
-                '!cursor-not-allowed': !viewStore.preFillFormSearchParams,
-              }"
-            >
-              <template #title> {{ $t('tooltip.fillTheFormFieldFirst') }} </template>
-              <div
-                class="mt-0.5 border-t-1 border-gray-100 pt-3"
-                :class="{
-                  'pointer-events-none': !viewStore.preFillFormSearchParams,
-                }"
-              >
-                <GeneralCopyUrl v-model:url="forPreFillUrl" />
-              </div>
-            </NcTooltip>
-          </div>
+              }
+            "
+          >
+            <template #suffixIcon>
+              <GeneralIcon icon="arrowDown" class="text-gray-700" />
+            </template>
+            <template v-for="mode of Object.values(PreFilledMode)" :key="mode">
+              <a-select-option v-if="mode !== PreFilledMode.Default" :value="mode">
+                <div class="flex gap-2 items-center">
+                  <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
+                  <component
+                    :is="iconMap.check"
+                    v-if="formPreFill.preFilledMode === mode"
+                    id="nc-selected-item-icon"
+                    class="text-primary w-4 h-4"
+                  />
+                </div>
+              </a-select-option>
+            </template>
+          </a-select>
         </div>
       </template>
     </div>

From eec83135fa1801a86e772fede8bf22da3aa93f0d Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:13 +0000
Subject: [PATCH 26/40] fix(nc-gui): shared form field readonly bg color issue

---
 .../pages/index/[typeOrId]/form/[viewId]/index/index.vue    | 5 ++---
 .../pages/index/[typeOrId]/form/[viewId]/index/survey.vue   | 6 ++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 6658252457..4e8d4083ad 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -182,14 +182,13 @@ const onDecode = async (scannedCodeValue: string) => {
                   <div>
                     <NcTooltip :disabled="!field?.read_only">
                       <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
-
                       <LazySmartsheetDivDataCell class="flex relative">
                         <LazySmartsheetVirtualCell
                           v-if="isVirtualCol(field)"
                           :model-value="null"
                           class="mt-0 nc-input nc-cell"
                           :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                          :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                          :class="[`nc-form-input-${field.title?.replaceAll(' ', '')}`, { readonly: field?.read_only }]"
                           :column="field"
                           :read-only="field?.read_only"
                         />
@@ -201,7 +200,7 @@ const onDecode = async (scannedCodeValue: string) => {
                           :data-testid="`nc-form-input-cell-${field.label || field.title}`"
                           :class="[
                             `nc-form-input-${field.title?.replaceAll(' ', '')}`,
-                            { 'layout-list': parseProp(field?.meta)?.isList },
+                            { 'layout-list': parseProp(field?.meta)?.isList, 'readonly': field?.read_only },
                           ]"
                           :column="field"
                           :edit-enabled="!field?.read_only"
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index bac5a0c11b..0724623a40 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -282,12 +282,14 @@ onMounted(() => {
 
             <NcTooltip :disabled="!field?.read_only">
               <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
-
               <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
                 <LazySmartsheetVirtualCell
                   v-if="isVirtualCol(field)"
                   v-model="formState[field.title]"
                   class="mt-0 nc-input h-auto"
+                  :class="{
+                    readonly: field?.read_only,
+                  }"
                   :row="{ row: {}, oldRow: {}, rowMeta: {} }"
                   :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                   :column="field"
@@ -298,7 +300,7 @@ onMounted(() => {
                   v-else
                   v-model="formState[field.title]"
                   class="nc-input h-auto"
-                  :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
+                  :class="{ 'layout-list': parseProp(field?.meta)?.isList, 'readonly': field?.read_only }"
                   :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                   :column="field"
                   :edit-enabled="!field?.read_only"

From d4459884b101f0a59890826824271b603e7819a4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:14 +0000
Subject: [PATCH 27/40] fix(nc-gui): prefill link search params copy issue

---
 .../nc-gui/components/dlg/share-and-collaborate/SharePage.vue | 4 +++-
 packages/nc-gui/components/smartsheet/Form.vue                | 2 ++
 packages/nc-gui/store/views.ts                                | 2 --
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index f986170996..ce357da8c0 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -209,7 +209,7 @@ function sharedViewUrl() {
 
   return encodeURI(
     `${dashboardUrl1}#/nc/${viewType}/${activeView.value.uuid}${surveyMode.value ? '/survey' : ''}${
-      formPreFill.value.preFillEnabled && viewStore.preFillFormSearchParams ? `?${viewStore.preFillFormSearchParams}` : ''
+      viewStore.preFillFormSearchParams && formPreFill.value.preFillEnabled ? `?${viewStore.preFillFormSearchParams}` : ''
     }`,
   )
 }
@@ -291,6 +291,8 @@ async function updateSharedView() {
 async function savePreFilledMode() {
   await updateSharedView()
 }
+
+watchEffect(() => {})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 123ac8b385..3841000e58 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -564,6 +564,8 @@ onMounted(async () => {
   if (imageCropperData.value.src) {
     URL.revokeObjectURL(imageCropperData.value.imageConfig.src)
   }
+  
+  preFillFormSearchParams.value = ''
 
   isLoadingFormView.value = true
   await loadFormView()
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index 48f24a6555..64e426f48f 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -284,8 +284,6 @@ export const useViewsStore = defineStore('viewsStore', () => {
     if (!view) return
     if (!view.base_id) return
 
-    preFillFormSearchParams.value = ''
-
     const tableName = tablesStore.baseTables.get(view.base_id)?.find((t) => t.id === view.fk_model_id)?.title
 
     const baseName = bases.basesList.find((p) => p.id === view.base_id)?.title

From 7b17a3bb754187c8f0f51d82a513ce5500fafb02 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:14 +0000
Subject: [PATCH 28/40] fix(nc-gui): add tooltip info after enable prefill &
 survey mode option in sharePage modal

---
 .../dlg/share-and-collaborate/SharePage.vue   | 36 +++++++++++++++----
 packages/nc-gui/lang/en.json                  |  3 +-
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index ce357da8c0..23da10696d 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -315,7 +315,7 @@ watchEffect(() => {})
           <GeneralCopyUrl v-model:url="url" />
         </div>
         <div class="flex flex-col justify-between mt-1 py-2 px-3 bg-gray-50 rounded-md">
-          <div class="flex flex-row justify-between">
+          <div class="flex flex-row items-center justify-between">
             <div class="flex text-black">{{ $t('activity.restrictAccessWithPassword') }}</div>
             <a-switch
               v-e="['c:share:view:password:toggle']"
@@ -323,6 +323,7 @@ watchEffect(() => {})
               :loading="isUpdating.password"
               class="share-password-toggle !mt-0.25"
               data-testid="share-password-toggle"
+              size="small"
               @click="togglePasswordProtected"
             />
           </div>
@@ -345,7 +346,7 @@ watchEffect(() => {})
               activeView &&
               [ViewTypes.GRID, ViewTypes.KANBAN, ViewTypes.GALLERY, ViewTypes.MAP, ViewTypes.CALENDAR].includes(activeView.type)
             "
-            class="flex flex-row justify-between"
+            class="flex flex-row items-center justify-between"
           >
             <div class="flex text-black">{{ $t('activity.allowDownload') }}</div>
             <a-switch
@@ -354,25 +355,34 @@ watchEffect(() => {})
               :loading="isUpdating.download"
               class="public-password-toggle !mt-0.25"
               data-testid="share-download-toggle"
+              size="small"
             />
           </div>
 
           <template v-if="activeView?.type === ViewTypes.FORM">
-            <div class="flex flex-row justify-between">
-              <div class="text-black">{{ $t('activity.surveyMode') }}</div>
+            <div class="flex flex-row items-center justify-between">
+              <div class="text-black">
+                {{ $t('activity.surveyMode') }}
+                <NcTooltip class="inline">
+                  <template #title> {{ $t('tooltip.surveyFormInfo') }}</template>
+                  <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+                </NcTooltip>
+              </div>
               <a-switch
                 v-model:checked="surveyMode"
                 v-e="['c:share:view:surver-mode:toggle']"
                 data-testid="nc-modal-share-view__surveyMode"
+                size="small"
               >
               </a-switch>
             </div>
-            <div v-if="!isEeUI" class="flex flex-row justify-between">
+            <div v-if="!isEeUI" class="flex flex-row items-center justify-between">
               <div class="text-black">{{ $t('activity.rtlOrientation') }}</div>
               <a-switch
                 v-model:checked="withRTL"
                 v-e="['c:share:view:rtl-orientation:toggle']"
                 data-testid="nc-modal-share-view__RTL"
+                size="small"
               >
               </a-switch>
             </div>
@@ -382,12 +392,24 @@ watchEffect(() => {})
           v-if="activeView?.type === ViewTypes.FORM"
           class="nc-pre-filled-mode-wrapper flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md"
         >
-          <div class="flex flex-row justify-between">
-            <div class="text-black">{{ $t('activity.preFilledFields.title') }}</div>
+          <div class="flex flex-row items-center justify-between">
+            <div class="text-black flex-1">
+              {{ $t('activity.preFilledFields.title') }}
+
+              <NcTooltip class="inline">
+                <template #title
+                  ><div class="text-center">
+                    {{ $t('tooltip.preFillFormInfo') }}
+                  </div></template
+                >
+                <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
+              </NcTooltip>
+            </div>
             <a-switch
               v-e="['c:share:view:surver-mode:toggle']"
               :checked="formPreFill.preFillEnabled"
               data-testid="nc-modal-share-view__preFill"
+              size="small"
               @update:checked="
                 (value) => {
                   formPreFill = {
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 062905a936..3668e4f5e9 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -964,7 +964,8 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "fillTheFormFieldFirst": "Fill the form fields first"
+    "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
+    "surveyFormInfo": "Form mode with one field per page"
   },
   "placeholder": {
     "selectSlackChannels": "Select Slack channels",

From 835f55b9a5225401594f3bcb2a107d98a4dd092c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:14 +0000
Subject: [PATCH 29/40] fix(nc-gui): prevent clear prefilled readonly or hidden
 fields on clicking clear form

---
 packages/nc-gui/composables/useSharedFormViewStore.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index dce85a3107..64675920da 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -81,6 +81,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const route = useRoute()
 
   const formState = ref<Record<string, any>>({})
+  
+  const preFilledformState = ref<Record<string, any>>({})
 
   const { state: additionalState } = useProvideSmartsheetRowStore(
     meta as Ref<TableType>,
@@ -250,7 +252,11 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     formResetHook.trigger()
 
     additionalState.value = {}
-    formState.value = {}
+    formState.value = {
+      ...([PreFilledMode.Locked, PreFilledMode.Hidden].includes(sharedViewMeta.value.preFilledMode)
+        ? preFilledformState.value
+        : {}),
+    }
     v$.value?.$reset()
   }
 
@@ -273,6 +279,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         if (preFillValue !== undefined) {
           // Prefill form state
           formState.value[c.title] = preFillValue
+          // preFilledformState will be used in clear for to fill the filled data
+          preFilledformState.value[c.title] = preFillValue
 
           // Update column
           switch (sharedViewMeta.value.preFilledMode) {

From a454349a478852ed7861124d03248e47c642e720 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:14 +0000
Subject: [PATCH 30/40] fix(nc-gui): use radio inputs instead of select for
 prefilled mode select

---
 .../dlg/share-and-collaborate/SharePage.vue   | 67 +++++++------------
 .../nc-gui/components/smartsheet/Form.vue     |  2 +-
 packages/nc-gui/lang/en.json                  |  3 +-
 packages/nc-gui/lib/enums.ts                  |  2 +-
 4 files changed, 27 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 23da10696d..d8ffa4b11a 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -154,7 +154,7 @@ const surveyMode = computed({
 const formPreFill = computed({
   get: () => ({
     preFillEnabled: parseProp(activeView.value?.meta)?.preFillEnabled ?? false,
-    preFilledMode: parseProp(activeView.value?.meta)?.preFilledMode || t('general.default'),
+    preFilledMode: parseProp(activeView.value?.meta)?.preFilledMode || PreFilledMode.Default,
   }),
   set: (value) => {
     if (!activeView.value?.meta) return
@@ -164,7 +164,7 @@ const formPreFill = computed({
     }
 
     if (formPreFill.value.preFilledMode !== value.preFilledMode) {
-      $e(`a:view:share:${value.preFillEnabled || 'default'}-prefilled-mode`)
+      $e(`a:view:share:${value.preFilledMode}-prefilled-mode`)
     }
 
     activeView.value.meta = {
@@ -361,9 +361,11 @@ watchEffect(() => {})
 
           <template v-if="activeView?.type === ViewTypes.FORM">
             <div class="flex flex-row items-center justify-between">
-              <div class="text-black">
-                {{ $t('activity.surveyMode') }}
-                <NcTooltip class="inline">
+              <div class="text-black flex items-center space-x-1">
+                <div>
+                  {{ $t('activity.surveyMode') }}
+                </div>
+                <NcTooltip>
                   <template #title> {{ $t('tooltip.surveyFormInfo') }}</template>
                   <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
                 </NcTooltip>
@@ -393,15 +395,17 @@ watchEffect(() => {})
           class="nc-pre-filled-mode-wrapper flex flex-col justify-between gap-y-3 mt-1 py-2 px-3 bg-gray-50 rounded-md"
         >
           <div class="flex flex-row items-center justify-between">
-            <div class="text-black flex-1">
-              {{ $t('activity.preFilledFields.title') }}
+            <div class="text-black flex items-center space-x-1">
+              <div>
+                {{ $t('activity.preFilledFields.title') }}
+              </div>
 
-              <NcTooltip class="inline">
-                <template #title
-                  ><div class="text-center">
+              <NcTooltip>
+                <template #title>
+                  <div class="text-center">
                     {{ $t('tooltip.preFillFormInfo') }}
-                  </div></template
-                >
+                  </div>
+                </template>
                 <GeneralIcon icon="info" class="text-gray-600 cursor-pointer"></GeneralIcon>
               </NcTooltip>
             </div>
@@ -422,12 +426,10 @@ watchEffect(() => {})
             </a-switch>
           </div>
 
-          <a-select
+          <a-radio-group
             v-if="formPreFill.preFillEnabled"
-            :value="formPreFill.preFilledMode"
-            :allow-clear="formPreFill.preFilledMode !== t('general.default')"
-            class="nc-pre-filled-mode !rounded-md w-full !mt-0"
-            dropdown-class-name="nc-dropdown-pre-filled-mode border-1 !rounded-md border-gray-200"
+            :value="formPreFill.preFilledMode || ''"
+            class="nc-field-layout-list"
             data-testid="nc-modal-share-view__preFillMode"
             @update:value="
               (value) => {
@@ -438,23 +440,10 @@ watchEffect(() => {})
               }
             "
           >
-            <template #suffixIcon>
-              <GeneralIcon icon="arrowDown" class="text-gray-700" />
-            </template>
-            <template v-for="mode of Object.values(PreFilledMode)" :key="mode">
-              <a-select-option v-if="mode !== PreFilledMode.Default" :value="mode">
-                <div class="flex gap-2 items-center">
-                  <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
-                  <component
-                    :is="iconMap.check"
-                    v-if="formPreFill.preFilledMode === mode"
-                    id="nc-selected-item-icon"
-                    class="text-primary w-4 h-4"
-                  />
-                </div>
-              </a-select-option>
-            </template>
-          </a-select>
+            <a-radio v-for="mode of Object.values(PreFilledMode)" :key="mode" :value="mode">
+              <div class="flex-1">{{ $t(`activity.preFilledFields.${mode || Default}`) }}</div>
+            </a-radio>
+          </a-radio-group>
         </div>
       </template>
     </div>
@@ -479,14 +468,4 @@ watchEffect(() => {})
     line-height: 1rem !important;
   }
 }
-
-.nc-pre-filled-mode-wrapper {
-  .nc-pre-filled-mode.ant-select {
-    @apply !p-0 mt-2;
-
-    &.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
-      @apply !border-brand-500 !shadow-none;
-    }
-  }
-}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 3841000e58..77ec353a1d 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -669,7 +669,7 @@ useEventListener(
   (e: KeyboardEvent) => {
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
 
-    switch (e.key.toLowerCase()) {
+    switch (e.key?.toLowerCase()) {
       case 's':
         if (
           cmdOrCtrl &&
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 3668e4f5e9..f66b113cf4 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -929,6 +929,7 @@
     "selectAllFields": "Select all fields",
     "preFilledFields": {
       "title": "Enable Pre-fill",
+      "default": "Default",
       "locked": "Lock pre-filled fields as read-only",
       "hidden": "Hide pre-filled fields",
       "lockedFieldTooltip": "Pre-filled value"
@@ -964,7 +965,7 @@
     "clientKey": "Select .key file",
     "clientCert": "Select .cert file",
     "clientCA": "Select CA file",
-    "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
+    "preFillFormInfo": "Generate share form URL with pre-filled field data. To get a pre-filled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page"
   },
   "placeholder": {
diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index abcd362f0f..400a126cdf 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -138,7 +138,7 @@ export enum ImportSource {
 }
 
 export enum PreFilledMode {
-  Default = '',
+  Default = 'default',
   Locked = 'locked',
   Hidden = 'hidden',
 }

From b9057d20b75a999e48e5c6d853a6127879e4e69c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:14 +0000
Subject: [PATCH 31/40] fix(nc-gui): prefill link issue after clicking clear
 form btn in form builder

---
 .../dlg/share-and-collaborate/SharePage.vue   |  6 +--
 .../nc-gui/components/smartsheet/Form.vue     | 45 ++++++++++---------
 .../composables/useSharedFormViewStore.ts     |  2 +-
 3 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index d8ffa4b11a..580f02484b 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -7,8 +7,6 @@ const { view: _view, $api } = useSmartsheetStoreOrThrow()
 const { $e } = useNuxtApp()
 const { getBaseUrl, appInfo } = useGlobal()
 
-const { t } = useI18n()
-
 const { dashboardUrl } = useDashboard()
 
 const viewStore = useViewsStore()
@@ -428,14 +426,14 @@ watchEffect(() => {})
 
           <a-radio-group
             v-if="formPreFill.preFillEnabled"
-            :value="formPreFill.preFilledMode || ''"
+            :value="formPreFill.preFilledMode"
             class="nc-field-layout-list"
             data-testid="nc-modal-share-view__preFillMode"
             @update:value="
               (value) => {
                 formPreFill = {
                   ...formPreFill,
-                  preFilledMode: value || '',
+                  preFilledMode: value,
                 }
               }
             "
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 77ec353a1d..58f42723db 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -31,7 +31,6 @@ import {
   onClickOutside,
   parseProp,
   provide,
-  reactive,
   ref,
   useDebounceFn,
   useEventListener,
@@ -82,7 +81,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 const formRef = ref()
 
-let formState = reactive<Record<string, any>>({})
+const formState = ref<Record<string, any>>({})
 
 const secondsRemain = ref(0)
 
@@ -112,7 +111,7 @@ const { fields, showAll, hideAll } = useViewColumnsOrThrow()
 const { state, row } = useProvideSmartsheetRowStore(
   meta,
   ref({
-    row: formState,
+    row: formState.value,
     oldRow: {},
     rowMeta: { new: true },
   }),
@@ -198,7 +197,7 @@ const updateView = useDebounceFn(
 const updatePreFillFormSearchParams = useDebounceFn(() => {
   if (isLocked.value || !isUIAllowed('dataInsert')) return
 
-  const preFilledData = { ...formState, ...state.value }
+  const preFilledData = { ...formState.value, ...state.value }
 
   const searchParams = new URLSearchParams()
 
@@ -224,7 +223,7 @@ async function submitForm() {
   }
 
   await insertRow({
-    row: { ...formState, ...state.value },
+    row: { ...formState.value, ...state.value },
     oldRow: {},
     rowMeta: { new: true },
   })
@@ -235,7 +234,7 @@ async function submitForm() {
 async function clearForm() {
   if (isLocked.value || !isUIAllowed('dataInsert')) return
 
-  formState = reactive<Record<string, any>>({})
+  formState.value = {}
   state.value = {}
   await formRef.value?.clearValidate()
   reloadEventHook.trigger()
@@ -564,7 +563,7 @@ onMounted(async () => {
   if (imageCropperData.value.src) {
     URL.revokeObjectURL(imageCropperData.value.imageConfig.src)
   }
-  
+
   preFillFormSearchParams.value = ''
 
   isLoadingFormView.value = true
@@ -592,19 +591,25 @@ watch(view, (nextView) => {
   }
 })
 
-watch([formState, state.value], async () => {
-  for (const virtualField in state.value) {
-    if (!formState[virtualField]) {
-      formState[virtualField] = state.value[virtualField]
+watch(
+  [formState, state],
+  async () => {
+    for (const virtualField in state.value) {
+      formState.value[virtualField] = state.value[virtualField]
     }
-  }
 
-  try {
-    await formRef.value?.validateFields([...Object.keys(formState)])
-  } catch (e: any) {
-    e.errorFields.map((f: Record<string, any>) => console.error(f.errors.join(',')))
-  }
-})
+    updatePreFillFormSearchParams()
+
+    try {
+      await formRef.value?.validateFields([...Object.keys(formState.value)])
+    } catch (e: any) {
+      e.errorFields.map((f: Record<string, any>) => console.error(f.errors.join(',')))
+    }
+  },
+  {
+    deep: true,
+  },
+)
 
 watch(activeRow, (newValue) => {
   if (newValue) {
@@ -624,10 +629,6 @@ watch([focusLabel, activeRow], () => {
   }
 })
 
-watch([formState, state], () => {
-  updatePreFillFormSearchParams()
-})
-
 useEventListener(
   formRef,
   'focusout',
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 64675920da..f6441731e0 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -81,7 +81,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const route = useRoute()
 
   const formState = ref<Record<string, any>>({})
-  
+
   const preFilledformState = ref<Record<string, any>>({})
 
   const { state: additionalState } = useProvideSmartsheetRowStore(

From cbe0ced13694be43ac99775cda9db6db72a832e3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:14 +0000
Subject: [PATCH 32/40] fix(nc-gui): reduce gap between prefill mode radio
 inputs

---
 .../dlg/share-and-collaborate/SharePage.vue      | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 580f02484b..33d864eaf1 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -427,7 +427,7 @@ watchEffect(() => {})
           <a-radio-group
             v-if="formPreFill.preFillEnabled"
             :value="formPreFill.preFilledMode"
-            class="nc-field-layout-list"
+            class="nc-modal-share-view-preFillMode"
             data-testid="nc-modal-share-view__preFillMode"
             @update:value="
               (value) => {
@@ -466,4 +466,18 @@ watchEffect(() => {})
     line-height: 1rem !important;
   }
 }
+
+.nc-modal-share-view-preFillMode {
+  @apply flex flex-col;
+
+  .ant-radio-wrapper {
+    @apply !m-0 !flex !items-center w-full px-2 py-1 rounded-lg hover:bg-gray-100;
+    .ant-radio {
+      @apply !top-0;
+    }
+    .ant-radio + span {
+      @apply !flex !pl-4;
+    }
+  }
+}
 </style>

From 758c898ffbbdd5c61e5bdd477e325632e472e315 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:15 +0000
Subject: [PATCH 33/40] fix(nc-gui): swap prefilled mode radio options

---
 packages/nc-gui/lib/enums.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/lib/enums.ts b/packages/nc-gui/lib/enums.ts
index 400a126cdf..f386e6a9df 100644
--- a/packages/nc-gui/lib/enums.ts
+++ b/packages/nc-gui/lib/enums.ts
@@ -139,6 +139,6 @@ export enum ImportSource {
 
 export enum PreFilledMode {
   Default = 'default',
-  Locked = 'locked',
   Hidden = 'hidden',
+  Locked = 'locked',
 }

From aef292b2f71b04ebbe5d189ceb74fd09d66c438b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:15 +0000
Subject: [PATCH 34/40] feat(nc-gui): prefill form with default values

---
 .../composables/useSharedFormViewStore.ts      | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index f6441731e0..8d723d12c0 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -124,11 +124,17 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         {} as Record<string, FormColumnType>,
       )
 
-      columns.value = viewMeta.model?.columns?.map((c) => ({
-        ...c,
-        meta: { ...parseProp(fieldById[c.id].meta), ...parseProp(c.meta) },
-        description: fieldById[c.id].description,
-      }))
+      columns.value = viewMeta.model?.columns?.map((c) => {
+        if (!isSystemColumn(c) && !isVirtualCol(c) && c?.title && c?.cdf) {
+          formState.value[c.title] = c.cdf
+        }
+
+        return {
+          ...c,
+          meta: { ...parseProp(fieldById[c.id].meta), ...parseProp(c.meta) },
+          description: fieldById[c.id].description,
+        }
+      })
 
       const _sharedViewMeta = (viewMeta as any).meta
       sharedViewMeta.value = isString(_sharedViewMeta) ? JSON.parse(_sharedViewMeta) : _sharedViewMeta
@@ -262,7 +268,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   function handlePreFillForm() {
     if (Object.keys(route.query).length && sharedViewMeta.value.preFillEnabled) {
-      columns.value = columns.value?.map((c) => {
+      columns.value = columns.value.map((c) => {
         const queryParam = route.query?.[c.title as string] || route.query?.[encodeURIComponent(c.title as string)]
         if (
           !c.title ||

From 2d2ec98088fadfe088e23171149ed93861e4ecd0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:15 +0000
Subject: [PATCH 35/40] fix(nc-gui): some review comments

---
 .../dlg/share-and-collaborate/SharePage.vue   | 27 +++++++------------
 packages/nc-gui/components/monaco/Editor.vue  | 19 +++++++------
 .../composables/useSharedFormViewStore.ts     |  6 ++---
 3 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
index 33d864eaf1..fafadd37ba 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue
@@ -173,6 +173,13 @@ const formPreFill = computed({
   },
 })
 
+const handleChangeFormPreFill = (value: { preFillEnabled?: boolean; preFilledMode?: PreFilledMode }) => {
+  formPreFill.value = {
+    ...formPreFill.value,
+    ...value,
+  }
+}
+
 function sharedViewUrl() {
   if (!activeView.value) return
 
@@ -412,14 +419,7 @@ watchEffect(() => {})
               :checked="formPreFill.preFillEnabled"
               data-testid="nc-modal-share-view__preFill"
               size="small"
-              @update:checked="
-                (value) => {
-                  formPreFill = {
-                    ...formPreFill,
-                    preFillEnabled: value,
-                  }
-                }
-              "
+              @update:checked="handleChangeFormPreFill({ preFillEnabled: $event as boolean })"
             >
             </a-switch>
           </div>
@@ -429,17 +429,10 @@ watchEffect(() => {})
             :value="formPreFill.preFilledMode"
             class="nc-modal-share-view-preFillMode"
             data-testid="nc-modal-share-view__preFillMode"
-            @update:value="
-              (value) => {
-                formPreFill = {
-                  ...formPreFill,
-                  preFilledMode: value,
-                }
-              }
-            "
+            @update:value="handleChangeFormPreFill({ preFilledMode: $event })"
           >
             <a-radio v-for="mode of Object.values(PreFilledMode)" :key="mode" :value="mode">
-              <div class="flex-1">{{ $t(`activity.preFilledFields.${mode || Default}`) }}</div>
+              <div class="flex-1">{{ $t(`activity.preFilledFields.${mode}`) }}</div>
             </a-radio>
           </a-radio-group>
         </div>
diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index 06ad6884b7..e0675d21c7 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -12,18 +12,17 @@ interface Props {
   validate?: boolean
   disableDeepCompare?: boolean
   readOnly?: boolean
-  autoFocus: boolean
+  autoFocus?: boolean
 }
 
-const {
-  hideMinimap,
-  lang = 'json',
-  validate = true,
-  disableDeepCompare = false,
-  modelValue,
-  readOnly,
-  autoFocus = true,
-} = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  lang: 'json',
+  validate: true,
+  disableDeepCompare: false,
+  autoFocus: true,
+})
+
+const { hideMinimap, lang, validate, disableDeepCompare, modelValue, readOnly, autoFocus } = props
 
 const emits = defineEmits(['update:modelValue'])
 
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 8d723d12c0..b393f6b07f 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -267,9 +267,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   }
 
   function handlePreFillForm() {
-    if (Object.keys(route.query).length && sharedViewMeta.value.preFillEnabled) {
-      columns.value = columns.value.map((c) => {
-        const queryParam = route.query?.[c.title as string] || route.query?.[encodeURIComponent(c.title as string)]
+    if (Object.keys(route.query || {}).length && sharedViewMeta.value.preFillEnabled) {
+      columns.value = (columns.value || []).map((c) => {
+        const queryParam = route.query[c.title as string] || route.query[encodeURIComponent(c.title as string)]
         if (
           !c.title ||
           !queryParam ||

From 3ee5e52f60eaa9834cb470ffe6e654ffba929827 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:15 +0000
Subject: [PATCH 36/40] fix(nc-gui): use math.max instead of ternary operator

---
 packages/nc-gui/composables/useSharedFormViewStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index b393f6b07f..5b73724a06 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -384,7 +384,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
       case UITypes.Rating: {
         if (!isNaN(Number(value))) {
-          preFillValue = Number(value) > parseProp(c.meta).max ? parseProp(c.meta).max : Number(value)
+          preFillValue = Math.min(Math.max(Number(value), 0), parseProp(c.meta).max ?? 5)
         }
         break
       }

From 62220705de32d51d550f5f7e0ff7df6954efc36b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:15 +0000
Subject: [PATCH 37/40] fix(nc-gui): add condition to check default value

---
 packages/nc-gui/components/monaco/Editor.vue  |  4 ++--
 .../nc-gui/components/smartsheet/Form.vue     |  2 +-
 .../composables/useSharedFormViewStore.ts     | 20 +++++++++++++++----
 packages/nc-gui/utils/dataUtils.ts            |  4 ++--
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/monaco/Editor.vue b/packages/nc-gui/components/monaco/Editor.vue
index e0675d21c7..706f700e9a 100644
--- a/packages/nc-gui/components/monaco/Editor.vue
+++ b/packages/nc-gui/components/monaco/Editor.vue
@@ -22,10 +22,10 @@ const props = withDefaults(defineProps<Props>(), {
   autoFocus: true,
 })
 
-const { hideMinimap, lang, validate, disableDeepCompare, modelValue, readOnly, autoFocus } = props
-
 const emits = defineEmits(['update:modelValue'])
 
+const { hideMinimap, lang, validate, disableDeepCompare, modelValue, readOnly, autoFocus } = props
+
 const vModel = computed<string>({
   get: () => {
     if (typeof modelValue === 'object') {
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 58f42723db..30bb06f06b 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1466,7 +1466,7 @@ useEventListener(
                             <SmartsheetHeaderCellIcon v-else :column-meta="field" />
                             <div class="flex-1 flex items-center justify-start max-w-[calc(100%_-_68px)] mr-4">
                               <div class="w-full flex items-center">
-                                <div class="ml-1 inline-block max-w-1/2">
+                                <div class="ml-1 inline-flex" :class="field.label?.trim() ? 'max-w-1/2' : 'max-w-[95%]'">
                                   <NcTooltip class="truncate text-sm" :disabled="drag" show-on-truncate-only>
                                     <template #title>
                                       <div class="text-center">
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 5b73724a06..ee76defc11 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -97,7 +97,11 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     helpers.withMessage(t('msg.error.fieldRequired', { value: fieldName }), required)
 
   const formColumns = computed(() =>
-    columns.value?.filter((c) => c.show).filter((col) => !isSystemColumn(col) && (!isVirtualCol(col) || isLinksOrLTAR(col.uidt))),
+    columns.value
+      ?.filter((c) => c.show)
+      .filter(
+        (col) => !isSystemColumn(col) && col.uidt !== UITypes.SpecificDBType && (!isVirtualCol(col) || isLinksOrLTAR(col.uidt)),
+      ),
   )
 
   const loadSharedView = async () => {
@@ -125,7 +129,15 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       )
 
       columns.value = viewMeta.model?.columns?.map((c) => {
-        if (!isSystemColumn(c) && !isVirtualCol(c) && c?.title && c?.cdf) {
+        if (
+          !isSystemColumn(c) &&
+          !isVirtualCol(c) &&
+          !isAttachment(c) &&
+          c.uidt !== UITypes.SpecificDBType &&
+          c?.title &&
+          c?.cdf &&
+          !/^\w+\(\)|CURRENT_TIMESTAMP$/.test(c.cdf)
+        ) {
           formState.value[c.title] = c.cdf
         }
 
@@ -275,8 +287,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
           !queryParam ||
           isSystemColumn(c) ||
           isVirtualCol(c) ||
-          // (isVirtualCol(c) && !isLinksOrLTAR(c)) || // Todo: Enable this after linksOrLTAR prefill supported
-          isAttachment(c)
+          isAttachment(c) ||
+          c.uidt === UITypes.SpecificDBType
         ) {
           return c
         }
diff --git a/packages/nc-gui/utils/dataUtils.ts b/packages/nc-gui/utils/dataUtils.ts
index d5eb9a029e..afde59faab 100644
--- a/packages/nc-gui/utils/dataUtils.ts
+++ b/packages/nc-gui/utils/dataUtils.ts
@@ -102,9 +102,9 @@ export const rowDefaultData = (columns: ColumnType[] = []) => {
     if (
       !isSystemColumn(col) &&
       !isVirtualCol(col) &&
-      !isLinksOrLTAR({ uidt: col.uidt! }) &&
       ![UITypes.Rollup, UITypes.Lookup, UITypes.Formula, UITypes.Barcode, UITypes.QrCode].includes(col.uidt) &&
-      col?.cdf
+      col?.cdf &&
+      !/^\w+\(\)|CURRENT_TIMESTAMP$/.test(col.cdf)
     ) {
       const defaultValue = col.cdf
       acc[col.title!] = typeof defaultValue === 'string' ? defaultValue.replace(/^'/, '').replace(/'$/, '') : defaultValue

From 61400e7a5c6f13ac94497376cceddfda7d9f1cff Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:15 +0000
Subject: [PATCH 38/40] chore(nc-gui): lint

---
 packages/nc-gui/utils/dataUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/dataUtils.ts b/packages/nc-gui/utils/dataUtils.ts
index afde59faab..939ce369f7 100644
--- a/packages/nc-gui/utils/dataUtils.ts
+++ b/packages/nc-gui/utils/dataUtils.ts
@@ -1,4 +1,4 @@
-import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import { RelationTypes, UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { isColumnRequiredAndNull } from './columnUtils'
 import type { Row } from '~/lib'

From 9ce9d4d5ecaf9170ef6eeec64f126c4891162aa9 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:16 +0000
Subject: [PATCH 39/40] fix(nc-gui): focus form element only in tab press

---
 packages/nc-gui/components/smartsheet/Form.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 30bb06f06b..f3ec311e57 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1825,10 +1825,10 @@ useEventListener(
 .nc-form-field-ghost {
   @apply bg-gray-50;
 }
-:deep(.nc-form-input-required + button):focus {
+:deep(.nc-form-input-required + button):focus-visible {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
 }
-:deep(.nc-form-switch-focus):focus {
+:deep(.nc-form-switch-focus):focus-visible {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
 }
 .nc-form-field-layout {
@@ -1839,7 +1839,7 @@ useEventListener(
     .ant-radio {
       @apply !top-0;
 
-      &:focus-within .ant-radio-inner {
+      .ant-radio-input:focus-visible + .ant-radio-inner {
         box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
       }
     }
@@ -1847,12 +1847,9 @@ useEventListener(
 }
 
 .nc-form-wrapper {
-  .ant-switch:focus,
-  .ant-switch-checked:focus {
+  .ant-switch:focus-visible,
+  .ant-switch-checked:focus-visible {
     box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
-    &:hover {
-      box-shadow: none;
-    }
   }
 }
 </style>

From e906874a41d1ae639be59ceb8355e8b4ec805ad1 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 9 Mar 2024 11:51:16 +0000
Subject: [PATCH 40/40] fix(nc-gui): add bg gray color for form field settings
 part

---
 packages/nc-gui/components/smartsheet/Form.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index f3ec311e57..d44cf5d982 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -1088,7 +1088,7 @@ useEventListener(
                         </div>
 
                         <!-- Field Header  -->
-                        <div v-if="activeRow === element.title" class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50">
+                        <div v-if="activeRow === element.title" class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50 border-b-1 border-gray-200">
                           <component
                             :is="iconMap.drag"
                             class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600"
@@ -1241,7 +1241,7 @@ useEventListener(
                         <!-- Field Settings  -->
                         <div
                           v-if="activeRow === element.title && isSelectTypeCol(element.uidt)"
-                          class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3"
+                          class="nc-form-field-settings border-t border-gray-200 p-4 lg:p-6 flex flex-col gap-3 bg-gray-50"
                         >
                           <!-- Layout  -->
                           <div v-if="isSelectTypeCol(element.uidt)">
@@ -1263,7 +1263,7 @@ useEventListener(
                           </div>
                           <!-- Todo: Show on conditions,... -->
                           <!-- eslint-disable vue/no-constant-condition -->
-                          <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
+                          <div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
                             <a-switch v-e="['a:form-view:field:show-on-condition']" size="small" class="nc-form-switch-focus" />
                             <div>
                               <div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
@@ -1272,7 +1272,7 @@ useEventListener(
                           </div>
 
                           <!-- Limit options -->
-                          <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
+                          <div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg bg-white">
                             <div class="flex items-center gap-3">
                               <a-switch
                                 v-model:checked="element.meta.isLimitOption"
@@ -1835,7 +1835,7 @@ useEventListener(
   @apply !flex !items-center w-full space-x-3;
 
   :deep(.ant-radio-wrapper) {
-    @apply border-1 border-gray-200 rounded-lg !py-2 !px-3 basis-full !mr-0 !items-center;
+    @apply border-1 border-gray-200 rounded-lg !py-2 !px-3 basis-full !mr-0 !items-center bg-white;
     .ant-radio {
       @apply !top-0;