From 9845cd7e78909cf93407822f72192f35d3918be9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 12:37:21 +0200
Subject: [PATCH] chore(nc-gui): reset form to first step

---
 .../nc-gui/composables/useSharedFormViewStore.ts  |  5 +++++
 .../[projectType]/form/[viewId]/index/survey.vue  | 15 ++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 6247a326e4..0ed600eb21 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -7,6 +7,7 @@ import { isString } from '@vueuse/core'
 import {
   SharedViewPasswordInj,
   computed,
+  createEventHook,
   extractSdkResponseErrorMsg,
   message,
   provide,
@@ -33,6 +34,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const meta = ref<TableType>()
   const columns = ref<(ColumnType & { required?: boolean; show?: boolean; label?: string })[]>()
   const sharedViewMeta = ref<any>({})
+  const formResetHook = createEventHook<void>()
 
   const { api, isLoading } = useApi()
 
@@ -179,6 +181,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         if (secondsRemain.value < 0) {
           submitted.value = false
 
+          formResetHook.trigger()
+
           clearInterval(intvl)
         }
       }, 1000)
@@ -211,6 +215,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     passwordDlg,
     isLoading,
     sharedViewMeta,
+    onReset: formResetHook.on,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index cef0f5cf4b..167a5481fe 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -22,7 +22,7 @@ enum TransitionDirection {
 
 const { md } = useBreakpoints(breakpointsTailwind)
 
-const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
+const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView, onReset } = useSharedFormStoreOrThrow()
 
 const isTransitioning = ref(false)
 
@@ -46,7 +46,7 @@ const steps = computed(() => {
   }, [])
 })
 
-const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
+const { index, goToPrevious, goToNext, isFirst, isLast, goTo } = useStepper(steps)
 
 const field = computed(() => formColumns.value?.[index.value])
 
@@ -119,6 +119,15 @@ function focusInput() {
   }
 }
 
+function resetForm() {
+  v$.value.$reset()
+  submitted.value = false
+  transition(TransitionDirection.Right)
+  goTo(steps.value[0])
+}
+
+onReset(resetForm)
+
 onKeyStroke(['ArrowLeft', 'ArrowDown'], goPrevious)
 onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
@@ -276,7 +285,7 @@ onMounted(() => {
                 </p>
 
                 <div v-if="sharedFormView?.submit_another_form" class="text-center">
-                  <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+                  <button type="button" class="scaling-btn bg-opacity-100" @click="resetForm">Submit Another Form</button>
                 </div>
               </div>
             </div>