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

src/app/components/account-settings/account-settings.component.html

@@ -9,7 +9,7 @@
         <ul class="nav-tabs">
             <li class="nav-item" *ngFor="let item of [{id:'tab1',text:'สร้างชื่อผู้ใช้งาน'},
             {id:'tab2',text:'กำหนดรหัสผ่าน'},
-            {id:'tab3',text:'จัดการผู้ใช้งาน (PL)'}]" (click)="changeTab(item)">
+            {id:'tab3',text:'จัดการผู้ใช้งาน'}]" (click)="changeTab(item)">
                 <a [class.active]="activeTab === item.id" class="nav-link">{{item.text}}</a>
             </li>
         </ul>
@@ -20,6 +20,12 @@
                         (sendPathTitle)="pathTitle=$event"></app-user-settings>
                 </div>
             </div>
+            <div *ngIf="activeTab === 'tab2'" class="tab-pane">
+                <div class="mt-5">
+                    <app-set-a-password [pathTitle]="pathTitle"
+                        (sendPathTitle)="pathTitle=$event"></app-set-a-password>
+                </div>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file

src/app/components/account-settings/set-a-password/set-a-password.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/account-settings/set-a-password/set-a-password.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-set-a-password',
+  templateUrl: './set-a-password.component.html',
+  styleUrls: ['./set-a-password.component.scss']
+})
+export class SetAPasswordComponent {
+  @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/dashboard/dashboard.module.ts

@@ -36,6 +36,7 @@ import { EmployeeCategories } from '../job-description/employee-categories/emplo
 import { AccountSettingsComponent } from '../account-settings/account-settings.component';
 import { UserSettingsComponent } from '../account-settings/user-settings/user-settings.component';
 import { EmployeeLevel } from '../job-description/employee-level/employee-level.component';
+import { SetAPasswordComponent } from '../account-settings/set-a-password/set-a-password.component';
 
 @NgModule({
   declarations: [
@@ -69,6 +70,7 @@ import { EmployeeLevel } from '../job-description/employee-level/employee-level.
     AccountSettingsComponent,
     UserSettingsComponent,
     EmployeeLevel,
+    SetAPasswordComponent
   ],
   imports: [
     CommonModule,

src/assets/css/style.css

@@ -1604,7 +1604,7 @@ select option:active,
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 .box-body{
-  padding: 1.5rem;
+  padding: 0rem;
 }
 .box-footer{
   border-bottom-right-radius: 0.25rem;