การจัดการข้อมูลสถิติเวลาทำงาน

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

@@ -162,6 +162,8 @@ import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
 import { PaginationComponent } from '../pagination/pagination.component';
 import { RolePermissionConfigComponent } from '../company-components/account-settings/role-permission-config/role-permission-config.component';
 import { ConfigPermissionService } from 'src/app/shared/services/config-permission.service';
+import { TimeAttendanceManageComponent } from '../performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component';
+import { TimeAttendanceStatisticsComponent } from '../performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component';
 
 
 export const MY_DATE_FORMATS = {
@@ -290,6 +292,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     TimeAttendanceComponent,
     PaginationComponent,
     RolePermissionConfigComponent,
+    TimeAttendanceManageComponent,
+    TimeAttendanceStatisticsComponent,
   ],
   imports: [
     CommonModule,

src/app/components/performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component.ts

+import { ChangeDetectorRef, Component } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { MyEmeventgrpModel } from 'src/app/shared/model/emeventgrp.model';
+import { EventgrpModel, MyEventgrpModel, } from 'src/app/shared/model/eventgrp.model';
+import { PmsWorkingTimeModel, MyPmsWorkingTimeModel } from 'src/app/shared/model/pms-working-time.model';
+import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
+import { FileService } from 'src/app/shared/services/file.service';
+import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
+interface table {
+    currentPage: number,
+    page: number[],
+    search: string
+}
+@Component({
+    selector: 'app-time-attendance-manage',
+    templateUrl: './time-attendance-manage.component.html',
+    styleUrls: ['./time-attendance-manage.component.scss']
+})
+export class TimeAttendanceManageComponent {
+    numDataListChecked = 0
+    isDataListChecked = false
+    isDataListCheckedAll = false
+    currentPage = 1;
+    page = Array.from({ length: 1 }, (_, i) => i + 1);
+    search = '';
+    modalStatus: "add" | "edit" | "delete" | "deleteGroup" = "add"
+    modal: table = {
+        currentPage: 1,
+        page: Array.from({ length: 1 }, (_, i) => i + 1),
+        search: ""
+    }
+    eventgrp: { loading: boolean, selectIndex: number, selectList: EventgrpModel[], dataList: { check: boolean, data: EventgrpModel }[] } = { loading: false, selectIndex: -1, selectList: [new MyEventgrpModel()], dataList: [] }
+    pmsWorkingTime: { loading: boolean, select: PmsWorkingTimeModel, dataList: { check: boolean, data: PmsWorkingTimeModel }[] } = { loading: false, select: new MyPmsWorkingTimeModel(), dataList: [] }
+    constructor(
+        private toastr: ToastrService,
+        private cdr: ChangeDetectorRef,
+        private fileService: FileService,
+        private eventgrpService: EventgrpService,
+        private pmsWorkingTimeService: PmsWorkingTimeService,
+    ) { }
+
+    ngOnInit(): void {
+        this.getEventgrpList()
+        this.getPmsWorkingTimeList()
+    }
+    getPmsWorkingTimeList() {
+        this.pmsWorkingTime.loading = true
+        this.pmsWorkingTimeService.getList().subscribe({
+            next: response => {
+                this.pmsWorkingTime.dataList = response.map(x => ({ check: false, data: new MyPmsWorkingTimeModel(x) }))
+                this.pmsWorkingTime.loading = false
+                this.isDataListCheckedAll = false
+                this.dataListCheckAll()
+                this.searchChange()
+                this.cdr.detectChanges();
+            }, error: error => {
+                this.pmsWorkingTime.loading = false
+                this.cdr.detectChanges()
+            }
+        })
+    }
+    pmsWorkingTimeFilter() {
+        return this.pmsWorkingTime.dataList.filter((x) => {
+            const data = x.data
+            const match = data.pmsWorkingTimeId.toLowerCase().includes(this.search.toLowerCase()) ||
+                data.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+                data.detailUnit.toLowerCase().includes(this.search.toLowerCase()) ||
+                (data.weight + "").toLowerCase().includes(this.search.toLowerCase())
+            return match;
+        });
+    }
+    searchChange() {
+        this.currentPage = 1;
+        const filteredData = this.pmsWorkingTimeFilter();
+        this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
+        this.dataListCheck();
+    }
+    selectData(data?: PmsWorkingTimeModel) {
+        this.pmsWorkingTime.select = new MyPmsWorkingTimeModel(data)
+    }
+    dataListCheckAll() {
+        const selectAll = this.isDataListCheckedAll;
+        this.pmsWorkingTimeFilter().forEach(x => x.check = selectAll);
+        this.dataListCheck();
+    }
+    dataListCheck() {
+        const dataCheck = this.pmsWorkingTimeFilter();
+        this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
+        this.numDataListChecked = this.pmsWorkingTime.dataList.filter(x => x.check).length;
+        this.isDataListChecked = Boolean(this.numDataListChecked)
+    }
+
+    getEventgrpList() {
+        this.eventgrp.loading = true
+        this.eventgrpService.getList().subscribe({
+            next: response => {
+                this.eventgrp.dataList = response.map(x => ({ check: false, data: new MyEventgrpModel(x) }))
+                this.eventgrp.loading = false
+                this.isDataListCheckedAll = false
+                this.dataListCheckAll()
+                this.searchChange()
+                this.cdr.detectChanges();
+            }, error: error => {
+                this.eventgrp.loading = false
+                this.cdr.detectChanges()
+            }
+        })
+    }
+    eventgrpListFilter() {
+        return this.eventgrp.dataList.filter(x => {
+            const data = x.data
+            const match = data.eventgrpId.toLowerCase().includes(this.modal.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.modal.search.toLowerCase());
+            return match;
+        })
+    }
+    selectEventgrp(data?: EventgrpModel) {
+        if (!data) {
+            this.pmsWorkingTime.select.emeventgrp.splice(this.eventgrp.selectIndex, 1);
+            return;
+        }
+        this.pmsWorkingTime.select.emeventgrp.push(new MyEmeventgrpModel(data))
+    }
+
+
+    clearData(modalStatus: string) {
+        if (modalStatus == 'add') {
+            this.pmsWorkingTime.select = new MyPmsWorkingTimeModel()
+        } else if (modalStatus == 'edit') {
+            this.pmsWorkingTime.select = new MyPmsWorkingTimeModel({ pmsWorkingTimeId: this.pmsWorkingTime.select.pmsWorkingTimeId })
+        }
+        this.eventgrp.selectList = [new MyEventgrpModel()]
+    }
+
+    modalSearchChange(dataList: any) {
+        this.modal.currentPage = 1
+        this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
+    }
+    updatePmsWorkingTime() {
+        this.pmsWorkingTime.loading = true
+        this.pmsWorkingTimeService.post(new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)).subscribe({
+            next: response => {
+                if (response.success) {
+                    this.showAlert(response.message, 'success')
+                    this.getPmsWorkingTimeList()
+                    this.searchChange()
+                } else {
+                    this.showAlert(response.message, 'error')
+                    this.pmsWorkingTime.loading = false
+                }
+                this.cdr.detectChanges()
+            }, error: error => {
+                this.showAlert(error.message, 'error')
+                this.pmsWorkingTime.loading = false
+                this.cdr.detectChanges()
+            }
+        })
+    }
+    deletePmsWorkingTime() {
+        let body: PmsWorkingTimeModel[] = []
+        if (this.modalStatus == "deleteGroup") {
+            body = this.pmsWorkingTime.dataList.filter(x => x.check).map(x => new MyPmsWorkingTimeModel(x.data))
+        } else {
+            body = [new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)]
+        }
+        this.pmsWorkingTime.loading = true
+        this.pmsWorkingTimeService.delete(body).subscribe({
+            next: response => {
+                if (response.success) {
+                    this.showAlert(response.message, 'success')
+                    this.getPmsWorkingTimeList()
+                } else {
+                    this.showAlert(response.message, 'error')
+                    this.pmsWorkingTime.loading = false
+                    this.cdr.detectChanges()
+                }
+            }, error: error => {
+                this.showAlert(error.message, 'error')
+                this.pmsWorkingTime.loading = false
+                this.cdr.detectChanges()
+            }
+        })
+    }
+    showAlert(text: string, type: 'success' | 'error') {
+        this.toastr[type](text, 'แจ้งเตือน', {
+            timeOut: 3000,
+            positionClass: 'toast-top-right',
+        })
+    }
+}

src/app/components/performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component.html

+<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out rounded-md">
+    <div class="ti-modal-header bg-primary text-center">
+        <h5 class="text-xxl font-bold text-white">
+            นำเข้าข้อมูลสถิติเวลาทำงาน
+        </h5>
+    </div>
+    <div class="ti-modal-body max-h-full overflow-hidden ti-modal-content !rounded-t-none !rounded-b-sm">
+        <h1 class="mt-2rem text-xl" style="text-align: center;">ไฟล์</h1>
+        <div class="mt-2rem p-2">
+            <div class="flex rounded-md">
+                <input #fileInput id="fileInput" type="file" (change)="onFileSelected($event)" hidden>
+                <input type="text" [value]="selectedFileName" readonly (click)="fileInput.click()"
+                    class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10 cursor-pointer">
+                <button type="button" (click)="fileInput.click()"
+                    class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm">
+                    <i class="ti ti-upload"></i>
+                </button>
+            </div>
+            <div class="flex justify-center mt-2rem ">
+                <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 
+                text-center text-secondary border-secondary border-b-2 align-items-end text-xl"
+                    (click)="downloadFile()">
+                    ดาวน์โหลดตัวอย่างไฟล์</h1>
+            </div>
+            <div class="flex justify-center mt-2rem mb-1rem space-x-4">
+                <button type="submit" class="ti-btn ti-btn-secondary"
+                    data-hs-overlay="#company-registration-page-upload-modal" [class.ti-btn-disabled]="!selectedFile"
+                    (click)="uploadFile()" [disabled]="!selectedFile" [disabled]="!selectedFile">
+                    อัปโหลด
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/components/performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component.ts

+import { ChangeDetectorRef, Component } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { FileService } from 'src/app/shared/services/file.service';
+interface table {
+    currentPage: number,
+    page: number[],
+    search: string
+}
+@Component({
+    selector: 'app-time-attendance-statistics',
+    templateUrl: './time-attendance-statistics.component.html',
+    styleUrls: ['./time-attendance-statistics.component.scss']
+})
+export class TimeAttendanceStatisticsComponent {
+    selectedFile: File | null = null;
+    selectedFileName: string = 'กรุณาเลือกไฟล์';
+    constructor(private toastr: ToastrService,
+        private cdr: ChangeDetectorRef,
+        private fileService: FileService) { }
+
+
+    onFileSelected(event: any) {
+        this.selectedFile = event.target.files.length > 0 ? event.target.files[0] : null;
+        this.selectedFileName = this.selectedFile?.name || "กรุณาเลือกไฟล์"
+    }
+    uploadFile() {
+        if (!this.selectedFile) {
+            alert('กรุณาเลือกไฟล์ก่อนอัปโหลด')
+            return
+        }
+        const formData = new FormData();
+        formData.append('file', this.selectedFile);
+        this.fileService.uploadExcel(formData, 'PMS_WORKING_TIME_EMP').subscribe({
+            next: response => {
+                if (response.success) {
+                    this.showAlert(response.message, 'success')
+                } else {
+                    this.showAlert(response.message, 'error')
+                    this.cdr.detectChanges();
+                }
+            }, error: error => {
+                this.showAlert(error.message, 'error')
+                this.cdr.detectChanges();
+            }
+        })
+    }
+    downloadFile() {
+        const fileName = 'IMPORT_PMS_WORKING_TIME_EMP.xlsx'
+        this.fileService.downloadTemplate(fileName).subscribe({
+            next: response => {
+                const url = window.URL.createObjectURL(response);
+                const a = document.createElement("a");
+                a.href = url;
+                a.download = fileName;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+            }, error: error => {
+                this.showAlert(error.message, 'error')
+            }
+        })
+    }
+
+    showAlert(text: string, type: 'success' | 'error') {
+        this.toastr[type](text, 'แจ้งเตือน', {
+            timeOut: 3000,
+            positionClass: 'toast-top-right',
+        });
+    }
+
+}
\ No newline at end of file

src/app/components/performance-management-evaluation/time-attendance/time-attendance.component.ts

-import { ChangeDetectorRef, Component } from '@angular/core';
-import { ToastrService } from 'ngx-toastr';
-import { MyEmeventgrpModel } from 'src/app/shared/model/emeventgrp.model';
-import { EventgrpModel, MyEventgrpModel, } from 'src/app/shared/model/eventgrp.model';
-import { PmsWorkingTimeModel, MyPmsWorkingTimeModel } from 'src/app/shared/model/pms-working-time.model';
-import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
-import { FileService } from 'src/app/shared/services/file.service';
-import { PmsWorkingTimeService } from 'src/app/shared/services/pms-working-time.service';
+import { Component } from '@angular/core';
 interface table {
     currentPage: number,
     page: number[],
@@ -18,176 +11,5 @@ interface table {
 })
 export class TimeAttendanceComponent {
     pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนการประเมินเวลาทำงาน', 'การจัดการหัวข้อการประเมินเวลาทำงาน']
-
-    numDataListChecked = 0
-    isDataListChecked = false
-    isDataListCheckedAll = false
-    currentPage = 1;
-    page = Array.from({ length: 1 }, (_, i) => i + 1);
-    search = '';
-    modalStatus: "add" | "edit" | "delete" | "deleteGroup" = "add"
-    modal: table = {
-        currentPage: 1,
-        page: Array.from({ length: 1 }, (_, i) => i + 1),
-        search: ""
-    }
-
-
-    eventgrp: { loading: boolean, selectIndex: number, selectList: EventgrpModel[], dataList: { check: boolean, data: EventgrpModel }[] } = { loading: false, selectIndex: -1, selectList: [new MyEventgrpModel()], dataList: [] }
-    pmsWorkingTime: { loading: boolean, select: PmsWorkingTimeModel, dataList: { check: boolean, data: PmsWorkingTimeModel }[] } = { loading: false, select: new MyPmsWorkingTimeModel(), dataList: [] }
-    constructor(
-        private toastr: ToastrService,
-        private cdr: ChangeDetectorRef,
-        private fileService: FileService,
-        private eventgrpService: EventgrpService,
-        private pmsWorkingTimeService: PmsWorkingTimeService,
-    ) { }
-
-    ngOnInit(): void {
-        this.getEventgrpList()
-        this.getPmsWorkingTimeList()
-    }
-    getPmsWorkingTimeList() {
-        this.pmsWorkingTime.loading = true
-        this.pmsWorkingTimeService.getList().subscribe({
-            next: response => {
-                this.pmsWorkingTime.dataList = response.map(x => ({ check: false, data: new MyPmsWorkingTimeModel(x) }))
-                this.pmsWorkingTime.loading = false
-                this.isDataListCheckedAll = false
-                this.dataListCheckAll()
-                this.searchChange()
-                this.cdr.detectChanges();
-            }, error: error => {
-                this.pmsWorkingTime.loading = false
-                this.cdr.detectChanges()
-            }
-        })
-    }
-    pmsWorkingTimeFilter() {
-        return this.pmsWorkingTime.dataList.filter((x) => {
-            const data = x.data
-            const match = data.pmsWorkingTimeId.toLowerCase().includes(this.search.toLowerCase()) ||
-                data.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
-                data.detailUnit.toLowerCase().includes(this.search.toLowerCase()) ||
-                (data.weight + "").toLowerCase().includes(this.search.toLowerCase())
-            return match;
-        });
-    }
-    searchChange() {
-        this.currentPage = 1;
-        const filteredData = this.pmsWorkingTimeFilter();
-        this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
-        this.dataListCheck();
-    }
-    selectData(data?: PmsWorkingTimeModel) {
-        this.pmsWorkingTime.select = new MyPmsWorkingTimeModel(data)
-    }
-    dataListCheckAll() {
-        const selectAll = this.isDataListCheckedAll;
-        this.pmsWorkingTimeFilter().forEach(x => x.check = selectAll);
-        this.dataListCheck();
-    }
-    dataListCheck() {
-        const dataCheck = this.pmsWorkingTimeFilter();
-        this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
-        this.numDataListChecked = this.pmsWorkingTime.dataList.filter(x => x.check).length;
-        this.isDataListChecked = Boolean(this.numDataListChecked)
-    }
-
-    getEventgrpList() {
-        this.eventgrp.loading = true
-        this.eventgrpService.getList().subscribe({
-            next: response => {
-                this.eventgrp.dataList = response.map(x => ({ check: false, data: new MyEventgrpModel(x) }))
-                this.eventgrp.loading = false
-                this.isDataListCheckedAll = false
-                this.dataListCheckAll()
-                this.searchChange()
-                this.cdr.detectChanges();
-            }, error: error => {
-                this.eventgrp.loading = false
-                this.cdr.detectChanges()
-            }
-        })
-    }
-    eventgrpListFilter() {
-        return this.eventgrp.dataList.filter(x => {
-            const data = x.data
-            const match = data.eventgrpId.toLowerCase().includes(this.modal.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.modal.search.toLowerCase());
-            return match;
-        })
-    }
-    selectEventgrp(data?: EventgrpModel) {
-        if (!data) {
-            this.pmsWorkingTime.select.emeventgrp.splice(this.eventgrp.selectIndex, 1);
-            return;
-        }
-        this.pmsWorkingTime.select.emeventgrp.push(new MyEmeventgrpModel(data))
-    }
-
-
-    clearData(modalStatus: string) {
-        if (modalStatus == 'add') {
-            this.pmsWorkingTime.select = new MyPmsWorkingTimeModel()
-        } else if (modalStatus == 'edit') {
-            this.pmsWorkingTime.select = new MyPmsWorkingTimeModel({ pmsWorkingTimeId: this.pmsWorkingTime.select.pmsWorkingTimeId })
-        }
-        this.eventgrp.selectList = [new MyEventgrpModel()]
-    }
-
-    modalSearchChange(dataList: any) {
-        this.modal.currentPage = 1
-        this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
-    }
-    updatePmsWorkingTime() {
-        this.pmsWorkingTime.loading = true
-        this.pmsWorkingTimeService.post(new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)).subscribe({
-            next: response => {
-                if (response.success) {
-                    this.showAlert(response.message, 'success')
-                    this.getPmsWorkingTimeList()
-                    this.searchChange()
-                } else {
-                    this.showAlert(response.message, 'error')
-                    this.pmsWorkingTime.loading = false
-                }
-                this.cdr.detectChanges()
-            }, error: error => {
-                this.showAlert(error.message, 'error')
-                this.pmsWorkingTime.loading = false
-                this.cdr.detectChanges()
-            }
-        })
-    }
-    deletePmsWorkingTime() {
-        let body: PmsWorkingTimeModel[] = []
-        if (this.modalStatus == "deleteGroup") {
-            body = this.pmsWorkingTime.dataList.filter(x => x.check).map(x => new MyPmsWorkingTimeModel(x.data))
-        } else {
-            body = [new MyPmsWorkingTimeModel(this.pmsWorkingTime.select)]
-        }
-        this.pmsWorkingTime.loading = true
-        this.pmsWorkingTimeService.delete(body).subscribe({
-            next: response => {
-                if (response.success) {
-                    this.showAlert(response.message, 'success')
-                    this.getPmsWorkingTimeList()
-                } else {
-                    this.showAlert(response.message, 'error')
-                    this.pmsWorkingTime.loading = false
-                    this.cdr.detectChanges()
-                }
-            }, error: error => {
-                this.showAlert(error.message, 'error')
-                this.pmsWorkingTime.loading = false
-                this.cdr.detectChanges()
-            }
-        })
-    }
-    showAlert(text: string, type: 'success' | 'error') {
-        this.toastr[type](text, 'แจ้งเตือน', {
-            timeOut: 3000,
-            positionClass: 'toast-top-right',
-        })
-    }
+    currentPath = 1
 }