|
|
|
@ -1,4 +1,5 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
|
|
|
|
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk' |
|
|
|
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk' |
|
|
|
import { SwipeDirection } from '@vueuse/core' |
|
|
|
import { SwipeDirection } from '@vueuse/core' |
|
|
|
import { |
|
|
|
import { |
|
|
|
@ -7,16 +8,22 @@ import { |
|
|
|
onKeyStroke, |
|
|
|
onKeyStroke, |
|
|
|
provide, |
|
|
|
provide, |
|
|
|
ref, |
|
|
|
ref, |
|
|
|
|
|
|
|
useEventListener, |
|
|
|
usePointerSwipe, |
|
|
|
usePointerSwipe, |
|
|
|
useSharedFormStoreOrThrow, |
|
|
|
useSharedFormStoreOrThrow, |
|
|
|
useStepper, |
|
|
|
useStepper, |
|
|
|
} from '#imports' |
|
|
|
} from '#imports' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
enum TransitionDirection { |
|
|
|
|
|
|
|
Left = 'left', |
|
|
|
|
|
|
|
Right = 'right', |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow() |
|
|
|
const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow() |
|
|
|
|
|
|
|
|
|
|
|
const isTransitioning = ref(false) |
|
|
|
const isTransitioning = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const transitionName = ref<'left' | 'right'>('left') |
|
|
|
const transitionName = ref<TransitionDirection>(TransitionDirection.Left) |
|
|
|
|
|
|
|
|
|
|
|
const el = ref<HTMLDivElement>() |
|
|
|
const el = ref<HTMLDivElement>() |
|
|
|
|
|
|
|
|
|
|
|
@ -36,36 +43,44 @@ provide(DropZoneRef, el) |
|
|
|
|
|
|
|
|
|
|
|
const steps = computed(() => { |
|
|
|
const steps = computed(() => { |
|
|
|
if (!formColumns.value) return [] |
|
|
|
if (!formColumns.value) return [] |
|
|
|
return formColumns.value.reduce((acc, column) => { |
|
|
|
|
|
|
|
acc.push((column as any).label || column.title) |
|
|
|
return formColumns.value.reduce<string[]>((acc, column) => { |
|
|
|
|
|
|
|
const title = column.label || column.title |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!title) return acc |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
acc.push(title) |
|
|
|
|
|
|
|
|
|
|
|
return acc |
|
|
|
return acc |
|
|
|
}, [] as string[]) |
|
|
|
}, []) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps) |
|
|
|
const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps) |
|
|
|
|
|
|
|
|
|
|
|
const field = computed(() => formColumns.value?.[index.value]) |
|
|
|
const field = computed(() => formColumns.value?.[index.value]) |
|
|
|
|
|
|
|
|
|
|
|
function isRequired(_columnObj: Record<string, any>, required = false) { |
|
|
|
function isRequired(column: ColumnType, required = false) { |
|
|
|
let columnObj = _columnObj |
|
|
|
let columnObj = column |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
columnObj.uidt === UITypes.LinkToAnotherRecord && |
|
|
|
columnObj.uidt === UITypes.LinkToAnotherRecord && |
|
|
|
columnObj.colOptions && |
|
|
|
columnObj.colOptions && |
|
|
|
columnObj.colOptions.type === RelationTypes.BELONGS_TO |
|
|
|
(columnObj.colOptions as { type: RelationTypes }).type === RelationTypes.BELONGS_TO |
|
|
|
) { |
|
|
|
) { |
|
|
|
columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any> |
|
|
|
columnObj = formColumns.value?.find( |
|
|
|
|
|
|
|
(c) => c.id === (columnObj.colOptions as LinkToAnotherRecordType).fk_child_column_id, |
|
|
|
|
|
|
|
) as ColumnType |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf)) |
|
|
|
return required || (columnObj && columnObj.rqd && !columnObj.cdf) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function transition(direction: 'left' | 'right') { |
|
|
|
function transition(direction: TransitionDirection) { |
|
|
|
isTransitioning.value = true |
|
|
|
isTransitioning.value = true |
|
|
|
transitionName.value = direction |
|
|
|
transitionName.value = direction |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
transitionName.value = transitionName.value === 'left' ? 'right' : 'left' |
|
|
|
transitionName.value = |
|
|
|
|
|
|
|
transitionName.value === TransitionDirection.Left ? TransitionDirection.Right : TransitionDirection.Left |
|
|
|
}, 500) |
|
|
|
}, 500) |
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
setTimeout(() => { |
|
|
|
@ -85,7 +100,7 @@ async function goNext() { |
|
|
|
if (!isValid) return |
|
|
|
if (!isValid) return |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
transition('left') |
|
|
|
transition(TransitionDirection.Left) |
|
|
|
|
|
|
|
|
|
|
|
goToNext() |
|
|
|
goToNext() |
|
|
|
} |
|
|
|
} |
|
|
|
@ -93,7 +108,7 @@ async function goNext() { |
|
|
|
async function goPrevious() { |
|
|
|
async function goPrevious() { |
|
|
|
if (isFirst.value) return |
|
|
|
if (isFirst.value) return |
|
|
|
|
|
|
|
|
|
|
|
transition('right') |
|
|
|
transition(TransitionDirection.Right) |
|
|
|
|
|
|
|
|
|
|
|
goToPrevious() |
|
|
|
goToPrevious() |
|
|
|
} |
|
|
|
} |
|
|
|
@ -138,14 +153,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext) |
|
|
|
> |
|
|
|
> |
|
|
|
<div v-if="field && !submitted" class="flex flex-col gap-2"> |
|
|
|
<div v-if="field && !submitted" class="flex flex-col gap-2"> |
|
|
|
<div class="flex nc-form-column-label"> |
|
|
|
<div class="flex nc-form-column-label"> |
|
|
|
<SmartsheetHeaderVirtualCell |
|
|
|
<LazySmartsheetHeaderVirtualCell |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
:column="{ ...field, title: field.label || field.title }" |
|
|
|
:column="{ ...field, title: field.label || field.title }" |
|
|
|
:required="isRequired(field, field.required)" |
|
|
|
:required="isRequired(field, field.required)" |
|
|
|
:hide-menu="true" |
|
|
|
:hide-menu="true" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<SmartsheetHeaderCell |
|
|
|
<LazySmartsheetHeaderCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
:column="{ ...field, title: field.label || field.title }" |
|
|
|
:column="{ ...field, title: field.label || field.title }" |
|
|
|
:required="isRequired(field, field.required)" |
|
|
|
:required="isRequired(field, field.required)" |
|
|
|
@ -154,14 +169,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext) |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<SmartsheetVirtualCell |
|
|
|
<LazySmartsheetVirtualCell |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
v-if="isVirtualCol(field)" |
|
|
|
class="mt-0 nc-input" |
|
|
|
class="mt-0 nc-input" |
|
|
|
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" |
|
|
|
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" |
|
|
|
:column="field" |
|
|
|
:column="field" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<SmartsheetCell |
|
|
|
<LazySmartsheetCell |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
v-model="formState[field.title]" |
|
|
|
v-model="formState[field.title]" |
|
|
|
class="nc-input" |
|
|
|
class="nc-input" |
|
|
|
@ -200,13 +215,13 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext) |
|
|
|
|
|
|
|
|
|
|
|
<a-tooltip |
|
|
|
<a-tooltip |
|
|
|
v-if="!isLast" |
|
|
|
v-if="!isLast" |
|
|
|
placement="left" |
|
|
|
placement="bottom" |
|
|
|
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'" |
|
|
|
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'" |
|
|
|
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1" |
|
|
|
:mouse-enter-delay="0.2" |
|
|
|
:mouse-leave-delay="0" |
|
|
|
:mouse-leave-delay="0" |
|
|
|
> |
|
|
|
> |
|
|
|
<button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext"> |
|
|
|
<button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext"> |
|
|
|
<TransitionGroup name="layout"> |
|
|
|
<TransitionGroup name="slide-left" mode="out-in"> |
|
|
|
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" /> |
|
|
|
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" /> |
|
|
|
<MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" /> |
|
|
|
<MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" /> |
|
|
|
</TransitionGroup> |
|
|
|
</TransitionGroup> |
|
|
|
|
braks
2 years ago
committed by
Raju Udava