Skip to content

M
mySkill-x
Commit a92c099d by Nakarin Luankla
Options

UPDATE เปลี่ยน modal จัดรอบการประเมินใหม่

parent 26cc0a8a
Showing with 465 additions and 51 deletions
src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/edit-define-document-form/edit-define-document-form.component.html
<div class="body-content"> <div class="body-content">
<div class="page"> <div class="page">
<div class="border-b border-t border-gray-200 dark:border-white/10"> <div class="border-b border-gray-200 dark:border-white/10">
<div class="grid grid-cols-2 gap-6 mt-5"> <div class="grid grid-cols-2 gap-6">
<div class="col-span-1"> <div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">รอบการประเมิน</label> <label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">รอบการประเมิน</label>
</div> </div>
...@@ -35,18 +35,6 @@ ...@@ -35,18 +35,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-20px m-0 shadow-md" (click)="openModalClass('modal-alert','addForm')">
<i class="ri-save-3-line"></i>
Save
</button>
</div> -->
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div> </div>
</div> </div>
...@@ -70,7 +58,24 @@ ...@@ -70,7 +58,24 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="loadingAssessmentList">
<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"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!loadingAssessmentList&&!assessmentListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!loadingAssessmentList&&assessmentListFilter().length > 0">
<tr <tr
*ngFor="let item of assessmentListFilter() | slice:((currentPage-1) * this.pageSize) : (((currentPage-1) * this.pageSize) + this.pageSize);let i = index"> *ngFor="let item of assessmentListFilter() | slice:((currentPage-1) * this.pageSize) : (((currentPage-1) * this.pageSize) + this.pageSize);let i = index">
<td class="flex justify-center items-center"> <td class="flex justify-center items-center">
...@@ -139,7 +144,332 @@ ...@@ -139,7 +144,332 @@
<ng-template #evaluationFormEmpModal let-modal>
<h3 mat-dialog-title>
แก้ไขรายการสมรรถนะ
</h3>
<mat-dialog-content >
<div class="body-content">
<div class="page">
<div class="py-2 border-b-2 border-collapse ">
<div class="grid grid-cols-2 gap-6">
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">รหัสแบบฟอร์ม</label>
</div>
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ชื่อพนักงาน</label>
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div class="col-span-1">
<input type="text" id="input-label"
class="py-2 px-3 ltr:pr-11 rtl:pl-11 ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10 bg-input-readonly"
readonly value="{{selectEmp.masfromEvaluationRound.evaluationRoundId}}">
</div>
<div class="col-span-1">
<input type="text" id="input-label"
class="py-2 px-3 ltr:pr-11 rtl:pl-11 ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10 bg-input-readonly"
readonly value="{{selectEmp.apsassessy.fname}} {{selectEmp.apsassessy.lname}}">
</div>
</div>
</div>
</div>
</div>
<div class="header-title-type">
<div class="flex justify-between">
<div class="flex">
<!-- Content ของ div แรก -->
<div class="flex gap-x-6">
<div class="flex items-center">
<input type="checkbox" class="ti-form-checkbox mt-0.5" id="hs-checkbox-group-1" disabled [(ngModel)]="isChecked">
<label for="hs-checkbox-group-1"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">{{numDataListChecked}}
Selected</label>
</div>
<div class="flex items-center">
<i (click)="toggleCheckbox()"
[ngClass]="{'ri-checkbox-multiple-line': !isChecked, 'ri-checkbox-multiple-fill': isChecked}"
class="ri-checkbox-multiple-line text-gray-500 dark:text-white/70"></i>
<label for="hs-checkbox-group-2"
class="text-sm text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70"
(click)="toggleCheckbox()">Select All</label>
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<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" style="height: 40px;" [(ngModel)]="searchRound" (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>
</div>
</div>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" (click)="searchIndicatorsChange();openModalIndicators();">
<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-20px m-0 shadow-md" (click)="deleteAssessmentList()">
<i class="ri-delete-bin-6-line"></i>
Delete
</button>
</div>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['','รหัสสมรรถนะ','ชื่อสมรรถนะ','ระดับความหวัง','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f || l || item === 'ระดับความหวัง'">
<span class="text-sm">{{ item }}</span>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="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"
aria-label="loading">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
</tbody>
<tbody *ngIf="!loading&&!empassessmentListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="!loading&&empassessmentListFilter().length > 0">
<tr *ngFor="let item of empassessmentListFilter() | slice:((currentPageRound-1) * pageSizeRound) : (((currentPageRound-1) * pageSizeRound) + pageSizeRound);let i = index">
<td class="text-center">
<input type="checkbox" class="ti-form-checkbox cursor-pointer"
id="checkbox-{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}" [(ngModel)]="item.checkbox" (change)="checkempassessmentRoundListCheckbox()">
</td>
<td>
<label
for="checkbox-{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}">{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}</label>
</td>
<td >{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}</td>
<td class="!text-center">{{item.item.groupAssessment1.competencyIndicatorsCourses1Mini.lineNo}}</td>
<td class="flex justify-center">
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteFormOne(item.item);"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageRound.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageRound = (currentPageRound-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of pageRound;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPageRound!=1&&currentPageRound!=2&&currentPageRound!=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==currentPageRound-1||item==currentPageRound||item==currentPageRound+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageRound"
(click)="currentPageRound=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageRound.length-2&&currentPageRound!=pageRound.length&&currentPageRound!=pageRound.length-1&&currentPageRound!=pageRound.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)="currentPageRound = (currentPageRound > pageRound.length-1 ? currentPageRound: currentPageRound+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageRound-1) * pageSizeRound)+1}} to {{empassessmentListFilter().length< pageSizeRound
?empassessmentListFilter().length: (currentPageRound==pageRound.length ? ((currentPageRound * pageSizeRound) - ((currentPageRound *
pageSizeRound) - empassessmentListFilter().length) ) :(currentPageRound * pageSizeRound) ) }} of {{empassessmentListFilter().length}}
items</span>
</ul>
</nav>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close] cdkFocusInitial
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">
ย้อนกลับ
</button>
<button type="button" class="ti-btn ti-btn-success" (click)="saveIndicators();">
บันทึกข้อมูล
</button>
</mat-dialog-actions>
</ng-template>
<ng-template #IndicatorsEmpModal let-modal>
<h3 mat-dialog-title>
รายการสมรรถนะ
</h3>
<mat-dialog-content >
<div class="ti-modal-body">
<div class="header-title-type">
<div class="flex justify-between">
<div class="flex">
</div>
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<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" style="height: 40px;" [(ngModel)]="searchIndicator" (ngModelChange)="searchIndicatorsChange()">
<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>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อประเภท','ความคาดหวัง','การจัดการ']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!filterIndicators().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="filterIndicators().length > 0">
<tr *ngFor="let item of filterIndicators() | slice:((currentPageIndicator-1) * pageSizeIndicator) : (((currentPageIndicator-1) * pageSizeIndicator) + pageSizeIndicator);let i = index">
<td>{{item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}</td>
<td >{{item.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}</td>
<td class="!text-center">{{item.groupAssessment1.competencyIndicatorsCourses1Mini.lineNo}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button" mat-dialog-close (click)="addIndicators(item)"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" >
<i class="ri-add-line"></i>
เพิ่มรายการ
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="pageIndicator.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageIndicator = (currentPageIndicator-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of pageIndicator;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPageIndicator!=1&&currentPageIndicator!=2&&currentPageIndicator!=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==currentPageIndicator-1||item==currentPageIndicator||item==currentPageIndicator+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPageIndicator"
(click)="currentPageIndicator=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageIndicator.length-2&&currentPageIndicator!=pageIndicator.length&&currentPageIndicator!=pageIndicator.length-1&&currentPageIndicator!=pageIndicator.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)="currentPageIndicator = (currentPageIndicator > pageIndicator.length-1 ? currentPageIndicator: currentPageIndicator+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageIndicator-1) * pageSizeIndicator)+1}} to {{filterIndicators().length< pageSizeIndicator
?filterIndicators().length: (currentPageIndicator==pageIndicator.length ? ((currentPageIndicator * pageSizeIndicator) - ((currentPageIndicator *
pageSizeIndicator) - filterIndicators().length) ) :(currentPageIndicator * pageSizeIndicator) ) }} of {{filterIndicators().length}}
items</span>
</ul>
</nav>
</div>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close] cdkFocusInitial
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">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
<div id="form-pm-emp" class="hs-overlay hidden ti-modal" > <div id="form-pm-emp" class="hs-overlay hidden ti-modal" >
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto mt-7"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto mt-7">
......
src/app/components/competency-assessment/evaluation-cycle-manager/define-document-form/edit-define-document-form/edit-define-document-form.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model/appraisal-aps.model'; import { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model/appraisal-aps.model';
import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model'; import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model';
...@@ -6,7 +7,7 @@ import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/mod ...@@ -6,7 +7,7 @@ import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/mod
import { EvaluationModal } from 'src/app/shared/model/evaluation-form.modal'; import { EvaluationModal } from 'src/app/shared/model/evaluation-form.modal';
import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service'; import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service'; import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import Swal from 'sweetalert2';
@Component({ @Component({
selector: 'app-edit-define-document-form', selector: 'app-edit-define-document-form',
templateUrl: './edit-define-document-form.component.html', templateUrl: './edit-define-document-form.component.html',
...@@ -14,6 +15,8 @@ import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle ...@@ -14,6 +15,8 @@ import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle
}) })
export class EditDefineDocumentFormComponent { export class EditDefineDocumentFormComponent {
@ViewChild("evaluationFormEmpModal") evaluationFormEmpModal: any;
@ViewChild("IndicatorsEmpModal") IndicatorsEmpModal: any;
@Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'รอบการประเมิน', 'กำหนดฟอร์มเอกสาร', 'เเก้ไขฟอร์มตามรอบการประเมิน']; @Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'รอบการประเมิน', 'กำหนดฟอร์มเอกสาร', 'เเก้ไขฟอร์มตามรอบการประเมิน'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>(); @Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
@Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>(); @Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
...@@ -25,7 +28,7 @@ export class EditDefineDocumentFormComponent { ...@@ -25,7 +28,7 @@ export class EditDefineDocumentFormComponent {
search = "" search = ""
assessmentList: AppraisalModel[] = [] assessmentList: AppraisalModel[] = []
loadingAssessmentList = false
evaluationRound: EvaluationCycleModel = new MyEvaluationCycleModel() evaluationRound: EvaluationCycleModel = new MyEvaluationCycleModel()
isChecked: boolean = false; isChecked: boolean = false;
...@@ -57,10 +60,12 @@ export class EditDefineDocumentFormComponent { ...@@ -57,10 +60,12 @@ export class EditDefineDocumentFormComponent {
pageIndicator = Array.from({ length: 1 }, (_, i) => i + 1); pageIndicator = Array.from({ length: 1 }, (_, i) => i + 1);
pageSizeIndicator = 10 pageSizeIndicator = 10
competencyTopicIds: string[] = [] competencyTopicIds: string[] = []
dialogRef:any
constructor(private toastr: ToastrService, constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private evaluationAssessmentService: EvaluationAssessmentService, private evaluationAssessmentService: EvaluationAssessmentService,
private evaluationCycleService: EvaluationCycleService private evaluationCycleService: EvaluationCycleService,
private dialog: MatDialog
) { ) {
} }
...@@ -93,10 +98,12 @@ export class EditDefineDocumentFormComponent { ...@@ -93,10 +98,12 @@ export class EditDefineDocumentFormComponent {
} }
getAssessmentList() { getAssessmentList() {
this.loadingAssessmentList = true
this.evaluationAssessmentService.getById(this.evaluationRoundId!).subscribe({ this.evaluationAssessmentService.getById(this.evaluationRoundId!).subscribe({
next: response => { next: response => {
this.assessmentList = response this.assessmentList = response
this.searchChange() this.searchChange()
this.loadingAssessmentList = false
this.cdr.detectChanges(); this.cdr.detectChanges();
}, },
error: err => { error: err => {
...@@ -121,11 +128,11 @@ export class EditDefineDocumentFormComponent { ...@@ -121,11 +128,11 @@ export class EditDefineDocumentFormComponent {
} }
saveAssessmentOne(item:AppraisalModel) { saveAssessmentOne(item: AppraisalModel) {
this.evaluationAssessmentService.post(item).subscribe({ this.evaluationAssessmentService.post(item).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
this.showAlert(response.message, 'success') this.showAlertToastr(response.message, 'success')
} else { } else {
} }
} }
...@@ -157,6 +164,17 @@ export class EditDefineDocumentFormComponent { ...@@ -157,6 +164,17 @@ export class EditDefineDocumentFormComponent {
if (this.empassessmentList) { if (this.empassessmentList) {
this.empassessmentList.masfromTopic = this.empassessmentRoundListCheckbox.map(x => x.item) as any; this.empassessmentList.masfromTopic = this.empassessmentRoundListCheckbox.map(x => x.item) as any;
} }
Swal.fire({
icon: 'question',
title: 'แจ้งเตือน',
text: 'ยืนยันการบันทึกข้อมูลหรือไม่',
showCancelButton: true,
confirmButtonText: 'บันทึกข้อมูล',
cancelButtonText: 'ย้อนกลับ',
reverseButtons: true,
}).then((result) => {
console.log("🚀 ~ EditDefineDocumentFormComponent ~ saveIndicators ~ result:", result)
if (result.isConfirmed) {
this.evaluationAssessmentService.postList([this.empassessmentList]).subscribe({ this.evaluationAssessmentService.postList([this.empassessmentList]).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
...@@ -164,12 +182,17 @@ export class EditDefineDocumentFormComponent { ...@@ -164,12 +182,17 @@ export class EditDefineDocumentFormComponent {
this.getApsassessy(); this.getApsassessy();
this.getApsassessyMini(); this.getApsassessyMini();
this.cdr.detectChanges(); this.cdr.detectChanges();
// this.closeDialog();
} }
}, error: err => { }, error: err => {
console.error('Error fetching evaluation cycles:', err); console.error('Error fetching evaluation cycles:', err);
} }
}) })
}else { }
});
} else {
this.showAlert('กรุณาเลือกรายการ', 'error'); this.showAlert('กรุณาเลือกรายการ', 'error');
} }
} }
...@@ -297,17 +320,34 @@ export class EditDefineDocumentFormComponent { ...@@ -297,17 +320,34 @@ export class EditDefineDocumentFormComponent {
const filteredData = this.filterIndicators(); const filteredData = this.filterIndicators();
this.pageIndicator = Array.from({ length: Math.ceil(filteredData.length / this.pageSizeIndicator) }, (_, i) => i + 1); this.pageIndicator = Array.from({ length: Math.ceil(filteredData.length / this.pageSizeIndicator) }, (_, i) => i + 1);
} }
openModalIndicators() {
const modalRef = this.dialog.open(this.IndicatorsEmpModal, {
width: '60vw',
enterAnimationDuration: '300ms', // ระยะเวลาการเปิด
exitAnimationDuration: '150ms', // ระยะเวลาการปิด
disableClose: false,
});
}
addIndicators(item: AppraisalRoundModel) { addIndicators(item: AppraisalRoundModel) {
this.empassessmentRoundListCheckbox.push({ checkbox: false, item }) this.empassessmentRoundListCheckbox.push({ checkbox: false, item })
this.competencyTopicIds.push(item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.competencyTopicId) this.competencyTopicIds.push(item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.competencyTopicId)
this.indicatorChange(); this.indicatorChange();
this.closeModalClass('form-assessment')
} }
//############################# ปิด Modal Indicators ############################# //############################# ปิด Modal Indicators #############################
showAlert(text: string, type: 'success' | 'error') { showAlert(text: string, type: 'success' | 'error') {
Swal.fire({
title: 'แจ้งเตือน',
text: text,
icon: type,
confirmButtonText: 'ตกลง',
});
}
showAlertToastr(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', { this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000, timeOut: 3000,
positionClass: 'toast-top-right', positionClass: 'toast-top-right',
...@@ -315,22 +355,22 @@ export class EditDefineDocumentFormComponent { ...@@ -315,22 +355,22 @@ export class EditDefineDocumentFormComponent {
} }
openModalClass(id: string, type?: string) { openModalClass(id: string, type?: string) {
this.typeForm = type ?? "" // this.typeForm = type ?? ""
if (id == 'modal-alert') { // if (id == 'modal-alert') {
if (type == 'deleteForm') { // if (type == 'deleteForm') {
this.msg = 'ยืนยันการลบรายการ' // this.msg = 'ยืนยันการลบรายการ'
} else if (type == 'addForm' || type == 'addIndicator') { // } else if (type == 'addForm' || type == 'addIndicator') {
this.msg = 'ยืนยันการบันทึกรายการ' // this.msg = 'ยืนยันการบันทึกรายการ'
} // }
} // }
if (id) { // if (id) {
document.getElementById(id)?.classList.add('open'); // document.getElementById(id)?.classList.add('open');
document.getElementById(id)?.classList.remove('hidden'); // document.getElementById(id)?.classList.remove('hidden');
setTimeout(() => { // setTimeout(() => {
document.getElementById(id)?.setAttribute('aria-overlay', 'false') // document.getElementById(id)?.setAttribute('aria-overlay', 'false')
}, 10); // }, 10);
} // }
this.isChecked = false; this.isChecked = false;
this.numDataListChecked = 0; this.numDataListChecked = 0;
...@@ -345,6 +385,13 @@ export class EditDefineDocumentFormComponent { ...@@ -345,6 +385,13 @@ export class EditDefineDocumentFormComponent {
openAddRoundModel(evaluationRoundId: string, apsassessy: string, item: AppraisalModel, model: string) { openAddRoundModel(evaluationRoundId: string, apsassessy: string, item: AppraisalModel, model: string) {
this.dialogRef = this.dialog.open(this.evaluationFormEmpModal, {
width: '80vw',
disableClose: false,
enterAnimationDuration: '300ms', // ระยะเวลาการเปิด
exitAnimationDuration: '150ms', // ระยะเวลาการปิด
});
this.searchIndicator = "" this.searchIndicator = ""
this.selectEmp = item this.selectEmp = item
this.openModalClass(model); this.openModalClass(model);
...@@ -355,7 +402,9 @@ export class EditDefineDocumentFormComponent { ...@@ -355,7 +402,9 @@ export class EditDefineDocumentFormComponent {
} }
closeDialog() {
this.dialogRef.close()
}
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.html
...@@ -139,8 +139,7 @@ ...@@ -139,8 +139,7 @@
(click)="modalStatus='edit';modalStatusEdit=(item.data.statusFrom.code== '0'?true:false);setData(item.data)" (click)="modalStatus='edit';modalStatusEdit=(item.data.statusFrom.code== '0'?true:false);setData(item.data)"
data-hs-overlay="#evaluation-cycle-page-modal"></i> data-hs-overlay="#evaluation-cycle-page-modal"></i>
<i class="ti ti-user cursor-pointer i-gray fs-l px-1" *ngIf="item.data.statusFrom.code =='1'" <i class="ti ti-user cursor-pointer i-gray fs-l px-1" *ngIf="item.data.statusFrom.code =='1'"
data-hs-overlay="#evaluation-cycle-person-modal" (click)="openModal(item.data.evaluationRoundId)"></i>
(click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i>
<!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)" <!-- <i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="modalStatus='delete';setData(item.data)"
data-hs-overlay="#evaluation-cycle-page-alert-modal"></i> --> data-hs-overlay="#evaluation-cycle-page-alert-modal"></i> -->
<!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'" <!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
...@@ -439,6 +438,22 @@ ...@@ -439,6 +438,22 @@
</div> </div>
</div> </div>
<ng-template #evaluationRoundModal let-modal>
<h3 mat-dialog-title>
เเก้ไขเเบบฟอร์มตามรอบการประเมิน
</h3>
<mat-dialog-content >
<app-edit-define-document-form *ngIf="evaluationRoundId"
[evaluationRoundId]="evaluationRoundId"></app-edit-define-document-form>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-button [mat-dialog-close]
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">
ย้อนกลับ
</button>
</mat-dialog-actions>
</ng-template>
<div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal"> <div id="evaluation-cycle-person-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out m-3 lg:!mx-auto " style="min-width: 70%;"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out m-3 lg:!mx-auto " style="min-width: 70%;">
<div class="max-h-full overflow-hidden ti-modal-content w-full"> <div class="max-h-full overflow-hidden ti-modal-content w-full">
......
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.scss
.dialog-title {
display: flex;
justify-content: space-between;
align-items: center;
}
\ No newline at end of file
src/app/components/competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Output, Renderer2 } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Output, Renderer2, ViewChild } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model'; import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service'; import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
...@@ -6,6 +6,7 @@ import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status- ...@@ -6,6 +6,7 @@ import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-
import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service'; import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
import { PLService } from 'src/app/shared/services/pl.service'; import { PLService } from 'src/app/shared/services/pl.service';
import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model'; import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { MatDialog } from '@angular/material/dialog';
export interface DataModal { export interface DataModal {
search: string, search: string,
currentPage: number, currentPage: number,
...@@ -18,6 +19,7 @@ export interface DataModal { ...@@ -18,6 +19,7 @@ export interface DataModal {
}) })
export class EvaluationCycleComponent { export class EvaluationCycleComponent {
@Output() evaluationRoundIdChange = new EventEmitter<string>(); @Output() evaluationRoundIdChange = new EventEmitter<string>();
@ViewChild("evaluationRoundModal") evaluationRoundModal: any;
apsPeriodStart: string = ''; apsPeriodStart: string = '';
apsPeriodEnd: string = ''; apsPeriodEnd: string = '';
...@@ -48,11 +50,13 @@ export class EvaluationCycleComponent { ...@@ -48,11 +50,13 @@ export class EvaluationCycleComponent {
(this.currentDate.getFullYear() + 1) + "", (this.currentDate.getFullYear() + 1) + "",
] ]
modalStatusEdit = false modalStatusEdit = false
dialogFormRef: any
constructor(private evaluationCycleService: EvaluationCycleService, constructor(private evaluationCycleService: EvaluationCycleService,
private toastr: ToastrService, private toastr: ToastrService,
private cdr: ChangeDetectorRef, private cdr: ChangeDetectorRef,
private renderer: Renderer2, private renderer: Renderer2,
private pLService: PLService private pLService: PLService,
private dialog: MatDialog
) { } ) { }
ngOnInit(): void { ngOnInit(): void {
...@@ -60,6 +64,7 @@ export class EvaluationCycleComponent { ...@@ -60,6 +64,7 @@ export class EvaluationCycleComponent {
this.unlisten = this.renderer.listen('document', 'keydown', (event) => { this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
this.evaluationRoundId = '' this.evaluationRoundId = ''
this.dialogFormRef.close();
} }
}); });
this.getPlList() this.getPlList()
...@@ -214,17 +219,26 @@ export class EvaluationCycleComponent { ...@@ -214,17 +219,26 @@ export class EvaluationCycleComponent {
} }
} }
openModal(id: string, evaluationRoundId: string) { openModal(evaluationRoundId: string) {
this.evaluationRoundId = '' this.evaluationRoundId = ''
if (id == 'evaluation-cycle-person-modal') { this.dialogFormRef = this.dialog.open(this.evaluationRoundModal, {
width: '80vw',
disableClose: true,
enterAnimationDuration: '300ms', // ระยะเวลาการเปิด
exitAnimationDuration: '150ms', // ระยะเวลาการปิด
});
this.evaluationRoundId = evaluationRoundId this.evaluationRoundId = evaluationRoundId
this.evaluationRoundIdChange.emit(evaluationRoundId) this.evaluationRoundIdChange.emit(evaluationRoundId)
setTimeout(() => {
document.getElementById(id)?.classList.add('open'); // if (id == 'evaluation-cycle-person-modal') {
document.getElementById(id)?.classList.remove('hidden'); // this.evaluationRoundId = evaluationRoundId
document.getElementById(id)?.setAttribute('aria-overlay', 'false'); // this.evaluationRoundIdChange.emit(evaluationRoundId)
}, 10); // setTimeout(() => {
} // document.getElementById(id)?.classList.add('open');
// document.getElementById(id)?.classList.remove('hidden');
// document.getElementById(id)?.setAttribute('aria-overlay', 'false');
// }, 10);
// }
} }
searchModalChange(dataList: any[]) { searchModalChange(dataList: any[]) {
......
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