Add New Tab about placement2Detail

src/interface/request/main/main.ts

@@ -277,5 +277,38 @@ const tabList = readonly<tabType[]>([
   },
 ]);
 
-export { menuList, tabList };
+const tabList_placement = readonly<tabType[]>([
+  {
+    key: 1,
+    label: "ข้อมูลทั่วไป",
+    tag: "information",
+  },
+  {
+    key: 2,
+    label: "ประวัติการศึกษา",
+    tag: "education",
+  },
+  {
+    key: 3,
+    label: "ใบอนุญาตประกอบอาชีพ",
+    tag: "certicate",
+  },
+  {
+    key: 4,
+    label: "เครื่องราชอิสริยาภรณ์",
+    tag: "insignia",
+  },
+  {
+    key: 5,
+    label: "ผลการสอบ",
+    tag: "examresult",
+  },
+  {
+    key: 6,
+    label: "การคัดกรองคุณสมบัติ",
+    tag: "qualification",
+  },
+]);
+
+export { menuList, tabList ,tabList_placement };
 export type { ScrollType, tabType, menuType, notiType, optionType };

src/modules/05_placement/components/exams_other/Detail.vue

@@ -45,19 +45,19 @@ onMounted(async () => {
                 <EducationVue v-model:statusEdit="statusEdit" />
             </div>
             <div class="horizontal-line"></div>
-            <div id="certicate" name="15" class="row col-12 q-mt-md">
+            <div id="certicate" name="4" class="row col-12 q-mt-md">
                 <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
             </div>
             <div class="horizontal-line"></div>
-            <div id="insignia" name="4" class="row col-12 q-mt-md">
+            <div id="insignia" name="5" class="row col-12 q-mt-md">
                 <InsigniaVue v-model:statusEdit="statusEdit" />
             </div>
             <div class="horizontal-line"></div>
-            <div id="examresult" name="0" class="q-px-lg q-py-lg">
+            <div id="examresult" name="6" class="q-px-lg q-py-lg">
                 <ExamResult />
             </div>
                 <div class="horizontal-line"></div>
-            <div id="qualification" name="0" class="q-px-lg q-py-lg">
+            <div id="qualification" name="7" class="q-px-lg q-py-lg">
                 <Qualification v-model:statusEdit="statusEdit" />
             </div>
         </q-card>

src/views/MainLayout.vue

@@ -10,7 +10,7 @@ import type {
   notiType,
   optionType,
 } from "../interface/request/main/main";
-import { menuList, tabList } from "../interface/request/main/main";
+import { menuList, tabList ,tabList_placement } from "../interface/request/main/main";
 
 const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
 const store = useDataStore();
@@ -67,6 +67,10 @@ const tabScroll = () => {
   return route.name == "registryDetail";
 };
 
+const tabScroll2 = () => {
+  return route.name == "placement2Detail";
+};
+
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
@@ -93,6 +97,7 @@ const toggleBtnLeft = () => {
 const onScroll = (scroll: ScrollType) => {
   const { position } = scroll;
   updateScroll(position);
+  updateScroll2(position);
 };
 
 /**
@@ -152,6 +157,60 @@ 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 เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -235,7 +294,8 @@ const tagClick = (tag: string) => {
   //   router.replace({ hash });
   if (route.hash !== hash) {
     const check = activeBtn();
-    if (check) {
+    const check2 = activeBtn2();
+    if (check || check2) {
       //   router.replace({ hash, position: { x: 0, y: 0 } });
       //   router.replace({ hash }).then(() => {
       //     setVerticalScrollPosition(window, offset, 300);
@@ -436,7 +496,7 @@ if (keycloak.tokenParsed != null) {
         <q-btn
           size="13px"
           class="bg-blue-1"
-          v-if="activeBtn()"
+          v-if="activeBtn() || activeBtn2()"
           flat
           dense
           round
@@ -775,6 +835,44 @@ if (keycloak.tokenParsed != null) {
         </q-list>
       </q-scroll-area>
     </q-drawer>
+
+    <!-- drawer page placement2/detail/:id -->
+    <q-drawer
+      side="right"
+      class="bg-grey-2"
+      show-if-above
+      v-if="tabScroll2()"
+      v-model="drawerR"
+      :width="220"
+      :breakpoint="1023"
+    >
+      <q-scroll-area class="fit">
+        <q-list padding>
+          <q-item
+            v-for="(tabItem, index) in tabList_placement"
+            :key="index"
+            :id="'tab--' + tabItem.tag"
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="activeTab(tabItem.tag)"
+            clickable
+            v-ripple
+            dense
+            exact
+            @click="tagClick(tabItem.tag)"
+          >
+            <q-item-section>
+              <q-item-label
+                ><q-icon size="11px" name="mdi-circle-medium" /><span
+                  class="q-pl-xs"
+                  >{{ tabItem.label }}</span
+                ></q-item-label
+              >
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-scroll-area>
+    </q-drawer>
     <!-- drawer -->
 
     <q-page-container class="bg-grey-2">