Merge branch 'DEV' of https://mygit.myhr.co.th/angular/myAppraisal into DEV

src/app/components/competency-management/competency-management.component.html

@@ -10,35 +10,43 @@
             <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                 <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                     href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
-                    aria-controls="underline-1" (click)="pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','ตัวชี้วัดเเละหลักสูตร']">
+                    aria-controls="underline-1"
+                    (click)="activeTab='underline-1';pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','ตัวชี้วัดเเละหลักสูตร']">
                     ตัวชี้วัดเเละหลักสูตร
                 </a>
                 <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
-                    aria-controls="underline-2" (click)="pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','จัดกลุ่มสมรรถนะ']">
+                    aria-controls="underline-2"
+                    (click)="activeTab='underline-2';pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','จัดกลุ่มสมรรถนะ']">
                     จัดกลุ่มสมรรถนะ
                 </a>
                 <a class="text-base font-medium hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                     href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
-                    aria-controls="underline-3" (click)="pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','กำหนดผู้อนุมัติ']">
+                    aria-controls="underline-3"
+                    (click)="activeTab='underline-3';pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','กำหนดผู้อนุมัติ']">
                     กำหนดผู้อนุมัติ
                 </a>
             </nav>
         </div>
         <div class="mt-3 px-3rem">
-            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"
+                *ngIf="activeTab === 'underline-1'">
                 <app-indicators-and-curriculum *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
-                    (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-indicators-and-curriculum>
+                    (sendPathTitle)="pathTitle=$event"
+                    (sendGroupShow)="groupShow=$event"></app-indicators-and-curriculum>
                 <app-edit-group-indicators *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
                     (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-group-indicators>
             </div>
-            <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2">
+            <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2"
+                *ngIf="activeTab === 'underline-2'">
                 <app-group-competencies *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
                     (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-group-competencies>
                 <app-edit-group-competencies *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
                     (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-group-competencies>
             </div>
-            <div id="underline-3" role="tabpanel" aria-labelledby="underline-item-3">
+            <div id="underline-3" role="tabpanel" aria-labelledby="underline-item-3"
+                *ngIf="activeTab === 'underline-3'">
+                <!-- เนื้อหาของ Tab 3 -->
             </div>
         </div>
     </div>

src/app/components/competency-management/competency-management.component.ts

@@ -7,5 +7,6 @@ import { Component } from '@angular/core';
 })
 export class CompetencyManagementComponent {
   pathTitle = ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ','ตัวชี้วัดและหลักสูตร']
+  activeTab: string = 'underline-1'; // Tab แรกแสดงเป็นค่าเริ่มต้น
   groupShow = '1'
 }