add complete button

2024-11-07 20:58:43 +02:00
parent 0b0f0b497e
commit c79fca75f3
3 changed files with 77 additions and 5 deletions
@@ -39,7 +39,6 @@
      </template>
    </div>
    <div
-      v-if="isActive"
      ref="scrollToElem"
      class="absolute"
      :style="{ top: scrollPadding }"
@@ -24,6 +24,44 @@
    :fields="formulaFields"
    :values="values"
  />
+  <Teleport
+    v-if="completeButtonToRef"
+    :to="completeButtonToRef"
+  >
+    <span
+      v-if="(emptyValueRequiredStep && ((stepFields.length - 1) !== currentStep || currentStepFields !== emptyValueRequiredStep)) || isCompleted"
+      class="tooltip-left"
+      :class="{ tooltip: !isCompleted }"
+      :data-tip="t('fill_all_required_fields_to_complete')"
+    >
+      <button
+        class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center btn-disabled pointer-events-auto"
+        @click="[isFormVisible = true, !isCompleted && goToStep(stepFields.indexOf(emptyValueRequiredStep), true, false)]"
+      >
+        {{ t('complete') }}
+      </button>
+    </span>
+    <button
+      v-else
+      id="complete_form_button"
+      class="btn btn-sm btn-neutral text-white px-4 w-full flex justify-center"
+      form="steps_form"
+      type="submit"
+      name="completed"
+      value="true"
+      :disabled="isSubmittingComplete"
+    >
+      <span class="flex items-center">
+        <IconInnerShadowTop
+          v-if="isSubmittingComplete"
+          class="mr-1 animate-spin w-5 h-5"
+        />
+        <span>
+          {{ t('complete') }}
+        </span>
+      </span>
+    </button>
+  </Teleport>
  <button
    v-if="!isFormVisible"
    id="expand_form_button"
@@ -74,6 +112,7 @@
    >
      <form
        v-if="!isCompleted && !isInvite"
+        id="steps_form"
        ref="form"
        :action="submitPath"
        method="post"
@@ -592,6 +631,11 @@ export default {
      required: false,
      default: false
    },
+    completeButtonToRef: {
+      type: Object,
+      required: false,
+      default: null
+    },
    attachments: {
      type: Array,
      required: false,
@@ -772,6 +816,7 @@ export default {
      phoneVerifiedValues: {},
      orientation: screen?.orientation?.type,
      isSubmitting: false,
+      isSubmittingComplete: false,
      submittedValues: {},
      recalculateButtonDisabledKey: ''
    }
@@ -780,6 +825,13 @@ export default {
    isMobile () {
      return /android|iphone|ipad/i.test(navigator.userAgent)
    },
+    emptyValueRequiredStep () {
+      return this.stepFields.find((fields, index) => {
+        return fields.some((f) => {
+          return f.required && isEmpty(this.values[f.uuid])
+        })
+      })
+    },
    submitButtonText () {
      if (this.alwaysMinimize) {
        return this.t('submit')
@@ -1146,9 +1198,15 @@ export default {
    scrollIntoArea (area) {
      return this.$refs.areas.scrollIntoArea(area)
    },
-    async submitStep () {
+    async submitStep (e) {
      this.isSubmitting = true

+      const forceComplete = e.submitter?.getAttribute('name') === 'completed'
+
+      if (forceComplete) {
+        this.isSubmittingComplete = true
+      }
+
      const submitStep = this.currentStep

      const stepPromise = ['signature', 'phone', 'initials', 'payment'].includes(this.currentField.type)
@@ -1157,7 +1215,7 @@ export default {

      stepPromise().then(async () => {
        const emptyRequiredField = this.stepFields.find((fields, index) => {
-          if (index >= submitStep) {
+          if (forceComplete ? index === submitStep : index >= submitStep) {
            return false
          }

@@ -1167,7 +1225,7 @@ export default {
        })

        const formData = new FormData(this.$refs.form)
-        const isLastStep = submitStep === this.stepFields.length - 1
+        const isLastStep = (submitStep === this.stepFields.length - 1) || forceComplete

        if (isLastStep && !emptyRequiredField && !this.inviteSubmitters.length) {
          formData.append('completed', 'true')
@@ -1192,7 +1250,7 @@ export default {
            return Promise.reject(new Error(data.error))
          }

-          const nextStep = (isLastStep && emptyRequiredField) || this.stepFields[submitStep + 1]
+          const nextStep = (isLastStep && emptyRequiredField) || (forceComplete ? null : this.stepFields[submitStep + 1])

          if (nextStep) {
            if (this.alwaysMinimize) {
@@ -1213,6 +1271,7 @@ export default {
          console.error(error)
        }).finally(() => {
          this.isSubmitting = false
+          this.isSubmittingComplete = false
        })
      }).catch(error => {
        if (error?.message === 'Image too small') {
@@ -1222,6 +1281,7 @@ export default {
        }
      }).finally(() => {
        this.isSubmitting = false
+        this.isSubmittingComplete = false
      })
    },
    minimizeForm () {
@@ -1,5 +1,6 @@
 const en = {
  complete: 'Complete',
+  fill_all_required_fields_to_complete: 'Fill all required fields to complete',
  sign_and_complete: 'Sign and Complete',
  text: 'Text',
  by_clicking_you_agree_to_the: 'By clicking "{button}", you agree to the',
@@ -93,6 +94,7 @@ const en = {

 const es = {
  complete: 'Completar',
+  fill_all_required_fields_to_complete: 'Complete todos los campos requeridos para finalizar',
  sign_and_complete: 'Firmar y Completar',
  invite: 'Invitar',
  email: 'Correo electrónico',
@@ -185,6 +187,7 @@ const es = {

 const it = {
  complete: 'Completa',
+  fill_all_required_fields_to_complete: 'Compila tutti i campi obbligatori per completare',
  sign_and_complete: 'Firma e Completa',
  invite: 'Invita',
  email: 'Email',
@@ -277,6 +280,7 @@ const it = {

 const de = {
  complete: 'Abschließen',
+  fill_all_required_fields_to_complete: 'Alle erforderlichen Felder ausfüllen, um abzuschließen',
  sign_and_complete: 'Signieren und Abschließen',
  invite: 'Einladen',
  email: 'E-Mail',
@@ -369,6 +373,7 @@ const de = {

 const fr = {
  complete: 'Terminer',
+  fill_all_required_fields_to_complete: 'Veuillez remplir tous les champs obligatoires pour compléter',
  sign_and_complete: 'Signer et Terminer',
  invite: 'Inviter',
  email: 'Courriel',
@@ -461,6 +466,7 @@ const fr = {

 const pl = {
  complete: 'Zakończ',
+  fill_all_required_fields_to_complete: 'Uzupełnij wszystkie wymagane pola, aby zakończyć',
  sign_and_complete: 'Podpisz i zakończ',
  invite: 'Zaproś',
  email: 'E-mail',
@@ -553,6 +559,7 @@ const pl = {

 const uk = {
  complete: 'Завершити',
+  fill_all_required_fields_to_complete: "Заповніть всі обов'язкові поля для завершення",
  sign_and_complete: 'Підписати і завершити',
  invite: 'Запросити',
  email: 'Електронна пошта',
@@ -645,6 +652,7 @@ const uk = {

 const cs = {
  complete: 'Dokončit',
+  fill_all_required_fields_to_complete: 'Please complete all mandatory fields',
  sign_and_complete: 'Podepsat a dokončit',
  invite: 'Pozvat',
  email: 'E-mail',
@@ -737,6 +745,7 @@ const cs = {

 const pt = {
  complete: 'Completar',
+  preencher_todos_os_campos_obrigatórios_para_concluir: 'Preencher todos os campos obrigatórios para concluir',
  sign_and_complete: 'Assinar e Completar',
  invite: 'Convidar',
  email: 'E-mail',
@@ -829,6 +838,7 @@ const pt = {

 const he = {
  complete: 'השלם',
+  fill_all_required_fields_to_complete: 'נא למלא את כל השדות הנדרשים להשלמה',
  sign_and_complete: 'חתום והשלם',
  invite: 'הזמן',
  email: 'דוא"ל',
@@ -922,6 +932,7 @@ const he = {

 const nl = {
  complete: 'Voltooien',
+  vul_alle_verplichte_velden_in_om_te_voltooien: 'Vul alle verplichte velden in om te voltooien',
  sign_and_complete: 'Ondertekenen en voltooien',
  invite: 'Uitnodigen',
  email: 'E-mail',
@@ -1015,6 +1026,7 @@ const nl = {

 const ar = {
  complete: 'اكتمال',
+  fill_all_required_fields_to_complete: 'يرجى ملء جميع الحقول المطلوبة لإكمال',
  sign_and_complete: 'التوقيع والاكتمال',
  invite: 'دعوة',
  email: 'البريد الإلكتروني',
@@ -1107,6 +1119,7 @@ const ar = {

 const ko = {
  complete: '완료',
+  fill_all_required_fields_to_complete: '모든 필수 필드를 작성하여 완료하세요',
  sign_and_complete: '서명하고 완료하기',
  invite: '초대하기',
  email: '이메일',