Merge branch 'develop' into working

src/views/MainLayout.vue

@@ -13,7 +13,7 @@ import type {
 import {
   menuList,
   tabList,
-  tabList_placement,
+  tabListPlacement,
 } from "../interface/request/main/main";
 
 const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
@@ -71,10 +71,6 @@ const tabScroll = () => {
   return route.name == "registryDetail";
 };
 
-const tabScroll2 = () => {
-  return route.name == "placement2Detail";
-};
-
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
@@ -101,7 +97,7 @@ const toggleBtnLeft = () => {
 const onScroll = (scroll: ScrollType) => {
   const { position } = scroll;
   updateScroll(position);
-  updateScroll2(position);
+  updateScrollPlacement(position);
 };
 
 /**
@@ -161,60 +157,6 @@ const activeBtn = () => {
   return route.name == "registryDetail" && rightActive.value;
 };
 
-const updateScroll2 = (position: number) => {
-  // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
-  if (position === void 0) {
-    position = document.documentElement.scrollTop || document.body.scrollTop;
-  }
-
-  let last;
-  /**
-   * วนหา id ของ div นั้น
-   */
-  for (const i in tabList_placement) {
-    const section = tabList_placement[i];
-    const item = document.getElementById(section.tag);
-    /**
-     * วนหา id ของ div หน้านั้น
-     * เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
-     * เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ  ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
-     * ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
-     * ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
-     */
-    if (item === null) {
-      continue;
-    }
-
-    if (item.offsetTop >= position + 155) {
-      if (last === void 0) {
-        last = section.tag;
-      }
-      break;
-    } else {
-      last = section.tag;
-    }
-  }
-  /**
-   * ถ้า last ไม่เท่ากับ undifind
-   * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
-   * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
-   */
-  if (last !== void 0) {
-    changeTab(last);
-    const tocEl = document.getElementById("tab--" + last);
-    if (tocEl) {
-      tocEl.scrollIntoView({ block: "nearest" });
-    }
-  }
-};
-
-/**
- * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดหน่อยงานอื่นๆ และ rightActive เท่ากับ true
- */
-const activeBtn2 = () => {
-  return route.name == "placement2Detail" && rightActive.value;
-};
-
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -298,8 +240,7 @@ const tagClick = (tag: string) => {
   //   router.replace({ hash });
   if (route.hash !== hash) {
     const check = activeBtn();
-    const check2 = activeBtn2();
-    if (check || check2) {
+    if (check) {
       //   router.replace({ hash, position: { x: 0, y: 0 } });
       //   router.replace({ hash }).then(() => {
       //     setVerticalScrollPosition(window, offset, 300);
@@ -314,6 +255,71 @@ const tagClick = (tag: string) => {
   }
 };
 
+//**** Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
+const tabScrollPlacement = () => {
+  return route.name == "PlacementPersonalDetail";
+};
+
+const updateScrollPlacement = (position: number) => {
+  if (position === void 0) {
+    position = document.documentElement.scrollTop || document.body.scrollTop;
+  }
+
+  let last;
+  for (const i in tabListPlacement) {
+    const section = tabListPlacement[i];
+    const item = document.getElementById(section.tag);
+
+    if (item === null) {
+      continue;
+    }
+
+    if (item.offsetTop >= position + 100) {
+      if (last === void 0) {
+        last = section.tag;
+      }
+      break;
+    } else {
+      last = section.tag;
+    }
+  }
+
+  if (last !== void 0) {
+    changeTab(last);
+    const tocEl = document.getElementById("tab--" + last);
+    if (tocEl) {
+      tocEl.scrollIntoView({ block: "nearest" });
+    }
+  }
+};
+
+const activeBtnPlacement = () => {
+  return route.name == "PlacementPersonalDetail" && rightActive.value;
+};
+
+const activeTabPlacement = (tag: string) => {
+  return tabData.value == tag;
+};
+
+const tagClickPlacement = (tag: string) => {
+  const hash = `#${tag}`;
+  const items = document.getElementById(tag);
+  const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
+  //   router.replace({ hash });
+  if (route.hash !== hash) {
+    const checkPlacement = activeBtnPlacement();
+    if (checkPlacement) {
+      drawerR.value = !drawerR.value;
+      setVerticalScrollPosition(window, offset, 300);
+    } else {
+      setVerticalScrollPosition(window, offset, 300);
+    }
+  } else {
+    setVerticalScrollPosition(window, offset, 300);
+  }
+};
+//**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
+
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
@@ -500,7 +506,7 @@ if (keycloak.tokenParsed != null) {
         <q-btn
           size="13px"
           class="bg-blue-1"
-          v-if="activeBtn() || activeBtn2()"
+          v-if="activeBtn() || activeBtnPlacement()"
           flat
           dense
           round
@@ -848,7 +854,7 @@ if (keycloak.tokenParsed != null) {
       side="right"
       class="bg-grey-2"
       show-if-above
-      v-if="tabScroll2()"
+      v-if="tabScrollPlacement()"
       v-model="drawerR"
       :width="220"
       :breakpoint="1023"
@@ -856,17 +862,17 @@ if (keycloak.tokenParsed != null) {
       <q-scroll-area class="fit">
         <q-list padding>
           <q-item
-            v-for="(tabItem, index) in tabList_placement"
+            v-for="(tabItem, index) in tabListPlacement"
             :key="index"
             :id="'tab--' + tabItem.tag"
             class="tabNative"
             active-class="text-blue-7 active-item text-weight-medium tabActive"
-            :active="activeTab(tabItem.tag)"
+            :active="activeTabPlacement(tabItem.tag)"
             clickable
             v-ripple
             dense
             exact
-            @click="tagClick(tabItem.tag)"
+            @click="tagClickPlacement(tabItem.tag)"
           >
             <q-item-section>
               <q-item-label