Skip to content

M
mySkill-x
Commit 2af5edee by Nattana Chaiyamat
Options

ประเมินโดยหัวหน้า

parent c3478cad
Showing with 136 additions and 29 deletions
src/app/components/employee-self-service/employee-self-service.component.scss
...@@ -133,7 +133,7 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24); ...@@ -133,7 +133,7 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
/* ===== SUB-CARD + เอฟเฟกต์ ===== */ /* ===== SUB-CARD + เอฟเฟกต์ ===== */
.sub-card { .sub-card {
aspect-ratio: 1 / 1; // aspect-ratio: 1 / 1;
position: relative; position: relative;
border-radius: $radius-sub; border-radius: $radius-sub;
background: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .5);
...@@ -192,3 +192,4 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24); ...@@ -192,3 +192,4 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
pointer-events: none; pointer-events: none;
word-break: break-word; word-break: break-word;
} }
src/app/components/my-skill-x-module/my-skill-x-module.component.html
<header class="flex flex-col items-center gap-3 text-center"> <ng-container *ngTemplateOutlet="newTemplate"></ng-container>
<ng-template #newTemplate>
<header class="flex flex-col items-center gap-3 text-center">
<!-- โลโก้ -->
<img src="./assets/img/brand-logos/mySkill-XXX-h190.PNG" alt="mySkillX" class="h-32 w-auto" />
<!-- บรรทัดใหญ่ -->
<h1 class="max-w-[900px] text-2xl sm:text-3xl font-bold text-gray-900">
My Skill Platform <span class="text-red-600">One X</span>:
Overall Network Employee <span class="text-red-600">Xtra</span>
</h1>
<!-- บรรทัดย่อย -->
<h2 class="text-xl sm:text-2xl font-bold text-gray-700">
HR Master Blueprint
</h2>
</header>
<!-- blueprint cards --------------------------------------------------->
<section class="mx-auto mt-10 mb-10 grid gap-10 xl:gap-14 lg:grid-cols-2 max-w-[1400px]">
<!-- HRD One X ------------------------------------------------------->
<div class="bp-card bp-glow">
<div class="bp-head">
<h3 class="bp-title">HRD One X</h3>
<p class="bp-sub">Human Resource Development</p>
</div>
<div class="flex flex-col" style="gap:1.2rem">
<ng-container *ngFor="let sliceNum of [[0,3],[3,6]];let i=index">
<div class="flex flex-row" style="gap:1.2rem">
<ng-container *ngFor="let m of hrdModules | slice:sliceNum[0] : sliceNum[1] ;let f = first">
<div class="flex-1 module-card" [routerLink]=" f ? '/ess/employee-self-service' :null"
(click)="!f ? goToWebsite('https://www.myhr.co.th/') : null">
<img [src]="m.icon" [alt]="m.title + ' icon'" class="module-img" />
<p class="module-label">
<span class="font-semibold text-sky-600">One X</span><br />
{{ m.title }}
</p>
<i class="ti ti-arrow-right module-arrow"></i>
</div>
</ng-container>
</div>
</ng-container>
</div>
</div>
<!-- HRM One X ------------------------------------------------------->
<div class="bp-card bp-card--blue bp-glow">
<div class="bp-head">
<h3 class="bp-title">HRM One X</h3>
<p class="bp-sub">Human Resource Management</p>
</div>
<div class="flex flex-col" style="gap:1.2rem">
<ng-container *ngFor="let sliceNum of [[0,3],[3,6]];let i=index">
<div class="flex flex-row" style="gap:1.2rem">
<ng-container *ngFor="let m of hrmModules | slice:sliceNum[0] : sliceNum[1] ;let f = first">
<div class="flex-1 module-card" (click)="goToWebsite('https://www.myhr.co.th/')">
<img [src]="m.icon" [alt]="m.title + ' icon'" class="module-img" />
<p class="module-label">
<span class="font-semibold text-sky-600">One X</span><br />
{{ m.title }}
</p>
<i class="ti ti-arrow-right module-arrow"></i>
</div>
</ng-container>
</div>
</ng-container>
</div>
</div>
</section>
<!-- eco-system pill --------------------------------------------------->
<!-- <div (click)="goToWebsite('https://www.myhr.co.th/')"
class="eco-pill bp-glow mx-auto mt-5 text-center !p-0 cursor-pointer">
<span class="flex flex-row" style="font-size: 30px;align-items: center;justify-content: center;">
Eco system <span class="font-semibold">myHR</span>
<img src='./assets/img/icons-menu/logo-myhr.png' style="width: 100px;" />
</span>
</div> -->
</ng-template>
<ng-template #oldTemplate>
<header class="flex flex-col items-center gap-3 text-center">
<!-- โลโก้ --> <!-- โลโก้ -->
<img src="./assets/img/brand-logos/mySkill-XXX-h190.PNG" alt="mySkillX" class="h-32 w-auto" /> <img src="./assets/img/brand-logos/mySkill-XXX-h190.PNG" alt="mySkillX" class="h-32 w-auto" />
...@@ -13,10 +101,10 @@ ...@@ -13,10 +101,10 @@
<h2 class="text-xl sm:text-2xl font-bold text-gray-700"> <h2 class="text-xl sm:text-2xl font-bold text-gray-700">
HR Master Blueprint HR Master Blueprint
</h2> </h2>
</header> </header>
<!-- blueprint cards ---------------------------------------------------> <!-- blueprint cards --------------------------------------------------->
<section class="mx-auto mt-10 grid gap-10 xl:gap-14 lg:grid-cols-2 max-w-[1400px]"> <section class="mx-auto mt-10 grid gap-10 xl:gap-14 lg:grid-cols-2 max-w-[1400px]">
<!-- HRD One X -------------------------------------------------------> <!-- HRD One X ------------------------------------------------------->
<div class="bp-card bp-glow"> <div class="bp-card bp-glow">
...@@ -61,13 +149,14 @@ ...@@ -61,13 +149,14 @@
</div> </div>
</div> </div>
</section> </section>
<!-- eco-system pill ---------------------------------------------------> <!-- eco-system pill --------------------------------------------------->
<!-- <div (click)="goToWebsite('https://www.myhr.co.th/')" <!-- <div (click)="goToWebsite('https://www.myhr.co.th/')"
class="eco-pill bp-glow mx-auto mt-5 text-center !p-0 cursor-pointer"> class="eco-pill bp-glow mx-auto mt-5 text-center !p-0 cursor-pointer">
<span class="flex flex-row" style="font-size: 30px;align-items: center;justify-content: center;"> <span class="flex flex-row" style="font-size: 30px;align-items: center;justify-content: center;">
Eco system <span class="font-semibold">myHR</span> Eco system <span class="font-semibold">myHR</span>
<img src='./assets/img/icons-menu/logo-myhr.png' style="width: 100px;" /> <img src='./assets/img/icons-menu/logo-myhr.png' style="width: 100px;" />
</span> </span>
</div> --> </div> -->
</ng-template>
\ No newline at end of file
src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.html
...@@ -49,8 +49,9 @@ ...@@ -49,8 +49,9 @@
<div class="box-body py-2"> <div class="box-body py-2">
<div class="flex flex-col items-center gap-3"> <div class="flex flex-col items-center gap-3">
<img <img
[src]="evaluatee.data.picture?getImg(evaluatee.data.picture):'./assets/img/users/defaultperson.jpg'" (error)="onImageError($event)" [src]="evaluatee.data.picture?getImg(evaluatee.data.picture):'./assets/img/users/defaultperson.jpg'"
class="h-24 w-24 rounded-full ring-4 ring-primary object-cover" alt="profile-img" /> (error)="onImageError($event)" class="h-24 w-24 rounded-full ring-4 ring-primary object-cover"
alt="profile-img" />
<ng-container *ngIf="kpiScorePart[kpiScorePart.length-1].score as grade"> <ng-container *ngIf="kpiScorePart[kpiScorePart.length-1].score as grade">
<div class="flex gap-1"> <div class="flex gap-1">
<ng-container *ngFor="let s of [1,2,3,4,5]"> <ng-container *ngFor="let s of [1,2,3,4,5]">
...@@ -170,13 +171,13 @@ ...@@ -170,13 +171,13 @@
</div> </div>
</div> </div>
<div class="w-full mt-2 flex justify-center"> <div class="w-full mt-2 flex justify-center">
<div class="flex flex-row gap-2" style="width:80%"> <div class="flex flex-row gap-2 w-full">
<div class="flex-1 font-size-18px font-weight-700 text-right align-center"> <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
คะแนนเฉลี่ย คะแนนเฉลี่ย
</div> </div>
<div class="flex-1 flex justify-center items-center"> <div class="flex-1 flex justify-center items-center">
<div <div
class="w-3/4 border border-secondary text-center align-center text-indigo-600 font-semibold" class="w-full border border-secondary text-center align-center text-indigo-600 font-semibold"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;"> style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{compentencyWeightScore}} {{compentencyWeightScore}}
</div> </div>
...@@ -186,7 +187,7 @@ ...@@ -186,7 +187,7 @@
</div> </div>
<div class="flex-1 flex justify-center items-center"> <div class="flex-1 flex justify-center items-center">
<div <div
class="w-3/4 border border-secondary text-center align-center text-indigo-600 font-semibold" class="w-full border border-secondary text-center align-center text-indigo-600 font-semibold"
style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;"> style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
{{compentencyGap}} {{compentencyGap}}
</div> </div>
......
src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html
...@@ -50,10 +50,10 @@ ...@@ -50,10 +50,10 @@
<div class="flex flex-col w-1/2 gap-2" <div class="flex flex-col w-1/2 gap-2"
style="height: 200px;justify-content: center;align-items: start;"> style="height: 200px;justify-content: center;align-items: start;">
<span> <span>
ประเมินแล้ว {{subordinateApprove()}} คน ประเมินแล้ว <span class="text-indigo-600">{{subordinateApprove()}}</span> คน
</span> </span>
<span> <span>
ทั้งหมด {{subordinateAll()}} คน ทั้งหมด <span class="text-indigo-600">{{subordinateAll()}}</span> คน
</span> </span>
</div> </div>
</div> </div>
...@@ -81,10 +81,10 @@ ...@@ -81,10 +81,10 @@
<div class="flex flex-col w-1/2 gap-2" <div class="flex flex-col w-1/2 gap-2"
style="height: 200px;justify-content: center;align-items: start;"> style="height: 200px;justify-content: center;align-items: start;">
<span> <span>
อนุมัติแล้ว {{subordinateApprove()}} คน อนุมัติแล้ว <span class="text-indigo-600">{{myApprove()}}</span> คน
</span> </span>
<span> <span>
ทั้งหมด {{subordinateAll()}} คน ทั้งหมด <span class="text-indigo-600">{{subordinateAll()}}</span> คน
</span> </span>
</div> </div>
</div> </div>
...@@ -108,10 +108,21 @@ ...@@ -108,10 +108,21 @@
</div> </div>
<div class="flex flex-col w-1/2 gap-2" <div class="flex flex-col w-1/2 gap-2"
style="height: 200px;justify-content: center;align-items: start;"> style="height: 200px;justify-content: center;align-items: start;">
<span *ngFor="let item of ['A','B','C','D','E']; let i=index" class="flex flex-row"> <span *ngFor="let item of ['A','B','C','D','E']; let i=index"
<span style="width:20px" class="flex flex-row gap-2">
[ngStyle]="{'background':gradeColor(item)}">&nbsp;&nbsp; <div class="flex">
</span>&nbsp;Grade&nbsp;{{item}}&nbsp;&nbsp;&nbsp;{{gradeFindLength(item)}}&nbsp;{{gradeFindPer(item)}} <span style="width:20px" [ngStyle]="{'background':gradeColor(item)}">
&nbsp;&nbsp;</span>
</div>
<div class="flex" style="width: 55px">
Grade&nbsp;{{item}}
</div>
<div class="flex">
<span class="text-indigo-600">{{gradeFindLength(item)}}</span>&nbsp;คน
</div>
<div class="flex">
<span class="text-indigo-600">{{gradeFindPer(item)}}</span>&nbsp;%
</div>
</span> </span>
</div> </div>
</div> </div>
...@@ -179,7 +190,8 @@ ...@@ -179,7 +190,8 @@
*ngFor="let item of subordinate.select?.showPms?['','รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','ผลประเมิน','เกรด' ,'สถานะผู้ประเมิน']: *ngFor="let item of subordinate.select?.showPms?['','รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','ผลประเมิน','เกรด' ,'สถานะผู้ประเมิน']:
['','รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index"> ['','รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
<th scope="col" <th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"> class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"
[ngClass]="{'!p-0':f, '!pl-0':i==1}">
<span class="text-sm">{{ item }}</span> <span class="text-sm">{{ item }}</span>
<div *ngIf="!f" <div *ngIf="!f"
class="absolute top-1/2 transform -translate-y-1/2 right-0"> class="absolute top-1/2 transform -translate-y-1/2 right-0">
...@@ -215,7 +227,8 @@ ...@@ -215,7 +227,8 @@
</tbody> </tbody>
<tbody *ngIf="!subordinate.loading&&subordinateFilter().length"> <tbody *ngIf="!subordinate.loading&&subordinateFilter().length">
<tr *ngFor="let item of subordinateFilter();let i = index"> <tr *ngFor="let item of subordinateFilter();let i = index">
<td class="text-center" style="font-size: 12px; width: 150px;"> <td class="text-center !pr-0"
style="font-size: 12px;width: 90px;;min-width: 90px;max-width: 90px;">
<div class="flex-col gap-2"> <div class="flex-col gap-2">
<input <input
[disabled]="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))" [disabled]="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))"
...@@ -230,16 +243,18 @@ ...@@ -230,16 +243,18 @@
*ngIf="item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending')"> *ngIf="item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending')">
<img (click)="!selectEmp.get(item.apsassessy.employeeId)?selectEmp.set(item.apsassessy.employeeId , true):selectEmp.delete(item.apsassessy.employeeId);checkSelectAll()" <img (click)="!selectEmp.get(item.apsassessy.employeeId)?selectEmp.set(item.apsassessy.employeeId , true):selectEmp.delete(item.apsassessy.employeeId);checkSelectAll()"
class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12" class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
[src]="item.apsassessy.picture?getImg(item.apsassessy.picture):'./assets/img/users/defaultperson.jpg'" (error)="onImageError($event)"> [src]="item.apsassessy.picture?getImg(item.apsassessy.picture):'./assets/img/users/defaultperson.jpg'"
(error)="onImageError($event)">
</ng-container> </ng-container>
<ng-container <ng-container
*ngIf="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))"> *ngIf="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))">
<img class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12" <img class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
[src]="item.apsassessy.picture?getImg(item.apsassessy.picture):'./assets/img/users/defaultperson.jpg'" (error)="onImageError($event)"> [src]="item.apsassessy.picture?getImg(item.apsassessy.picture):'./assets/img/users/defaultperson.jpg'"
(error)="onImageError($event)">
</ng-container> </ng-container>
</div> </div>
</td> </td>
<td class="text-center" style="font-size: 12px; width: 150px;"> <td class="text-center !pl-0" style="font-size: 12px; width: 150px;">
{{item.apsassessy.employeeId}} {{item.apsassessy.employeeId}}
</td> </td>
<td style="font-size: 12px; width: 175px;"> <td style="font-size: 12px; width: 175px;">
......
src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.ts
...@@ -106,10 +106,10 @@ export class SupervisorEvaluationComponent { ...@@ -106,10 +106,10 @@ export class SupervisorEvaluationComponent {
return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code != 'no access').length || 0 return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code != 'no access').length || 0
} }
myRemain() { myRemain() {
return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code == 'no access' || e.masfromStatusType.code == 'pending' || e.masfromStatusType.code == 'evaluating').length || 0 return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code != 'completed').length || 0
} }
myApprove() { myApprove() {
return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code != 'no access' && e.masfromStatusType.code != 'pending' && e.masfromStatusType.code != 'evaluating').length || 0 return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code == 'completed').length || 0
} }
gradeAll() { gradeAll() {
return this.subordinate.select?.masfromevaluationassessment.map(e => e.grade) || [] return this.subordinate.select?.masfromevaluationassessment.map(e => e.grade) || []
...@@ -184,7 +184,7 @@ export class SupervisorEvaluationComponent { ...@@ -184,7 +184,7 @@ export class SupervisorEvaluationComponent {
data: [ data: [
{ {
value: full - myRemain, value: full - myRemain,
itemStyle: { color: '#F23354' }, itemStyle: { color: '#1DBE5A' },
name: 'อนุมัติแล้ว', name: 'อนุมัติแล้ว',
}, },
{ {
......
src/assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
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