การจัดการข้อมูลองค์กร>ข้อมูลลักษณะงาน>ระดับพนักงาน(PL)

src/app/components/dashboard/dashboard.module.ts

@@ -33,6 +33,7 @@ import { JobDescriptionComponent } from '../job-description/job-description.comp
 import { PositionUnitComponent } from '../job-description/position/position-unit.component';
 import { EmployeeGroupUnit } from '../job-description/employee-group-unit/employee-group-unit.component';
 import { EmployeeCategories } from '../job-description/employee-categories/employee-categories.component';
+import { EmployeeLevel } from '../job-description/employee-level/employee-level.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -62,6 +63,7 @@ import { EmployeeCategories } from '../job-description/employee-categories/emplo
     PositionUnitComponent,
     EmployeeGroupUnit,
     EmployeeCategories,
+    EmployeeLevel
   ],
   imports: [
     CommonModule,

src/app/components/job-description/employee-categories/employee-categories.component.html

@@ -71,8 +71,7 @@
                             *ngFor="let item of ['รหัสประเภทพนักงาน','รายละเอียด(ไทย) *','รายละเอียด(อังกฤษ)','Action']; let f = first; let l = last; let i = index">
                             <th scope="col" class="relative head-table" [class.!text-center]="f||l" [ngStyle]="f ? {'width.px': 200, 'text-align': 'center'} : {}" >
                                 <span>{{ item }}</span>
-                                
-                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&i!==2">
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
                                     <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
                                         height="16" fill="currentColor" viewBox="0 0 16 16">
                                         <path
@@ -80,6 +79,14 @@
                                         </path>
                                     </svg>
                                 </div>
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
+                                    <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="200"
+                                        height="16" fill="currentColor" viewBox="0 0 16 16">
+                                        <path
+                                            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                        </path>
+                                    </svg>
+                                </div>
                             </th>
                         </ng-container>
                     </tr>

src/app/components/job-description/employee-level/employee-level.component.scss

+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+    display: flex;
+    width: 100%;
+    cursor: pointer;
+    margin-bottom: 10px;
+  }
+  
+  .nav-item {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  
+  .nav-link {
+    text-decoration: none;
+    padding: 10px 20px;
+    display: inline-block;
+    font-size: large;
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .nav-link:hover {
+    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+  }
+  
+  .nav-link.active {
+    color: #ffffff; /* สีตัวอักษรในสถานะ active */
+    font-size: large;
+    border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+    background-color: rgb(var(--color-primary));
+    border-width: 2px 2px 0px 2px;
+    border-style: solid;
+    border-color: rgb(var(--color-primary));
+    border-radius: 5px 5px 0px 0px;
+  }
+  
+  .tab-content {
+    margin-top: 20px;
+  }
+  
+  .tab-pane.active {
+    display: block;
+  }
+  
+  .nav-item-text {
+    list-style: none;
+    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+  }
+  .nav-link-text {
+    text-decoration: none;
+    display: inline-block;
+    font-size: large;
+    color: #569bf5;
+    border-bottom: 2px solid #569bf5;
+    line-height: 0.8;
+  }
\ No newline at end of file

src/app/components/job-description/employee-level/employee-level.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-employee-level',
+  templateUrl: './employee-level.component.html',
+  styleUrls: ['./employee-level.component.scss']
+})
+export class EmployeeLevel {
+  @Input() pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
+  @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
+  activeTab: string = 'tab1'; // กำหนด tab เริ่มต้น
+
+  // ฟังก์ชันในการเปลี่ยนแท็บ
+  changeTab(tab: { id: string, text: string }) {
+    this.sendPathTitle.emit(['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text])
+    this.activeTab = tab.id;
+  }
+}

src/app/components/job-description/job-description.component.html

@@ -38,6 +38,12 @@
                         (sendPathTitle)="pathTitle=$event"></app-employee-categories>
                 </div>
             </div>
+            <div *ngIf="activeTab === 'tab5'" class="tab-pane">
+                <div class="mt-5">
+                    <app-employee-level [pathTitle]="pathTitle"
+                        (sendPathTitle)="pathTitle=$event"></app-employee-level>
+                </div>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file

src/app/components/job-description/position/position-unit.component.html

@@ -67,7 +67,7 @@
                 <thead class="bg-gray-50 dark:bg-black/20">
                     <tr style="height: 60px;">
                         <ng-container
-                            *ngFor="let item of ['รหัสตำแหน่ง','รายละเอียด(ไทย)*','รายละเอียด (อังกฤษ)','Action']; let f = first; let l = last; let i = index;">
+                            *ngFor="let item of ['รหัสตำแหน่ง','รายละเอียด(ไทย) *','รายละเอียด (อังกฤษ)','Action']; let f = first; let l = last; let i = index;">
                             <th scope="col" class="relative head-table" [class.!text-center]="f||l" [ngStyle]="{i} ? {'width.px': 50, 'text-align': 'center'} : {}">
                                 <span>{{ item }}</span>
                                 <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">