Skip to content

M
mySkill-x
Commit 8e618741 by Nattana Chaiyamat
Options

เพิ่มหน้าจอ myskill

parent 3f5b4d85
Showing with 890 additions and 7 deletions
src/app/components/dashboard/dashboard-routing.module.ts
...@@ -78,6 +78,8 @@ import { SalarySurveyComponent } from '../salary-survey/salary-survey.component' ...@@ -78,6 +78,8 @@ import { SalarySurveyComponent } from '../salary-survey/salary-survey.component'
import { RecruitmentSelectionComponent } from '../recruitment-selection/recruitment-selection.component'; import { RecruitmentSelectionComponent } from '../recruitment-selection/recruitment-selection.component';
import { JobManagementComponent } from '../job-management/job-management.component'; import { JobManagementComponent } from '../job-management/job-management.component';
import { WelfareRewardComponent } from '../welfare-reward/welfare-reward.component'; import { WelfareRewardComponent } from '../welfare-reward/welfare-reward.component';
import { TimeAttendanceWizardComponent } from '../time-attendance-wizard/time-attendance-wizard.component';
import { ReviewHistoryComponent } from '../review-history/review-history.component';
...@@ -171,6 +173,8 @@ const routes: Routes = [ ...@@ -171,6 +173,8 @@ const routes: Routes = [
{ path: "ess/recruitment-selection", title: 'Recruitment & Selection', component: RecruitmentSelectionComponent }, { path: "ess/recruitment-selection", title: 'Recruitment & Selection', component: RecruitmentSelectionComponent },
{ path: "ess/job-management", title: 'Job Management', component: JobManagementComponent }, { path: "ess/job-management", title: 'Job Management', component: JobManagementComponent },
{ path: "ess/welfare-reward", title: 'Welfare & Reward', component: WelfareRewardComponent }, { path: "ess/welfare-reward", title: 'Welfare & Reward', component: WelfareRewardComponent },
{ path: "ess/time-attendance-wizard", title: 'TimeAttendance', component: TimeAttendanceWizardComponent },
{ path: "ess/review-history", title: 'ดูข้อมูลย้อนหลัง', component: ReviewHistoryComponent },
] ]
} }
]; ];
......
src/app/components/dashboard/dashboard.module.ts
...@@ -234,6 +234,8 @@ import { SalarySurveyComponent } from '../salary-survey/salary-survey.component' ...@@ -234,6 +234,8 @@ import { SalarySurveyComponent } from '../salary-survey/salary-survey.component'
import { RecruitmentSelectionComponent } from '../recruitment-selection/recruitment-selection.component'; import { RecruitmentSelectionComponent } from '../recruitment-selection/recruitment-selection.component';
import { JobManagementComponent } from '../job-management/job-management.component'; import { JobManagementComponent } from '../job-management/job-management.component';
import { WelfareRewardComponent } from '../welfare-reward/welfare-reward.component'; import { WelfareRewardComponent } from '../welfare-reward/welfare-reward.component';
import { TimeAttendanceWizardComponent } from '../time-attendance-wizard/time-attendance-wizard.component';
import { ReviewHistoryComponent } from '../review-history/review-history.component';
export const MY_DATE_FORMATS = { export const MY_DATE_FORMATS = {
parse: { parse: {
...@@ -408,6 +410,8 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -408,6 +410,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
RecruitmentSelectionComponent, RecruitmentSelectionComponent,
JobManagementComponent, JobManagementComponent,
WelfareRewardComponent, WelfareRewardComponent,
TimeAttendanceWizardComponent,
ReviewHistoryComponent
], imports: [ ], imports: [
TranslateModule, TranslateModule,
CommonModule, CommonModule,
......
src/app/components/employee-self-service/employee-self-service.component.scss
...@@ -352,7 +352,7 @@ transition: transform $dur $easing, ...@@ -352,7 +352,7 @@ transition: transform $dur $easing,
.text-menu-list { .text-menu-list {
font-weight: 400; font-weight: 400;
line-height: 58px; line-height: 58px;
font-size: 2rem; font-size: 1.25rem;
transition: color 0.25s; transition: color 0.25s;
} }
......
src/app/components/employee-self-service/employee-self-service.component.ts
...@@ -36,11 +36,11 @@ export class EmployeeSelfServiceComponent { ...@@ -36,11 +36,11 @@ export class EmployeeSelfServiceComponent {
{ text: "JD", link: "/ess/job-description-emp" }, { text: "JD", link: "/ess/job-description-emp" },
{ text: "Profile พนักงาน", link: "/ess/profile" }, { text: "Profile พนักงาน", link: "/ess/profile" },
{ text: "Job Family", link: "/ess/job-family-mapping" }, { text: "Job Family", link: "/ess/job-family-mapping" },
{ text: "Time Attendance", description: "หน้าใหม่ แสดงข้อมูล TA" }, { text: "Time Attendance", link: "/ess/time-attendance-wizard" },
{ text: "วินัย และการลงโทษ", link: "/ess/disciplinary-action" }, { text: "วินัย และการลงโทษ", link: "/ess/disciplinary-action" },
{ text: "ผลงานดีเด่น", link: "/ess/outstanding-performance" }, { text: "ผลงานดีเด่น", link: "/ess/outstanding-performance" },
{ text: "Feedback", link: "/ess/self-evaluation/kpi-sum10" }, { text: "Feedback", link: "/ess/self-evaluation/kpi-sum10" },
{ text: "ดูข้อมูลย้อนหลัง", description: "หน้าใหม่ แสดงListรอบประเมินตั้งแต่รอบล่าสุดถึงย้อนหลัง3ปี" }, { text: "ดูข้อมูลย้อนหลัง", link: "/ess/review-history" },
{ text: "Calibrate คะแนน", description: "หน้ารายงานที่มีการ Calibrate และแสดงค่า K" }, { text: "Calibrate คะแนน", description: "หน้ารายงานที่มีการ Calibrate และแสดงค่า K" },
{ text: "ข้อสอบ", link: "/ess/self-evaluation/com" }, { text: "ข้อสอบ", link: "/ess/self-evaluation/com" },
{ text: "Download เอกสาร", description: "เป็น pop up แสดงข้อมูลไฟล์ให้ดาวน์โหลด เหมือนของ myHR plus" } { text: "Download เอกสาร", description: "เป็น pop up แสดงข้อมูลไฟล์ให้ดาวน์โหลด เหมือนของ myHR plus" }
......
src/app/components/job-description-emp/job-description-emp.component.html
...@@ -11,6 +11,13 @@ ...@@ -11,6 +11,13 @@
<div class="box" style="border-radius:20px"> <div class="box" style="border-radius:20px">
<div class="box-header"> <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">
<div class="absolute">
<button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 "
style="border-radius:20px" routerLink="/ess/employee-self-service">
<i class="ti ti-chevron-left"></i>
{{'Back' | translate}}
</button>
</div>
<div class="col-span-12"> <div class="col-span-12">
<h5 class="box-title mb-3 text-center">ใบกำหนดหน้าที่ (JOB DESCRIPTION) </h5> <h5 class="box-title mb-3 text-center">ใบกำหนดหน้าที่ (JOB DESCRIPTION) </h5>
</div> </div>
......
src/app/components/job-family-mapping/job-family-mapping.component.html
<div class="row m-2"> <div class="row m-2">
<div class="col-12 row w-full"> <div class="col-12 row w-full">
<div class="row col-12 relative">
<div class="col-12" style="justify-content: start;display: flex;">
<a class="back-button absolute col-12" routerLink="/ess/employee-self-service">
</a>
</div>
<div class="col-12"> <div class="col-12">
<div class="row-center col-center" style="padding-bottom: 2rem;"> <div class="row-center col-center" style="padding-bottom: 2rem;">
<div class="text-title text-blue">Job family</div> <div class="text-title text-blue">Job family</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="menu-box w-full"> <div class="menu-box w-full">
<div class="col-12 row p-2"> <div class="col-12 row p-2">
<ng-container *ngFor="let item of items; let i = index"> <ng-container *ngFor="let item of items; let i = index">
......
src/app/components/job-family-mapping/job-family-mapping.component.scss
...@@ -93,6 +93,7 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24); ...@@ -93,6 +93,7 @@ $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;
} }
.text-card-title { .text-card-title {
font-weight: 800; font-weight: 800;
font-size: 3.5rem; font-size: 3.5rem;
...@@ -181,3 +182,18 @@ transition: transform $dur $easing, ...@@ -181,3 +182,18 @@ transition: transform $dur $easing,
filter: brightness(0.9); filter: brightness(0.9);
} }
} }
.back-button {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 30px solid rgb(37 99 235);
cursor: pointer;
display: inline-block;
transition: transform 0.2s;
}
.back-button:hover {
border-right: 30px solid rgb(29 78 216);
}
\ No newline at end of file
src/app/components/job-family-matrix/job-family-matrix.component.html
<div class="row m-2"> <div class="row m-2">
<div class="col-12 row w-full"> <div class="col-12 row w-full">
<div class="row col-12 relative">
<div class="col-12" style="justify-content: start;display: flex;">
<a class="back-button absolute col-12" routerLink="/ess/job-family-mapping">
</a>
</div>
<div class="col-12"> <div class="col-12">
<div class="row-center col-center" style="padding-bottom: 2rem;"> <div class="row-center col-center" style="padding-bottom: 2rem;">
<div class="text-title text-blue">Job family Matrix</div> <div class="text-title text-blue">Job family Matrix</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="menu-box w-full"> <div class="menu-box w-full">
<div class="p-2"> <div class="p-2">
<div class="p-2rem"> <div class="p-2rem">
...@@ -16,8 +22,8 @@ ...@@ -16,8 +22,8 @@
<span class="col-12 col-end mb-4 mt-1">Job Family</span> <span class="col-12 col-end mb-4 mt-1">Job Family</span>
<span class="col-12 mt-4 mb-1">Job Grade</span> <span class="col-12 mt-4 mb-1">Job Grade</span>
</div> </div>
<div class="table-bg-b p-2 table-border table-border-t !text-center" style="width: 150px;align-content:center" <div class="table-bg-b p-2 table-border table-border-t !text-center"
*ngFor="let item of [1,2,3,4,5,6,7]; let l = last" style="width: 150px;align-content:center" *ngFor="let item of [1,2,3,4,5,6,7]; let l = last"
[ngStyle]="{'border-radius': l?'0 30px 0 0':''}" [class.table-border-r]="l"> [ngStyle]="{'border-radius': l?'0 30px 0 0':''}" [class.table-border-r]="l">
<span class="break-text">test head {{item}}</span> <span class="break-text">test head {{item}}</span>
</div> </div>
...@@ -32,8 +38,7 @@ ...@@ -32,8 +38,7 @@
</div> </div>
<div class="p-2 table-border" style="width: 150px;align-content:start" style="width: 150px;" <div class="p-2 table-border" style="width: 150px;align-content:start" style="width: 150px;"
*ngFor="let item2 of [ *ngFor="let item2 of [
'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',2,3,4,5,6,7];let l2 = last" 'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',2,3,4,5,6,7];let l2 = last" [ngStyle]="{'border-radius': l&&l2?'0 0 30px 0':''}" [class.table-border-b]="l"
[ngStyle]="{'border-radius': l&&l2?'0 0 30px 0':''}" [class.table-border-b]="l"
[class.table-border-r]="l2" [class.sub-table-bg-b]="o" (mouseenter)="hoveredCode = i" [class.table-border-r]="l2" [class.sub-table-bg-b]="o" (mouseenter)="hoveredCode = i"
(mouseleave)="hoveredCode = null" [ngClass]="{ 'sub-table-bg-b-hover': i === hoveredCode }"> (mouseleave)="hoveredCode = null" [ngClass]="{ 'sub-table-bg-b-hover': i === hoveredCode }">
<span class="break-text"> {{item2}}</span> <span class="break-text"> {{item2}}</span>
......
src/app/components/job-family-matrix/job-family-matrix.component.scss
...@@ -275,3 +275,19 @@ transition: transform $dur $easing, ...@@ -275,3 +275,19 @@ transition: transform $dur $easing,
.sub-table-bg-b-hover { .sub-table-bg-b-hover {
background-color: rgba(96, 165, 250, 0.25) !important; background-color: rgba(96, 165, 250, 0.25) !important;
} }
.back-button {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 30px solid rgb(37 99 235);
cursor: pointer;
display: inline-block;
transition: transform 0.2s;
}
.back-button:hover {
border-right: 30px solid rgb(29 78 216);
}
\ No newline at end of file
src/app/components/review-history/review-history.component.html 0 → 100644
<div class="relative">
<div class="flex relative before:absolute before:w-full before:h-full bg-gradient-custom"
style="margin-top: -50px;margin-left: -100px;margin-right: -100px">
<div class="h-[500px] w-full rounded-sm"></div>
</div>
<div class="main-content " style="margin-top:-29rem">
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12" [class.xxl:col-span-2]="page==1" [class.xxl:col-span-1]="page==2">
</div>
<div class="col-span-12" [class.xxl:col-span-8]="page==1" [class.xxl:col-span-10]="page==2">
<div class="box" style="border-radius:20px">
<div class="box-header">
<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" routerLink="/ess/employee-self-service">
<i class="ti ti-chevron-left"></i>
{{'Back' | translate}}
</button>
</div>
<div class="col-span-12">
<h5 class="box-title mb-3 text-center">ผลการประเมินย้อนหลัง</h5>
</div>
</div>
<nav class="sm:flex sm:space-x-2 space-y-2 sm:space-y-0 rtl:space-x-reverse block"
aria-label="Tabs" role="tablist" style="max-width: 250px;">
<button type="button" style="border-radius:20px"
class="py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 active"
id="part-item-1" data-hs-tab="#part-1" aria-controls="part-1" role="tab">
<!-- hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary -->
{{'ผลการประเมินย้อนหลัง' | translate}}
</button>
</nav>
</div>
<div class="box-body">
<div id="part-1" class="" role="tabpanel" aria-labelledby="part-item-1">
<ng-container *ngIf="page==1">
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
[placeholder]="'SearchByNoOrName' | translate" [(ngModel)]="search">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
</div>
<div class="p-2 pt-0">
<ng-container *ngTemplateOutlet="Datagrid"></ng-container>
</div>
</ng-container>
<ng-container *ngIf="page==2">
<app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'EvaluationInfo'"
(sendReturnPath)="page=1" [evaluaterId]="evaluaterId"
[evaluateeId]="evaluaterId"></app-pms-form-employee>
</ng-container>
</div>
</div>
</div>
</div>
<div class="col-span-12" [class.xxl:col-span-2]="page==1" [class.xxl:col-span-1]="page==2">
</div>
</div>
</div>
</div>
<ng-template #Datagrid>
<ejs-grid #grid id='Grid' [locale]="locale" [dataSource]="syncfution.dataList" [allowFiltering]="true"
[filterSettings]="filterSettings" [selectionSettings]="selectionOptions"
[searchSettings]="syncfution.searchSettings" [groupSettings]="groupSettings" [toolbar]="toolbarOptions"
[editSettings]="editSettings" [loadingIndicator]='loadingIndicator' [query]="query"
[columnMenuItems]="columnMenuItems" [pageSettings]="initialPage" [allowMultiSorting]="true" [allowPaging]="true"
[allowGrouping]="true" [allowSorting]="true" [showColumnMenu]="true" [allowPdfExport]="true"
[allowExcelExport]="true" [allowReordering]="true" width="auto" rowHeight="60" allowEditing="false"
(columnMenuClick)="onColumnMenuClick($event)" (toolbarClick)='toolbarClick($event)'>
<e-columns>
<ng-container *ngFor="let col of syncfution.columns">
<ng-container *ngIf="col.headerText">
<e-column [field]="col.field" [headerText]="col.headerText" [width]="col.width"
[format]="col.format" [isPrimaryKey]="col.isPrimaryKey" [validationRules]="col.validationRules"
[visible]="col.visible" [editType]="false" [allowEditing]="false" [allowFiltering]="true"
[allowSorting]="true" [type]="col.type" textAlign="center">
<ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700 text-primary">
{{ col.headerText | translate}}
</span>
</ng-template>
<!-- <ng-template #template let-data *ngIf="col.headerText=='EmployeeCode'">
<div class="flex-col gap-2">
<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)">
{{data.employeeId}}
</div>
</ng-template>
<ng-template #template let-data *ngIf="col.headerText=='Status'">
<div class="flex justify-center">
<button type="button" class="ti-btn rounded-sm " [class]="statusButtonClass(data.statusEdesc)"
style="height: 30px; width: auto; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
(click)="selectSubordinate(data);">
{{data.status}}
</button>
</div>
</ng-template> -->
</e-column>
</ng-container>
</ng-container>
<e-column headerText='action' textAlign='Center'>
<ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700 text-primary">{{'Action' | translate}}</span>
</ng-template>
<ng-template #template let-data>
<i class="ti ti-eye cursor-pointer i-gray fs-l px-1" (click)="page=2"></i>
</ng-template>
</e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'"
[footerTemplate]="'Sum: ${Sum}'" [groupFooterTemplate]="'Sum: ${Sum}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
[footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
[footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'"
[footerTemplate]="'Min: ${Min}'" [groupFooterTemplate]="'Min: ${Min}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'"
[footerTemplate]="'Max: ${Max}'" [groupFooterTemplate]="'Max: ${Max}'"
[groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</ng-template>
\ No newline at end of file
src/app/components/review-history/review-history.component.scss 0 → 100644
.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;
}
}
// th{
// position: relative; // เทียบเท่า class "relative"
// padding: 10px; // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
// background-color: rgb(96 165 250 / 0.1); // ตัวอย่างแทน "bg-soft-secondary"
// color: #2b2b2b; // ตัวอย่างแทน "text-primary"
// text-align: center !important; // เทียบเท่า "!text-center"
// // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
// font-weight: 600;
// border-bottom: 1px solid #eee;
// }
.e-headercell,
.e-detailheadercell {
background-color: rgb(96 165 250 / 0.1) !important;
}
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
background: rgb(96 165 250) !important;
color: #fff;
opacity: 1 !important;
}
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
background-color: rgb(96 165 250) !important;
border-color: transparent;
color: #fff;
}
.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
border: 1px solid !important;
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: "e-icons";
height: 18px;
line-height: 10px;
padding: 2px 0;
text-align: center;
vertical-align: middle;
width: 1rem !important;
border-color: #64748b !important;
}
.e-grid td.e-selectionbackground {
background-color: #aec2ec !important;
}
.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;
}
}
@media print {
body * {
visibility: hidden;
/* ซ่อนทุก element */
}
#printArea,
#printArea * {
visibility: visible;
/* แสดงเฉพาะ #printArea */
}
#printArea {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}
.pdf-container {
transform: translateZ(0
);
}
\ No newline at end of file
src/app/components/review-history/review-history.component.ts 0 → 100644
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 { AggregateService, ColumnMenuService, DetailRowService, EditService, ExcelExportService, FilterService, GridComponent, GroupService, PageService, PdfExportService, ReorderService, SearchService, SortService, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { Column, ColumnMenuClickEventArgs, ColumnModel, ExcelExportProperties, FilterSettingsModel, GroupSettingsModel, LoadingIndicatorModel, SelectionSettingsModel } 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';
import { Query } from '@syncfusion/ej2-data';
import { setCulture } from '@syncfusion/ej2-base';
import { AppraisalService } from 'src/app/shared/services/appraisal.service';
import { TokenService } from 'src/app/shared/services/token.service';
export interface BiModel {
name: string,
tools: string[],
degree: string
}
@Component({
selector: 'app-review-history',
templateUrl: './review-history.component.html',
providers: [AggregateService, SortService, GroupService, ColumnMenuService, PageService, FilterService, ToolbarService, PdfExportService, ExcelExportService, DetailRowService, ReorderService, EditService, SearchService],
styleUrls: ['./review-history.component.scss']
})
export class ReviewHistoryComponent {
page = 1
search = ''
syncfution: {
dataList: any[],
searchSettings: {
fields: string[],
operator: 'contains',
ignoreCase: false
},
columns: ColumnModel[]
} = {
dataList: [],
searchSettings: {
fields: [
'no',
'name',
'round',
'year',
'score',
'grade'
],
operator: 'contains',
ignoreCase: false
},
columns: [{
field: "no",
headerText: "ลำดับ",
type: "string",
isPrimaryKey: true,
},
{
field: "name",
headerText: "ผู้รับการประเมิน",
type: "string"
},
{
field: "round",
headerText: "รอบการประเมิน",
type: "string"
},
{
field: "year",
headerText: "ปีการประเมิน",
type: "string"
},
{
field: "score",
headerText: "คะแนน",
type: "string"
},
{
field: "grade",
headerText: "เกรด",
type: "string"
}]
}
@ViewChild('grid') public grid?: GridComponent;
filterSettings: FilterSettingsModel = { type: 'Excel' };
selectionOptions: SelectionSettingsModel = { checkboxOnly: true };
groupSettings: GroupSettingsModel = { allowReordering: true, showGroupedColumn: true, showDropArea: false };
toolbarOptions: any[] = ['Print', 'ExcelExport', 'CsvExport'];
editSettings? = { allowEditing: true, mode: 'Batch' };
loadingIndicator: LoadingIndicatorModel = { indicatorType: 'Shimmer' };
query: Query = new Query().addParams('dataCount', '1000');
columnMenuItems: any[] = [
'AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',
'Group', 'Ungroup', 'ColumnChooser', 'Filter',
{ text: 'Sum', id: 'aggregate_sum' },
{ text: 'Count', id: 'aggregate_count' },
{ text: 'Average', id: 'aggregate_average' },
{ text: 'Min', id: 'aggregate_min' },
{ text: 'Max', id: 'aggregate_max' }
];
initialPage? = { pageSizes: true, pageSize: 10 };
aggregatesSum: any[] = [];
aggregatesCount: any[] = [];
aggregatesAvg: any[] = [];
aggregatesMin: any[] = [];
aggregatesMax: any[] = [];
locale = 'th-TH'
evaluaterId = ''
constructor(private appraisalService: AppraisalService,
private fileService: FileService,
private translateService: TranslateService,
private tokenService: TokenService,
private dialog: MatDialog,
private cdr: ChangeDetectorRef) {
this.locale = this.translateService.getCurrentLang() == 'th' ? 'th-TH' : 'en-US'
this.translateService.onLangChange.subscribe((event) => {
if (event.lang === 'th') {
setCulture('th-TH');
this.locale = 'th-TH'
} else if (event.lang === 'en') {
setCulture('en-US');
this.locale = 'en-US'
}
this.toolbarOptions = [
{ text: this.translateService.instant('Print'), prefixIcon: 'e-print', id: 'Print' },
{ text: this.translateService.instant('ExcelExport'), prefixIcon: 'e-excelexport', id: 'ExcelExport' },
{ text: this.translateService.instant('CSVExport'), prefixIcon: 'e-csvexport', id: 'CsvExport' }
]
this.setSyncfutionDataList()
this.cdr.markForCheck()
});
}
ngOnInit(): void {
this.evaluaterId = this.decodeJWT(sessionStorage.getItem("accessToken") || '').employeeid
this.getEmpKpi()
}
getEmpKpi() {
this.syncfution.dataList = []
this.setSyncfutionDataList()
// this.appraisalService.getEmpKpi().subscribe({
// next: response => {
// this.subordinate.dataList = response.map(e => new MyAppraisalKpiSettingModel(e))
// this.setSyncfutionDataList()
// this.cdr.markForCheck()
// }, error: error => {
// this.cdr.markForCheck()
// }
// })
}
setSyncfutionDataList() {
// this.syncfution.dataList = this.subordinateFilter().map(e => ({
// employeeId: e.apsassessy.employeeId,
// fullName: this.translateText(e.apsassessy.thFullName, e.apsassessy.engFullName),
// position: this.translateText(e.apsassessy.position.tdesc, e.apsassessy.position.edesc),
// status: this.translateText(e.statusApprove.tdesc, e.statusApprove.edesc),
// statusCode: e.statusApprove.code,
// statusEdesc: e.statusApprove.edesc,
// picture: e.apsassessy.picture
// }))
this.syncfution.dataList = this.dataFilter().map(e => ({
no: e,
name: e,
round: e,
year: e,
score: e,
grade: e,
}))
}
dataFilter() {
return [1, 2, 3, 4].filter(x => {
return (x + '').toLowerCase().includes(this.search.toLowerCase())
})
}
decodeJWT(token: string) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
showAlert(text: string, type: 'success' | 'error') {
Swal.fire({
title: 'แจ้งเตือน',
text: text,
icon: type,
confirmButtonText: 'ตกลง',
});
}
onColumnMenuClick(args: ColumnMenuClickEventArgs): void {
if (!args.item.id) { return; }
if (args.item.id.startsWith('aggregate_')) {
const colField = (args.column as any)?.field;
if (!colField) { return; }
const selectedAgg = args.item.id.split('_')[1];
if (selectedAgg === 'sum') {
if (this.aggregatesSum.find(a => a.field === colField)) {
this.aggregatesSum = this.aggregatesSum.filter(a => a.field !== colField);
} else {
this.aggregatesSum.push({
field: colField,
type: 'Sum',
footerTemplate: 'Sum: ${Sum}'
});
}
this.cdr.markForCheck()
}
else if (selectedAgg === 'count') {
this.aggregatesCount.push({
field: colField,
type: 'Count',
footerTemplate: 'Count: ${Count}'
});
} else if (selectedAgg === 'average') {
this.aggregatesAvg.push({
field: colField,
type: 'Average',
footerTemplate: 'Avg: ${Average}'
});
}
else if (selectedAgg === 'min') {
this.aggregatesMin.push({
field: colField,
type: 'Min',
footerTemplate: 'Min: ${Min}'
});
}
else if (selectedAgg === 'max') {
this.aggregatesMax.push({
field: colField,
type: 'Max',
footerTemplate: 'Max: ${Max}'
});
}
setTimeout(() => {
this.grid?.refresh();
}, 500);
}
}
toolbarClick(args: any): void {
if (args.item.id === 'Grid_excelexport') {
let exportProperties: ExcelExportProperties = {
columns: this.syncfution.columns.map(col => ({
field: col.field,
headerText: col.headerText
})) as Column[]
};
this.grid?.excelExport(exportProperties);
} else if (args.item.id === 'Grid_csvexport') {
let exportColumns = this.syncfution.columns.map(col => ({
field: col.field || '',
headerText: col.headerText || ''
}));
this.grid?.csvExport({ columns: exportColumns as Column[] });
} else if (args.item.id === 'Grid_print') {
this.cdr.markForCheck()
setTimeout(() => {
this.cdr.markForCheck()
}, 1000)
}
}
}
\ No newline at end of file
src/app/components/time-attendance-wizard/time-attendance-wizard.component.html 0 → 100644
<div class="relative">
<div class="flex relative before:absolute before:w-full before:h-full bg-gradient-custom"
style="margin-top: -50px;margin-left: -100px;margin-right: -100px">
<div class="h-[500px] w-full rounded-sm"></div>
</div>
<div class="main-content " style="margin-top:-29rem">
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12 xxl:col-span-2">
</div>
<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 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" routerLink="/ess/employee-self-service">
<i class="ti ti-chevron-left"></i>
{{'Back' | translate}}
</button>
</div>
<div class="col-span-12">
<h5 class="box-title mb-3 text-center">Time Attendance</h5>
</div>
</div>
<nav class="sm:flex sm:space-x-2 space-y-2 sm:space-y-0 rtl:space-x-reverse block"
aria-label="Tabs" role="tablist" style="max-width: 250px;">
<button type="button" style="border-radius:20px"
class="py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 active"
id="part-item-1" data-hs-tab="#part-1" aria-controls="part-1" role="tab">
<!-- hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary -->
{{'Time Attendance' | translate}}
</button>
</nav>
</div>
<div class="box-body">
<div id="part-1" class="" role="tabpanel" aria-labelledby="part-item-1">
<ng-container *ngTemplateOutlet="part1"></ng-container>
</div>
</div>
</div>
</div>
<div class="col-span-12 xxl:col-span-2">
</div>
</div>
</div>
</div>
<ng-template #part1>
<div class="p-2 pt-0">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">ลำดับ(No.)</span>
</th>
<th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">อัตราการเข้างาน (Time Attendance)</span>
</th>
<th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">เป้าหมายผลงาน (Target)</span>
</th>
<th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">หน่วยนับ (Unit)</span>
</th>
<th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">นํ้าหนัก (Weight)</span>
</th>
<th colspan="5" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">ค่าเป้าหมาย (Target Degree)</span>
</th>
</tr>
<tr>
<th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">A(5)</span>
</th>
<th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">B(4)</span>
</th>
<th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">C(3)</span>
</th>
<th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">D(2)</span>
</th>
<th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
<span class="font-size-12px font-weight-700">E(1)</span>
</th>
</tr>
</thead>
<tbody>
<tr style="align-items: start">
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
<td style="vertical-align: top;" class="text-center">
-
</td>
</tr>
</tbody>
</table>
</div>
</ng-template>
\ No newline at end of file
src/app/components/time-attendance-wizard/time-attendance-wizard.component.scss 0 → 100644
.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;
}
\ No newline at end of file
src/app/components/time-attendance-wizard/time-attendance-wizard.component.ts 0 → 100644
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { DocumentManagerModel, MyDocumentManagerModel } from 'src/app/shared/model/document-manager.model';
import { DocumentManagerService } from 'src/app/shared/services/documents.service';
import { FileService } from 'src/app/shared/services/file.service';
import Swal from 'sweetalert2';
interface SubModule {
title: SafeHtml;
route?: string;
file?: string;
}
@Component({
selector: 'app-time-attendance-wizard',
templateUrl: './time-attendance-wizard.component.html',
styleUrls: ['./time-attendance-wizard.component.scss']
})
export class TimeAttendanceWizardComponent {}
\ No newline at end of file
src/app/shared/components/sidebar/sidebar.component.ts
...@@ -114,6 +114,8 @@ export class SidebarComponent { ...@@ -114,6 +114,8 @@ export class SidebarComponent {
this.currentUrl.includes('ess/recruitment-selection') || this.currentUrl.includes('ess/recruitment-selection') ||
this.currentUrl.includes('ess/job-management') || this.currentUrl.includes('ess/job-management') ||
this.currentUrl.includes('ess/welfare-reward') || this.currentUrl.includes('ess/welfare-reward') ||
this.currentUrl.includes('ess/time-attendance-wizard') ||
this.currentUrl.includes('ess/review-history') ||
this.currentUrl.includes('ess/job-description') this.currentUrl.includes('ess/job-description')
if (this.showSideMenu) { if (this.showSideMenu) {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;; const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
...@@ -202,6 +204,8 @@ export class SidebarComponent { ...@@ -202,6 +204,8 @@ export class SidebarComponent {
this.currentUrl.includes('ess/recruitment-selection') || this.currentUrl.includes('ess/recruitment-selection') ||
this.currentUrl.includes('ess/job-management') || this.currentUrl.includes('ess/job-management') ||
this.currentUrl.includes('ess/welfare-reward') || this.currentUrl.includes('ess/welfare-reward') ||
this.currentUrl.includes('ess/time-attendance-wizard') ||
this.currentUrl.includes('ess/review-history') ||
this.currentUrl.includes('ess/job-description') this.currentUrl.includes('ess/job-description')
if (this.showSideMenu) { if (this.showSideMenu) {
const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;; const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
......
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