Nc feat/survey form v2 (#7843)

* fix(nc-gui): survey form v2 setup

* fix(nc-gui): survey form ui updated

* fix(nc-gui): survery form ui changes for oss

* chore(nc-gui): lint

* chore(nc-gui): lint

* chore(nc-gui): revert unrelated changes

* test(nc-gui): update pw test of survey form

* fix(nc-gui): update survey form according to new design

* fix(nc-gui): add survey form slide animation

* fix(nc-gui): hide survey form pagination in first slide

* fix(nc-gui): optimize shared form for mobile screen

* chore(nc-gui): lint

* fix(nc-gui): pw test fail issue

* fix(nc-gui): some of the pr review changes

* fix(nc-gui): add placeholder for datetime related fields

* fix(nc-gui): allow upload same file next time

* fix(nc-gui): gallery image display issue /issues/7851

* chore(nc-gui): lint

* fix(nc-gui): survey form ui changes for oss

* fix(nc-gui): use i18n for survey form

* fix(nc-gui): use keydown space for date, datetime fields to open modal in survey form

packages/nc-gui/components/cell/Checkbox.vue

@@ -4,6 +4,7 @@ import {
   ColumnInj,
   EditColumnInj,
   IsFormInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   getMdiIcon,
   inject,
@@ -44,6 +45,8 @@ const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref())
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const checkboxMeta = computed(() => {
   return {
     icon: {
@@ -98,7 +101,8 @@ useSelectedCellKeyupListener(active, (e) => {
     }"
     :tabindex="readOnly ? -1 : 0"
     @click="onClick(false, $event)"
-    @keydown.enter.stop="onClick(true, $event)"
+    @keydown.enter.stop="!isSurveyForm ? onClick(true, $event) : undefined"
+    @keydown.space.stop="isSurveyForm ? onClick(true, $event) : undefined"
   >
     <div
       class="flex items-center"

packages/nc-gui/components/cell/DatePicker.vue

@@ -7,6 +7,7 @@ import {
   ColumnInj,
   EditColumnInj,
   EditModeInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   inject,
@@ -45,6 +46,10 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const isDateInvalid = ref(false)
 
 const dateFormat = computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
@@ -98,7 +103,9 @@ watch(
 )
 
 const placeholder = computed(() => {
-  if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
+  if (isForm.value && !isDateInvalid.value) {
+    return dateFormat.value
+  } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
     return t('general.null').toUpperCase()
@@ -232,6 +239,22 @@ const clickHandler = () => {
   }
   cellClickHandler()
 }
+
+const handleKeydown = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case ' ':
+      if (isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+
+    case 'Enter':
+      if (!isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+  }
+}
 </script>
 
 <template>
@@ -251,7 +274,7 @@ const clickHandler = () => {
     :open="isOpen"
     @click="clickHandler"
     @update:open="updateOpen"
-    @keydown.enter="open = !open"
+    @keydown="handleKeydown"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -6,6 +6,8 @@ import {
   CellClickHookInj,
   ColumnInj,
   EditColumnInj,
+  IsFormInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   inject,
   isDrawerOrModalExist,
@@ -35,6 +37,10 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const { t } = useI18n()
 
 const isEditColumn = inject(EditColumnInj, ref(false))
@@ -151,7 +157,9 @@ watch(
 )
 
 const placeholder = computed(() => {
-  if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
+  if (isForm.value && !isDateInvalid.value) {
+    return dateTimeFormat.value
+  } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
     return t('general.null').toUpperCase()
@@ -286,6 +294,22 @@ const clickHandler = () => {
 const isColDisabled = computed(() => {
   return isSystemColumn(column.value) || readOnly.value || (localState.value && isPk)
 })
+
+const handleKeydown = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case ' ':
+      if (isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+
+    case 'Enter':
+      if (!isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+  }
+}
 </script>
 
 <template>
@@ -304,7 +328,7 @@ const isColDisabled = computed(() => {
     :open="isOpen"
     @click="clickHandler"
     @ok="okHandler"
-    @keydown.enter="open = !open"
+    @keydown="handleKeydown"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui/components/cell/TimePicker.vue

@@ -3,6 +3,8 @@ import dayjs from 'dayjs'
 import {
   ActiveCellInj,
   EditColumnInj,
+  IsFormInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   inject,
   onClickOutside,
@@ -32,6 +34,10 @@ const editable = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const column = inject(ColumnInj)!
 
 const isTimeInvalid = ref(false)
@@ -90,7 +96,9 @@ watch(
 )
 
 const placeholder = computed(() => {
-  if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
+  if (isForm.value && !isTimeInvalid.value) {
+    return 'HH:mm'
+  } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
     return t('general.null').toUpperCase()
@@ -107,6 +115,22 @@ const isOpen = computed(() => {
   return (readOnly.value || (localState.value && isPk)) && !active.value && !editable.value ? false : open.value
 })
 
+const handleKeydown = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case ' ':
+      if (isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+
+    case 'Enter':
+      if (!isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+  }
+}
+
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
@@ -126,6 +150,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 <template>
   <a-time-picker
     v-model:value="localState"
+    :tabindex="0"
     :disabled="readOnly"
     :show-time="true"
     :bordered="false"
@@ -138,6 +163,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :input-read-only="true"
     :open="isOpen"
     :popup-class-name="`${randomClass} nc-picker-time children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
+    @keydown="handleKeydown"
     @click="open = (active || editable) && !open"
     @ok="open = !open"
   >

packages/nc-gui/components/cell/YearPicker.vue

@@ -3,6 +3,8 @@ import dayjs from 'dayjs'
 import {
   ActiveCellInj,
   EditColumnInj,
+  IsFormInj,
+  IsSurveyFormInj,
   ReadonlyInj,
   computed,
   inject,
@@ -31,6 +33,10 @@ const editable = inject(EditModeInj, ref(false))
 
 const isEditColumn = inject(EditColumnInj, ref(false))
 
+const isForm = inject(IsFormInj, ref(false))
+
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const isYearInvalid = ref(false)
 
 const { t } = useI18n()
@@ -77,7 +83,9 @@ watch(
 )
 
 const placeholder = computed(() => {
-  if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
+  if (isForm.value && !isYearInvalid.value) {
+    return 'YYYY'
+  } else if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
     return t('general.null').toUpperCase()
@@ -94,6 +102,22 @@ const isOpen = computed(() => {
   return (readOnly.value || (localState.value && isPk)) && !active.value && !editable.value ? false : open.value
 })
 
+const handleKeydown = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case ' ':
+      if (isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+
+    case 'Enter':
+      if (!isSurveyForm.value) {
+        open.value = !open.value
+      }
+      break
+  }
+}
+
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
@@ -123,10 +147,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :input-read-only="true"
     :open="isOpen"
     :dropdown-class-name="`${randomClass} nc-picker-year children:border-1 children:border-gray-200 ${open ? 'active' : ''}`"
+    @keydown="handleKeydown"
     @click="open = (active || editable) && !open"
     @change="open = (active || editable) && !open"
     @ok="open = !open"
-    @keydown.enter="open = !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

packages/nc-gui/components/cell/attachment/index.vue

@@ -9,6 +9,7 @@ import {
   IsExpandedFormOpenInj,
   IsGalleryInj,
   IsKanbanInj,
+  IsSurveyFormInj,
   RowHeightInj,
   iconMap,
   inject,
@@ -49,6 +50,8 @@ const isKanban = inject(IsKanbanInj, ref(false))
 
 const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
+const isSurveyForm = inject(IsSurveyFormInj, ref(false))
+
 const { isSharedForm } = useSmartsheetStoreOrThrow()!
 
 const { isMobileMode } = useGlobal()
@@ -208,7 +211,8 @@ const onImageClick = (item: any) => {
       data-testid="attachment-cell-file-picker-button"
       tabindex="0"
       @click="open"
-      @keydown.enter="open"
+      @keydown.enter="!isSurveyForm ? open($event) : undefined"
+      @keydown.space="isSurveyForm ? open($event) : undefined"
     >
       <component :is="iconMap.reload" v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 

packages/nc-gui/components/cell/attachment/utils.ts

@@ -63,7 +63,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const { api, isLoading } = useApi()
 
-    const { files, open } = useFileDialog()
+    const { files, open } = useFileDialog({
+      reset: true,
+    })
 
     const { appInfo } = useGlobal()
 

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -146,7 +146,7 @@ const isTableOpened = computed(() => {
   return openedTableId.value === table.value?.id && (activeView.value?.is_default || !activeViewTitleOrId.value)
 })
 
-let tableTimeout: number
+let tableTimeout: NodeJS.Timeout
 
 watch(openedTableId, () => {
   if (tableTimeout) {

packages/nc-gui/components/nc/Badge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const props = withDefaults(
   defineProps<{
-    color: string
+    color?: string
     border?: boolean
     size?: 'sm' | 'md' | 'lg'
   }>(),