Signature block (img) (#39)

* Signature block (img)

* Singature input UI changes

* Style the signature input

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

resources/js/components/forms/SignatureInput.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="wrapperClass">
+    <label v-if="label" :for="id?id:name"
+           :class="[theme.CodeInput.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+    >
+      {{ label }}
+      <span v-if="required" class="text-red-500 required-dot">*</span>
+    </label>
+
+    <VueSignaturePad ref="signaturePad"
+                     :class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]" height="150px"
+                     :name="name"
+                     :options="{ onEnd }"
+    />
+
+    <div class="flex">
+      <small v-if="help" :class="theme.default.help" class="flex-grow">
+        <slot name="help"><span class="field-help" v-html="help" /></slot>
+      </small>
+      <small v-else class="flex-grow" />
+      <small :class="theme.default.help">
+        <a :class="theme.default.help" href="#" @click.prevent="clear">Clear</a>
+      </small>
+    </div>
+    <has-error v-if="hasValidation" :form="form" :field="name" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import VueSignaturePad from 'vue-signature-pad'
+import inputMixin from '~/mixins/forms/input'
+
+Vue.use(VueSignaturePad)
+
+export default {
+  name: 'SignatureInput',
+
+  components: {},
+  mixins: [inputMixin],
+
+  methods: {
+    clear () {
+      this.$refs.signaturePad.clearSignature()
+      this.onEnd()
+    },
+    onEnd () {
+      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
+      this.$set(this.form, this.name, (!isEmpty && data) ? data : null)
+    }
+  }
+}
+</script>

resources/js/components/forms/index.js

@@ -38,6 +38,7 @@ import ToggleSwitchInput from './ToggleSwitchInput'
 })
 
 // Lazy load some heavy component
+Vue.component('SignatureInput', () => import('./SignatureInput'))
 Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput'))
 Vue.component('DateInput', () => import('./DateInput'))
 Vue.component('SimpleDateInput', () => import('./SimpleDateInput'))

resources/js/components/open/forms/OpenForm.vue

@@ -348,6 +348,9 @@ export default {
       if (field.type === 'checkbox' && field.use_toggle_switch) {
         return 'ToggleSwitchInput'
       }
+      if (field.type === 'signature') {
+        return 'SignatureInput'
+      }
       if (field.type === 'date' && field.simple_date_input) {
         return 'SimpleDateInput'
       }

resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue

@@ -143,6 +143,19 @@
         <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mb-4">File Input</p>
       </div>
 
+      <!--  Signature Block   -->
+      <div
+        class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 p-2 flex flex-col"
+        role="button" @click.prevent="addBlock('signature')"
+      >
+        <div class="mx-auto py-4">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" />
+          </svg>
+        </div>
+        <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mb-4">Signature Input</p>
+      </div>
+
     </div>
 
     <p class="text-gray-500 uppercase text-xs font-semibold mb-2 mt-6">Layout Blocks</p>
@@ -250,6 +263,7 @@ export default {
         'select': 'Select',
         'multi_select': 'Multi Select',
         'files': 'Files',
+        'signature': 'Signature',
         'nf-text': 'Text Block',
         'nf-page-break': 'Page Break',
         'nf-divider': 'Divider',
@@ -307,6 +321,8 @@ export default {
         data.previous_btn_text = 'Previous'
       } else if (data.type === 'nf-code') {
         data.content = '<div class="text-blue-500 italic">This is a code block.</div>'
+      } else if (data.type === 'signature') {
+        data.help = 'Draw your signature above'
       }
       return data
     },

resources/js/components/open/tables/OpenTable.vue

@@ -143,6 +143,7 @@ export default {
         url: OpenUrl,
         email: OpenText,
         phone_number: OpenText,
+        signature: OpenFile,
       }
     },
   },