From 7321bd2cd94531cc56e8bc822a576f890522cbb9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 17 Dec 2024 17:00:19 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=3D=3D>=20=20view=20=20=E0=B9=82=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/StructureMain.vue              | 56 +++++++++++++++----
 .../components/StructureOrgMain.vue           | 51 +++++++++++------
 2 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/src/modules/02_organization/components/StructureMain.vue b/src/modules/02_organization/components/StructureMain.vue
index 8fa21f601..65c9c42cd 100644
--- a/src/modules/02_organization/components/StructureMain.vue
+++ b/src/modules/02_organization/components/StructureMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import { StructChart } from "structure-chart";
 import "structure-chart/structure-chart.css";
@@ -19,19 +19,22 @@ const rootOrgID = ref(); // org id ของ root ตัวปัจจุบั
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
 const loader = ref<boolean>(false); // Loader
+const scrollContainer = ref<HTMLElement | null>(null);
 
-/**
- * function ดาวน์โหลดไฟล์โครงสร้าง PNG
- */
-function savePNG() {
-  chartRef.value.savePNG();
+/** function ดาวน์โหลดไฟล์โครงสร้าง PNG*/
+async function savePNG() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePNG();
+  hideLoader();
 }
 
-/**
- * function ดาวน์โหลดไฟล์โครงสร้าง PDF
- */
-function savePDF() {
-  chartRef.value.savePDF();
+/** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
+async function savePDF() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePDF();
+  hideLoader();
 }
 
 /**
@@ -178,6 +181,26 @@ watch(
   }
 );
 
+/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
+async function scrollToCenter() {
+  const container = scrollContainer.value;
+  if (container) {
+    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
+  }
+}
+
+// Watch เมื่อข้อมูลใน dataSource เปลี่ยนแปลง
+watch(
+  dataSource,
+  () => {
+    // ใช้ nextTick เพื่อให้ DOM อัปเดตเสร็จก่อนค่อยเลื่อน scroll
+    nextTick(() => {
+      scrollToCenter();
+    });
+  },
+  { deep: true } // ตรวจจับการเปลี่ยนแปลงภายในข้อมูล
+);
+
 onMounted(async () => {
   const id =
     store.typeOrganizational === "current"
@@ -221,7 +244,16 @@ onMounted(async () => {
       </div>
     </div>
     <q-separator />
-    <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+    <div
+      ref="scrollContainer"
+      style="
+        overflow-x: auto;
+        overflow-y: auto;
+        height: 70vh;
+        position: relative;
+      "
+      class="q-pt-md"
+    >
       <StructChart
         style="height: 70vh"
         ref="chartRef"
diff --git a/src/modules/02_organization/components/StructureOrgMain.vue b/src/modules/02_organization/components/StructureOrgMain.vue
index 7a4b8fe57..374fe8546 100644
--- a/src/modules/02_organization/components/StructureOrgMain.vue
+++ b/src/modules/02_organization/components/StructureOrgMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, onBeforeMount } from "vue";
+import { ref, onMounted, watch, onBeforeMount, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
@@ -24,10 +24,9 @@ const dataSource = ref(chartData); // ข้อมูล Chart
 const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
+const scrollContainer = ref<HTMLElement | null>(null);
 
-/**
- * fetch ข้อมูล Chart โครงสร้าง
- */
+/** fetch ข้อมูล Chart โครงสร้าง*/
 async function fetchOrgChart() {
   if (rootOrgID.value) {
     showLoader();
@@ -97,18 +96,20 @@ async function refreshChart(data: any) {
   if (data.value !== undefined) data.value = 0;
 }
 
-/**
- * โหลด Chart รูป
- */
-function savePNG() {
-  chartRef.value.savePNG();
+/** โหลด Chart รูป*/
+async function savePNG() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePNG();
+  hideLoader();
 }
 
-/**
- * โหลด Chart PDF
- */
-function savePDF() {
-  chartRef.value.savePDF();
+/** โหลด Chart PDF*/
+async function savePDF() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePDF();
+  hideLoader();
 }
 
 watch(
@@ -129,6 +130,14 @@ watch(
   }
 );
 
+/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
+async function scrollToCenter() {
+  const container = scrollContainer.value;
+  if (container) {
+    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
+  }
+}
+
 onMounted(async () => {
   rootOrgID.value =
     store.typeOrganizational === "current"
@@ -137,7 +146,8 @@ onMounted(async () => {
       ? store.draftId
       : store.historyId;
 
-  fetchOrgChart();
+  await fetchOrgChart();
+  await scrollToCenter();
 });
 
 onBeforeMount(() => {
@@ -164,7 +174,16 @@ onBeforeMount(() => {
         </q-btn>
       </div>
       <q-separator />
-      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+      <div
+        ref="scrollContainer"
+        style="
+          overflow-x: auto;
+          overflow-y: auto;
+          height: 70vh;
+          position: relative;
+        "
+        class="q-pt-md"
+      >
         <OrgChart
           v-if="storeOrg.dataSource"
           style="height: 70vh"