added form steps navigation

MorpheusAIs · Jun 14, 2024 · aabd3d5 · aabd3d5
1 parent 1017b73
commit aabd3d5
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 88 deletions.
diff --git a/src/forms/ContractCreationForm/components/ArbitrumStep.vue b/src/forms/ContractCreationForm/components/ArbitrumStep.vue
@@ -8,7 +8,7 @@
         :error-message="
           formValidation.getFieldErrorMessage('arbitrumConfig.tokenName')
         "
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || isSubmitted"
         @blur="formValidation.touchField('arbitrumConfig.tokenName')"
         @update:model-value="emitRootField('tokenName', $event)"
       />
@@ -19,7 +19,7 @@
         :error-message="
           formValidation.getFieldErrorMessage('arbitrumConfig.tokenSymbol')
         "
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || isSubmitted"
         @blur="formValidation.touchField('arbitrumConfig.tokenSymbol')"
         @update:model-value="emitRootField('tokenSymbol', $event)"
       />
@@ -34,14 +34,14 @@
             'arbitrumConfig.adminContractAddress',
           )
         "
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || isSubmitted"
         @blur="formValidation.touchField('arbitrumConfig.adminContractAddress')"
         @update:model-value="emitRootField('adminContractAddress', $event)"
       />
       <checkbox-field
         :model-value="form.arbitrumConfig.isUpgradeable"
         :label="$t(`${I18N_KEY_PREFIX}.is-upgradeable-label`)"
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || isSubmitted"
         class="arbitrum-step__is-upgradeable-checkbox"
         @update:model-value="emitRootField('isUpgradeable', $event)"
       />
@@ -72,7 +72,7 @@
               'arbitrumConfig.settings.tokenInAddress',
             )
           "
-          :disabled="isSubmitting"
+          :disabled="isSubmitting || isSubmitted"
           @blur="
             formValidation.touchField('arbitrumConfig.settings.tokenInAddress')
           "
@@ -89,7 +89,7 @@
               'arbitrumConfig.settings.tokenOutAddress',
             )
           "
-          :disabled="isSubmitting"
+          :disabled="isSubmitting || isSubmitted"
           @blur="
             formValidation.touchField('arbitrumConfig.settings.tokenOutAddress')
           "
@@ -107,7 +107,7 @@
               'arbitrumConfig.settings.firstSwapFee',
             )
           "
-          :disabled="isSubmitting"
+          :disabled="isSubmitting || isSubmitted"
           @blur="
             formValidation.touchField('arbitrumConfig.settings.firstSwapFee')
           "
@@ -125,7 +125,7 @@
               'arbitrumConfig.settings.secondSwapFee',
             )
           "
-          :disabled="isSubmitting"
+          :disabled="isSubmitting || isSubmitted"
           @blur="
             formValidation.touchField('arbitrumConfig.settings.secondSwapFee')
           "
@@ -152,12 +152,10 @@ const props = defineProps<{
   form: Form
   formValidation: FormValidation
   isSubmitting: boolean
+  isSubmitted: boolean
 }>()
 
-const emitRootField = (
-  field: keyof Form['arbitrumConfig'],
-  value: string | number,
-) => {
+const emitRootField = (field: keyof Form['arbitrumConfig'], value: unknown) => {
   emit('update:form', {
     ...props.form,
     arbitrumConfig: { ...props.form.arbitrumConfig, [field]: value },
@@ -166,7 +164,7 @@ const emitRootField = (
 
 const emitSettingsField = (
   field: keyof Form['arbitrumConfig']['settings'],
-  value: string | number,
+  value: unknown,
 ) => {
   emit('update:form', {
     ...props.form,

diff --git a/src/forms/ContractCreationForm/components/EthereumStep/index.vue b/src/forms/ContractCreationForm/components/EthereumStep/index.vue
@@ -12,14 +12,14 @@
             'ethereumConfig.adminContractAddress',
           )
         "
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || isSubmitted"
         @blur="formValidation.touchField('ethereumConfig.adminContractAddress')"
         @update:model-value="emitRootField('adminContractAddress', $event)"
       />
       <checkbox-field
         :model-value="form.ethereumConfig.isUpgradeable"
         :label="$t('contract-creation-form.ethereum-step.is-upgradeable-label')"
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || isSubmitted"
         class="ethereum-step__is-upgradeable-checkbox"
         @update:model-value="emitRootField('isUpgradeable', $event)"
       />
@@ -35,7 +35,7 @@
       <div class="ethereum-step__groups-dashboard">
         <group-builder
           :preset="form.ethereumConfig.groups[editableGroupIdx]"
-          :disabled="isSubmitting"
+          :disabled="isSubmitting || isSubmitted"
           @build="onGroupBuild"
         />
         <div ref="groupsListWrpElement" class="ethereum-step__groups-list-wrp">
@@ -48,7 +48,9 @@
             <li v-for="(group, idx) in form.ethereumConfig.groups" :key="idx">
               <group-info-card
                 :group="group"
-                :disabled="isSubmitting"
+                :disabled="
+                  isSubmitting || isSubmitted || editableGroupIdx !== -1
+                "
                 @edit="editGroup(idx)"
                 @remove="removeGroup(idx)"
               />
@@ -77,6 +79,7 @@ const props = defineProps<{
   form: Form
   formValidation: FormValidation
   isSubmitting: boolean
+  isSubmitted: boolean
 }>()
 
 const groupsListWrpElement = ref<HTMLDivElement | null>(null)
@@ -95,10 +98,7 @@ watch(
   },
 )
 
-const emitRootField = (
-  field: keyof Form['ethereumConfig'],
-  value: string | number,
-) => {
+const emitRootField = (field: keyof Form['ethereumConfig'], value: unknown) => {
   emit('update:form', {
     ...props.form,
     ethereumConfig: { ...props.form.ethereumConfig, [field]: value },

diff --git a/src/forms/ContractCreationForm/components/GeneralStep.vue b/src/forms/ContractCreationForm/components/GeneralStep.vue
@@ -9,10 +9,10 @@
       :error-message="
         formValidation.getFieldErrorMessage('generalConfig.projectName')
       "
-      :disabled="isSubmitting"
+      :disabled="isSubmitting || isSubmitted"
       class="general-step__project-name"
       @blur="formValidation.touchField('generalConfig.projectName')"
-      @update:model-value="emitRootField('projectName', $event)"
+      @update:model-value="emitRootField('projectName', $event as string)"
     />
   </div>
 </template>
@@ -32,12 +32,10 @@ const props = defineProps<{
   form: Form
   formValidation: FormValidation
   isSubmitting: boolean
+  isSubmitted: boolean
 }>()
 
-const emitRootField = (
-  field: keyof Form['generalConfig'],
-  value: string | number,
-) => {
+const emitRootField = (field: keyof Form['generalConfig'], value: string) => {
   emit('update:form', {
     ...props.form,
     generalConfig: { ...props.form.generalConfig, [field]: value },

diff --git a/src/forms/ContractCreationForm/components/StepTabs.vue b/src/forms/ContractCreationForm/components/StepTabs.vue
@@ -1,40 +1,35 @@
 <template>
   <ol class="step-tabs">
     <li
-      v-for="(stepTab, idx) in stepTabs"
-      :key="stepTab.id"
+      v-for="(step, idx) in steps"
+      :key="step.id"
       :class="{
-        'step-tabs__step--current': currentStepTab.id === stepTab.id,
-        'step-tabs__step--passed': idx < currentStepTabIdx,
+        'step-tabs__step--current': currentStep.id === step.id,
+        'step-tabs__step--submitted': step.isSubmitted,
       }"
       class="step-tabs__step"
     >
       <transition name="fade" mode="out-in">
-        <template v-if="idx < currentStepTabIdx">
+        <template v-if="step.isSubmitted">
           <app-icon class="step-tabs__step-icon" :name="$icons.checkCircle" />
         </template>
         <template v-else>
           <span class="step-tabs__step-order"> {{ `${idx + 1}.` }}</span>
         </template>
       </transition>
-      {{ stepTab.title }}
+      {{ step.title }}
     </li>
   </ol>
 </template>
 
 <script lang="ts" setup>
 import { AppIcon } from '@/common'
-import { computed } from 'vue'
-import { type StepTab } from '../types'
+import { type Step } from '../types'
 
-const props = defineProps<{
-  currentStepTab: StepTab
-  stepTabs: StepTab[]
+defineProps<{
+  currentStep: Step
+  steps: Step[]
 }>()
-
-const currentStepTabIdx = computed<number>(() =>
-  props.stepTabs.findIndex(step => step.id === props.currentStepTab.id),
-)
 </script>
 
 <style lang="scss" scoped>
@@ -71,10 +66,13 @@ const currentStepTabIdx = computed<number>(() =>
     border-image-source: var(--primary-main);
   }
 
-  &--passed {
+  &--submitted {
     color: var(--primary-main);
     border-image-source: var(--primary-main);
-    opacity: 0.4;
+
+    &:not(.step-tabs__step--current) {
+      opacity: 0.4;
+    }
   }
 
   @include body-3-medium;

diff --git a/src/forms/ContractCreationForm/components/index.ts b/src/forms/ContractCreationForm/components/index.ts
@@ -1,4 +1,4 @@
 export { default as ArbitrumStep } from './ArbitrumStep.vue'
 export { default as EthereumStep } from '@/forms/ContractCreationForm/components/EthereumStep/index.vue'
 export { default as GeneralStep } from './GeneralStep.vue'
-export { default as StepTabs20 } from './StepTabs.vue'
+export { default as StepTabs } from './StepTabs.vue'