Browse Source

fix(gui-v2): validation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3188/head
Pranav C 2 years ago
parent
commit
29485a0d71
  1. 26
      packages/nc-gui-v2/components/cell/attachment/index.vue
  2. 3
      packages/nc-gui-v2/components/cell/attachment/utils.ts
  3. 27
      packages/nc-gui-v2/components/shared-view/Form.vue
  4. 22
      packages/nc-gui-v2/composables/useSharedFormViewStore.ts
  5. 7
      packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue

26
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}`))

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

27
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>
@ -99,7 +90,7 @@ const { state: additionalState } = useProvideSmartsheetRowStore(
<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"
>

22
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

7
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>

Loading…
Cancel
Save