Browse Source

feat(nc-gui): add swipe page navigation to survey

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
commit
0a05ad1e76
  1. 57
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

57
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -1,30 +1,38 @@
<script lang="ts" setup> <script lang="ts" setup>
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk' import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { SwipeDirection } from '@vueuse/core'
import { import {
DropZoneRef, DropZoneRef,
computed, computed,
onKeyStroke, onKeyStroke,
provide, provide,
ref, ref,
useEventListener, usePointerSwipe,
useSharedFormStoreOrThrow, useSharedFormStoreOrThrow,
useStepper, useStepper,
} from '#imports' } from '#imports'
const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow() const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
function isRequired(_columnObj: Record<string, any>, required = false) { const isTransitioning = ref(false)
let columnObj = _columnObj
if (
columnObj.uidt === UITypes.LinkToAnotherRecord &&
columnObj.colOptions &&
columnObj.colOptions.type === RelationTypes.BELONGS_TO
) {
columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
}
return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf)) const transitionName = ref<'left' | 'right'>('left')
}
const el = ref<HTMLDivElement>()
const { direction } = usePointerSwipe(el, {
onSwipe: () => {
if (isTransitioning.value) return
if (direction.value === SwipeDirection.LEFT) {
goNext()
} else if (direction.value === SwipeDirection.RIGHT) {
goPrevious()
}
},
})
provide(DropZoneRef, el)
const steps = computed(() => { const steps = computed(() => {
if (!formColumns.value) return [] if (!formColumns.value) return []
@ -37,17 +45,22 @@ const steps = computed(() => {
const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps) const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
const isTransitioning = ref(false)
const transitionName = ref<'left' | 'right'>('left')
const field = computed(() => formColumns.value?.[index.value]) const field = computed(() => formColumns.value?.[index.value])
const el = ref<HTMLDivElement>() function isRequired(_columnObj: Record<string, any>, required = false) {
let columnObj = _columnObj
if (
columnObj.uidt === UITypes.LinkToAnotherRecord &&
columnObj.colOptions &&
columnObj.colOptions.type === RelationTypes.BELONGS_TO
) {
columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
}
provide(DropZoneRef, el) return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
}
const transition = (direction: 'left' | 'right') => { function transition(direction: 'left' | 'right') {
isTransitioning.value = true isTransitioning.value = true
transitionName.value = direction transitionName.value = direction
@ -60,7 +73,7 @@ const transition = (direction: 'left' | 'right') => {
}, 1000) }, 1000)
} }
const goNext = async () => { async function goNext() {
if (isLast.value) return if (isLast.value) return
if (!field.value || !field.value.title) return if (!field.value || !field.value.title) return
@ -77,7 +90,7 @@ const goNext = async () => {
goToNext() goToNext()
} }
const goPrevious = async () => { async function goPrevious() {
if (isFirst.value) return if (isFirst.value) return
transition('right') transition('right')
@ -105,7 +118,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</script> </script>
<template> <template>
<div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center"> <div ref="el" class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<div class="min-h-1 h-1/3 w-full flex flex-col justify-end"> <div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>

Loading…
Cancel
Save