การจัดการรายละเอียดงาน > รายละเอียดของงาน

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

@@ -28,6 +28,7 @@ import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-dev
 import { IdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/idp-development-plan.component';
 import { JobCompetencyComponent } from '../job-detail-components/job-competency/job-competency.component';
 import { JobQualificationsComponent } from '../job-detail-components/job-qualifications/job-qualifications.component';
+import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component';
 
 
 const routes: Routes = [
@@ -62,6 +63,7 @@ const routes: Routes = [
       { path: "idp-development-plan",title: 'เเผนพัฒนา IDP', component: IdpDevelopmentPlanComponent },
       { path: "job-competency",title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', component: JobCompetencyComponent },
       { path: "job-qualifications",title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', component: JobQualificationsComponent },
+      { path: "job-detail",title: 'รายละเอียดของงาน', component: JobDetailComponent },
     ]
   }
 ];

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

@@ -75,6 +75,8 @@ import { JobCompetencyComponent } from '../job-detail-components/job-competency/
 import { SubJobCompetencyComponent } from '../job-detail-components/job-competency/sub-job-competency/sub-job-competency.component';
 import { JobQualificationsComponent } from '../job-detail-components/job-qualifications/job-qualifications.component';
 import { SubJobQualificationsComponent } from '../job-detail-components/job-qualifications/sub-job-qualifications/sub-job-qualifications.component';
+import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component';
+import { WorkDetailComponent } from '../job-detail-components/job-detail/work-detail/work-detail.component';
 
 
 @NgModule({
@@ -134,6 +136,8 @@ import { SubJobQualificationsComponent } from '../job-detail-components/job-qual
     SubJobCompetencyComponent,
     JobQualificationsComponent,
     SubJobQualificationsComponent,
+    JobDetailComponent,
+    WorkDetailComponent,
   ],
   imports: [
     CommonModule,

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

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        รายละเอียดของงาน
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน','รายละเอียดของงาน']">
+                    รายละเอียดของงาน
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-work-detail></app-work-detail>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/job-detail-components/job-detail/job-detail.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-detail',
+  templateUrl: './job-detail.component.html',
+  styleUrls: ['./job-detail.component.scss']
+})
+export class JobDetailComponent {
+  pathTitle = ['การจัดการรายละเอียดงาน', 'รายละเอียดของงาน']
+}

src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.scss

+.ti-modal-content-new {
+    top: 50%;  /* ให้อยู่กลางในแนวตั้ง */
+    left: 50%;  /* ให้อยู่กลางในแนวนอน */
+    position: relative;  /* ทำให้สามารถจัดตำแหน่งได้ */
+    transform: translate(-50%, -50%);  /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
+    background-color: white;
+    overflow: hidden;  /* ป้องกันการเลื่อนในโมดอล */
+}
+  
+.ti-modal-body-new {
+    height: 50vh;
+    display: flex;
+    justify-content: center; /* จัดแนวนอนให้ตรงกลาง */
+    align-items: center; /* จัดแนวตั้งให้ตรงกลาง */
+    padding: 1rem;
+  
+}
\ No newline at end of file

src/app/components/job-detail-components/job-detail/work-detail/work-detail.component.ts

+import { Component } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+@Component({
+  selector: 'app-work-detail',
+  templateUrl: './work-detail.component.html',
+  styleUrls: ['./work-detail.component.scss']
+})
+export class WorkDetailComponent {
+  currentPage = 1
+  page = Array.from({ length: 1 }, (_, i) => i + 1);
+  jobList: JobModel[] = []
+  job: JobModel = new MyJobModel({})
+  search = ""
+  constructor(
+    private toastr: ToastrService
+  ) { }
+  ngOnInit(): void {
+  }
+  
+  searchChange() {
+    this.currentPage = 1
+    this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+  }
+  jobListFilter() {
+    return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+      x.tdesc.toLowerCase().includes(this.search) ||
+      x.edesc.toLowerCase().includes(this.search))
+  }
+  selectJob(job: JobModel) {
+    // this.showSuccess()
+    this.job = new MyJobModel(job)
+  }
+
+  showSuccessAdd() {
+    this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  showSuccessEdit() {
+    this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+
+  showSuccessDelete() {
+    this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+      timeOut: 3000,
+      positionClass: 'toast-top-right',
+    });
+  }
+  addBu1() {
+    // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+    //   if (response.success) {
+    //     this.getBu1List()
+    //   }
+    // })
+  }
+  deleteJob(job: JobModel) {
+    // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+    //   if (response.success) {
+    //     this.getBu1List()
+    //   }
+    // })
+  }
+
+}

src/app/shared/services/navservice.ts

@@ -104,8 +104,9 @@ export class NavService implements OnDestroy {
       active: false,
       children: [
         { path: '/job-detail-management', title: 'ข้อมูลทั่วไป', type: 'link' },
-        { path: '/job-competency', title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', type: 'link' },
+        { path: '/job-detail', title: 'รายละเอียดของงาน', type: 'link' },
         { path: '/job-qualifications', title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', type: 'link' },
+        { path: '/job-competency', title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', type: 'link' },
       ],
     },