บันทึกผลงานดีเด่น บันทึกวินัยและการลงโทษ

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

@@ -10,7 +10,14 @@
             <div class="col-span-12 xxl:col-span-8">
                 <div class="box" style="border-radius:20px">
                     <div class="box-header">
-                        <div class="grid grid-cols-12 gap-x-6 mb-3 mt-3">
+                        <div class="grid grid-cols-12 gap-x-6 mb-3 mt-3 relative">
+                            <div class="absolute">
+                                <button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0  "
+                                    style="border-radius:20px" (click)="back()">
+                                    <i class="ti ti-chevron-left"></i>
+                                    {{'Back' | translate}}
+                                </button>
+                            </div>
                             <div class="col-span-12">
                                 <h5 class="box-title mb-3 text-center">ตาราง Mapping ระดับความคาดหวังกับตำแหน่งงาน</h5>
                             </div>

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

 import { ViewportScroller } from '@angular/common';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { ToastrService } from 'ngx-toastr';
 import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
@@ -35,7 +36,8 @@ export class CompetencyMappingComponent {
     private fileService: FileService,
     private eventgrpService: EventgrpService,
     private jobcode: JobcodeService,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private router: Router
   ) {
     this.translateService.onLangChange.subscribe((event) => {
     });
@@ -56,4 +58,9 @@ export class CompetencyMappingComponent {
       }
     })
   }
+
+
+  back() {
+    this.router.navigate(['/ess/employee-self-service']);
+  }
 }
\ No newline at end of file

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

@@ -64,6 +64,8 @@ import { Widget1Component } from '../widget1/widget1.component';
 import { JobFamilyMappingComponent } from '../job-family-mapping/job-family-mapping.component';
 import { JobFamilyMatrixComponent } from '../job-family-matrix/job-family-matrix.component';
 import { DocumentUploadManagerComponent } from '../company-components/account-settings/document-upload-manager/document-upload-manager.component';
+import { DisciplinaryActionComponent } from '../disciplinary-action/disciplinary-action.component';
+import { OutstandingPerformanceComponent } from '../outstanding-performance/outstanding-performance.component';
 
 
 
@@ -143,6 +145,8 @@ const routes: Routes = [
       { path: "ess/competency-mapping", title: 'รายละเอียดของงาน', component: CompetencyMappingComponent },
       { path: "ess/job-family-mapping", title: 'รายละเอียดกลุ่มงานตามวิชาชีพ', component: JobFamilyMappingComponent },
       { path: "ess/job-family-matrix", title: 'รายละเอียดกลุ่มงานตามวิชาชีพ', component: JobFamilyMatrixComponent },
+      { path: "ess/disciplinary-action", title: 'วินัยและการลงโทษ', component: DisciplinaryActionComponent },
+      { path: "ess/outstanding-performance", title: 'ผลงานดีเด่น', component: OutstandingPerformanceComponent },
     ]
   }
 ];

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

@@ -217,6 +217,8 @@ import { JobGradeGroupComponent } from '../company-components/job-description/jo
 import { JobFamilyMappingComponent } from '../job-family-mapping/job-family-mapping.component';
 import { JobFamilyMatrixComponent } from '../job-family-matrix/job-family-matrix.component';
 import { DocumentUploadManagerComponent } from '../company-components/account-settings/document-upload-manager/document-upload-manager.component';
+import { DisciplinaryActionComponent } from '../disciplinary-action/disciplinary-action.component';
+import { OutstandingPerformanceComponent } from '../outstanding-performance/outstanding-performance.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -373,7 +375,9 @@ export class CustomDateAdapter extends NativeDateAdapter {
     JobGradeGroupComponent,
     JobFamilyMappingComponent,
     JobFamilyMatrixComponent,
-    DocumentUploadManagerComponent
+    DocumentUploadManagerComponent,
+    DisciplinaryActionComponent,
+    OutstandingPerformanceComponent
   ], imports: [
     TranslateModule,
     CommonModule,

src/app/components/datagrid-syncfution/datagrid-syncfution.component.html

@@ -28,6 +28,16 @@
         </ng-container>
       </ng-template>
     </e-column>
+    <e-column headerText='checkboxSelect' [textAlign]="'center'" width='160' [editType]="false" [allowEditing]="false"
+      *ngIf="!checkBoxSetting&&showImg">
+      <ng-template #headerTemplate let-data>
+      </ng-template>
+      <ng-template #template let-data>
+        <img class="avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
+          [src]="data.picture?getImg(data.picture):'./assets/img/users/defaultperson.jpg'"
+          (error)="onImageError($event)">
+      </ng-template>
+    </e-column>
     <ng-container *ngFor="let col of columns">
       <e-column *ngIf="col.headerText!=''" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
         [format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="false"

src/app/components/disciplinary-action/disciplinary-action.component.scss

+.bg-gradient-custom {
+    background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+}
+
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.col {
+    flex: 1;
+}
+
+@for $i from 1 through 12 {
+    $width: (
+        $i / 12) * 100%;
+
+    .col-#{$i} {
+        flex: 0 0 $width;
+        max-width: $width;
+    }
+}
+
+
+@for $i from 1 through 100 {
+    .m-#{$i}rem {
+        margin: #{$i}rem;
+    }
+
+    .mt-#{$i}rem {
+        margin-top: #{$i}rem;
+    }
+
+    .ml-#{$i}rem {
+        margin-left: #{$i}rem;
+    }
+
+    .mb-#{$i}rem {
+        margin-bottom: #{$i}rem;
+    }
+
+    .mr-#{$i}rem {
+        margin-right: #{$i}rem;
+    }
+
+    .p-#{$i}rem {
+        padding: #{$i}rem;
+    }
+
+    .pt-#{$i}rem {
+        padding-top: #{$i}rem;
+    }
+
+    .pl-#{$i}rem {
+        padding-left: #{$i}rem;
+    }
+
+    .pb-#{$i}rem {
+        padding-bottom: #{$i}rem;
+    }
+
+    .pr-#{$i}rem {
+        padding-right: #{$i}rem;
+    }
+}
\ No newline at end of file

src/app/components/disciplinary-action/disciplinary-action.component.ts

+import { ViewportScroller } from '@angular/common';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
+import { ToastrService } from 'ngx-toastr';
+import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
+import { JobCodeModel, MyJobCodeModel } from 'src/app/shared/model/job-code.model';
+import { MyStatusModel, StatusModel } from 'src/app/shared/model/status.model';
+import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
+import { EmployeeService } from 'src/app/shared/services/employee.service';
+import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
+import { FileService } from 'src/app/shared/services/file.service';
+import { JobcodeService } from 'src/app/shared/services/jobcode.service';
+import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
+import Swal from 'sweetalert2';
+export interface BiModel {
+  name: string,
+  tools: string[],
+  degree: string
+}
+
+@Component({
+  selector: 'app-disciplinary-action',
+  templateUrl: './disciplinary-action.component.html',
+  styleUrls: ['./disciplinary-action.component.scss']
+})
+export class DisciplinaryActionComponent {
+  currentPage = 1
+  empDetail: { loading: boolean, data: JobCodeModel } = { loading: false, data: new MyJobCodeModel({}) }
+
+  columns: ColumnModel[] = [
+    {
+      field: "picture",
+      headerText: "",
+      type: "string",
+    }, {
+      field: "employeeId",
+      headerText: "EmployeeCode",
+      type: "string",
+      isPrimaryKey: true,
+    },
+    {
+      field: "fname",
+      headerText: "FirstName",
+      type: "string"
+    },
+    {
+      field: "lname",
+      headerText: "LastName",
+      type: "string"
+    },
+    {
+      field: "position.tdesc",
+      headerText: "Position",
+      type: "string"
+    }]
+  searchSettings = {
+    fields: ['employeeId', 'fname', 'lname', 'position.tdesc'],
+    operator: 'contains',
+    ignoreCase: false
+  }
+  search = ''
+  employee: { loading: boolean, select: EmployeeModel, list: EmployeeModel[] } = { loading: false, select: new MyEmployeeModel(), list: [] }
+  @ViewChild('employeeDialog') employeeDialog: any
+  employeeDialogRef: any
+
+  dateSelectIso = {
+    dateIncident: '',
+    dateEffective: ''
+  }
+  dateSelect = {
+    dateIncident: '',
+    dateEffective: ''
+  }
+  constructor(
+    private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private dialog: MatDialog,
+    private fileService: FileService,
+    private eventgrpService: EventgrpService,
+    private jobcode: JobcodeService,
+    private employeeService: EmployeeService,
+    private translateService: TranslateService,
+    private router: Router
+  ) {
+    this.translateService.onLangChange.subscribe((event) => {
+    });
+  }
+  ngOnInit(): void {
+    this.getEmployeeList()
+  }
+  getEmployeeList() {
+    this.employee.loading = true
+    this.employeeService.getList().subscribe({
+      next: response => {
+        this.employee.list = response.map((x: any) => new MyEmployeeModel(x))
+        this.employee.loading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.employee.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  selectEmployee(data?: EmployeeModel) {
+    this.employee.select = new MyEmployeeModel(data)
+  }
+  openEmployeeDialog() {
+    this.employeeDialogRef = this.dialog.open(this.employeeDialog, {
+      width: '800px',
+    })
+  }
+  closeEmployeeDialog() {
+    this.employeeDialogRef.close()
+  }
+
+  toISODate(dateInput?: string | null): string {
+    if (!dateInput) return "";
+    const parsedDate = new Date(dateInput);
+    return isNaN(parsedDate.getTime()) ? new Date().toISOString() : parsedDate.toISOString();
+  }
+  changeDate(target: { [key: string]: any }, field: string, dateIso: string) {
+    target[field] = this.toYYYYMMDD(dateIso)
+  }
+  toYYYYMMDD(dateInput?: string | null): string {
+    if (!dateInput) return "";
+    const parsedDate = new Date(dateInput);
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    };
+    const formattedDate = parsedDate.toLocaleDateString('en-GB', options);
+    const [day, month, year] = formattedDate.split('/');
+    return `${year}-${month}-${day}`;
+  }
+
+  save() {
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+      text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
+      showCancelButton: true,
+      confirmButtonText: 'บันทึกข้อมูล',
+      cancelButtonText: 'ย้อนกลับ',
+      reverseButtons: true,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.showAlert('บันทึกข้อมูลสำเร็จ', 'success')
+        this.closeEmployeeDialog();
+      }
+    });
+  }
+
+  showAlert(text: string, type: 'success' | 'error') {
+    Swal.fire({
+      title: 'แจ้งเตือน',
+      text: text,
+      icon: type,
+      confirmButtonText: 'ตกลง',
+    });
+  }
+
+  back() {
+    this.router.navigate(['/ess/employee-self-service']);
+  }
+}
\ No newline at end of file

src/app/components/employee-self-service/employee-self-service.component.ts

@@ -37,8 +37,8 @@ export class EmployeeSelfServiceComponent {
     { text: "Profile พนักงาน", link: "/ess/profile" },
     { text: "Job Family", link: "/ess/job-family-mapping" },
     { text: "Time Attendance", description: "หน้าใหม่ แสดงข้อมูล TA" },
-    { text: "วินัย และการลงโทษ", description: "หน้าใหม่ คล้าย เมนูความดีความผิดของ myHR plus" },
-    { text: "ผลงานดีเด่น", description: "หน้าใหม่" },
+    { text: "วินัย และการลงโทษ", link: "/ess/disciplinary-action" },
+    { text: "ผลงานดีเด่น", link: "/ess/outstanding-performance" },
     { text: "Feedback", link: "/ess/self-evaluation/kpi-sum10" },
     { text: "ดูข้อมูลย้อนหลัง", description: "หน้าใหม่ แสดงListรอบประเมินตั้งแต่รอบล่าสุดถึงย้อนหลัง3ปี" },
     { text: "Calibrate คะแนน", description: "หน้ารายงานที่มีการ Calibrate และแสดงค่า K" },

src/app/components/outstanding-performance/outstanding-performance.component.scss

+.bg-gradient-custom {
+    background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+}
+
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.col {
+    flex: 1;
+}
+
+@for $i from 1 through 12 {
+    $width: (
+        $i / 12) * 100%;
+
+    .col-#{$i} {
+        flex: 0 0 $width;
+        max-width: $width;
+    }
+}
+
+
+@for $i from 1 through 100 {
+    .m-#{$i}rem {
+        margin: #{$i}rem;
+    }
+
+    .mt-#{$i}rem {
+        margin-top: #{$i}rem;
+    }
+
+    .ml-#{$i}rem {
+        margin-left: #{$i}rem;
+    }
+
+    .mb-#{$i}rem {
+        margin-bottom: #{$i}rem;
+    }
+
+    .mr-#{$i}rem {
+        margin-right: #{$i}rem;
+    }
+
+    .p-#{$i}rem {
+        padding: #{$i}rem;
+    }
+
+    .pt-#{$i}rem {
+        padding-top: #{$i}rem;
+    }
+
+    .pl-#{$i}rem {
+        padding-left: #{$i}rem;
+    }
+
+    .pb-#{$i}rem {
+        padding-bottom: #{$i}rem;
+    }
+
+    .pr-#{$i}rem {
+        padding-right: #{$i}rem;
+    }
+}
\ No newline at end of file

src/app/components/outstanding-performance/outstanding-performance.component.ts

+import { ViewportScroller } from '@angular/common';
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { ColumnModel } from '@syncfusion/ej2-grids';
+import { ToastrService } from 'ngx-toastr';
+import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
+import { JobCodeModel, MyJobCodeModel } from 'src/app/shared/model/job-code.model';
+import { MyStatusModel, StatusModel } from 'src/app/shared/model/status.model';
+import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
+import { EmployeeService } from 'src/app/shared/services/employee.service';
+import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
+import { FileService } from 'src/app/shared/services/file.service';
+import { JobcodeService } from 'src/app/shared/services/jobcode.service';
+import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
+import Swal from 'sweetalert2';
+export interface BiModel {
+  name: string,
+  tools: string[],
+  degree: string
+}
+
+@Component({
+  selector: 'app-outstanding-performance',
+  templateUrl: './outstanding-performance.component.html',
+  styleUrls: ['./outstanding-performance.component.scss']
+})
+export class OutstandingPerformanceComponent {
+  currentPage = 1
+  empDetail: { loading: boolean, data: JobCodeModel } = { loading: false, data: new MyJobCodeModel({}) }
+
+  columns: ColumnModel[] = [
+    {
+      field: "picture",
+      headerText: "",
+      type: "string",
+    }, {
+      field: "employeeId",
+      headerText: "EmployeeCode",
+      type: "string",
+      isPrimaryKey: true,
+    },
+    {
+      field: "fname",
+      headerText: "FirstName",
+      type: "string"
+    },
+    {
+      field: "lname",
+      headerText: "LastName",
+      type: "string"
+    },
+    {
+      field: "position.tdesc",
+      headerText: "Position",
+      type: "string"
+    }]
+  searchSettings = {
+    fields: ['employeeId', 'fname', 'lname', 'position.tdesc'],
+    operator: 'contains',
+    ignoreCase: false
+  }
+  search = ''
+  employee: { loading: boolean, select: EmployeeModel, list: EmployeeModel[] } = { loading: false, select: new MyEmployeeModel(), list: [] }
+  @ViewChild('employeeDialog') employeeDialog: any
+  employeeDialogRef: any
+
+  dateSelectIso = {
+    dateIncident: '',
+    dateEffective: ''
+  }
+  dateSelect = {
+    dateIncident: '',
+    dateEffective: ''
+  }
+  constructor(
+    private toastr: ToastrService,
+    private cdr: ChangeDetectorRef,
+    private dialog: MatDialog,
+    private fileService: FileService,
+    private eventgrpService: EventgrpService,
+    private jobcode: JobcodeService,
+    private employeeService: EmployeeService,
+    private translateService: TranslateService,
+    private router: Router
+  ) {
+    this.translateService.onLangChange.subscribe((event) => {
+    });
+  }
+  ngOnInit(): void {
+    this.getEmployeeList()
+  }
+  getEmployeeList() {
+    this.employee.loading = true
+    this.employeeService.getList().subscribe({
+      next: response => {
+        this.employee.list = response.map((x: any) => new MyEmployeeModel(x))
+        this.employee.loading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.employee.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  selectEmployee(data?: EmployeeModel) {
+    this.employee.select = new MyEmployeeModel(data)
+  }
+  openEmployeeDialog() {
+    this.employeeDialogRef = this.dialog.open(this.employeeDialog, {
+      width: '800px',
+    })
+  }
+  closeEmployeeDialog() {
+    this.employeeDialogRef.close()
+  }
+
+  toISODate(dateInput?: string | null): string {
+    if (!dateInput) return "";
+    const parsedDate = new Date(dateInput);
+    return isNaN(parsedDate.getTime()) ? new Date().toISOString() : parsedDate.toISOString();
+  }
+  changeDate(target: { [key: string]: any }, field: string, dateIso: string) {
+    target[field] = this.toYYYYMMDD(dateIso)
+  }
+  toYYYYMMDD(dateInput?: string | null): string {
+    if (!dateInput) return "";
+    const parsedDate = new Date(dateInput);
+    const options: Intl.DateTimeFormatOptions = {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    };
+    const formattedDate = parsedDate.toLocaleDateString('en-GB', options);
+    const [day, month, year] = formattedDate.split('/');
+    return `${year}-${month}-${day}`;
+  }
+
+  save() {
+    Swal.fire({
+      icon: 'question',
+      title: 'แจ้งเตือน',
+      text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
+      showCancelButton: true,
+      confirmButtonText: 'บันทึกข้อมูล',
+      cancelButtonText: 'ย้อนกลับ',
+      reverseButtons: true,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.showAlert('บันทึกข้อมูลสำเร็จ', 'success')
+        this.closeEmployeeDialog();
+      }
+    });
+  }
+
+  showAlert(text: string, type: 'success' | 'error') {
+    Swal.fire({
+      title: 'แจ้งเตือน',
+      text: text,
+      icon: type,
+      confirmButtonText: 'ตกลง',
+    });
+  }
+
+  back() {
+    this.router.navigate(['/ess/employee-self-service']);
+  }
+}
\ No newline at end of file

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

@@ -101,6 +101,8 @@ export class SidebarComponent {
       this.currentUrl.includes('ess/competency-mapping') ||
       this.currentUrl.includes('ess/job-family-mapping') ||
       this.currentUrl.includes('ess/job-family-matrix') ||
+      this.currentUrl.includes('ess/disciplinary-action') ||
+      this.currentUrl.includes('ess/outstanding-performance') ||
       this.currentUrl.includes('ess/job-description')
     if (this.showSideMenu) {
       const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
@@ -176,6 +178,8 @@ export class SidebarComponent {
           this.currentUrl.includes('ess/competency-mapping') ||
           this.currentUrl.includes('ess/job-family-mapping') ||
           this.currentUrl.includes('ess/job-family-matrix') ||
+          this.currentUrl.includes('ess/disciplinary-action') ||
+          this.currentUrl.includes('ess/outstanding-performance') ||
           this.currentUrl.includes('ess/job-description')
         if (this.showSideMenu) {
           const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;