From 29485a0d71d4e2f45f595fe47bea7020fcd34cbe Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 17 Aug 2022 02:16:06 +0530
Subject: [PATCH] fix(gui-v2): validation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      | 26 +++++++++++++++--
 .../components/cell/attachment/utils.ts       |  3 +-
 .../nc-gui-v2/components/shared-view/Form.vue | 29 +++++++------------
 .../composables/useSharedFormViewStore.ts     | 22 ++++++++++----
 .../pages/[projectType]/form/[viewId].vue     |  7 ++---
 5 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 28912f4314..10133de3a2 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/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, } =
-  useProvideAttachmentCell(updateModelValue)
+const {
+  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}`))
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index e6a0c450d5..63089f28b9 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/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',
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 9bd81515cc..d9cb2b6c9b 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/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">
-        <div class="lex justify-center">
-          <div v-if="sharedView" style="min-width: 350px">
-            <a-alert type="success" outlined>
-              <span class="title">{{ sharedView.success_msg || 'Successfully submitted form data' }}</span>
+      <template v-else-if="submitted">
+        <div class="flex justify-center">
+          <div v-if="sharedView" style="min-width: 350px" class="mt-3">
+            <a-alert type="success" outlined :message="sharedView.success_msg || 'Successfully submitted form data'">
             </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"
                           >
diff --git a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts b/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
index aa423dff48..9519e2870a 100644
--- a/packages/nc-gui-v2/composables/useSharedFormViewStore.ts
+++ b/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
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index 56753cff65..454aa65415 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/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,
-  layout: 'false',
+  requiresAuth: 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>