From a430621b4c873ca39d623f3631d75b4db9ce8edf Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com>
Date: Wed, 14 May 2025 20:49:18 +0530
Subject: [PATCH] ESC-539 - Refactor SignatureInput Component for Consistency
 and Enhanced Logic (#749)

* Refactor SignatureInput Component for Consistency and Enhanced Logic

- Updated the `SignatureInput.vue` component to use `InputWrapper` instead of `input-wrapper` for consistency with naming conventions.
- Added logic to reset the signature field value when the model value is an array, improving handling of Notion database data.
- Enhanced the `mounted` lifecycle hook to ensure the signature pad canvas is resized correctly after rendering.
- Improved error handling in the file upload process by capturing the error in the catch block.

These changes aim to enhance the maintainability and functionality of the `SignatureInput` component, ensuring better user experience and consistency across the codebase.

* Refactor SignatureInput Component to Remove Unused ModelValue Logic

- Removed the modelValue handler logic from the `SignatureInput.vue` component, simplifying the component's state management.
- Cleaned up the created lifecycle hook by eliminating unnecessary checks related to Notion array data handling.

These changes aim to enhance the maintainability of the `SignatureInput` component by streamlining its logic and improving overall code clarity.

* fix lint

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/SignatureInput.vue | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/client/components/forms/SignatureInput.vue b/client/components/forms/SignatureInput.vue
index 17a1acce..686af68c 100644
--- a/client/components/forms/SignatureInput.vue
+++ b/client/components/forms/SignatureInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <input-wrapper v-bind="inputWrapperProps">
+  <InputWrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
@@ -7,6 +7,7 @@
     <div
       v-if="loading || file"
       :class="[
+        theme.default.input,
         theme.SignatureInput.input,
         theme.SignatureInput.spacing.horizontal,
         theme.SignatureInput.spacing.vertical,
@@ -43,6 +44,7 @@
       ref="signaturePad"
       class="not-draggable"
       :class="[
+        theme.default.input,
         theme.SignatureInput.input,
         theme.SignatureInput.spacing.horizontal,
         theme.SignatureInput.spacing.vertical,
@@ -91,17 +93,17 @@
     <template #error>
       <slot name="error" />
     </template>
-  </input-wrapper>
+  </InputWrapper>
 </template>
 
 <script>
-import { inputProps, useFormInput } from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
-import { VueSignaturePad } from "vue-signature-pad"
-import { storeFile } from "~/lib/file-uploads.js"
+import { VueSignaturePad } from 'vue-signature-pad'
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
+import { storeFile } from '~/lib/file-uploads.js'
 
 export default {
-  name: "SignatureInput",
+  name: 'SignatureInput',
   components: { InputWrapper, VueSignaturePad },
 
   props: {
@@ -126,6 +128,14 @@ export default {
       }
     }
   },
+  
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.signaturePad) {
+        this.$refs.signaturePad.resizeCanvas()
+      }
+    })
+  },
 
   methods: {
     clear() {
@@ -138,7 +148,7 @@ export default {
         this.form[this.name] = null
         return
       }
-      
+
       if (this.disabled) {
         this.$refs.signaturePad.clearSignature()
       } else {