feat(nc-gui): add stepper to survey page

packages/nc-gui/components.d.ts

@@ -129,6 +129,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
+    MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']

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

@@ -2,7 +2,8 @@
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain } = useSharedFormStoreOrThrow()
+const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
+  useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -51,6 +52,12 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       </template>
 
       <template v-else>
+        <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
+          <div class="w-full h-full flex items-center justify-center">
+            <a-spin size="large" />
+          </div>
+        </GeneralOverlay>
+
         <div class="nc-form-wrapper">
           <div class="nc-form h-full max-w-3/4 mx-auto">
             <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">

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

@@ -1,3 +1,106 @@
+<script lang="ts" setup>
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { computed, useSharedFormStoreOrThrow, useStepper } from '#imports'
+
+const { v$, formState, formColumns } = useSharedFormStoreOrThrow()
+
+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>
+  }
+
+  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
+}
+
+const steps = computed(() => {
+  if (!formColumns.value) return []
+  return formColumns.value.reduce((acc, column) => {
+    acc.push((column as any).label || column.title)
+
+    return acc
+  }, [] as string[])
+})
+
+const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
+
+const field = computed(() => formColumns.value?.[index.value])
+</script>
+
 <template>
-  <div>Survey Mode</div>
+  <div
+    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto px-8 py-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+  >
+    <div v-if="field" class="flex flex-col my-6 gap-2">
+      <div class="flex nc-form-column-label">
+        <SmartsheetHeaderVirtualCell
+          v-if="isVirtualCol(field)"
+          :column="{ ...field, title: field.label || field.title }"
+          :required="isRequired(field, field.required)"
+          :hide-menu="true"
+        />
+
+        <SmartsheetHeaderCell
+          v-else
+          :column="{ ...field, title: field.label || field.title }"
+          :required="isRequired(field, field.required)"
+          :hide-menu="true"
+        />
+      </div>
+
+      <div v-if="isVirtualCol(field)" class="mt-0">
+        <SmartsheetVirtualCell
+          class="mt-0 nc-input"
+          :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+          :column="field"
+        />
+
+        <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+        <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+          <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+            {{ error.$message }}
+          </div>
+        </template>
+      </div>
+
+      <div v-else class="mt-0">
+        <SmartsheetCell
+          v-model="formState[field.title]"
+          class="nc-input"
+          :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+          :column="field"
+          :edit-enabled="true"
+        />
+
+        <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+        <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+          <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+            {{ error.$message }}
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="!isFirst || !isLast" class="flex w-full text-lg">
+      <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
+        <button class="group color-transition transform hover:scale-110" @click="goToPrevious">
+          <MdiChevronLeft class="group-hover:text-accent" />
+        </button>
+      </a-tooltip>
+
+      <div class="flex-1" />
+
+      <a-tooltip v-if="!isLast" title="Go to next" :mouse-enter-delay="1" :mouse-leave-delay="0">
+        <button class="group color-transition transform hover:scale-110" @click="goToNext">
+          <MdiChevronRight class="group-hover:text-accent" />
+        </button>
+      </a-tooltip>
+    </div>
+  </div>
 </template>