From 4d023a7c7c5e5ed6b50277205ee6619d1413509a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 30 Apr 2025 16:15:08 +0700
Subject: [PATCH] feat: add smooth scrolling on validation error for forms

---
 src/components/DialogForm.vue                  | 10 ++++++++++
 src/components/DrawerInfo.vue                  | 10 ++++++++++
 src/components/dialog/DialogFormContainer.vue  | 10 ++++++++++
 src/pages/02_personnel-management/MainPage.vue |  1 -
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 84319bcf..fb29a4ca 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -42,6 +42,15 @@ defineProps<{
 
 const modal = defineModel('modal', { default: false });
 const currentTab = defineModel<string>('currentTab');
+
+async function onValidationError(ref: any) {
+  const el = ref.$el as Element;
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+  });
+}
 </script>
 <template>
   <q-dialog
@@ -60,6 +69,7 @@ const currentTab = defineModel<string>('currentTab');
         @submit.prevent
         @validation-success="submit"
         class="column full-height"
+        @validation-error="onValidationError"
       >
         <!-- header -->
         <div
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index e796890a..0ce76c7b 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -46,6 +46,15 @@ function reset() {
     myForm.value.resetValidation();
   }
 }
+
+async function onValidationError(ref: any) {
+  const el = ref.$el as Element;
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+  });
+}
 </script>
 <template>
   <q-drawer
@@ -66,6 +75,7 @@ function reset() {
       greedy
       @submit.prevent
       @validation-success="submit"
+      @validation-error="onValidationError"
     >
       <div
         class="column justify-between full-height"
diff --git a/src/components/dialog/DialogFormContainer.vue b/src/components/dialog/DialogFormContainer.vue
index ccf174d2..c68f7d46 100644
--- a/src/components/dialog/DialogFormContainer.vue
+++ b/src/components/dialog/DialogFormContainer.vue
@@ -23,6 +23,15 @@ function update(value: boolean) {
   }
 }
 
+async function onValidationError(ref: any) {
+  const el = ref.$el as Element;
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+  });
+}
+
 const state = defineModel({ default: false });
 </script>
 
@@ -41,6 +50,7 @@ const state = defineModel({ default: false });
       }"
     >
       <q-form
+        @validation-error="onValidationError"
         @submit.prevent="(e) => $emit('submit', e)"
         @reset="$emit('reset')"
         greedy
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index d5a54507..cff14f9d 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -555,7 +555,6 @@ async function triggerChangeStatus(id: string, status: string) {
 async function assignFormData(idEdit: string) {
   if (!userData.value) return;
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
-  console.log(foundUser);
 
   if (foundUser) {
     currentUser.value = foundUser;