module myjob

src/app/DPU/myjob/admin-manage/admin-manage.component.css

+:host {
+  display: block;
+}

src/app/DPU/myjob/admin-manage/admin-manage.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { FormsModule } from "@angular/forms";
+import swal from 'sweetalert';
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { SharedModule } from "../../../shared/shared.module";
+import { UserProfileModel } from "../../models/user.model";
+import { TokenService } from "../../../shared/services/token.service";
+import { FileUploadModule } from 'ng2-file-upload';
+import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
+import { environment } from "../../../../environments/environment";
+import { AdminService } from "../../services/admin.service";
+
+@Component({
+  selector: 'app-admin-manage',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    FileUploadModule
+],
+  templateUrl: './admin-manage.component.html',
+  styleUrl: './admin-manage.component.css'
+})
+export class AdminManageComponent {
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') public modalDetail?: ElementRef;
+  action = "new";
+  allSelected = false;
+  someSelected = false;
+  confirmPassword = ""
+  itemsList: UserProfileModel[] = []
+  filterList: UserProfileModel[] = []
+  selectedItems = new Map<string, boolean>();
+  selectModel: UserProfileModel = new UserProfileModel()
+  empList: UserProfileModel[] = []
+  descName = 'engName'
+  pageIndex = 0;
+    uploaderProfile: FileUploader | undefined;
+    uploadErrorMsg: string = "";
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems()
+    }
+  }
+
+  _searchTerm = "";
+  constructor(private adminService: AdminService, public translate: TranslateService, private tokenService: TokenService) {
+    this.uploadConfig()
+  }
+
+  uploadConfig() {
+    this.uploaderProfile = new FileUploader({
+      url: environment.baseUrl + "/api/upload-image",
+      isHTML5: true,
+      authToken: this.tokenService.getToken()!,
+    });
+
+    this.uploaderProfile.onAfterAddingFile = (fileItem: FileItem) => {
+      fileItem.withCredentials = false;
+      this.uploadErrorMsg = "";
+
+      while (this.uploaderProfile!.queue.length > 1) {
+        this.uploaderProfile!.queue[0].remove();
+      }
+
+      if (fileItem.file.size > 5000000) {
+        this.uploadErrorMsg = "maximum file size 5mb.";
+        swal("Opp!!", "ไม่สามารถอัพโหลดได้", "info");
+        fileItem.isCancel = true;
+        return;
+      }
+
+      if (fileItem.file.type!.indexOf("image") === -1) {
+        this.uploadErrorMsg = "please upload image only.";
+        swal("Opp!!", "ไม่สามารถอัพโหลดได้", "info");
+        fileItem.isCancel = true;
+        return;
+      }
+
+      fileItem.upload();
+    };
+
+    this.uploaderProfile.onCompleteItem = (
+      item: FileItem,
+      response: string,
+      status: number,
+      headers: ParsedResponseHeaders
+    ) => {
+      if (item.isSuccess) {
+        const res = JSON.parse(response);
+        console.log("res", res);
+        this.selectModel.picture = res.filename
+        swal(res.message, "บันทึกสำเร็จ", "success");
+
+      } else {
+        this.uploadErrorMsg = "cannot upload file.";
+        swal("Opp!!", "ไม่สามารถอัพโหลดได้", "info");
+      }
+    };
+  }
+
+
+  ngOnInit(): void {
+    this.adminService.getLists().subscribe(result => {
+      this.itemsList = result.filter(e => e.role == 99)
+      this.updatePagedItems()
+    })
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.memberId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.username?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.email?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.phoneNumber?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.getRole()?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.getStatus()?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.getFullname()?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+  delete(item: UserProfileModel) {
+    swal({
+      title: "Are you sure?",
+      text: "You won't be able to revert this!",
+      icon: "warning",
+
+      dangerMode: true,
+      buttons: ["Cancel", "Yes,Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.adminService.delete(item).subscribe(result => {
+            swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+            this.ngOnInit()
+          })
+        }
+
+      });
+  }
+
+  new() {
+    this.action = 'add'
+    this.selectModel = new UserProfileModel()
+  }
+
+  view(item: UserProfileModel) {
+    this.action = 'edit'
+    this.confirmPassword = ''
+    this.selectModel = new UserProfileModel(item)
+    console.log(this.selectModel)
+
+  }
+
+  save() {
+    swal({
+      title: "Are you sure?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectModel.role = 99
+          if (this.action == 'add') {
+            this.adminService.save(this.selectModel).subscribe(result => {
+              console.log(result)
+              swal("Save Success!!", "บันทึกข้อมูลสมาชิก", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          } else if (this.action == 'edit') {
+            this.adminService.update(this.selectModel).subscribe(result => {
+              console.log(result)
+              swal("Update Success!!", "บันทึกข้อมูลสมาชิก", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          }
+
+        }
+
+      });
+
+
+  }
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.memberId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.memberId));
+  }
+
+  onCheckboxChange(memberId: string) {
+    const isSelected = this.selectedItems.get(memberId) || false;
+    this.selectedItems.set(memberId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.memberId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.memberId));
+  }
+
+  deleteSelect() {
+    let employeeInfo = '';
+    this.selectedItems.forEach((isSelected, memberId) => {
+      if (isSelected) {
+        const user = this.itemsList.find(user => user.memberId === memberId);
+        if (user) {
+          employeeInfo += `${this.translate.instant('Fullname')}: ${user.getFullname()}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: employeeInfo,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, memberId) => {
+            if (isSelected) {
+              const user = this.itemsList.find(user => user.memberId === memberId);
+              if (user) {
+                this.adminService.delete(user).subscribe(result => {
+                  swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+  adjustSelect(status: number) {
+    let title = "Are you sure?"
+    let employeeInfo = ''; // ตัวแปรสำหรับเก็บข้อมูลพนักงาน
+    this.selectedItems.forEach((isSelected, memberId) => {
+      if (isSelected) {
+        const user = this.itemsList.find(user => user.memberId === memberId);
+        if (user) {
+          employeeInfo += `${this.translate.instant('Fullname')}: ${user.getFullname()}\n`;
+        }
+      }
+    });
+    swal({
+      title: title,
+      text: employeeInfo,
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, memberId) => {
+            if (isSelected) {
+              const user = this.itemsList.find(user => user.memberId === memberId);
+              if (user) {
+                user.status = status
+                this.adminService.update(user).subscribe(result => {
+                  swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+
+      });
+  }
+
+  filterEmp(empId: string) {
+    this.selectModel = this.empList.filter(e => e.memberId == empId)[0]
+  }
+
+}

src/app/DPU/myjob/article-manage/article-manage.component.css

+:host {
+  display: block;
+}
+.small-html {
+  font-size: 0.85rem; /* ลดขนาดฟอนต์ */
+  line-height: 1.2;   /* ลดระยะบรรทัด */
+  max-height: 150px;  /* จำกัดความสูง */
+  overflow-y: auto;   /* ถ้าเนื้อหายาวเกิน ให้เลื่อนดูได้ */
+  display: block;
+}
+
+.border-radius-1{
+  border-radius: 0.50rem;
+}
+
+.font-14{
+  font-size: 14px;
+}
+.font-16{
+  font-size: 16px;
+}
+.font-24{
+  font-size: 24px;
+}
+.font-36{
+  font-size: 36px;
+}
+.page {
+    display: flex;
+    height: auto;
+    flex-direction: column;
+}
+
+.hs-tab-active {
+    background-color: rgb(21, 76, 156) !important;
+    border-color: rgb(21, 76, 156) !important;
+    color: #FFFFFF !important;
+}
+
+.active {
+    background-color: rgb(21, 76, 156) !important;
+    border-color: rgb(21, 76, 156) !important;
+    color: #FFFFFF !important;
+}
+.border-color{
+  border: 8px solid rgb(255, 255, 255);
+}
+
+.ti-btn-amber-full{
+  background-color: #fcd34d;
+  color: #FFFFFF;
+}
\ No newline at end of file

src/app/DPU/myjob/company-department/career-cluster/career-cluster.component.ts

+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router, RouterModule } from '@angular/router';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { MatPaginator } from '@angular/material/paginator';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { CommonModule } from '@angular/common';
+import { FileUploadModule } from 'ng2-file-upload';
+import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
+import { environment } from '../../../../../environments/environment';
+import { TokenService } from '../../../../shared/services/token.service'
+import { QuillModule } from 'ngx-quill';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CareerClusterService } from '../../../services/career-cluster.service';
+import { CareerClusterModel } from '../../../models/career-cluster.model';
+
+@Component({
+  selector: 'app-career-cluster',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    MatPaginator,
+    RouterModule,
+    FileUploadModule,
+    QuillModule,
+    MatDialogModule
+  ],
+  templateUrl: './career-cluster.component.html',
+  styleUrl: './career-cluster.component.css',
+})
+export class CareerClusterComponent {
+  quillConfig = {
+    toolbar: [
+      ['link'],                                         // เพิ่มปุ่มลิงก์
+      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+      ['blockquote', 'code-block'],
+
+      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+      [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+      [{ 'direction': 'rtl' }],                         // text direction
+
+      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+      [{ 'align': [] }],
+      ['clean'],                                         // remove formatting button
+
+
+    ]
+  };
+
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') public modalDetail?: ElementRef;
+  @ViewChild("CareerClusterModel") CareerClusterModel: any;
+  @ViewChild('profileChangeInput') profileChangeInputRef!: ElementRef;
+  dialogRef: any
+  currentContentTab: number = 1;
+  currentExcerptTab: number = 1;
+
+  action = "new";
+  allSelected = false;
+  someSelected = false;
+  itemsList: CareerClusterModel[] = [];
+  filterList: CareerClusterModel[] = [];
+  selectModel: CareerClusterModel = new CareerClusterModel();
+  selectedItems = new Map<string, boolean>();
+  // empList: CareerClusterModel[] = [];
+  // descName = 'engName'; 
+  pageIndex = 0;
+  uploaderProfile: FileUploader | undefined;
+  uploadErrorMsg: string = "";
+  modalStatus: "add" | "edit" = "add"
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false;
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems();
+    }
+  }
+
+  _searchTerm = "";
+
+  constructor(
+    private careercluster: CareerClusterService, 
+    public translate: TranslateService, 
+    private tokenService: TokenService, 
+    private router: Router, 
+    private dialog: MatDialog,
+  ) {
+  }
+
+  getPosition() {
+    this.careercluster.getList().subscribe({
+      next: (response: CareerClusterModel[]) => {
+        this.itemsList = response.map((x: any) => new CareerClusterModel(x, this.translate));
+        console.log('ข้อมูลตำแหน่ง (itemsList)', this.itemsList);
+        this.updatePagedItems();
+      },
+      error: (error) => {
+        console.error('error cant get position', error);
+        swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลตำแหน่งได้", "error");
+      }
+    });
+  }
+  
+  ngOnInit(): void {
+    this.getPosition();
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.careerClusterId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.remark?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+      // x.getStatus().toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+  delete(item: CareerClusterModel) {
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          const newPosition = new CareerClusterModel(item)
+          this.careercluster.deleteCareerCluster(newPosition).subscribe(result => {
+            swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
+            this.ngOnInit();
+          }, error => {
+            console.error("เกิดข้อผิดพลาดในการลบ:", error);
+            swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+          });
+        }
+      });
+  }
+
+  new() {
+    this.action = 'add';
+    this.selectModel = new CareerClusterModel();
+    // this.selectModel.status = 1;
+    this.selectModel.careerClusterId = "";
+    this.selectModel.thName = "";
+    this.selectModel.engName = "";
+    this.selectModel.remark = "";
+  }
+
+  view(item: CareerClusterModel) {
+    this.action = 'edit';
+    this.selectModel = new CareerClusterModel(item);
+    console.log(this.selectModel);
+  }
+
+  save() {
+    console.log('Before Save, selectModel is:', this.selectModel);
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["ยกเลิก", "ยืนยัน"],
+    })
+      .then((willSave: any) => {
+        if (willSave) {
+          this.careercluster.postCareerCluster(this.selectModel).subscribe(result => {
+            console.log(result);
+            swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
+            this.ngOnInit();
+            this.childModal?.nativeElement.click();
+          }, error => {
+            console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
+            swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
+          });
+        }
+      });
+  }
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.careerClusterId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.careerClusterId));
+  }
+
+  onCheckboxChange(careerClusterId: string) {
+    const isSelected = this.selectedItems.get(careerClusterId) || false;
+    this.selectedItems.set(careerClusterId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.careerClusterId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.careerClusterId));
+  }
+
+  deleteSelect() {
+    let employeeInfo = '';
+    this.selectedItems.forEach((isSelected, careerClusterId) => {
+      if (isSelected) {
+        const user = this.itemsList.find(user => user.careerClusterId === careerClusterId);
+        if (user) {
+          employeeInfo += `${this.translate.instant('thName')}: ${user.thName}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: employeeInfo,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, careerClusterId) => {
+            if (isSelected) {
+              const user = this.itemsList.find(user => user.careerClusterId === careerClusterId);
+              if (user) {
+                const newPosition = new CareerClusterModel(user)
+                this.careercluster.deleteCareerCluster(newPosition).subscribe(result => {
+                  swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+  // openDialog() {
+  //   this.dialogRef = this.dialog.open(this.CareerClusterModel, {
+  //     width: '1100px',
+  //     disableClose: false,
+  //   });
+  // }
+  // closeDialog() {
+  //   this.dialogRef.close()
+  // }
+
+}

src/app/DPU/myjob/company-department/category-company/category-company.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CategoryCompanyComponent } from './category-company.component';
+
+describe('CategoryCompanyComponent', () => {
+  let component: CategoryCompanyComponent;
+  let fixture: ComponentFixture<CategoryCompanyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CategoryCompanyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CategoryCompanyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/company-department/category-company/category-company.component.ts

+import { Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MatDialog } from '@angular/material/dialog';
+import swal from 'sweetalert';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../../../shared/shared.module';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { FileUploadModule } from 'ng2-file-upload';
+import { PdpaConfigComponent } from '../../pdpa-manage/pdpa-config/pdpa-config.component';
+import { QuillModule } from 'ngx-quill';
+import { CategoryModel } from '../../../models/category.model';
+import { CategoryCompanyService } from '../../../services/category-company.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    FileUploadModule,
+    QuillModule
+],
+  selector: 'app-category-company',
+  templateUrl: './category-company.component.html',
+  styleUrls: ['./category-company.component.css']
+})
+export class CategoryCompanyComponent implements OnInit {
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
+
+  currentTab = 1
+
+  allSelected = false;
+  someSelected = false;
+  itemsList: CategoryModel[] = []
+  filterList: CategoryModel[] = []
+  category: CategoryModel = new CategoryModel()
+  selectedItems = new Map<string, boolean>();
+  pageIndex = 0;
+
+  modalStatus: "add" | "edit" = "add"
+  isSaving = false;
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems()
+    }
+  }
+
+  _searchTerm = "";
+  constructor(private categoryCompanyService: CategoryCompanyService, public translate: TranslateService, private modal: MatDialog) {
+
+  }
+
+  ngOnInit(): void {
+    this.categoryCompanyService.list().subscribe(res => {
+      this.itemsList = res.map(item => new CategoryModel(item, this.translate));
+      this.filterList = [...this.itemsList];
+    });
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.categoryId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+
+  new() {
+    this.modalStatus = 'add'
+    this.category = new CategoryModel();
+  }
+
+  view(item: CategoryModel) {
+    this.modalStatus = 'edit';
+    this.category = new CategoryModel(item, this.translate);
+  }
+
+  save() {
+    swal({
+      title: "Are you sure?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+
+          if (this.modalStatus == 'add') {
+            console.log(this.category);
+            this.categoryCompanyService.post(this.category).subscribe(result => {
+              swal("Save Success!!", "บันทึกประเภทสำเร็จ", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          } else if (this.modalStatus == 'edit') {
+            const respone = new CategoryModel(this.category);
+            this.categoryCompanyService.post(respone).subscribe(result => {
+              console.log(result)
+              swal("Update Success!!", "บันทึกประเภทสำเร็จ", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          }
+        }
+      });
+  }
+
+  deletecategory(item: CategoryModel) {
+    const versionText = `${this.translate.instant('category')}: ${item.thName}`;
+    swal({
+      title: "Are you sure?",
+      text: `Confirm to delete :\n${versionText}\!`,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes,Delete it!"],
+    }).then((willDelete: any) => {
+      if (willDelete) {
+        const res = new CategoryModel(item)
+        this.categoryCompanyService.delete(res).subscribe(result => {
+          swal("Delete Success!!", "ลบข้อมูลสำเร็จ", "success");
+          this.ngOnInit();
+        });
+      }
+    });
+  }
+
+  deleteSelect() {
+    let categoryConfig = '';
+    this.selectedItems.forEach((isSelected, res) => {
+      if (isSelected) {
+        const category = this.itemsList.find(category => category.categoryId === res) as CategoryModel;
+        if (category) {
+          categoryConfig += `${this.translate.instant('category')}: ${category.thName}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: categoryConfig,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, res) => {
+            if (isSelected) {
+              const category = this.itemsList.find(category => category.categoryId === res);
+              if (category) {
+
+                const newcategory = new CategoryModel(category)
+                this.categoryCompanyService.delete(newcategory).subscribe(result => {
+                  swal("Delete Success!!", "ลบข้อมูลที่เลือกสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.categoryId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.categoryId));
+  }
+
+  onCheckboxChange(categoryId: string) {
+    const isSelected = this.selectedItems.get(categoryId) || false;
+    this.selectedItems.set(categoryId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.categoryId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.categoryId));
+  }
+
+  filterEmp(empId: string) {
+    this.category = this.itemsList.filter(e => e.categoryId == empId)[0]
+  }
+
+}

src/app/DPU/myjob/company-department/company-department.component.html

+company is worked
\ No newline at end of file

src/app/DPU/myjob/company-department/company-department.component.ts

+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { SharedModule } from '../../../shared/shared.module';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-company-department',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    MatPaginator,
+    RouterModule,
+  ],
+  templateUrl: './company-department.component.html',
+  styleUrl: './company-department.component.css',
+})
+export class CompanyDepartmentComponent {
+
+  ngOnInit(): void {
+  }
+}

src/app/DPU/myjob/company-department/company-position/company-position.component.ts

+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router, RouterModule } from '@angular/router';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { MatPaginator } from '@angular/material/paginator';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { CommonModule } from '@angular/common';
+import { FileUploadModule } from 'ng2-file-upload';
+import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
+import { environment } from '../../../../../environments/environment';
+import { TokenService } from '../../../../shared/services/token.service'
+import { QuillModule } from 'ngx-quill';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CompanyPositionService } from '../../../services/company-position.service';
+import { CompanyPositionModel } from '../../../models/company-position.model';
+
+@Component({
+  selector: 'app-company-position',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    MatPaginator,
+    RouterModule,
+    FileUploadModule,
+    QuillModule,
+    MatDialogModule
+  ],
+  templateUrl: './company-position.component.html',
+  styleUrl: './company-position.component.css',
+})
+export class CompanyPositionComponent {
+  quillConfig = {
+    toolbar: [
+      ['link'],                                         // เพิ่มปุ่มลิงก์
+      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+      ['blockquote', 'code-block'],
+
+      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+      [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
+      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
+      [{ 'direction': 'rtl' }],                         // text direction
+
+      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+      [{ 'align': [] }],
+      ['clean'],                                         // remove formatting button
+
+
+    ]
+  };
+
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') public modalDetail?: ElementRef;
+  @ViewChild("CompanyPositionModel") CompanyPositionModel: any;
+  @ViewChild('profileChangeInput') profileChangeInputRef!: ElementRef;
+  dialogRef: any
+  currentContentTab: number = 1;
+  currentExcerptTab: number = 1;
+
+  action = "new";
+  allSelected = false;
+  someSelected = false;
+  itemsList: CompanyPositionModel[] = [];
+  filterList: CompanyPositionModel[] = [];
+  selectModel: CompanyPositionModel = new CompanyPositionModel();
+  selectedItems = new Map<string, boolean>();
+  // empList: CompanyPositionModel[] = [];
+  // descName = 'engName'; 
+  pageIndex = 0;
+  uploaderProfile: FileUploader | undefined;
+  uploadErrorMsg: string = "";
+  modalStatus: "add" | "edit" = "add"
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false;
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems();
+    }
+  }
+
+  _searchTerm = "";
+
+  constructor(
+    private compositionservice: CompanyPositionService, 
+    public translate: TranslateService, 
+    private tokenService: TokenService, 
+    private router: Router, 
+    private dialog: MatDialog,
+  ) {
+  }
+
+  getPosition() {
+    this.compositionservice.getList().subscribe({
+      next: (response: CompanyPositionModel[]) => {
+        this.itemsList = response.map((x: any) => new CompanyPositionModel(x, this.translate));
+        console.log('ข้อมูลตำแหน่ง (itemsList)', this.itemsList);
+        this.updatePagedItems();
+      },
+      error: (error) => {
+        console.error('error cant get position', error);
+        swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลตำแหน่งได้", "error");
+      }
+    });
+  }
+  
+  ngOnInit(): void {
+    this.getPosition();
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.positionId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.remark?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+      // x.getStatus().toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+  delete(item: CompanyPositionModel) {
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          const newPosition = new CompanyPositionModel(item)
+          this.compositionservice.deletePosition(newPosition).subscribe(result => {
+            swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
+            this.ngOnInit();
+          }, error => {
+            console.error("เกิดข้อผิดพลาดในการลบ:", error);
+            swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+          });
+        }
+      });
+  }
+
+  new() {
+    this.action = 'add';
+    this.selectModel = new CompanyPositionModel();
+    // this.selectModel.status = 1;
+    this.selectModel.positionId = "";
+    this.selectModel.thName = "";
+    this.selectModel.engName = "";
+    this.selectModel.remark = "";
+  }
+
+  view(item: CompanyPositionModel) {
+    this.action = 'edit';
+    this.selectModel = new CompanyPositionModel(item);
+    console.log(this.selectModel);
+  }
+
+  save() {
+    console.log('Before Save, selectModel is:', this.selectModel);
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["ยกเลิก", "ยืนยัน"],
+    })
+      .then((willSave: any) => {
+        if (willSave) {
+          this.compositionservice.postPosition(this.selectModel).subscribe(result => {
+            console.log(result);
+            swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
+            this.ngOnInit();
+            this.childModal?.nativeElement.click();
+          }, error => {
+            console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
+            swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
+          });
+        }
+      });
+  }
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.positionId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.positionId));
+  }
+
+  onCheckboxChange(positionId: string) {
+    const isSelected = this.selectedItems.get(positionId) || false;
+    this.selectedItems.set(positionId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.positionId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.positionId));
+  }
+
+  deleteSelect() {
+    let employeeInfo = '';
+    this.selectedItems.forEach((isSelected, positionId) => {
+      if (isSelected) {
+        const user = this.itemsList.find(user => user.positionId === positionId);
+        if (user) {
+          employeeInfo += `${this.translate.instant('thName')}: ${user.thName}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: employeeInfo,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, positionId) => {
+            if (isSelected) {
+              const user = this.itemsList.find(user => user.positionId === positionId);
+              if (user) {
+                const newPosition = new CompanyPositionModel(user)
+                this.compositionservice.deletePosition(newPosition).subscribe(result => {
+                  swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+  // openDialog() {
+  //   this.dialogRef = this.dialog.open(this.CompanyPositionModel, {
+  //     width: '1100px',
+  //     disableClose: false,
+  //   });
+  // }
+  // closeDialog() {
+  //   this.dialogRef.close()
+  // }
+
+}

src/app/DPU/myjob/company-department/country-registration/country-registration.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CountryRegistrationComponent } from './country-registration.component';
+
+describe('CountryRegistrationComponent', () => {
+  let component: CountryRegistrationComponent;
+  let fixture: ComponentFixture<CountryRegistrationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CountryRegistrationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CountryRegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/company-department/country-registration/country-registration.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { FormsModule } from "@angular/forms";
+import swal from 'sweetalert';
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { FileUploadModule } from 'ng2-file-upload';
+import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
+import { Router } from "@angular/router";
+import { QuillModule } from "ngx-quill";
+import { MatDialog } from "@angular/material/dialog";
+import { SharedModule } from "../../../../shared/shared.module";
+import { PdpaConfigComponent } from "../../pdpa-manage/pdpa-config/pdpa-config.component";
+import { MyPdpaModel, PdpaModel } from "../../../models/pdpa.model";
+import { CountryService } from "../../../services/country.service";
+import { CountryModel } from "../../../models/country.model";
+
+@Component({
+  selector: 'app-country-registration',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    FileUploadModule,
+    QuillModule
+],
+  templateUrl: './country-registration.component.html',
+  styleUrl: './country-registration.component.css'
+})
+export class CountryRegistrationComponent {
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
+
+  currentTab = 1
+
+  allSelected = false;
+  someSelected = false;
+  itemsList: CountryModel[] = []
+  filterList: CountryModel[] = []
+  country: CountryModel = new CountryModel()
+  selectedItems = new Map<string, boolean>();
+  pageIndex = 0;
+
+  modalStatus: "add" | "edit" = "add"
+  isSaving = false;
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems()
+    }
+  }
+
+  _searchTerm = "";
+  constructor(private countryService: CountryService, public translate: TranslateService, private modal: MatDialog) {
+
+  }
+
+  ngOnInit(): void {
+    this.countryService.list().subscribe(res => {
+      this.itemsList = res.map(item => new CountryModel(item, this.translate));
+      this.filterList = [...this.itemsList];
+    });
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.countryId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+
+  new() {
+    this.modalStatus = 'add'
+    this.country = new CountryModel();
+  }
+
+  view(item: CountryModel) {
+    this.modalStatus = 'edit';
+    this.country = new CountryModel(item, this.translate);
+  }
+
+  save() {
+    swal({
+      title: "Are you sure?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+
+          if (this.modalStatus == 'add') {
+            console.log(this.country);
+            this.countryService.post(this.country).subscribe(result => {
+              swal("Save Success!!", "บันทึกประเทศสำเร็จ", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          } else if (this.modalStatus == 'edit') {
+            const respone = new CountryModel(this.country);
+            this.countryService.post(respone).subscribe(result => {
+              console.log(result)
+              swal("Update Success!!", "บันทึกประเทศสำเร็จ", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          }
+        }
+      });
+  }
+
+  deleteCountry(item: CountryModel) {
+    const versionText = `${this.translate.instant('Country')}: ${item.thName}`;
+    swal({
+      title: "Are you sure?",
+      text: `Confirm to delete :\n${versionText}\!`,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes,Delete it!"],
+    }).then((willDelete: any) => {
+      if (willDelete) {
+        const res = new CountryModel(item)
+        console.log(res);
+        this.countryService.delete(res).subscribe(result => {
+          swal("Delete Success!!", "ลบข้อมูลสำเร็จ", "success");
+          this.ngOnInit();
+        });
+      }
+    });
+  }
+
+  deleteSelect() {
+    let countryConfig = '';
+    this.selectedItems.forEach((isSelected, res) => {
+      if (isSelected) {
+        const country = this.itemsList.find(country => country.countryId === res) as CountryModel;
+        if (country) {
+          countryConfig += `${this.translate.instant('Country')}: ${country.thName}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: countryConfig,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, res) => {
+            if (isSelected) {
+              const country = this.itemsList.find(country => country.countryId === res);
+              if (country) {
+
+                const newCountry = new CountryModel(country)
+                console.log(newCountry);
+                
+                this.countryService.delete(newCountry).subscribe(result => {
+                  swal("Delete Success!!", "ลบข้อมูลที่เลือกสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.countryId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.countryId));
+  }
+
+  onCheckboxChange(countryId: string) {
+    const isSelected = this.selectedItems.get(countryId) || false;
+    this.selectedItems.set(countryId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.countryId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.countryId));
+  }
+
+  filterEmp(empId: string) {
+    this.country = this.itemsList.filter(e => e.countryId == empId)[0]
+  }
+
+}
\ No newline at end of file

src/app/DPU/myjob/company-department/degree-manage/degree-manage.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DegreeManageComponent } from './degree-manage.component';
+
+describe('DegreeManageComponent', () => {
+  let component: DegreeManageComponent;
+  let fixture: ComponentFixture<DegreeManageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DegreeManageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DegreeManageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/company-department/degree-manage/degree-manage.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { FormsModule } from "@angular/forms";
+import swal from 'sweetalert';
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { FileUploadModule } from 'ng2-file-upload';
+import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
+import { Router } from "@angular/router";
+import { QuillModule } from "ngx-quill";
+import { MatDialog } from "@angular/material/dialog";
+import { SharedModule } from "../../../../shared/shared.module";
+import { PdpaConfigComponent } from "../../pdpa-manage/pdpa-config/pdpa-config.component";
+import { MyPdpaModel, PdpaModel } from "../../../models/pdpa.model";
+import { DegreeModel } from "../../../models/degree.model";
+import { DegreeService } from "../../../services/degree.service";
+
+@Component({
+  selector: 'app-degree-manage',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    FileUploadModule,
+    QuillModule
+],
+  templateUrl: './degree-manage.component.html',
+  styleUrl: './degree-manage.component.css'
+})
+export class DegreeManageComponent {
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
+
+  currentTab = 1
+
+  allSelected = false;
+  someSelected = false;
+  itemsList: DegreeModel[] = []
+  filterList: DegreeModel[] = []
+  degree: DegreeModel = new DegreeModel()
+  selectedItems = new Map<string, boolean>();
+  pageIndex = 0;
+
+  modalStatus: "add" | "edit" = "add"
+  isSaving = false;
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems()
+    }
+  }
+
+  _searchTerm = "";
+  constructor(private degreeService: DegreeService, public translate: TranslateService, private modal: MatDialog) {
+
+  }
+
+  ngOnInit(): void {
+    this.degreeService.list().subscribe(res => {
+      this.itemsList = res.map(item => new DegreeModel(item, this.translate));
+      this.filterList = [...this.itemsList];
+    });
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.degreeId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.higher?.toLowerCase().indexOf(v.toLowerCase()) !== -1 
+    );
+  }
+
+
+  new() {
+    this.modalStatus = 'add'
+    this.degree = new DegreeModel();
+  }
+
+  view(item: DegreeModel) {
+    this.modalStatus = 'edit';
+    this.degree = new DegreeModel(item, this.translate);
+  }
+
+  save() {
+    swal({
+      title: "Are you sure?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+
+          if (this.modalStatus == 'add') {
+            console.log(this.degree);
+            this.degreeService.post(this.degree).subscribe(result => {
+              swal("Save Success!!", "บันทึกระดับการศึกษาสำเร็จ", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          } else if (this.modalStatus == 'edit') {
+            const respone = new DegreeModel(this.degree);
+            this.degreeService.post(respone).subscribe(result => {
+              console.log(result)
+              swal("Update Success!!", "บันทึกระดับการศึกษาสำเร็จ", "success");
+              this.ngOnInit()
+              this.childModal?.nativeElement.click()
+            })
+          }
+        }
+      });
+  }
+
+  deletedegree(item: DegreeModel) {
+    const versionText = `${this.translate.instant('degree')}: ${item.thName}`;
+    swal({
+      title: "Are you sure?",
+      text: `Confirm to delete :\n${versionText}\!`,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes,Delete it!"],
+    }).then((willDelete: any) => {
+      if (willDelete) {
+        const res = new DegreeModel(item)
+        console.log(res);
+        this.degreeService.delete(res).subscribe(result => {
+          swal("Delete Success!!", "ลบข้อมูลสำเร็จ", "success");
+          this.ngOnInit();
+        });
+      }
+    });
+  }
+
+  deleteSelect() {
+    let degreeConfig = '';
+    this.selectedItems.forEach((isSelected, res) => {
+      if (isSelected) {
+        const degree = this.itemsList.find(degree => degree.degreeId === res) as DegreeModel;
+        if (degree) {
+          degreeConfig += `${this.translate.instant('degree')}: ${degree.thName}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: degreeConfig,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, res) => {
+            if (isSelected) {
+              const degree = this.itemsList.find(degree => degree.degreeId === res);
+              if (degree) {
+
+                const newdegree = new DegreeModel(degree)
+                console.log(newdegree);
+                
+                this.degreeService.delete(newdegree).subscribe(result => {
+                  swal("Delete Success!!", "ลบข้อมูลที่เลือกสำเร็จ", "success");
+                  this.ngOnInit();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.degreeId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.degreeId));
+  }
+
+  onCheckboxChange(degreeId: string) {
+    const isSelected = this.selectedItems.get(degreeId) || false;
+    this.selectedItems.set(degreeId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.degreeId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.degreeId));
+  }
+
+  filterEmp(empId: string) {
+    this.degree = this.itemsList.filter(e => e.degreeId == empId)[0]
+  }
+
+}
\ No newline at end of file

src/app/DPU/myjob/company-department/job-type/job-type.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { JobTypeComponent } from './job-type.component';
+
+describe('JobTypeComponent', () => {
+  let component: JobTypeComponent;
+  let fixture: ComponentFixture<JobTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JobTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JobTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/company-department/job-type/job-type.component.ts

+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import swal from 'sweetalert';
+import { MatPaginator } from '@angular/material/paginator';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TokenService } from '../../../../shared/services/token.service';
+import { JobTypeModel } from '../../../models/job-type.model';
+import { JobTypeService } from '../../../services/job-type.service';
+
+@Component({
+  selector: 'app-job-type',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    MatPaginator,
+    RouterModule,
+  ],
+  templateUrl: './job-type.component.html',
+  styleUrl: './job-type.component.css',
+})
+export class JobTypeComponent {
+  @ViewChild("JobTypeModel") JobTypeModel: any;
+  dialogRef: any
+  currentengNameTab: number = 1;
+  currentExcerptTab: number = 1;
+
+  action = "new";
+  allSelected = false;
+  someSelected = false;
+  itemsList: JobTypeModel[] = [];
+  filterList: JobTypeModel[] = [];
+  selectModel: JobTypeModel = new JobTypeModel();
+  selectedItems = new Map<string, boolean>();
+ 
+  pageIndex = 0;
+
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false;
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems();
+    }
+  }
+
+  _searchTerm = "";
+
+  constructor(private jobtypeservice: JobTypeService, public translate: TranslateService, private tokenService: TokenService, private router: Router,) {
+  }
+
+
+  getJobtype() {
+    this.jobtypeservice.getList().subscribe({
+      next: (response: JobTypeModel[]) => {
+        this.itemsList = response.map((x: any) => new JobTypeModel(x, this.translate));
+        console.log('ข้อมูลบริษัท (itemsList)', this.itemsList);
+        this.updatePagedItems();
+      },
+      error: (error) => {
+        console.error('error cant get company', error);
+        swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.getJobtype();
+  }
+
+  filter(v: string) {
+    return this.itemsList?.filter(
+      (x) =>
+        x.jobTypeId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+      // x.getStatus().toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+  delete(item: JobTypeModel) {
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.jobtypeservice.deleteById(item.jobTypeId).subscribe(result => {
+            swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
+            this.ngOnInit();
+          }, error => {
+            console.error("เกิดข้อผิดพลาดในการลบ:", error);
+            swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
+          });
+        }
+      });
+  }
+
+  new() {
+    this.action = 'add';
+    this.selectModel = new JobTypeModel();
+    this.selectModel.jobTypeId = "";
+    this.selectModel.thName = "";
+    this.selectModel.engName = "";
+  }
+
+  view(item: JobTypeModel) {
+    this.action = 'edit';
+    this.selectModel = new JobTypeModel(item);
+  }
+
+  save() {
+    console.log('Before Save, selectModel is:', this.selectModel);
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["ยกเลิก", "ยืนยัน"],
+    })
+      .then((willSave: any) => {
+        if (willSave) {
+          this.jobtypeservice.post(this.selectModel).subscribe(result => {
+            console.log(result);
+            swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
+            this.ngOnInit();
+          }, error => {
+            console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
+            swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
+          });
+        }
+      });
+  }
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.jobTypeId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.jobTypeId));
+  }
+
+  onCheckboxChange(jobTypeId: string) {
+    const isSelected = this.selectedItems.get(jobTypeId) || false;
+    this.selectedItems.set(jobTypeId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.jobTypeId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.jobTypeId));
+  }
+
+  deleteSelect() {
+    let companyInfo = '';
+    const selectedjobTypeIdsToDelete: string[] = [];
+
+    this.selectedItems.forEach((isSelected, jobTypeId) => {
+      if (isSelected) {
+        const item = this.itemsList.find(c => c.jobTypeId === jobTypeId);
+        if (item) {
+          companyInfo += `${this.translate.instant('บริษัท')}: ${item.thName}\n`;
+          selectedjobTypeIdsToDelete.push(item.jobTypeId);
+        }
+      }
+    });
+
+    if (selectedjobTypeIdsToDelete.length === 0) {
+      swal("ข้อผิดพลาด", "กรุณาเลือกบริษัทที่ต้องการลบ", "warning");
+      return;
+    }
+
+    swal({
+      title: "คุณแน่ใจหรือไม่?",
+      text: companyInfo,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          const deletePromises = selectedjobTypeIdsToDelete.map(jobTypeId =>
+            this.jobtypeservice.deleteById(jobTypeId).toPromise()
+              .then(() => true)
+              .catch(error => {
+                console.error(`Error deleting company ${jobTypeId}:`, error);
+                return false;
+              })
+          );
+
+          Promise.all(deletePromises)
+            .then(results => {
+              const allSuccessful = results.every(success => success);
+              if (allSuccessful) {
+                swal("ลบสำเร็จ!!", "บันทึกข้อมูลสำเร็จ", "success");
+              } else {
+                swal("สำเร็จบางส่วน/ข้อผิดพลาด!!", "มีการลบข้อมูลบางส่วนไม่สำเร็จ หรือมีข้อผิดพลาด", "warning");
+              }
+              this.ngOnInit();
+              this.selectedItems.clear();
+              this.allSelected = false;
+              this.someSelected = false;
+            });
+        }
+      });
+  }
+}

src/app/DPU/myjob/company-department/province/province.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ProvinceComponent } from './province.component';
+
+describe('ProvinceComponent', () => {
+  let component: ProvinceComponent;
+  let fixture: ComponentFixture<ProvinceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProvinceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProvinceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/company-manage/company-manage.component.css

+:host {
+  display: block;
+}
+.small-html {
+  font-size: 0.85rem; /* ลดขนาดฟอนต์ */
+  line-height: 1.2;   /* ลดระยะบรรทัด */
+  max-height: 150px;  /* จำกัดความสูง */
+  overflow-y: auto;   /* ถ้าเนื้อหายาวเกิน ให้เลื่อนดูได้ */
+  display: block;
+}
+

src/app/DPU/myjob/employee/department/department.component.css

+:host {
+  display: block;
+}

src/app/DPU/myjob/employee/department/department.component.html

+<app-page-header [title]="'Department'" [activeTitle]="'จัดการบริษัท'" [title1]="'Department'"></app-page-header>
+
+
+<div class="grid grid-cols-12 gap-6">
+  <div class="xl:col-span-12 col-span-12">
+    <div class="box">
+      <div class="box-header justify-between">
+        <div class="box-title">
+          {{ 'All List' | translate}} <span
+            class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
+            data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+            translate}}
+          </a>
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
+            (click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
+            translate}}
+          </a>
+          <div>
+            <input class="form-control form-control" type="text" placeholder="{{ 'Search' | translate}}"
+              aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
+          </div>
+
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="table-responsive">
+          <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+            <thead>
+              <tr class="border-b border-defaultborder">
+                <th scope="col" class="!text-start">
+                  <input class="form-check-input check-all" type="checkbox" id="all-products"
+                    (change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
+                </th>
+                <th scope="col" class="text-start">{{ 'ID' | translate}}</th>
+                <th scope="col" class="text-start">{{ 'ชื่อแผนก' | translate}}</th>
+                <th scope="col" class="text-start"></th>
+              </tr>
+            </thead>
+            <tbody>
+              @for(item of filterList;track filterList){
+
+              <tr class="border border-defaultborder dark:border-defaultborder/10">
+                <td class="product-checkbox"><input class="form-check-input" type="checkbox"
+                    [checked]="selectedItems.get(item.departmentId)" (change)="onCheckboxChange(item.departmentId)"
+                    aria-label="..." value="">
+                </td>
+                <td><span class="font-semibold text-primary">{{item.departmentId}}</span></td>
+                <td> {{item.thName}}</td>
+
+                <td>
+                  <div class="flex flex-row items-center !gap-2 ">
+                    <a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
+                      class="ti-btn ti-btn-wave  !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
+                        class="ri-pencil-line"></i></a>
+                    <a aria-label="anchor" href="javascript:void(0);" (click)="delete(item)"
+                      class="ti-btn ti-btn-wave product-btn !gap-0 !m-0  bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
+                        class="ri-delete-bin-line"></i></a>
+                  </div>
+                </td>
+              </tr>
+              }
+
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="box-footer">
+        <div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
+          <div class="mb-2 sm:mb-0">
+            <div>
+              {{'Showing' | translate}} {{filterList.length}} {{'entries'
+              | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+            </div>
+          </div>
+          <div class="ms-auto">
+            <nav aria-label="Page navigation">
+              <ul class="ti-pagination  mb-0">
+                <li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
+                    class="page-link px-3 py-[0.375rem]"
+                    (click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a></li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
+                    (click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
+
+                <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                    href="javascript:void(0);">{{pageIndex +1}}</a>
+                </li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
+                  class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                    translate}}</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+<!-- Start:: Create Contact -->
+<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+    <div class="ti-modal-content">
+      <div class="ti-modal-header">
+        <h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
+          translate }} {{ 'Department' | translate }}
+        </h6>
+        <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+          data-hs-overlay="#modal-detail" #closeModal>
+          <span class="sr-only">{{'Close' | translate}}</span>
+          <i class="ri-close-line"></i>
+        </button>
+      </div>
+      <div class="ti-modal-body px-4">
+        <div class="grid grid-cols-12 gap-4">
+
+          <div class="xl:col-span-6 col-span-12">
+            <label for="contact-lead-score" class="form-label">{{'Name (TH)' | translate}}</label>
+            <input type="text" class="form-control" id="contact-lead-score" placeholder=""
+              [(ngModel)]="selectModel.thName">
+            <div class="text-danger" *ngIf="!selectModel.thName">
+              {{'Please fill in information' | translate}}
+            </div>
+          </div>
+          <div class="xl:col-span-6 col-span-12">
+            <label for="contact-mail" class="form-label">{{'Name (EN)' | translate}}</label>
+            <input type="text" class="form-control" id="contact-mail" placeholder="" [(ngModel)]="selectModel.engName">
+            <div class="text-danger" *ngIf="!selectModel.engName">
+              {{'Please fill in information' | translate}}
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <div class="ti-modal-footer">
+        <button type="button" class="hs-dropdown-toggle ti-btn  ti-btn-light align-middle"
+          data-hs-overlay="#modal-detail">
+          {{'Cancel' | translate}}
+        </button>
+        <button type="button" [disabled]="!selectModel.thName || !selectModel.engName"
+          class="ti-btn bg-primary text-white !font-medium {{!selectModel.thName || !selectModel.engName ? 'ti-btn-disabled' : ''}}"
+          (click)="save()">{{'Save' |
+          translate}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- End:: Create Contact -->

src/app/DPU/myjob/employee/department/department.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { SharedModule } from "../../../../shared/shared.module";
+import { DepartmentService } from "../../../services/department.service";
+import { DepartmentModel } from "../../../models/department.model";
+import { FormsModule } from "@angular/forms";
+import swal from 'sweetalert';
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { ActivatedRoute } from "@angular/router";
+import { TokenService } from "../../../../shared/services/token.service";
+@Component({
+  selector: 'app-department',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    MatPaginator
+  ],
+  templateUrl: './department.component.html',
+  styleUrl: './department.component.css'
+})
+export class DepartmentComponent {
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') public modalDetail?: ElementRef;
+  allSelected = false;
+  someSelected = false;
+  companyId = ""
+  itemsList: DepartmentModel[] = []
+  filterList: DepartmentModel[] = [];
+  selectModel: DepartmentModel = new DepartmentModel()
+  selectedItems = new Map<string, boolean>();
+  pageIndex = 0;
+  isEdit = false;
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems()
+    }
+  }
+
+  _searchTerm = "";
+  constructor(private departmentService: DepartmentService, private tokenService: TokenService, public translate: TranslateService) {
+    this.companyId = this.tokenService.getSelectCompany().companyId;;
+    this.getDepartment()
+  }
+
+  getDepartment() {
+    this.departmentService.getLists(this.companyId).subscribe(result => {
+      this.itemsList = result
+      this.updatePagedItems()
+    })
+  }
+
+  filter(v: string) {
+    this.pageIndex = 0;
+    return this.itemsList?.filter(
+      (x) =>
+        x.departmentId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+  delete(item: DepartmentModel) {
+    swal({
+      title: "Are you sure?",
+      text: "You won't be able to revert this!",
+      icon: "warning",
+      timer: 1000,
+      dangerMode: true,
+      buttons: ["Cancel", "Yes,Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.departmentService.delete(item).subscribe(result => {
+            swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+            this.getDepartment()
+          })
+        }
+
+      });
+  }
+
+  new() {
+    this.isEdit = false
+    this.selectModel = new DepartmentModel()
+  }
+
+  view(item: DepartmentModel) {
+    this.isEdit = true;
+    this.selectModel = new DepartmentModel(item)
+  }
+
+  save() {
+    swal({
+      title: "Are you sure?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectModel.companyId = this.companyId
+          if (!this.isEdit) {
+            this.departmentService.save(this.selectModel).subscribe(result => {
+              swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+              this.getDepartment()
+              this.childModal?.nativeElement.click()
+            })
+          } else {
+            this.departmentService.update(this.selectModel).subscribe(result => {
+              swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+              this.getDepartment()
+              this.childModal?.nativeElement.click()
+            })
+          }
+
+        }
+
+      });
+
+
+  }
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.departmentId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.departmentId));
+  }
+
+  onCheckboxChange(departmentId: string) {
+    const isSelected = this.selectedItems.get(departmentId) || false;
+    this.selectedItems.set(departmentId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.departmentId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.departmentId));
+  }
+
+  deleteSelect() {
+    let employeeInfo = '';
+    this.selectedItems.forEach((isSelected, departmentId) => {
+      if (isSelected) {
+        const item = this.itemsList.find(item => item.departmentId === departmentId);
+        if (item) {
+          employeeInfo += `${this.translate.instant('ชื่อตำแหน่ง')}: ${item.getName()}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: employeeInfo,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, departmentId) => {
+            if (isSelected) {
+              const item = this.itemsList.find(item => item.departmentId === departmentId);
+              if (item) {
+                this.departmentService.delete(item).subscribe(result => {
+                  swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+                  this.getDepartment();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+}

src/app/DPU/myjob/employee/position/position.component.css

+:host {
+  display: block;
+}

src/app/DPU/myjob/employee/position/position.component.html

+<app-page-header [title]="'Position'" [activeTitle]="'จัดการบริษัท'" [title1]="'Position'"></app-page-header>
+
+
+<div class="grid grid-cols-12 gap-6">
+  <div class="xl:col-span-12 col-span-12">
+    <div class="box">
+      <div class="box-header justify-between">
+        <div class="box-title">
+          {{ 'All List' | translate}} <span
+            class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
+            data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
+            translate}}
+          </a>
+          <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
+            (click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
+            translate}}
+          </a>
+          <div>
+            <input class="form-control form-control" type="text" placeholder="{{ 'Search' | translate}}"
+              aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
+          </div>
+
+        </div>
+      </div>
+      <div class="box-body">
+        <div class="table-responsive">
+          <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+            <thead>
+              <tr class="border-b border-defaultborder">
+                <th scope="col" class="!text-start">
+                  <input class="form-check-input check-all" type="checkbox" id="all-products"
+                    (change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
+                </th>
+                <th scope="col" class="text-start">{{ 'ID' | translate}}</th>
+                <th scope="col" class="text-start">{{ 'ชื่อตำแหน่ง' | translate}}</th>
+                <!-- <th scope="col" class="text-start">{{ 'Name (EN)' | translate}}</th> -->
+                <th scope="col" class="text-start"></th>
+              </tr>
+            </thead>
+            <tbody>
+              @for(item of filterList;track filterList){
+
+              <tr class="border border-defaultborder dark:border-defaultborder/10">
+                <td class="product-checkbox"><input class="form-check-input" type="checkbox"
+                    [checked]="selectedItems.get(item.positionId)" (change)="onCheckboxChange(item.positionId)"
+                    aria-label="..." value="">
+                </td>
+                <td><span class="font-semibold text-primary">{{item.positionId}}</span></td>
+                <td> {{item.thName}}</td>
+
+                <td>
+                  <div class="flex flex-row items-center !gap-2 ">
+                    <a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
+                      class="ti-btn ti-btn-wave  !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
+                        class="ri-pencil-line"></i></a>
+                    <a aria-label="anchor" href="javascript:void(0);" (click)="delete(item)"
+                      class="ti-btn ti-btn-wave product-btn !gap-0 !m-0  bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
+                        class="ri-delete-bin-line"></i></a>
+                  </div>
+                </td>
+              </tr>
+              }
+
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="box-footer">
+        <div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
+          <div class="mb-2 sm:mb-0">
+            <div>
+              {{'Showing' | translate}} {{filterList.length}} {{'entries'
+              | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+            </div>
+          </div>
+          <div class="ms-auto">
+            <nav aria-label="Page navigation">
+              <ul class="ti-pagination  mb-0">
+                <li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
+                    class="page-link px-3 py-[0.375rem]"
+                    (click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a></li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
+                    (click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
+
+                <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                    href="javascript:void(0);">{{pageIndex +1}}</a>
+                </li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
+                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                    *ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
+                    (click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
+                <li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
+                  class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                    (click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
+                    translate}}</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+<!-- Start:: Create Contact -->
+<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+    <div class="ti-modal-content">
+      <div class="ti-modal-header">
+        <h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
+          translate }} {{ 'Position' | translate }}
+        </h6>
+        <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+          data-hs-overlay="#modal-detail" #closeModal>
+          <span class="sr-only">{{'Close' | translate}}</span>
+          <i class="ri-close-line"></i>
+        </button>
+      </div>
+      <div class="ti-modal-body px-4">
+        <div class="grid grid-cols-12 gap-4">
+
+          <!-- <div class="xl:col-span-12 col-span-12">
+            <label for="deal-title" class="form-label">{{'ID' | translate}}</label>
+            <input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.positionId">
+            <div class="text-danger" *ngIf="!selectModel.positionId">
+              {{'Please fill in information' | translate}}
+            </div>
+          </div> -->
+          <div class="xl:col-span-6 col-span-12">
+            <label for="contact-lead-score" class="form-label">{{'Name (TH)' | translate}}</label>
+            <input type="text" class="form-control" id="contact-lead-score" placeholder=""
+              [(ngModel)]="selectModel.thName">
+            <div class="text-danger" *ngIf="!selectModel.thName">
+              {{'Please fill in information' | translate}}
+            </div>
+          </div>
+          <div class="xl:col-span-6 col-span-12">
+            <label for="contact-mail" class="form-label">{{'Name (EN)' | translate}}</label>
+            <input type="text" class="form-control" id="contact-mail" placeholder="" [(ngModel)]="selectModel.engName">
+            <div class="text-danger" *ngIf="!selectModel.engName">
+              {{'Please fill in information' | translate}}
+            </div>
+          </div>
+
+        </div>
+      </div>
+      <div class="ti-modal-footer">
+        <button type="button" class="hs-dropdown-toggle ti-btn  ti-btn-light align-middle"
+          data-hs-overlay="#modal-detail">
+          {{'Cancel' | translate}}
+        </button>
+        <button type="button" [disabled]="!selectModel.thName || !selectModel.engName"
+          class="ti-btn bg-primary text-white !font-medium {{!selectModel.thName || !selectModel.engName ? 'ti-btn-disabled' : ''}}"
+          (click)="save()">{{'Save' |
+          translate}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- End:: Create Contact -->

src/app/DPU/myjob/employee/position/position.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
+import { NgSelectModule } from "@ng-select/ng-select";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import { SharedModule } from "../../../../shared/shared.module";
+import { PositionService } from "../../../services/position.service";
+import { PositionModel } from "../../../models/position.model";
+import { FormsModule } from "@angular/forms";
+import swal from 'sweetalert';
+import { MatPaginator, PageEvent } from "@angular/material/paginator";
+import { ActivatedRoute } from "@angular/router";
+import { TokenService } from "../../../../shared/services/token.service";
+@Component({
+  selector: 'app-position',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule,
+    NgSelectModule,
+    FormsModule,
+    MatPaginator
+  ],
+  templateUrl: './position.component.html',
+  styleUrl: './position.component.css'
+})
+export class PositionComponent {
+  @ViewChild('closeModal') public childModal?: ElementRef;
+  @ViewChild('modalDetail') public modalDetail?: ElementRef;
+  allSelected = false;
+  someSelected = false;
+  companyId = ""
+  itemsList: PositionModel[] = []
+  filterList: PositionModel[] = [];
+  selectModel: PositionModel = new PositionModel()
+  selectedItems = new Map<string, boolean>();
+  pageIndex = 0;
+  isEdit = false;
+  get searchTerm(): string {
+    return this._searchTerm;
+  }
+  set searchTerm(val: string) {
+    this.pageIndex = 0;
+    this.allSelected = false
+    this._searchTerm = val;
+    if (val != '') {
+      this.filterList = this.filter(val);
+    } else {
+      this.updatePagedItems()
+    }
+  }
+
+  _searchTerm = "";
+  constructor(private positionService: PositionService, private tokenService: TokenService, public translate: TranslateService) {
+    this.companyId = this.tokenService.getSelectCompany().companyId;;
+    this.getPosition()
+  }
+
+  ngOnInit(): void {
+  }
+
+  getPosition() {
+    this.positionService.getLists(this.companyId).subscribe(result => {
+      this.itemsList = result
+      this.updatePagedItems()
+    })
+  }
+
+  filter(v: string) {
+    this.pageIndex = 0;
+    return this.itemsList?.filter(
+      (x) =>
+        x.positionId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
+        x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
+    );
+  }
+
+  delete(item: PositionModel) {
+    swal({
+      title: "Are you sure?",
+      text: "You won't be able to revert this!",
+      icon: "warning",
+      timer: 1000,
+      dangerMode: true,
+      buttons: ["Cancel", "Yes,Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.positionService.delete(item).subscribe(result => {
+            swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+            this.getPosition()
+          })
+        }
+
+      });
+  }
+
+  new() {
+    this.isEdit = false
+    this.selectModel = new PositionModel()
+  }
+
+  view(item: PositionModel) {
+    this.isEdit = true;
+    this.selectModel = new PositionModel(item)
+  }
+
+  save() {
+    swal({
+      title: "Are you sure?",
+      text: "คุณต้องการบันทึกหรือไม่",
+      icon: "warning",
+      dangerMode: false,
+      buttons: ["Cancel", "Confirm"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectModel.companyId = this.companyId
+          if (!this.isEdit) {
+            this.positionService.save(this.selectModel).subscribe(result => {
+              swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+              this.getPosition()
+              this.getPosition()
+              this.childModal?.nativeElement.click()
+            })
+          } else {
+            this.positionService.update(this.selectModel).subscribe(result => {
+              swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+              this.getPosition()
+              this.getPosition()
+              this.childModal?.nativeElement.click()
+            })
+          }
+
+        }
+
+      });
+
+
+  }
+
+  updatePagedItems() {
+    const startIndex = this.pageIndex * 10;
+    const endIndex = startIndex + 10;
+    this.filterList = this.itemsList.slice(startIndex, endIndex);
+  }
+
+  toggleAll(event: any) {
+    this.allSelected = event.target.checked;
+    this.selectedItems.clear();
+    this.itemsList.forEach(item => {
+      this.selectedItems.set(item.positionId, this.allSelected);
+    });
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.positionId));
+  }
+
+  onCheckboxChange(positionId: string) {
+    const isSelected = this.selectedItems.get(positionId) || false;
+    this.selectedItems.set(positionId, !isSelected);
+    this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.positionId));
+    this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.positionId));
+  }
+
+  deleteSelect() {
+    let employeeInfo = '';
+    this.selectedItems.forEach((isSelected, positionId) => {
+      if (isSelected) {
+        const item = this.itemsList.find(item => item.positionId === positionId);
+        if (item) {
+          employeeInfo += `${this.translate.instant('ชื่อตำแหน่ง')}: ${item.getName()}\n`;
+        }
+      }
+    });
+
+    swal({
+      title: "Are you sure?",
+      text: employeeInfo,
+      icon: "warning",
+      dangerMode: true,
+      buttons: ["Cancel", "Yes, Delete it!"],
+    })
+      .then((willDelete: any) => {
+        if (willDelete) {
+          this.selectedItems.forEach((isSelected, positionId) => {
+            if (isSelected) {
+              const item = this.itemsList.find(item => item.positionId === positionId);
+              if (item) {
+                this.positionService.delete(item).subscribe(result => {
+                  swal("Save Success!!", "บันทึกข้อมูลสำเร็จ", "success");
+                  this.getPosition();
+                });
+              }
+            }
+          });
+        }
+      });
+  }
+
+}

src/app/DPU/myjob/home-common/home-common.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { HomeCommonComponent } from './home-common.component';
+
+describe('HomeCommonComponent', () => {
+  let component: HomeCommonComponent;
+  let fixture: ComponentFixture<HomeCommonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeCommonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeCommonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/myjob.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MyjobComponent } from './myjob.component';
+import { RouterModule, Routes } from '@angular/router';
+import { QuillModule } from 'ngx-quill';
+
+export const myjob: Routes = [
+  {
+    path: "myjob", children: [
+      {
+        //////////////MyJob/////////////////
+        path: 'home',
+        loadComponent: () =>
+          import('./home-common/home-common.component').then((m) => m.HomeCommonComponent),
+      },
+      {
+        path: 'member-manage',
+        loadComponent: () =>
+          import('./user-management/user-setting/user-setting.component').then((m) => m.UserSettingComponent),
+      },
+      {
+        path: 'manage-companys',
+        loadComponent: () =>
+          import('./company-manage/company-manage.component').then((m) => m.CompanyManageComponent),
+      },
+      {
+        path: 'manage-articles',
+        loadComponent: () =>
+          import('./article-manage/article-manage.component').then((m) => m.ArticleManageComponent),
+      },
+      {
+        path: 'admin-manage',
+        loadComponent: () =>
+          import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
+      },
+      {
+        path: 'pdpa-manage',
+        loadComponent: () =>
+          import('./pdpa-manage/pdpa-manage.component').then((m) => m.PdpaManageComponent),
+      },
+      {
+        path: 'company-departments',
+        loadComponent: () =>
+          import('./company-department/company-department.component').then((m) => m.CompanyDepartmentComponent),
+      },
+      {
+        path: 'country-registration',
+        loadComponent: () =>
+          import('./company-department/country-registration/country-registration.component').then((m) => m.CountryRegistrationComponent),
+      },
+      {
+        path: 'category-company',
+        loadComponent: () =>
+          import('./company-department/category-company/category-company.component').then((m) => m.CategoryCompanyComponent),
+      },
+      {
+        path: 'degree-manage',
+        loadComponent: () =>
+          import('./company-department/degree-manage/degree-manage.component').then((m) => m.DegreeManageComponent),
+      },
+      {
+        path: 'job-types',
+        loadComponent: () =>
+          import('./company-department/job-type/job-type.component').then((m) => m.JobTypeComponent),
+      },
+      {
+        path: 'provinces',
+        loadComponent: () =>
+          import('./company-department/province/province.component').then((m) => m.ProvinceComponent),
+      },
+      {
+        path: 'admin-manage',
+        loadComponent: () =>
+          import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
+      },
+      {
+        path: 'position',
+        loadComponent: () =>
+          import('./company-department/company-position/company-position.component').then((m) => m.CompanyPositionComponent),
+      },
+      {
+        path: 'career-cluster',
+        loadComponent: () =>
+          import('./company-department/career-cluster/career-cluster.component').then((m) => m.CareerClusterComponent),
+      },
+    ]
+  }
+]
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule.forChild(myjob),
+    QuillModule.forRoot(),
   ],
-  declarations: [MyjobComponent]
+  declarations: [MyjobComponent],
+  exports: [RouterModule],
 })
-export class MyjobModule { }
+export class MyjobModule {
+  static routes = myjob;
+}

src/app/DPU/myjob/pdpa-manage/pdpa-config/pdpa-config.component.css

+.page {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
\ No newline at end of file

src/app/DPU/myjob/pdpa-manage/pdpa-config/pdpa-config.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PdpaConfigComponent } from './pdpa-config.component';
+
+describe('PdpaConfigComponent', () => {
+  let component: PdpaConfigComponent;
+  let fixture: ComponentFixture<PdpaConfigComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PdpaConfigComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PdpaConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/pdpa-manage/pdpa-manage.component.css

+.page {
+    display: flex;
+    height: auto;
+    flex-direction: column;
+}
+/* Base styling for the modal body content */
+  .ti-modal-body-content {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Form labels */
+  .ti-form-label {
+    font-size: 0.95rem;
+    color: #333;
+  }
+
+  /* Form inputs */
+  .ti-form-input {
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    padding: 0.6rem 1rem;
+    font-size: 1rem;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .ti-form-input:focus {
+    outline: none;
+    border-color: #3b82f6; /* Example primary color */
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+  }
+
+  /* Read-only input styling */
+  .bg-input-readonly {
+    background-color: #e5e7eb;
+    cursor: not-allowed;
+  }
+
+  /* Error text */
+  .text-danger {
+    color: #ef4444;
+  }
+
+  /* Tab button styling */
+  .tab-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px; /* Consistent width for tabs */
+    padding: 0.75rem 1rem;
+    border: 1px solid #d1d5db;
+    border-bottom: none; /* Remove bottom border for active tab effect */
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-align: center;
+    color: #6b7280;
+    transition: all 0.2s ease-in-out;
+    text-decoration: none; /* Remove underline from anchor tags */
+  }
+
+  .tab-btn:hover {
+    color: #111827;
+    background-color: #f3f4f6;
+  }
+
+  /* Active tab styling */
+  .tab-btn.hs-tab-active {
+    background-color: #3b82f6; /* Example primary color */
+    border-color: #3b82f6;
+    color: #ffffff;
+  }
+
+  /* Custom primary color (replace with your actual primary color if different) */
+  .text-primary {
+    color: #3b82f6;
+  }
+
+  .bg-primary {
+    background-color: #3b82f6;
+  }
\ No newline at end of file

src/app/DPU/myjob/pdpa-manage/pdpa-manage.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { PdpaManageComponent } from './pdpa-manage.component';
+
+describe('PdpaManageComponent', () => {
+  let component: PdpaManageComponent;
+  let fixture: ComponentFixture<PdpaManageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PdpaManageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PdpaManageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myjob/user-management/user-management/user-management.component.css

+:host {
+  display: block;
+}

src/app/DPU/myjob/user-management/user-management/user-management.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-management',
+  standalone: true,
+  imports: [
+    CommonModule,
+  ],
+  template: `<p>user-management works!</p>`,
+  styleUrl: './user-management.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserManagementComponent { }

src/app/DPU/myjob/user-management/user-setting/user-setting.component.css

+:host {
+  display: block;
+}

src/app/shared/components/header/header.component.html

@@ -353,7 +353,7 @@
                 </div>
 
                 <div class="">
-                  <a routerLink="/admin/member-manage"
+                  <a routerLink="/myjob/pdpa-manage"
                     class="p-4 items-center related-app block text-center rounded-sm hover:bg-gray-50 dark:hover:bg-black/20">
                     <img src="./assets/images/logoallHR/logo_myjob.png" alt="miscrosoft"
                       class="leading-[1.75] text-2xl !h-[1.75rem] align-middle flex justify-center mx-auto">

src/app/shared/components/sidebar/sidebar.component.html

@@ -6,6 +6,7 @@
       <img *ngIf="isCommonRoute" src="./assets/images/brand-logos/logo.png" alt="logo" width="100%">
       <img *ngIf="isMyportalRoute" src="./assets/images/logoallHR/mySkill-x.png" alt="logo" width="100%">
       <img *ngIf="isMylearnRoute" src="./assets/images/logoallHR/mylearn-logo.png" alt="logo" width="100%">
+      <img *ngIf="isMyJobRoute" src="./assets/images/brand-logos/logo.png" alt="logo" width="100%">
 
 
     </a>

src/app/shared/components/sidebar/sidebar.component.ts

@@ -71,6 +71,7 @@ export class SidebarComponent {
   isInstallerRoute: boolean = false;
   isMyportalRoute: boolean = false;
   isMylearnRoute: boolean = false;
+  isMyJobRoute: boolean = false;
   previousUrl: string = '';
   currentUrl: string = '';
 
@@ -110,7 +111,8 @@ export class SidebarComponent {
     this.isCommonRoute = this.currentUrl.includes('/admin');
     this.isInstallerRoute = this.currentUrl.includes('/company');
     this.isMyportalRoute = this.currentUrl.includes('/myportal');
-    this.isMylearnRoute = this.currentUrl.includes('/mylearn')
+    this.isMylearnRoute = this.currentUrl.includes('/mylearn');
+    this.isMyJobRoute = this.currentUrl.includes('/myjob');
     this.menuitemsSubscribe$ = this.navServices.items.subscribe((items) => {
         this.changeMenu()
       });
@@ -141,6 +143,7 @@ export class SidebarComponent {
     this.isInstallerRoute = this.currentUrl.includes('/company');
     this.isMyportalRoute = this.currentUrl.includes('/myportal');
     this.isMylearnRoute = this.currentUrl.includes('/mylearn')
+    this.isMyJobRoute = this.currentUrl.includes('/myjob')
     this.checkUrlChanges()
     // Log to console for verification
     console.log('Initial URL:', this.currentUrl);
@@ -167,7 +170,8 @@ export class SidebarComponent {
           (this.previousUrl.includes('/company') && this.currentUrl.includes('/admin')) ||
           (this.previousUrl.includes('/admin') && this.currentUrl.includes('/company')) ||
           (this.previousUrl.includes('/myprotal')&& this.currentUrl.includes('/myprotal')) ||
-          (this.previousUrl.includes('/mylearn')&& this.currentUrl.includes('/mylearn'))
+          (this.previousUrl.includes('/mylearn')&& this.currentUrl.includes('/mylearn')) ||
+          (this.previousUrl.includes('/myjob')&& this.currentUrl.includes('/myjob')) 
         ) {
           console.log('URL changed between /installer and /admin.');
           // Implement any logic needed when changing between /installer and /admin
@@ -177,7 +181,8 @@ export class SidebarComponent {
         this.isCommonRoute = this.currentUrl.includes('/admin');
         this.isInstallerRoute = this.currentUrl.includes('/company');
         this.isMyportalRoute = this.currentUrl.includes('/myportal');
-        this.isMylearnRoute = this.currentUrl.includes('/mylearn')
+        this.isMylearnRoute = this.currentUrl.includes('/mylearn');
+        this.isMyJobRoute = this.currentUrl.includes('/myjob');
 
         // Log to console for verification
         console.log('Current URL:', this.currentUrl);
@@ -206,6 +211,8 @@ export class SidebarComponent {
       this.menuItems = this.navServices.getMyportalMenu();
     } else if (this.isMylearnRoute){
       this.menuItems = this.navServices.getMylearnMenu();
+    } else if (this.isMyJobRoute){
+      this.menuItems = this.navServices.getMyJobMenu();
     }else{
       this.menuItems = this.navServices.getCommonMenu()
     }

src/app/shared/routes/content.routes.ts

@@ -30,6 +30,7 @@ import { CommonManageModule } from '../../DPU/common/common.module';
 import { CompanyManagementModule } from '../../DPU/company-management/company-management.module';
 import { MyskillXModule } from '../../DPU/myskill-x/myskill-x.module';
 import { MylearnModule } from '../../DPU/mylearn/mylearn.module';
+import { MyjobModule } from '../../DPU/myjob/myjob.module';
 
 
 export const content: Routes = [
@@ -65,7 +66,8 @@ export const content: Routes = [
       ...CommonManageModule.routes,
       ...CompanyManagementModule.routes,
       ...MyskillXModule.routes,
-      ...MylearnModule.routes
+      ...MylearnModule.routes,
+      ...MyjobModule.routes,
     ]
   }
 

src/app/shared/services/nav.service.ts

@@ -296,5 +296,49 @@ export class NavService implements OnDestroy {
     ];
   }
 
+  getMyJobMenu() {
+    return [
+      // Dashboard
+      { headTitle: 'MyJob' },
+      {
+        icon: 'news bx-flip-horizontal',
+        path: '/myjob/pdpa-manage',
+        title: 'จัดการ PDPA',
+        type: 'link',
+      },
+      {
+        icon: 'receipt',
+        path: '/myjob/manage-articles',
+        title: 'จัดการบทความ',
+        type: 'link',
+      },
+      {
+        icon: 'user',
+        path: '/myjob/company-departments',
+        title: 'จัดการผู้ใช้',
+        type: 'sub',
+        children: [
+          { path: '/myjob/manage-companys', title: 'จัดการบริษัท', type: 'link' },
+          { path: '/myjob/member-manage', title: 'จัดการผู้สมัครงาน', type: 'link' }
+        ],
+      },
+      {
+        icon: 'buildings',
+        path: '/myjob/company-departments',
+        title: 'ทะเบียนบริษัท',
+        type: 'sub',
+        children: [
+          { path: '/myjob/career-cluster', title: 'จัดการกลุ่มอาชีพ', type: 'link' },
+          { path: '/myjob/position', title: 'จัดการตำแหน่ง', type: 'link' },
+          { path: '/myjob/job-types', title: 'จัดการประเภทงาน', type: 'link' },
+          { path: '/myjob/category-company', title: 'จัดการประเภทธุรกิจ', type: 'link' },
+          { path: '/myjob/degree-manage', title: 'จัดการระดับการศึกษา', type: 'link' },
+          { path: '/myjob/country-registration', title: 'จัดการประเทศ', type: 'link' },
+          { path: '/myjob/provinces', title: 'จัดการจังหวัด', type: 'link' },
+        ],
+      }
+    ];
+  }
+
   items = new BehaviorSubject<Menu[]>(this.MENUITEMS);
 }