From 59f3af101a0edf58be4c191e1d1037359d7f3486 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 17 Oct 2024 13:21:31 +0700
Subject: [PATCH] fix: scroll to new work

---
 .../04_product-service/FormServiceWork.vue         | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index e17e1a4e..7232d137 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -7,7 +7,7 @@ import WorkManagementComponent from './WorkManagementComponent.vue';
 import AddButton from '../button/AddButton.vue';
 import { ServiceCreate, WorkItems } from 'stores/product-service/types';
 import TreeView from '../shared/TreeView.vue';
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 
 const { t } = useI18n();
 
@@ -34,6 +34,8 @@ defineEmits<{
   (e: 'workProperties', index: number): void;
 }>();
 
+defineExpose({ addWork });
+
 const nodes = ref([
   {
     title: props.service?.name,
@@ -68,13 +70,20 @@ const nodes = ref([
   },
 ]);
 
-function addWork() {
+async function addWork() {
   workItems.value.push({
     id: '',
     name: '',
     attributes: { additional: [], showTotalPrice: false },
     product: [],
   });
+  await nextTick();
+
+  const scrollTarget = document.getElementById(
+    `work-${workItems.value.length - 1}`,
+  );
+  if (scrollTarget)
+    scrollTarget.scrollIntoView({ behavior: 'instant', inline: 'center' });
 }
 
 function confirmDelete(items: unknown[], index: number) {
@@ -157,6 +166,7 @@ watch(
       <WorkManagementComponent
         class="col-12"
         v-for="(work, index) in workItems"
+        :id="`work-${index}`"
         :key="work.id"
         :index="index"
         :length="workItems.length"