fix(gui-v2): validation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/cell/attachment/index.vue

@@ -4,7 +4,16 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch, useSmartsheetRowStoreOrThrow } from '#imports'
+import {
+  computed,
+  isImage,
+  openLink,
+  ref,
+  useDropZone,
+  useSmartsheetRowStoreOrThrow,
+  useSmartsheetStoreOrThrow,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null
@@ -23,8 +32,19 @@ const sortableRef = ref<HTMLDivElement>()
 
 const { cellRefs } = useSmartsheetStoreOrThrow()!
 
-const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly,   storedFilesRefs, } =
+const {
-  useProvideAttachmentCell(updateModelValue)
+  column,
+  modalVisible,
+  attachments,
+  visibleItems,
+  onDrop,
+  isLoading,
+  open,
+  FileIcon,
+  selectedImage,
+  isReadonly,
+  storedFilesRefs,
+} = useProvideAttachmentCell(updateModelValue)
 
 const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
 

packages/nc-gui-v2/components/cell/attachment/utils.ts

@@ -10,7 +10,6 @@ import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
 import MdiFileExcelOutline from '~icons/mdi/file-excel-outline'
 import IcOutlineInsertDriveFile from '~icons/ic/outline-insert-drive-file'
 
-
 interface AttachmentProps {
   data?: any
   file: File
@@ -172,7 +171,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       downloadFile,
       updateModelValue,
       selectedImage,
-      storedFilesRefs
+      storedFilesRefs,
     }
   },
   'useAttachmentCell',

packages/nc-gui-v2/components/shared-view/Form.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { ref, useProvideSmartsheetRowStore, useSharedFormStoreOrThrow } from '#imports'
+import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedView, submitForm, v$, formState, notFound, formColumns, meta } = useSharedFormStoreOrThrow()
+const { sharedView, submitForm, v$, formState, notFound, formColumns, meta, submitted, secondsRemain } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -20,14 +20,6 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
   return required || (columnObj && columnObj.rqd && !columnObj.cdf)
 }
 
-const { state: additionalState } = useProvideSmartsheetRowStore(
-  meta,
-  ref({
-    row: formState,
-    rowMeta: { new: true },
-    oldRow: {},
-  }),
-)
 </script>
 
 <template>
@@ -38,22 +30,21 @@ const { state: additionalState } = useProvideSmartsheetRowStore(
     <div class="m-4 mt-2 bg-white rounded p-2 flex-1">
       <a-alert v-if="notFound" type="warning" class="mx-auto mt-10 max-w-[300px]" message="Not found"> </a-alert>
 
-      <template v-if="submitted">
+      <template v-else-if="submitted">
-        <div class="lex justify-center">
+        <div class="flex justify-center">
-          <div v-if="sharedView" style="min-width: 350px">
+          <div v-if="sharedView" style="min-width: 350px" class="mt-3">
-            <a-alert type="success" outlined>
+            <a-alert type="success" outlined :message="sharedView.success_msg || 'Successfully submitted form data'">
-              <span class="title">{{ sharedView.success_msg || 'Successfully submitted form data' }}</span>
             </a-alert>
             <p v-if="sharedView.show_blank_form" class="text-xs text-gray-500 text-center">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
             <div v-if="sharedView.submit_another_form" class="text-center">
-              <v-btn color="primary" @click="submitted = false"> Submit Another Form</v-btn>
+              <a-btn color="primary" @click="submitted = false"> Submit Another Form</a-btn>
             </div>
           </div>
         </div>
       </template>
-      <div v-if="sharedView" class="">
+      <div v-else-if="sharedView" class="">
         <a-row class="justify-center">
           <a-col :md="20">
             <div>
@@ -96,10 +87,10 @@ const { state: additionalState } = useProvideSmartsheetRowStore(
                           />
                         </div>
                         <div v-if="isVirtualCol(field)" class="mt-0">
-                          <SmartsheetVirtualCell  class="mt-0 nc-input" :column="field" />
+                          <SmartsheetVirtualCell class="mt-0 nc-input" :column="field" />
                           <div
                             v-if="
-                              v$.virtual?.$dirty && (!v$.virtual?.[col.title]?.required || !v$.virtual?.[col.title]?.minLength)
+                              v$.virtual?.$dirty && (!v$.virtual?.[field.title]?.required || !v$.virtual?.[field.title]?.minLength)
                             "
                             class="text-xs text-red-500"
                           >

packages/nc-gui-v2/composables/useSharedFormViewStore.ts

@@ -4,6 +4,7 @@ import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg } from '~/utils'
+import {useInjectionState} from '#imports'
 
 const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() => {
   const progress = ref(false)
@@ -11,6 +12,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   const showPasswordModal = ref(false)
   const submitted = ref(false)
   const password = ref(null)
+  const secondsRemain = ref(null)
 
   // todo: type
   const sharedView = ref<any>()
@@ -21,6 +23,17 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
   const { metas, setMeta } = useMetas()
   const formState = ref({})
 
+
+
+  const { state: additionalState } = useProvideSmartsheetRowStore(
+    meta,
+    ref({
+      row: formState,
+      rowMeta: { new: true },
+      oldRow: {},
+    }),
+  )
+
   const formColumns = computed(
     () =>
       columns?.value
@@ -86,18 +99,13 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
       }
     }
 
-    console.log(obj)
     return obj
   })
 
-  const v$ = useVuelidate(validators, { localState: formState, virtual: {} })
+  const v$ = useVuelidate(validators, computed(() => ({ localState: formState?.value, virtual: additionalState?.value })))
 
   const submitForm = async (formState: Record<string, any>, additionalState: Record<string, any>) => {
     try {
-      // if (this.$v.localState.$invalid || this.$v.virtual.$invalid) {
-      //   this.$toast.error('Provide values of all required field').goAway(3000);
-      //   return;
-      // }
       if (!(await v$.value?.$validate())) {
         return
       }
@@ -125,10 +133,12 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState(() =>
         },
       )
 
+      submitted.value = true
       progress.value = false
       await message.success(sharedView.value.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
+      throw e
       await message.error(await extractSdkResponseErrorMsg(e))
     }
     progress.value = false

packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue

@@ -6,15 +6,14 @@ import { ActiveViewInj, FieldsInj, IsFormInj, IsPublicInj, MetaInj, ReloadViewDa
 import { createEventHook, definePageMeta, provide, ref, useProvideSmartsheetStore, useRoute } from '#imports'
 
 definePageMeta({
-  requiresAuth: false,
+  requiresAuth: false
-  layout: 'false',
 })
 
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 
-const { loadSharedView, sharedView, meta, columns, notFound, formColumns } = useProvideSharedFormStore()
+const { loadSharedView, sharedView, meta, notFound, formColumns } = useProvideSharedFormStore()
 
 await loadSharedView(route.params.viewId as string)
 if (!notFound.value) {
@@ -25,7 +24,7 @@ if (!notFound.value) {
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
-  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>)
 }
 </script>