From 2c0bed982347d43cac2cb2bf148b8c0100f9e106 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Sat, 24 Jun 2023 17:15:36 +0300
Subject: [PATCH] require signature in form

---
 app/javascript/submission_form/area.vue           |  4 ++--
 app/javascript/submission_form/form.vue           |  7 ++++++-
 app/javascript/submission_form/signature_step.vue | 11 +++++++++++
 app/javascript/template_builder/field_type.vue    |  4 ++--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 26925044..711737c6 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconCheck } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldArea',
@@ -166,7 +166,7 @@ export default {
     fieldIcons () {
       return {
         text: IconTextSize,
-        signature: IconWriting,
+        signature: IconWritingSign,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,
diff --git a/app/javascript/submission_form/form.vue b/app/javascript/submission_form/form.vue
index 1851d7aa..59dbb551 100644
--- a/app/javascript/submission_form/form.vue
+++ b/app/javascript/submission_form/form.vue
@@ -215,7 +215,7 @@
         <button
           type="submit"
           class="base-button w-full flex justify-center"
-          :disabled="isSubmitting || (currentField.required && ['image', 'file'].includes(currentField.type) && !values[currentField.uuid]?.length)"
+          :disabled="isButtonDisabled"
         >
           <span class="flex">
             <IconInnerShadowTop
@@ -314,6 +314,11 @@ export default {
     currentStepFields () {
       return this.stepFields[this.currentStep]
     },
+    isButtonDisabled () {
+      return this.isSubmitting ||
+        (this.currentField.required && ['image', 'file'].includes(this.currentField.type) && !this.values[this.currentField.uuid]?.length) ||
+        (this.currentField.required && this.currentField.type === 'signature' && !this.values[this.currentField.uuid]?.length && this.$refs.currentStep && !this.$refs.currentStep.isSignatureStarted)
+    },
     currentField () {
       return this.currentStepFields[0]
     },
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index 1689890b..163dea23 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@@ -70,11 +70,20 @@ export default {
     }
   },
   emits: ['attached', 'update:model-value'],
+  data () {
+    return {
+      isSignatureStarted: false
+    }
+  },
   mounted () {
     this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
     this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
 
     this.pad = new SignaturePad(this.$refs.canvas)
+
+    this.pad.addEventListener('beginStroke', () => {
+      this.isSignatureStarted = true
+    })
   },
   methods: {
     remove () {
@@ -82,6 +91,8 @@ export default {
     },
     clear () {
       this.pad.clear()
+
+      this.isSignatureStarted = false
     },
     submit () {
       if (this.modelValue) {
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index cf3766f7..8f5ba64f 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { IconTextSize, IconWriting, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks } from '@tabler/icons-vue'
+import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks } from '@tabler/icons-vue'
 
 export default {
   name: 'FiledTypeDropdown',
@@ -71,7 +71,7 @@ export default {
     fieldIcons () {
       return {
         text: IconTextSize,
-        signature: IconWriting,
+        signature: IconWritingSign,
         date: IconCalendarEvent,
         image: IconPhoto,
         file: IconPaperclip,