From bc8db8e619e234a43c6c7c49071e444a323aeec0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 20 Mar 2023 18:19:58 +0800
Subject: [PATCH 01/18] enhancement(nc-gui): make email input full width

---
 packages/nc-gui/components/cell/Email.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index de25a13451..f0cbf7553b 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -30,7 +30,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     v-if="editEnabled"
     :ref="focus"
     v-model="vModel"
-    class="outline-none text-sm px-2"
+    class="w-full outline-none text-sm px-2"
     @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop

From 10ef74af65d58042dbf5d507d4404dd412459b3c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 20 Mar 2023 18:49:55 +0800
Subject: [PATCH 02/18] enhancement(nc-gui): email validation in form view

---
 .../nc-gui/components/smartsheet/Form.vue     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 0171c83a76..6edfc320d4 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -23,6 +23,7 @@ import {
   useUIPermission,
   useViewColumns,
   useViewData,
+  validateEmail,
   watch,
 } from '#imports'
 import type { Permission } from '~/lib'
@@ -101,6 +102,25 @@ const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
 
+const formRules = {
+  email: [
+    {
+      validator: (rule: any, value: string, callback: (errMsg?: string) => void) => {
+        if (!value || value.length === 0) {
+          callback('Email is required')
+          return
+        }
+        const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e))
+        if (invalidEmails.length > 0) {
+          callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `)
+        } else {
+          callback()
+        }
+      },
+    },
+  ],
+}
+
 const updateView = useDebounceFn(
   () => {
     if ((formViewData.value?.subheading?.length || 0) > 255) {
@@ -719,6 +739,7 @@ watch(view, (nextView) => {
                         required: isRequired(element, element.required),
                         message: `${element.label || element.title} is required`,
                       },
+                      ...(element.uidt === UITypes.Email && formRules.email),
                     ]"
                   >
                     <LazySmartsheetCell

From babc6ac8fa9b5e1f67d92f07ef7a795dd976e340 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 20 Mar 2023 19:00:38 +0800
Subject: [PATCH 03/18] feat(nc-gui): add emailValidator

---
 packages/nc-gui/utils/validation.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/nc-gui/utils/validation.ts b/packages/nc-gui/utils/validation.ts
index fb1c50ea41..6b13e62fd1 100644
--- a/packages/nc-gui/utils/validation.ts
+++ b/packages/nc-gui/utils/validation.ts
@@ -173,3 +173,20 @@ export const extraParameterValidator = {
     })
   },
 }
+
+export const emailValidator = {
+  validator: (_: unknown, value: string) => {
+    return new Promise((resolve, reject) => {
+      if (!value || value.length === 0) {
+        return reject(new Error('Email is required'))
+      }
+      const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e))
+      if (invalidEmails.length > 0) {
+        return reject(
+          new Error(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `),
+        )
+      }
+      return resolve(true)
+    })
+  },
+}

From 72ac86e7d8f57043117017b818aa95a113ee404a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 20 Mar 2023 19:11:00 +0800
Subject: [PATCH 04/18] refactor(nc-gui): use emailValidator

---
 .../nc-gui/components/account/UsersModal.vue  | 20 +++----------------
 .../nc-gui/components/smartsheet/Form.vue     | 19 ++----------------
 .../tabs/auth/user-management/UsersModal.vue  | 20 +++----------------
 3 files changed, 8 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index ac5a7f65da..e8f56d437e 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -4,6 +4,7 @@ import type { OrgUserReqType } from 'nocodb-sdk'
 import {
   Form,
   computed,
+  emailValidator,
   extractSdkResponseErrorMsg,
   message,
   ref,
@@ -11,7 +12,6 @@ import {
   useDashboard,
   useI18n,
   useNuxtApp,
-  validateEmail,
 } from '#imports'
 import type { User } from '~/lib'
 import { Role } from '~/lib'
@@ -44,24 +44,10 @@ const usersData = $ref<Users>({ emails: '', role: Role.OrgLevelViewer, invitatio
 const formRef = ref()
 
 const useForm = Form.useForm
+
 const validators = computed(() => {
   return {
-    emails: [
-      {
-        validator: (rule: any, value: string, callback: (errMsg?: string) => void) => {
-          if (!value || value.length === 0) {
-            callback('Email is required')
-            return
-          }
-          const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e))
-          if (invalidEmails.length > 0) {
-            callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `)
-          } else {
-            callback()
-          }
-        },
-      },
-    ],
+    emails: [emailValidator],
   }
 })
 
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 6edfc320d4..35f17c863b 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -9,6 +9,7 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
+  emailValidator,
   extractSdkResponseErrorMsg,
   inject,
   message,
@@ -23,7 +24,6 @@ import {
   useUIPermission,
   useViewColumns,
   useViewData,
-  validateEmail,
   watch,
 } from '#imports'
 import type { Permission } from '~/lib'
@@ -103,22 +103,7 @@ const { t } = useI18n()
 const { betaFeatureToggleState } = useBetaFeatureToggle()
 
 const formRules = {
-  email: [
-    {
-      validator: (rule: any, value: string, callback: (errMsg?: string) => void) => {
-        if (!value || value.length === 0) {
-          callback('Email is required')
-          return
-        }
-        const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e))
-        if (invalidEmails.length > 0) {
-          callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `)
-        } else {
-          callback()
-        }
-      },
-    },
-  ],
+  email: [emailValidator],
 }
 
 const updateView = useDebounceFn(
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 400a0058c2..18f6c0fbf4 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -4,6 +4,7 @@ import type { ProjectUserReqType } from 'nocodb-sdk'
 import {
   Form,
   computed,
+  emailValidator,
   extractSdkResponseErrorMsg,
   message,
   onMounted,
@@ -17,7 +18,6 @@ import {
   useI18n,
   useNuxtApp,
   useProject,
-  validateEmail,
 } from '#imports'
 import type { User } from '~/lib'
 import { ProjectRole } from '~/lib'
@@ -54,24 +54,10 @@ let usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invit
 const formRef = ref()
 
 const useForm = Form.useForm
+
 const validators = computed(() => {
   return {
-    emails: [
-      {
-        validator: (rule: any, value: string, callback: (errMsg?: string) => void) => {
-          if (!value || value.length === 0) {
-            callback('Email is required')
-            return
-          }
-          const invalidEmails = (value || '').split(/\s*,\s*/).filter((e: string) => !validateEmail(e))
-          if (invalidEmails.length > 0) {
-            callback(`${invalidEmails.length > 1 ? ' Invalid emails:' : 'Invalid email:'} ${invalidEmails.join(', ')} `)
-          } else {
-            callback()
-          }
-        },
-      },
-    ],
+    emails: [emailValidator],
   }
 })
 

From 51fb8d19d640b164ced5d435fe608eb980b1fc3a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 20 Mar 2023 19:34:56 +0800
Subject: [PATCH 05/18] feat(nc-gui): add error.invalidEmail

---
 packages/nc-gui/lang/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c309782e21..e812074a03 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -698,6 +698,7 @@
         "allowedSpecialCharList": "Allowed special character list"
       },
       "invalidURL": "Invalid URL",
+      "invalidEmail": "Invalid Email",
       "internalError": "Some internal error occurred",
       "templateGeneratorNotFound": "Template Generator cannot be found!",
       "fileUploadFailed": "Failed to upload file",

From 3ef96ea8c04426c1341c7e1dad860866dad2fc61 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 20 Mar 2023 19:39:09 +0800
Subject: [PATCH 06/18] fix(nc-gui): avoid sending request with invalid email

---
 packages/nc-gui/components/cell/Email.vue | 39 ++++++++++++++++++-----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index f0cbf7553b..c26e981813 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -1,28 +1,51 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, computed, inject, useVModel, validateEmail } from '#imports'
+import { EditModeInj, computed, inject, useI18n, validateEmail } from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
 }
 
-interface Emits {
-  (event: 'update:modelValue', model: string): void
-}
+const { modelValue: value } = defineProps<Props>()
 
-const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
 
-const emits = defineEmits<Emits>()
+const { t } = useI18n()
 
 const { showNull } = useGlobal()
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
+
+const column = inject(ColumnInj)!
 
-const vModel = useVModel(props, 'modelValue', emits)
+// Used in the logic of when to display error since we are not storing the email if it's not valid
+const localState = ref(value)
+
+const vModel = computed({
+  get: () => value,
+  set: (val) => {
+    localState.value = val
+    if (!parseProp(column.value.meta)?.validate || (val && validateEmail(val)) || !val) {
+      emit('update:modelValue', val)
+    }
+  },
+})
 
 const validEmail = computed(() => vModel.value && validateEmail(vModel.value))
 
 const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
+
+watch(
+  () => editEnabled.value,
+  () => {
+    if (parseProp(column.value.meta)?.validate && !editEnabled.value && localState.value && !validateEmail(localState.value)) {
+      message.error(t('msg.error.invalidEmail'))
+      localState.value = undefined
+      return
+    }
+    localState.value = value
+  },
+)
 </script>
 
 <template>

From 07698b9e381d7012136933d3a825a25ae2448a9b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 00:50:33 +0800
Subject: [PATCH 07/18] fix(nc-gui): validation for email and url

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

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 35f17c863b..2ec33de29c 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -102,10 +102,6 @@ const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
 
-const formRules = {
-  email: [emailValidator],
-}
-
 const updateView = useDebounceFn(
   () => {
     if ((formViewData.value?.subheading?.length || 0) > 255) {
@@ -386,6 +382,8 @@ watch(view, (nextView) => {
     reloadEventHook.trigger()
   }
 })
+
+const editEnabled = ref({})
 </script>
 
 <template>
@@ -724,7 +722,6 @@ watch(view, (nextView) => {
                         required: isRequired(element, element.required),
                         message: `${element.label || element.title} is required`,
                       },
-                      ...(element.uidt === UITypes.Email && formRules.email),
                     ]"
                   >
                     <LazySmartsheetCell
@@ -733,7 +730,10 @@ watch(view, (nextView) => {
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"
-                      :edit-enabled="true"
+                      :edit-enabled="editEnabled[index] ?? true"
+                      @click="editEnabled[index] = true"
+                      @cancel="editEnabled[index] = false"
+                      @update:edit-enabled="editEnabled[index] = $event"
                       @click.stop.prevent
                     />
                   </a-form-item>

From fdabe0ed2fdf944214090b03664f3c570f59cf6a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 00:50:48 +0800
Subject: [PATCH 08/18] refactor(nc-gui): revise style in cell for form

---
 packages/nc-gui/components/smartsheet/Cell.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 1a76886aa6..c28fb5ba7b 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -66,7 +66,7 @@ const column = toRef(props, 'column')
 
 const active = toRef(props, 'active', false)
 
-const readOnly = toRef(props, 'readOnly', undefined)
+const readOnly = toRef(props, 'readOnly', false)
 
 provide(ColumnInj, column)
 
@@ -158,6 +158,7 @@ const onContextmenu = (e: MouseEvent) => {
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm },
       { 'nc-grid-numeric-cell': isGrid && !isForm && isNumericField },
+      { 'h-[40px]': !props.editEnabled && isForm }
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"

From c7117ca341d63afc521830cff53a59914ef80d47 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 11:38:37 +0800
Subject: [PATCH 09/18] fix(nc-gui): editEnabled[index]

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

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 2ec33de29c..e71424ec4f 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -9,7 +9,6 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
-  emailValidator,
   extractSdkResponseErrorMsg,
   inject,
   message,
@@ -98,6 +97,8 @@ const submitted = ref(false)
 
 const activeRow = ref('')
 
+const editEnabled = ref<boolean[]>([])
+
 const { t } = useI18n()
 
 const { betaFeatureToggleState } = useBetaFeatureToggle()
@@ -284,6 +285,8 @@ function setFormData() {
     .sort((a, b) => a.order - b.order)
     .map((c) => ({ ...c, required: !!c.required }))
 
+  editEnabled.value = new Array(localColumns.value.length).fill(false)
+
   systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id)
 
   hiddenColumns.value = col.filter(
@@ -382,8 +385,6 @@ watch(view, (nextView) => {
     reloadEventHook.trigger()
   }
 })
-
-const editEnabled = ref({})
 </script>
 
 <template>
@@ -730,7 +731,7 @@ const editEnabled = ref({})
                       :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
                       :column="element"
-                      :edit-enabled="editEnabled[index] ?? true"
+                      :edit-enabled="editEnabled[index]"
                       @click="editEnabled[index] = true"
                       @cancel="editEnabled[index] = false"
                       @update:edit-enabled="editEnabled[index] = $event"

From f5a58b82e3d37f35b285566c5cc946f90709373f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 11:38:46 +0800
Subject: [PATCH 10/18] chore(nc-gui): lint

---
 packages/nc-gui/components/smartsheet/Cell.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index c28fb5ba7b..811af690e7 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -158,7 +158,7 @@ const onContextmenu = (e: MouseEvent) => {
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm },
       { 'nc-grid-numeric-cell': isGrid && !isForm && isNumericField },
-      { 'h-[40px]': !props.editEnabled && isForm }
+      { 'h-[40px]': !props.editEnabled && isForm },
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"

From bf5d0f19c7b13a6c86266d5671b560d5142d5690 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 12:21:30 +0800
Subject: [PATCH 11/18] fix(playwright): form test logic

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

diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index b04ac3326f..cdade835c9 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -153,6 +153,9 @@ export class FormPage extends BasePage {
 
   async fillForm(param: { field: string; value: string }[]) {
     for (let i = 0; i < param.length; i++) {
+      await this.get()
+        .locator(`[data-testid="nc-form-input-${param[i].field.replace(' ', '')}"]`)
+        .click();
       await this.get()
         .locator(`[data-testid="nc-form-input-${param[i].field.replace(' ', '')}"] >> input`)
         .fill(param[i].value);
@@ -177,9 +180,7 @@ export class FormPage extends BasePage {
     await this.getFormFieldsInputLabel().fill(label);
     await this.getFormFieldsInputHelpText().fill(helpText);
     if (required) {
-      await this.get()
-        .locator(`.nc-form-drag-${field.replace(' ', '')}`)
-        .click();
+      await this.getFormFieldsRequired().click();
     }
     await this.formHeading.click();
   }

From cbf243170340d59fbf6e2d7dd77668d3051f98af Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 12:27:25 +0800
Subject: [PATCH 12/18] fix(playwrights): use adjacent sibling combinator for
 required button

---
 tests/playwright/pages/Dashboard/Form/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts
index cdade835c9..27a672ad72 100644
--- a/tests/playwright/pages/Dashboard/Form/index.ts
+++ b/tests/playwright/pages/Dashboard/Form/index.ts
@@ -64,7 +64,7 @@ export class FormPage extends BasePage {
   }
 
   getFormFieldsRequired() {
-    return this.get().locator('[data-testid="nc-form-input-required"]');
+    return this.get().locator('[data-testid="nc-form-input-required"] + button');
   }
 
   getFormFieldsInputLabel() {

From bab44dae0e32e4680350d5e86781e212a5337e9c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 19:11:19 +0800
Subject: [PATCH 13/18] enhancement(nc-gui): add editEnabled logic for shared
 view

---
 .../pages/[projectType]/form/[viewId]/index/index.vue      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index cf245e418d..013dd23139 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -27,6 +27,8 @@ const scannerIsReady = ref(false)
 
 const showCodeScannerOverlay = ref(false)
 
+const editEnabled = ref<boolean[]>([])
+
 const onLoaded = async () => {
   scannerIsReady.value = true
 }
@@ -161,7 +163,10 @@ const onDecode = async (scannedCodeValue: string) => {
                         :data-testid="`nc-form-input-cell-${field.label || field.title}`"
                         :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
                         :column="field"
-                        :edit-enabled="true"
+                        :edit-enabled="editEnabled[index]"
+                        @click="editEnabled[index] = true"
+                        @cancel="editEnabled[index] = false"
+                        @update:edit-enabled="editEnabled[index] = $event"
                       />
                       <a-button
                         v-if="field.enable_scanner"

From b1a70f3c0ef2c1747d6322605377059aada94866 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 19:11:32 +0800
Subject: [PATCH 14/18] feat(nc-gui): add IsSurveyFormInj

---
 packages/nc-gui/context/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index d64d74ecd0..cb9c99f15c 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -14,6 +14,7 @@ export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['pag
   Symbol('pagination-data-injection')
 export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changePage']> = Symbol('pagination-data-injection')
 export const IsFormInj: InjectionKey<Ref<boolean>> = Symbol('is-form-injection')
+export const IsSurveyFormInj: InjectionKey<Ref<boolean>> = Symbol('is-survey-form-injection')
 export const IsGridInj: InjectionKey<Ref<boolean>> = Symbol('is-grid-injection')
 export const IsGalleryInj: InjectionKey<Ref<boolean>> = Symbol('is-gallery-injection')
 export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injection')

From 9186afd7dc951f4c306c78c6d9fde872da1871f7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 19:11:52 +0800
Subject: [PATCH 15/18] enhancement(nc-gui): allow emit if it is survey form

---
 packages/nc-gui/components/cell/Email.vue | 6 ++++--
 packages/nc-gui/components/cell/Url.vue   | 7 +++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index c26e981813..215c4055de 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VNodeRef } from '@vue/runtime-core'
-import { EditModeInj, computed, inject, useI18n, validateEmail } from '#imports'
+import { EditModeInj, IsSurveyFormInj, computed, inject, useI18n, validateEmail } from '#imports'
 
 interface Props {
   modelValue: string | null | undefined
@@ -21,11 +21,13 @@ const column = inject(ColumnInj)!
 // Used in the logic of when to display error since we are not storing the email if it's not valid
 const localState = ref(value)
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!parseProp(column.value.meta)?.validate || (val && validateEmail(val)) || !val) {
+    if (!parseProp(column.value.meta)?.validate || (val && validateEmail(val)) || !val || isSurveyForm.value) {
       emit('update:modelValue', val)
     }
   },
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 335f307995..26090a07bd 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -4,6 +4,7 @@ import {
   CellUrlDisableOverlayInj,
   ColumnInj,
   EditModeInj,
+  IsSurveyFormInj,
   computed,
   inject,
   isValidURL,
@@ -36,11 +37,13 @@ const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
 // Used in the logic of when to display error since we are not storing the url if it's not valid
 const localState = ref(value)
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!parseProp(column.value.meta)?.validate || (val && isValidURL(val)) || !val) {
+    if (!parseProp(column.value.meta)?.validate || (val && isValidURL(val)) || !val || isSurveyForm.value) {
       emit('update:modelValue', val)
     }
   },
@@ -119,7 +122,7 @@ watch(
 
     <div v-if="column.meta?.validate && !isValid && value?.length && !editEnabled" class="mr-1 w-1/10">
       <a-tooltip placement="top">
-        <template #title> Invalid URL </template>
+        <template #title> {{ t('msg.error.invalidURL') }} </template>
         <div class="flex flex-row items-center">
           <MiCircleWarning class="text-red-400 h-4" />
         </div>

From f8c4c9ca6edef6355e3aa0e83e9e2d5b28f9b708 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 19:12:14 +0800
Subject: [PATCH 16/18] enhancement(nc-gui): revise height css for isSurveyForm

---
 packages/nc-gui/components/smartsheet/Cell.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 811af690e7..6eec5d67c0 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -8,6 +8,7 @@ import {
   IsFormInj,
   IsLockedInj,
   IsPublicInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   inject,
@@ -84,6 +85,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const { currentRow } = useSmartsheetRowStoreOrThrow()
 
 const { sqlUis } = storeToRefs(useProject())
@@ -158,7 +161,7 @@ const onContextmenu = (e: MouseEvent) => {
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       { 'text-blue-600': isPrimary(column) && !props.virtual && !isForm },
       { 'nc-grid-numeric-cell': isGrid && !isForm && isNumericField },
-      { 'h-[40px]': !props.editEnabled && isForm },
+      { 'h-[40px]': !props.editEnabled && isForm && !isSurveyForm },
     ]"
     @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"

From ede69ecdb99d40e1326b09dcd68db2160c4fe24a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 19:12:35 +0800
Subject: [PATCH 17/18] enhancement(nc-gui): validation logic in survey form

---
 .../form/[viewId]/index/survey.vue            | 55 ++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 771edf786c..d50732806e 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -4,15 +4,19 @@ import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { SwipeDirection, breakpointsTailwind } from '@vueuse/core'
 import {
   DropZoneRef,
+  IsSurveyFormInj,
   computed,
+  isValidURL,
   onKeyStroke,
   onMounted,
   provide,
   ref,
   useBreakpoints,
+  useI18n,
   usePointerSwipe,
   useSharedFormStoreOrThrow,
   useStepper,
+  validateEmail,
 } from '#imports'
 
 enum TransitionDirection {
@@ -32,6 +36,8 @@ const { md } = useBreakpoints(breakpointsTailwind)
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView, sharedViewMeta, onReset } =
   useSharedFormStoreOrThrow()
 
+const { t } = useI18n()
+
 const isTransitioning = ref(false)
 
 const transitionName = ref<TransitionDirection>(TransitionDirection.Left)
@@ -40,10 +46,14 @@ const animationTarget = ref<AnimationTarget>(AnimationTarget.ArrowRight)
 
 const isAnimating = ref(false)
 
+const editEnabled = ref<boolean[]>([])
+
 const el = ref<HTMLDivElement>()
 
 provide(DropZoneRef, el)
 
+provide(IsSurveyFormInj, ref(true))
+
 const transitionDuration = computed(() => sharedViewMeta.value.transitionDuration || 50)
 
 const steps = computed(() => {
@@ -64,6 +74,8 @@ const { index, goToPrevious, goToNext, isFirst, isLast, goTo } = useStepper(step
 
 const field = computed(() => formColumns.value?.[index.value])
 
+const columnValidationError = ref(false)
+
 function isRequired(column: ColumnType, required = false) {
   let columnObj = column
   if (
@@ -105,7 +117,29 @@ function animate(target: AnimationTarget) {
   }, transitionDuration.value / 2)
 }
 
+async function validateColumn() {
+  const f = field.value!
+  if (parseProp(f.meta)?.validate && formState.value[f.title!]) {
+    if (f.uidt === UITypes.Email) {
+      if (!validateEmail(formState.value[f.title!])) {
+        columnValidationError.value = true
+        message.error(t('msg.error.invalidEmail'))
+        return false
+      }
+    } else if (f.uidt === UITypes.URL) {
+      if (!isValidURL(formState.value[f.title!])) {
+        columnValidationError.value = true
+        message.error(t('msg.error.invalidURL'))
+        return false
+      }
+    }
+  }
+  return true
+}
+
 async function goNext(animationTarget?: AnimationTarget) {
+  columnValidationError.value = false
+
   if (isLast.value || submitted.value) return
 
   if (!field.value || !field.value.title) return
@@ -117,6 +151,8 @@ async function goNext(animationTarget?: AnimationTarget) {
     if (!isValid) return
   }
 
+  if (!(await validateColumn())) return
+
   animate(animationTarget || AnimationTarget.ArrowRight)
 
   setTimeout(
@@ -159,9 +195,8 @@ function resetForm() {
   goTo(steps.value[0])
 }
 
-function submit() {
-  if (submitted.value) return
-
+async function submit() {
+  if (submitted.value || !(await validateColumn())) return
   submitForm()
 }
 
@@ -177,7 +212,7 @@ onKeyStroke(['Enter', 'Space'], () => {
   if (isLast.value) {
     submit()
   } else {
-    goNext(AnimationTarget.OkButton)
+    goNext(AnimationTarget.OkButton, true)
   }
 })
 
@@ -263,7 +298,10 @@ onMounted(() => {
                 class="nc-input"
                 :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
-                :edit-enabled="true"
+                :edit-enabled="editEnabled[index]"
+                @click="editEnabled[index] = true"
+                @cancel="editEnabled[index] = false"
+                @update:edit-enabled="editEnabled[index] = $event"
               />
 
               <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
@@ -315,7 +353,7 @@ onMounted(() => {
                     class="bg-opacity-100 scaling-btn flex items-center gap-1"
                     data-testid="nc-survey-form__btn-next"
                     :class="[
-                      v$.localState[field.title]?.$error ? 'after:!bg-gray-100 after:!ring-red-500' : '',
+                      v$.localState[field.title]?.$error || columnValidationError ? 'after:!bg-gray-100 after:!ring-red-500' : '',
                       animationTarget === AnimationTarget.OkButton && isAnimating
                         ? 'transform translate-y-[2px] translate-x-[2px] after:(!ring !ring-accent !ring-opacity-100)'
                         : '',
@@ -327,7 +365,10 @@ onMounted(() => {
                     </Transition>
 
                     <Transition name="slide-right" mode="out-in">
-                      <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 md:text-md" />
+                      <MdiCloseCircleOutline
+                        v-if="v$.localState[field.title]?.$error || columnValidationError"
+                        class="text-red-500 md:text-md"
+                      />
                       <MdiCheck v-else class="text-white md:text-md" />
                     </Transition>
                   </button>

From ab7082cb102c4803d1d16e348fdc0d29eec89005 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 21 Mar 2023 20:15:53 +0800
Subject: [PATCH 18/18] fix(playwright): survey form test

---
 tests/playwright/pages/Dashboard/SurveyForm/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/playwright/pages/Dashboard/SurveyForm/index.ts b/tests/playwright/pages/Dashboard/SurveyForm/index.ts
index e5041872e7..5e1067ecf2 100644
--- a/tests/playwright/pages/Dashboard/SurveyForm/index.ts
+++ b/tests/playwright/pages/Dashboard/SurveyForm/index.ts
@@ -66,6 +66,7 @@ export class SurveyFormPage extends BasePage {
       // press enter key
       await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).press('Enter');
     } else if (param.type === 'DateTime') {
+      await this.get().locator(`[data-testid="nc-survey-form__input-${param.fieldLabel}"] >> input`).click();
       const modal = await this.rootPage.locator('.nc-picker-datetime');
       await expect(modal).toBeVisible();
       await modal.locator('.ant-picker-now-btn').click();