fix(gui-v2): validation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · 29485a0d71
5 changed files with 53 additions and 34 deletions
--- 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}`))

--- 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',
--- 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"
                          >
--- 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
--- 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>