Browse Source

refactor(gui-v2): use proper type

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3188/head
Pranav C 2 years ago
parent
commit
255b691053
  1. 16
      packages/nc-gui-v2/components/shared-view/Form.vue
  2. 15
      packages/nc-gui-v2/composables/useSharedFormViewStore.ts

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

@ -3,7 +3,7 @@ import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { useSharedFormStoreOrThrow } from '#imports' import { useSharedFormStoreOrThrow } from '#imports'
const { const {
sharedView, sharedFormView,
submitForm, submitForm,
v$, v$,
formState, formState,
@ -43,19 +43,19 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<template v-else-if="submitted"> <template v-else-if="submitted">
<div class="flex justify-center"> <div class="flex justify-center">
<div v-if="sharedView.view" style="min-width: 350px" class="mt-3"> <div v-if="sharedFormView" style="min-width: 350px" class="mt-3">
<a-alert type="success" outlined :message="sharedView.view.success_msg || 'Successfully submitted form data'"> <a-alert type="success" outlined :message="sharedFormView.success_msg || 'Successfully submitted form data'">
</a-alert> </a-alert>
<p v-if="sharedView.view.show_blank_form" class="text-xs text-gray-500 text-center my-4"> <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds New form will be loaded after {{ secondsRemain }} seconds
</p> </p>
<div v-if="sharedView.view.submit_another_form" class="text-center"> <div v-if="sharedFormView.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button> <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<div v-else-if="sharedView" class=""> <div v-else-if="sharedFormView" class="">
<a-row class="justify-center"> <a-row class="justify-center">
<a-col :md="20"> <a-col :md="20">
<div> <div>
@ -75,11 +75,11 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded"> <div class="mx-auto nc-form bg-white shadow-lg pa-2 mb-10 max-w-[600px] mx-auto rounded">
<h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1"> <h2 class="mt-4 text-4xl font-weight-bold text-left mx-4 mb-3 px-1">
{{ sharedView.view.heading }} {{ sharedFormView.heading }}
</h2> </h2>
<div class="text-lg text-left mx-4 py-2 px-1 text-gray-500"> <div class="text-lg text-left mx-4 py-2 px-1 text-gray-500">
{{ sharedView.view.subheading }} {{ sharedFormView.subheading }}
</div> </div>
<div class="h-100"> <div class="h-100">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2"> <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col mt-4 px-4 space-y-2">

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

@ -1,8 +1,9 @@
import useVuelidate from '@vuelidate/core' import useVuelidate from '@vuelidate/core'
import { minLength, required } from '@vuelidate/validators' import { minLength, required } from '@vuelidate/validators'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk' import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk' import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { Ref } from 'vue'
import { SharedViewPasswordInj } from '~/context' import { SharedViewPasswordInj } from '~/context'
import { extractSdkResponseErrorMsg } from '~/utils' import { extractSdkResponseErrorMsg } from '~/utils'
import { useInjectionState, useMetas } from '#imports' import { useInjectionState, useMetas } from '#imports'
@ -17,8 +18,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
provide(SharedViewPasswordInj, password) provide(SharedViewPasswordInj, password)
// todo: type const sharedView = ref<ViewType>()
const sharedView = ref<any>() const sharedFormView = ref<FormType>()
const meta = ref<TableType>() const meta = ref<TableType>()
const columns = ref<(ColumnType & { required?: boolean })[]>() const columns = ref<(ColumnType & { required?: boolean })[]>()
@ -27,7 +28,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
const formState = ref({}) const formState = ref({})
const { state: additionalState } = useProvideSmartsheetRowStore( const { state: additionalState } = useProvideSmartsheetRowStore(
meta, meta as Ref<TableType>,
ref({ ref({
row: formState, row: formState,
rowMeta: { new: true }, rowMeta: { new: true },
@ -51,7 +52,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
const loadSharedView = async () => { const loadSharedView = async () => {
try { try {
// todo: swagger type correction // todo: swagger type correction
const viewMeta: any = await $api.public.sharedViewMetaGet(sharedViewId, { const viewMeta = await $api.public.sharedViewMetaGet(sharedViewId, {
headers: { headers: {
'xc-password': password.value, 'xc-password': password.value,
}, },
@ -60,8 +61,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
passwordDlg.value = false passwordDlg.value = false
sharedView.value = viewMeta sharedView.value = viewMeta
sharedFormView.value = viewMeta.view
meta.value = viewMeta.model meta.value = viewMeta.model
columns.value = viewMeta.model.columns columns.value = viewMeta.model?.columns
setMeta(viewMeta.model) setMeta(viewMeta.model)
@ -180,6 +182,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
return { return {
sharedView, sharedView,
sharedFormView,
loadSharedView, loadSharedView,
columns, columns,
submitForm, submitForm,

Loading…
Cancel
Save