refactor: add function resetScrollBar

src/pages/01_branch-management/MainPage.vue

@@ -6,7 +6,7 @@ import { BranchContact } from 'stores/branch-contact/types';
 import { colors, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import type { QTableProps } from 'quasar';
-
+import { resetScrollBar } from 'src/stores/utils';
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'stores/flow';
 import {
@@ -1649,7 +1649,12 @@ watch(currentHq, () => {
     :submit="() => onSubmit()"
     :delete-data="() => triggerDelete(currentEdit.id)"
     :close="
-      () => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
+      () => (
+        (modalDrawer = false),
+        flowStore.rotate(),
+        (isImageEdit = false),
+        resetScrollBar('branch-info')
+      )
     "
     :statusBranch="formData.status"
     hide-action

src/pages/02_personnel-management/MainPage.vue

@@ -8,7 +8,7 @@ import { useI18n } from 'vue-i18n';
 import useFlowStore from 'stores/flow';
 import useUserStore from 'stores/user';
 import useBranchStore from 'stores/branch';
-import { isRoleInclude } from 'src/stores/utils';
+import { isRoleInclude, resetScrollBar } from 'src/stores/utils';
 
 import {
   User,
@@ -1494,7 +1494,12 @@ watch(
     "
     v-model:drawerOpen="infoDrawer"
     :submit="() => onSubmit()"
-    :close="() => onClose()"
+    :close="
+      () => {
+        onClose();
+        resetScrollBar('user-form-content');
+      }
+    "
   >
     <InfoForm>
       <div class="q-px-lg q-pt-lg surface-2">

src/pages/03_customer-management/MainPage.vue

@@ -10,7 +10,7 @@ import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useMyBranchStore from 'stores/my-branch';
-import useUtilsStore, { dialog, notify } from 'stores/utils';
+import useUtilsStore, { dialog, notify, resetScrollBar } from 'stores/utils';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import {
@@ -68,6 +68,7 @@ import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOth
 import useOptionStore from 'stores/options';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import KebabAction from 'src/components/shared/KebabAction.vue';
+import { roundElectricalServices } from '@quasar/extras/material-icons-round';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -2695,6 +2696,7 @@ const emptyCreateDialog = ref(false);
     :close="
       () => {
         customerFormState.drawerModal = false;
+        resetScrollBar('customer-form-content');
       }
     "
     :submit="
@@ -2999,11 +3001,13 @@ const emptyCreateDialog = ref(false);
 
   <!-- ลูกจ้าง edit employee -->
   <DrawerInfo
+    v-if="!!employeeFormState.currentEmployee"
     hide-action
     v-model:drawer-open="employeeFormState.drawerModal"
     :close="
       () => {
         employeeFormState.drawerModal = false;
+        resetScrollBar('drawer-employee-form-content');
       }
     "
     :title="
@@ -3044,11 +3048,6 @@ const emptyCreateDialog = ref(false);
         employeeFormState.currentIndex = -1;
       }
     "
-    :show="
-      () => {
-        employeeFormStore.resetFormDataEmployee(true);
-      }
-    "
     :before-close="
       () => {
         if (employeeFormStore.isFormDataDifferent()) {

src/stores/utils/index.ts

@@ -226,4 +226,12 @@ export function isRoleInclude(role2check: string[]): boolean {
   return isIncluded;
 }
 
+export function resetScrollBar(elementId: string) {
+  const element = document.getElementById(elementId);
+
+  if (element) {
+    element.scrollTop = 0;
+  }
+}
+
 export default useUtilsStore;