ทะเบียนพนักงาน

src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.html

@@ -176,7 +176,7 @@
 
 
 <div id="sub-employee-registration-modal" class="hs-overlay hidden ti-modal">
-  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+  <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] !max-w-1/2">
     <div class="max-h-full overflow-hidden ti-modal-content">
       <div class="ti-modal-header">
         <h3 class="text-xxl font-bold text-primary">
@@ -219,25 +219,32 @@
       <div class="ti-modal-body mt-5">
         <div class="space-y-3">
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">รหัสพนักงาน<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">รหัสพนักงาน<span
                 class="text-danger">*</span></label>
-            <input type="text" class="sm:col-span-6 ti-form-input" [ngClass]="{'bg-input-readonly':modalType=='update'}"
+            <input type="text" class="col-span-6 ti-form-input" [ngClass]="{'bg-input-readonly':modalType=='update'}"
               [readonly]="modalType=='update'" [(ngModel)]="employee.select.employeeId">
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-4">ชื่อ-นามสกุล<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ชื่อ-นามสกุล<span
                 class="text-danger">*</span></label>
-            <div class="col-span-4  mt-2">
-              <div class=" flex rounded-md">
-                <input type="text" class="ti-form-input" [(ngModel)]="employee.select.fname">
-              </div>
+            <div class="col-span-4 ">
+              <input type="text" class="ti-form-input" [(ngModel)]="employee.select.fname">
             </div>
-            <div class="flex col-span-4  mt-2">
+            <div class="col-span-4">
               <input type="text" class="ti-form-input" [(ngModel)]="employee.select.lname">
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">กลุ่มพนักงาน<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">สถานภาพพนักงาน<span
+                class="text-danger">*</span></label>
+            <div class="col-span-4 ">
+              <select class="ti-form-select" [(ngModel)]="employee.select.status">
+                <option *ngFor="let item of empStatus.dataList" [value]="item">{{item.tdesc}}</option>
+              </select>
+            </div>
+          </div>
+          <div class="grid grid-cols-12 gap-x-6">
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">กลุ่มพนักงาน<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -260,7 +267,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">วันเริ่มงาน<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center align-center">วันเริ่มงาน<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <mat-form-field>
@@ -274,7 +281,21 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">หัวหน้างาน </label>
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center align-center">วันที่สิ้นสุด<span
+                class="text-danger">*</span></label>
+            <div class="col-span-6 sm:col-span-6 ">
+              <mat-form-field>
+                <input matInput [matDatepicker]="resigndate" type="text" readonly
+                  class="ti-form-input rounded-l-none focus:z-10 flatpickr-input !text-gray-500 !bg-white" id="datetime"
+                  [(ngModel)]="employee.select.dateEndIso"
+                  (ngModelChange)="changeDate(this.employee.select, 'resigndate', employee.select.dateEndIso);">
+                <mat-datepicker-toggle matSuffix [for]="resigndate"></mat-datepicker-toggle>
+                <mat-datepicker #resigndate></mat-datepicker>
+              </mat-form-field>
+            </div>
+          </div>
+          <div class="grid grid-cols-12 gap-x-6">
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">หัวหน้างาน</label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
                 <div class="relative flex rounded-md">
@@ -297,7 +318,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ทะเบียนฝ่าย<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ทะเบียนฝ่าย<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -320,7 +341,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ทะเบียนแผนก<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ทะเบียนแผนก<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -343,7 +364,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ทะเบียนส่วน<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ทะเบียนส่วน<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -366,7 +387,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ส่วนย่อย1<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ส่วนย่อย1<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -389,7 +410,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ส่วนย่อย2<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ส่วนย่อย2<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -412,7 +433,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ส่วนย่อย3</label>
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ส่วนย่อย3</label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
                 <div class="relative flex rounded-md">
@@ -434,7 +455,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ส่วนย่อย4</label>
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ส่วนย่อย4</label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
                 <div class="relative flex rounded-md">
@@ -456,7 +477,8 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ตำแหน่ง<span class="text-danger">*</span></label>
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ตำแหน่ง<span
+                class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
                 <div class="relative flex rounded-md">
@@ -478,7 +500,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ลักษณะงาน<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ลักษณะงาน<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -501,7 +523,8 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">สาขา<span class="text-danger">*</span></label>
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">สาขา<span
+                class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
                 <div class="relative flex rounded-md">
@@ -523,7 +546,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ประเภทพนักงาน<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ประเภทพนักงาน<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -546,7 +569,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">ระดับพนักงาน (JL)<span
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">ระดับพนักงาน (JL)<span
                 class="text-danger">*</span></label>
             <div class="col-span-6 sm:col-span-6 ">
               <div class="flex">
@@ -569,7 +592,7 @@
             </div>
           </div>
           <div class="grid grid-cols-12 gap-x-6">
-            <label class="col-span-3 ti-form-label text-primary mt-2">E-mail</label>
+            <label class="col-span-3 ti-form-label text-primary mt-2 align-center">E-mail</label>
             <input type="text" class="sm:col-span-6 ti-form-input" [(ngModel)]="employee.select.email">
           </div>
         </div>

src/app/components/company-components/employee-registration/sub-employee-registration/sub-employee-registration.component.ts

@@ -29,6 +29,8 @@ import { Bu4Model, MyBu4Model } from 'src/app/shared/model/bu4.model';
 import { Bu5Model, MyBu5Model } from 'src/app/shared/model/bu5.model';
 import { Bu6Model, MyBu6Model } from 'src/app/shared/model/bu6.model';
 import { Bu7Model, MyBu7Model } from 'src/app/shared/model/bu7.model';
+import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
+import { StatusModel, MyStatusModel } from 'src/app/shared/model/status.model';
 export interface DataEmployee {
   loading: boolean
   select: EmployeeModel | any
@@ -83,6 +85,7 @@ export class SubEmployeeRegistrationComponent {
   branch: { loading: boolean, dataList: BranchModel[] } = { loading: false, dataList: [] }
   empType: { loading: boolean, dataList: EmpTypeModel[] } = { loading: false, dataList: [] }
   pl: { loading: boolean, dataList: PLModel[] } = { loading: false, dataList: [] }
+  empStatus: { loading: boolean, dataList: StatusModel[] } = { loading: false, dataList: [] }
   constructor(private toastr: ToastrService,
     private employeeService: EmployeeService,
     private cdr: ChangeDetectorRef,
@@ -98,6 +101,7 @@ export class SubEmployeeRegistrationComponent {
     private jobcodeService: JobCodeService,
     private branchService: BranchService,
     private empTypeService: EmpTypeService,
+    private empStatusService: EmpStatusService,
     private fileService: FileService,
     private pLService: PLService) { }
 
@@ -116,6 +120,7 @@ export class SubEmployeeRegistrationComponent {
     this.getBranchList()
     this.getEmpTypeList()
     this.getPlList()
+    this.getEmpStatusList()
   }
   onFileSelected(event: any) {
     this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
@@ -164,6 +169,19 @@ export class SubEmployeeRegistrationComponent {
     })
 
   }
+  getEmpStatusList() {
+    this.empStatus.loading = false
+    this.empStatusService.getList().subscribe({
+      next: response => {
+        this.empStatus.dataList = response.map((x: any) => new MyStatusModel(x))
+        this.empStatus.loading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.empStatus.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
   getPlList() {
     this.pl.loading = false
     this.pLService.getList().subscribe({
@@ -497,9 +515,13 @@ export class SubEmployeeRegistrationComponent {
   }
   selectEmployee(data?: EmployeeModel) {
     if (this.modalType == 'update' && !data) {
-      this.employee.select = { ...new MyEmployeeModel({ employeeId: this.employee.select.employeeId }), dateIso: '' }
+      this.employee.select = { ...new MyEmployeeModel({ employeeId: this.employee.select.employeeId }), dateIso: '', dateEndIso: '' }
+      this.employee.select.status = new MyStatusModel(this.empStatus.dataList[0])
     } else {
-      this.employee.select = { ...new MyEmployeeModel(data || {}), dateIso: this.toISODate(data?.firstHireDate) }
+      this.employee.select = { ...new MyEmployeeModel(data || {}), dateIso: this.toISODate(data?.firstHireDate), dateEndIso: this.toISODate(data?.resigndate) }
+      if (!this.employee.select.status.statusCode) {
+        this.employee.select.status = new MyStatusModel(this.empStatus.dataList[0])
+      }
     }
   }
   changeDate(target: { [key: string]: any }, field: string, dateIso: string) {

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

@@ -158,6 +158,7 @@ import { PmsEvaluationAssessmentService } from 'src/app/shared/services/pms-eval
 import { TimeAttendanceComponent } from '../performance-management-evaluation/time-attendance/time-attendance.component';
 import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
 import { EvaluationIdpService } from 'src/app/shared/services/evaluation-Idp.service';
+import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -346,6 +347,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     PmsEvaluationAssessmentService,
     PmsWorkingTimeService,
     EvaluationIdpService,
+    EmpStatusService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,

src/app/shared/model/employee.model.ts

@@ -111,6 +111,7 @@ export interface EmployeeModel {
     thFullName: string
     engFullName: string
     pl: PLModel
+    resigndate: string
 }
 
 export class MyEmployeeModel implements EmployeeModel {
@@ -200,6 +201,7 @@ export class MyEmployeeModel implements EmployeeModel {
     thFullName: string
     engFullName: string
     pl: PLModel
+    resigndate: string
     constructor(data?: Partial<EmployeeModel>) {
         this.employeeId = data?.employeeId || ""
         this.prefix = new MyPrefixModel(data?.prefix || {})
@@ -287,7 +289,7 @@ export class MyEmployeeModel implements EmployeeModel {
         this.thFullName = data?.thFullName || ""
         this.engFullName = data?.engFullName || ""
         this.pl = new MyPLModel(data?.workarea || {})
-
+        this.resigndate = data?.resigndate || ""
     }
 }
 

src/app/shared/model/status.model.ts

@@ -9,11 +9,11 @@ export class MyStatusModel implements StatusModel {
     statusType: string
     tdesc: string
     edesc: string
-    constructor(data: Partial<StatusModel>) {
-        this.statusCode = data.statusCode || ""
-        this.statusType = data.statusType || ""
-        this.tdesc = data.tdesc || ""
-        this.edesc = data.edesc || ""
+    constructor(data?: Partial<StatusModel>) {
+        this.statusCode = data?.statusCode || ""
+        this.statusType = data?.statusType || ""
+        this.tdesc = data?.tdesc || ""
+        this.edesc = data?.edesc || ""
     }
 }
 

src/app/shared/services/emp-status.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { StatusModel } from '../model/status.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EmpStatusService {
+    api = "/emp-status"
+    urlApi = environment.baseUrl + this.api
+    constructor(private http: HttpClient) {
+    }
+    getList(): Observable<StatusModel[]> {
+        return this.http.get<StatusModel[]>(this.urlApi + "/lists")
+    }
+}
\ No newline at end of file