Skip to content

M
myAppraisal
Commit 28c1be21 by Nattana Chaiyamat
Options

กำหนดปัจจัยการประเมินผล

parent 9b4fec34
Showing with 208 additions and 123 deletions
src/app/components/dashboard/dashboard.module.ts
......@@ -142,6 +142,7 @@ import { PmstypeService } from 'src/app/shared/services/pmstype.service';
import { PmstopicService } from 'src/app/shared/services/pmstopic.service';
import { PmsGroupAssessmentService } from 'src/app/shared/services/pms-group-assessment.service';
import { PmsGroupApproveService } from 'src/app/shared/services/pms-group-approve.service';
import { PmsEaluationFactorsService } from 'src/app/shared/services/pms-ealuation-factors.service';
export const MY_DATE_FORMATS = {
parse: {
......@@ -314,6 +315,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
PmstopicService,
PmsGroupAssessmentService,
PmsGroupApproveService,
PmsEaluationFactorsService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
......
src/app/components/performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component.html
......@@ -13,13 +13,14 @@
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-45px m-0 shadow-md">
<button type="button" class="ti-btn ti-btn-soft-success h-45px m-0 shadow-md"
data-hs-overlay="#define-evaluation-factors-alert-modal">
<i class="ri-save-3-line"></i>
Save
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md" (click)="clear()">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA" stroke-width="3.84"
transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
......@@ -50,8 +51,7 @@
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['ระดับพนักงาน','Hoshin','KPI','Competency','Time Attendance','Cross Functional','Special Activities','รวม']; let f = first; let l = last">
<ng-container *ngFor="let item of pmsEaluationFactorsTableHeader; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
......@@ -62,7 +62,7 @@
</ng-container>
</tr>
</thead>
<tbody *ngIf="data.loading">
<tbody *ngIf="pmsEaluationFactors.loading">
<tr>
<td class="text-center" colspan="100%">
<div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
......@@ -72,40 +72,27 @@
</td>
</tr>
</tbody>
<tbody *ngIf="!data.loading&&!dataListFilter().length">
<tbody *ngIf="!pmsEaluationFactors.loading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!data.loading&&dataListFilter().length">
<tbody *ngIf="!pmsEaluationFactors.loading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-center items-center">
*ngFor="let pmsEaluationFactors of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
<span>
{{item.employee }}
{{pmsEaluationFactors.personalLevel.plId }}
</span>
</td>
<td>
<input type="text" class="ti-form-input" placeholder="0" [(ngModel)]="item.hoshin">
<td *ngFor="let item of pmsEaluationFactors.pmsEvaluationFactors1ModelList">
<input type="text" class="ti-form-input" oninput="this.value = this.value.replace(/\D/g, '')"
[(ngModel)]="item.pmsScore">
</td>
<td>
<input type="text" class="ti-form-input" placeholder="0" [(ngModel)]="item.kpi">
</td>
<td>
<input type="text" class="ti-form-input" placeholder="0" [(ngModel)]="item.competency">
</td>
<td>
<input type="text" class="ti-form-input" placeholder="0" [(ngModel)]="item.time_attendance">
</td>
<td>
<input type="text" class="ti-form-input" placeholder="0" [(ngModel)]="item.cross_functional">
</td>
<td>
<input type="text" class="ti-form-input" placeholder="0" [(ngModel)]="item.special_activities">
</td>
<td class="flex justify-center items-center"> {{item.total }} </td>
<td class="text-center">
{{calPmsEaluationFactors1Total(pmsEaluationFactors.pmsEvaluationFactors1ModelList) }} </td>
</tr>
</tbody>
</table>
......@@ -147,4 +134,40 @@
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
</div>
<div id="define-evaluation-factors-alert-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)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#define-evaluation-factors-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#define-evaluation-factors-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#define-evaluation-factors-alert-modal" (click)="savePmsEaluationFactors()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component.ts
import { Component } from '@angular/core';
export interface DataModel {
employee: string,
hoshin: string,
kpi: string,
competency: string,
time_attendance: string,
cross_functional: string,
special_activities: string
total: string
}
import { ChangeDetectorRef, Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MyPmsEvaluationFactorsModel, PmsEvaluationFactorsModel } from 'src/app/shared/model/pms-ealuation-factors.model';
import { MyPmsEaluationFactors1Model, PmsEaluationFactors1Model } from 'src/app/shared/model/pms-ealuation-factors1.model';
import { MyPmstypeModel } from 'src/app/shared/model/pmstype.model';
import { PmsEaluationFactorsService } from 'src/app/shared/services/pms-ealuation-factors.service';
@Component({
selector: 'app-define-evaluation-factors',
......@@ -20,93 +14,89 @@ export class DefineEvaluationFactorsComponent {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
data: { loading: boolean, dataList: DataModel[] } = {
loading: false, dataList: [
{
"employee": "01-02",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "03-04",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "S1-S2",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "S3-S4",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "M1-M2",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "M3-M4",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "E1-E2",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
},
{
"employee": "E3-E4",
"hoshin": "0",
"kpi": "0",
"competency": "0",
"time_attendance": "0",
"cross_functional": "0",
"special_activities": "0",
"total": "100"
pmsEaluationFactors: { loading: boolean, dataList: PmsEvaluationFactorsModel[] } = { loading: false, dataList: [] }
pmsEaluationFactorsTableHeader: string[] = ['ระดับพนักงาน']
constructor(private pmsEaluationFactorsService: PmsEaluationFactorsService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef
) { }
ngOnInit(): void {
this.getPmsEaluationFactorsList()
}
getPmsEaluationFactorsList() {
this.pmsEaluationFactors.loading = true
this.pmsEaluationFactorsTableHeader = ['ระดับพนักงาน']
this.pmsEaluationFactorsService.getList().subscribe({
next: response => {
this.pmsEaluationFactors.dataList = response.map(x => new MyPmsEvaluationFactorsModel(x))
this.pmsEaluationFactors.loading = false
const maxItem = this.pmsEaluationFactors.dataList.reduce((max, item) =>
item.pmsEvaluationFactors1ModelList.length > max.pmsEvaluationFactors1ModelList.length ? item : max,
this.pmsEaluationFactors.dataList[0]
);
const pmsTypeIds = maxItem?.pmsEvaluationFactors1ModelList.map(x => x.pmsType.pmsTypeId) || [];
this.pmsEaluationFactorsTableHeader = this.pmsEaluationFactorsTableHeader.concat(maxItem?.pmsEvaluationFactors1ModelList.map(x => x.pmsType.tdesc) || []).concat(['รวม'])
this.pmsEaluationFactors.dataList.forEach(x => {
while (x.pmsEvaluationFactors1ModelList.length < 5) {
const usedTypes = x.pmsEvaluationFactors1ModelList.map(y => y.pmsType.pmsTypeId);
const remainingTypes = pmsTypeIds.filter(type => !usedTypes.includes(type));
if (remainingTypes.length === 0) { break }
const pmsTypeId = remainingTypes[0];
x.pmsEvaluationFactors1ModelList.push(
new MyPmsEaluationFactors1Model({ pmsType: new MyPmstypeModel({ pmsTypeId }) })
)
}
x.pmsEvaluationFactors1ModelList.sort((a, b) => +(a.pmsType.pmsTypeId) - +(b.pmsType.pmsTypeId))
})
console.log(" 🐒 this.pmsEaluationFactors.dataList:", this.pmsEaluationFactors.dataList)
this.cdr.detectChanges()
}, error: error => {
this.pmsEaluationFactors.loading = false
this.cdr.detectChanges()
}
})
}
savePmsEaluationFactors() {
this.pmsEaluationFactors.loading = true
this.pmsEaluationFactors.dataList = this.pmsEaluationFactors.dataList.map(x => new MyPmsEvaluationFactorsModel({
...x,
pmsEvaluationFactors1ModelList: x.pmsEvaluationFactors1ModelList.map(y => new MyPmsEaluationFactors1Model({
...y,
pmsScore: +(y.pmsScore)
}))
}))
this.pmsEaluationFactorsService.post(this.pmsEaluationFactors.dataList).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getPmsEaluationFactorsList()
} else {
this.showAlert(response.message, 'error')
this.pmsEaluationFactors.loading = false
this.cdr.detectChanges()
}
}, error: error => {
this.showAlert(error.message, 'error')
this.pmsEaluationFactors.loading = false
this.cdr.detectChanges()
}
]
})
}
clear() {
this.pmsEaluationFactors.dataList = this.pmsEaluationFactors.dataList.map(x => new MyPmsEvaluationFactorsModel({
...x,
pmsEvaluationFactors1ModelList: x.pmsEvaluationFactors1ModelList.map(y => new MyPmsEaluationFactors1Model({
...y,
pmsScore: 0
}))
}))
}
calPmsEaluationFactors1Total(data: PmsEaluationFactors1Model[]) {
return data.reduce((sum, num) => sum + +(num.pmsScore), 0);
}
dataListFilter() {
return this.data.dataList.filter(x => x.employee.toLowerCase().includes(this.search.toLowerCase()))
return this.pmsEaluationFactors.dataList.filter(x => x.personalLevel.plId.toLowerCase().includes(this.search.toLowerCase()))
}
searchChange() {
......@@ -115,4 +105,11 @@ export class DefineEvaluationFactorsComponent {
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
}
}
src/app/shared/model/pms-ealuation-factors.model.ts 0 → 100644
import { PLModel, MyPLModel } from "./pl.model"
import { MyPmsEaluationFactors1Model, PmsEaluationFactors1Model } from "./pms-ealuation-factors1.model"
export interface PmsEvaluationFactorsModel {
personalLevel: PLModel
companyId: string
pmsEvaluationFactors1ModelList: PmsEaluationFactors1Model[]
}
export class MyPmsEvaluationFactorsModel implements PmsEvaluationFactorsModel {
personalLevel: PLModel
companyId: string
pmsEvaluationFactors1ModelList: PmsEaluationFactors1Model[]
constructor(data?: Partial<PmsEvaluationFactorsModel>) {
this.personalLevel = new MyPLModel(data?.personalLevel)
this.companyId = data?.companyId || ""
this.pmsEvaluationFactors1ModelList = data?.pmsEvaluationFactors1ModelList?.map(x => new MyPmsEaluationFactors1Model(x)) || []
}
}
src/app/shared/model/pms-ealuation-factors1.model.ts 0 → 100644
import { MyPmstypeModel, PmstypeModel } from "./pmstype.model";
export interface PmsEaluationFactors1Model {
pmsType: PmstypeModel
companyId: string
pmsScore: number
}
export class MyPmsEaluationFactors1Model implements PmsEaluationFactors1Model {
pmsType: PmstypeModel
companyId: string
pmsScore: number
constructor(data?: Partial<PmsEaluationFactors1Model>) {
this.pmsType = new MyPmstypeModel(data?.pmsType)
this.companyId = data?.companyId || ""
this.pmsScore = data?.pmsScore ?? 0
}
}
src/app/shared/services/pms-ealuation-factors.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AlertModel } from '../model/alert.model';
import { PmsEvaluationFactorsModel } from '../model/pms-ealuation-factors.model';
@Injectable({
providedIn: 'root'
})
export class PmsEaluationFactorsService {
api = "/pms-ealuation-factors"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<PmsEvaluationFactorsModel[]> {
return this.http.get<PmsEvaluationFactorsModel[]>(this.urlApi + "/lists")
}
post(body: PmsEvaluationFactorsModel[]): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment