Skip to content

M
myAppraisal
Commit 45a64853 by Nattana Chaiyamat
Options

การประเมินสมรรถนะ > 

การจัดการรอบการประเมิน >
รอบการประเมิน
parent 9ad9b4b8
Showing with 367 additions and 30 deletions
src/app/components/company-components/company-registration/branch-business-unit/department-register/department-register.component.html
......@@ -142,8 +142,8 @@
</button>
</div>
</div>
<div class="w-full h-45px margin-top-2px">
<div class="flex justify-end pr-1rem">
<div class="w-full flex justify-end">
<div class="absolute flex">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
......@@ -169,7 +169,7 @@
</div>
</div>
</div>
<div class="padding-16px pt-0 overflow-y-0">
<div class="ti-modal-body padding-16px pt-0 overflow-y-0">
<label for="input-label" class="ti-form-label mt-2rem">ฝ่าย</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="bu1.bu1id">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย)</label>
......@@ -207,8 +207,8 @@
</button>
</div>
</div>
<div class="ti-modal-center">
<div class="flex justify-end" class="pr-1rem">
<div class="w-full flex justify-end">
<div class="absolute flex">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
......@@ -3,16 +3,19 @@
<div class="flex pr-2">
<div class="flex">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox" id="hs-default-checkbox">
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2">0 Selected</label>
<input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
[(ngModel)]="isDataListChecked">
<label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
{{numDataListChecked}} Selected</label>
</div>
<div class="mx-1 flex items-center">
<button (click)="isChecked = !isChecked" id="hs-checkbox-group-2" class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200"
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isChecked, 'ri-checkbox-multiple-fill text-primary': isChecked}"></i>
<button (click)="isDataListCheckedAll = !isDataListCheckedAll;dataListCheckAll()"
class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
<i class="fs-l transition-all duration-200"
[ngClass]="{'ri-checkbox-multiple-line text-gray-500': !isDataListCheckedAll, 'ri-checkbox-multiple-fill text-primary': isDataListCheckedAll}"></i>
</button>
<label for="hs-checkbox-group-2" class="text-sm text-gray-500 ml-2">Select All</label>
</div>
<label class="text-sm text-gray-500 ml-2">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
......@@ -21,7 +24,6 @@
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<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>
......@@ -30,13 +32,14 @@
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
data-hs-overlay="#department-register-modal-add">
(click)="modalStatus='add';dataListSelect()" data-hs-overlay="#evaluation-cycle-modal">
<i class="ri-add-line"></i>
Add
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
data-hs-overlay="#evaluation-cycle-delete-modal">
<i class="ti ti-trash fs-l"></i>
Delete
</button>
......@@ -49,4 +52,242 @@
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto rounded-top-0.65rem">
<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 ['รหัส','รายละเอียด','รอบปีการประเมิน','วันที่เริ่มต้น','วันที่สิ้นสุด','สถานะ','Action']; 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>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="dataListFilter().length">
<tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="flex justify-around">
<input type="checkbox" class="ti-form-checkbox cursor-pointer" [(ngModel)]="item.check"
(ngModelChange)="dataListCheck()">
<label>{{item.code}}</label>
</td>
<td>{{item.period}}</td>
<td>{{item.year}}</td>
<td>{{item.startDate}}</td>
<td>{{item.endDate}}</td>
<td>
<span class="flex justify-center items-center rounded-full h-5 w-5 text-white"
[ngClass]="{'bg-success':item.status=='1','bg-warning':item.status=='2','bg-gray-400':item.status=='3'}">
<ng-container [ngSwitch]="item.status">
<i *ngSwitchCase="'1'" class="ti ti-player-play"></i>
<i *ngSwitchCase="'2'" class="ti ti-clock"></i>
<i *ngSwitchCase="'3'" class="ti ti-check"></i>
<div *ngSwitchDefault></div>
</ng-container>
</span>
</td>
<td class="flex justify-center items-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="modalStatus='edit';dataListSelect(item)"
data-hs-overlay="#evaluation-cycle-modal"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay="#evaluation-cycle-delete-modal"></i>
<span class="badge text-white m-1"
[ngClass]="{'bg-primary':item.status=='1','bg-gray-400':item.status!='1'}">ปิดรอบประเมิน</span>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
<div id="evaluation-cycle-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
{{modalStatus=='add'?'เพิ่มรอบการประเมิน':'แก้ไขรอบการประเมิน'}}
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#evaluation-cycle-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="w-full flex justify-end">
<div class="absolute flex">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<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)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M15 49A24 24 0 0 1 32 8"></path>
<path d="M49 15a24 24 0 0 1-17 41"></path>
<polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
<polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
</g>
</svg>
Clear
</button>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="ti-modal-body padding-16px pt-0 overflow-y-0">
<label for="input-label" class="ti-form-label mt-2rem">รหัส รอบการประเมิน *</label>
<input type="text" id="input-label" class="ti-form-input w-1/2"
[ngClass]="{'bg-input-readonly':modalStatus=='edit'}" [readonly]="modalStatus=='edit'"
[(ngModel)]="dataSelect.code">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (ไทย) *</label>
<input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="dataSelect.period">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียดฝ่าย (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16">
<label for="input-label" class="ti-form-label mt-2rem">ปีการประเมิน</label>
<input type="text" id="input-label" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.year">
<label for="input-label" class="ti-form-label mt-2rem">ช่วงเวลารอบการประเมิน</label>
<input type="text" name="daterange" id="inlinetime" ngxDaterangepickerMd
class="form-control ti-form-input focus:z-10 flatpickr-input" readonly />
<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="#evaluation-cycle-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="evaluation-cycle-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="#evaluation-cycle-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="#evaluation-cycle-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="evaluation-cycle-delete-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="#evaluation-cycle-delete-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="#evaluation-cycle-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#evaluation-cycle-delete-modal">
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
export interface dataModel {
check: boolean,
code: string,
period: string,
year: string,
startDate: string,
endDate: string,
status: string
}
@Component({
selector: 'app-evaluation-cycle',
templateUrl: './evaluation-cycle.component.html',
......@@ -10,10 +20,91 @@ export class EvaluationCycleComponent {
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
isChecked = false
numDataListChecked = 0
isDataListChecked = false
isDataListCheckedAll = false
dataList: dataModel[] = [
{
check: false,
code: "Y67P2",
period: "ช่วงเวลาที่ 2",
year: "2567",
startDate: "01-07-2567",
endDate: "31-12-2567",
status: "1"
},
{
check: false,
code: "Y68P1",
period: "ช่วงเวลาที่ 1",
year: "2568",
startDate: "01-01-2568",
endDate: "30-06-2568",
status: "2"
},
{
check: false,
code: "Y67P1",
period: "ช่วงเวลาที่ 1",
year: "2567",
startDate: "01-01-2567",
endDate: "30-06-2567",
status: "3"
},
]
dataSelect: dataModel = {
check: false,
code: "",
period: "",
year: "",
startDate: "",
endDate: "",
status: "",
}
modalStatus: "add" | "edit" = "add"
constructor(private cdr: ChangeDetectorRef) {
}
dataListSelect(data?: dataModel) {
this.dataSelect = data || {
check: false,
code: "",
period: "",
year: "",
startDate: "",
endDate: "",
status: "",
}
this.cdr.detectChanges()
}
dataListFilter() {
return this.dataList.filter(x => {
const match = x.code.includes(this.search) || x.period.includes(this.search);
if (!match) x.check = false;
return match;
});
}
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListChecked = dataCheck.some(x => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = dataCheck.filter(x => x.check).length;
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.dataList.forEach(x => x.check = selectAll);
this.dataListCheck();
}
searchChange() {
this.currentPage = 1
this.page = Array.from({ length: Math.ceil([1, 2, 3, 4].length / 10) }, (_, i) => i + 1);
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
this.dataListCheck();
}
}
src/app/components/dashboard/dashboard.module.ts
......@@ -71,7 +71,7 @@ import { SettingCompetencyComponent } from '../competency-assessment/setting-com
import { CompetencyConfigurationComponent } from '../competency-assessment/setting-competency/competency-configuration/competency-configuration.component';
import { IdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/idp-development-plan.component';
import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component';
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
@NgModule({
declarations: [
......@@ -137,7 +137,8 @@ import { SetIdpDevelopmentPlanComponent } from '../competency-assessment/idp-dev
NgxChartsModule,
NgSelectModule,
HttpClientModule,
FormsModule
FormsModule,
NgxDaterangepickerMd.forRoot(),
],
providers: [Bu1Service,Bu2Service,Bu3Service,Bu4Service,Bu5Service,Bu6Service,Bu7Service,PositionService,PLService,EmpGroupService,EmpTypeService,{
provide: HTTP_INTERCEPTORS,
......
src/assets/css/style.css
......@@ -24748,18 +24748,22 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
font-weight: 700;
}
.height-50px{
.height-50px {
height: 50px;
}
.margin-top-2px{
margin-top:2px;
.margin-top-2px {
margin-top: 2px;
}
.padding-16px{
.padding-16px {
padding: 16px;
}
.overflow-y-0{
.overflow-y-0 {
overflow-y: 0%;
}
.min-height-50px{
min-height: 50px
}
\ No newline at end of file
.min-height-50px {
min-height: 50px;
}
.justify-around {
justify-content: space-around;
}
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