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="page">
<div class="border-b border-t border-gray-200 dark:border-white/10">
<div class="grid grid-cols-2 gap-6 mt-5">
<div class="border-b border-gray-200 dark:border-white/10">
<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>
......@@ -35,18 +35,6 @@
</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>
......@@ -70,7 +58,24 @@
</ng-container>
</tr>
</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
*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">
......@@ -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 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 { AppraisalRoundModel, MyAppraisalRoundModel } from 'src/app/shared/model/appraisal-aps.model';
import { AppraisalModel, MyAppraisalModel } from 'src/app/shared/model/appraisal.model';
......@@ -6,7 +7,7 @@ import { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/mod
import { EvaluationModal } from 'src/app/shared/model/evaluation-form.modal';
import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
import Swal from 'sweetalert2';
@Component({
selector: 'app-edit-define-document-form',
templateUrl: './edit-define-document-form.component.html',
......@@ -14,6 +15,8 @@ import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle
})
export class EditDefineDocumentFormComponent {
@ViewChild("evaluationFormEmpModal") evaluationFormEmpModal: any;
@ViewChild("IndicatorsEmpModal") IndicatorsEmpModal: any;
@Input() pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'รอบการประเมิน', 'กำหนดฟอร์มเอกสาร', 'เเก้ไขฟอร์มตามรอบการประเมิน'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
@Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
......@@ -25,7 +28,7 @@ export class EditDefineDocumentFormComponent {
search = ""
assessmentList: AppraisalModel[] = []
loadingAssessmentList = false
evaluationRound: EvaluationCycleModel = new MyEvaluationCycleModel()
isChecked: boolean = false;
......@@ -57,10 +60,12 @@ export class EditDefineDocumentFormComponent {
pageIndicator = Array.from({ length: 1 }, (_, i) => i + 1);
pageSizeIndicator = 10
competencyTopicIds: string[] = []
dialogRef:any
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private evaluationAssessmentService: EvaluationAssessmentService,
private evaluationCycleService: EvaluationCycleService
private evaluationCycleService: EvaluationCycleService,
private dialog: MatDialog
) {
}
......@@ -93,10 +98,12 @@ export class EditDefineDocumentFormComponent {
}
getAssessmentList() {
this.loadingAssessmentList = true
this.evaluationAssessmentService.getById(this.evaluationRoundId!).subscribe({
next: response => {
this.assessmentList = response
this.searchChange()
this.loadingAssessmentList = false
this.cdr.detectChanges();
},
error: err => {
......@@ -121,11 +128,11 @@ export class EditDefineDocumentFormComponent {
}
saveAssessmentOne(item:AppraisalModel) {
saveAssessmentOne(item: AppraisalModel) {
this.evaluationAssessmentService.post(item).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.showAlertToastr(response.message, 'success')
} else {
}
}
......@@ -157,6 +164,17 @@ export class EditDefineDocumentFormComponent {
if (this.empassessmentList) {
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({
next: response => {
if (response.success) {
......@@ -164,12 +182,17 @@ export class EditDefineDocumentFormComponent {
this.getApsassessy();
this.getApsassessyMini();
this.cdr.detectChanges();
// this.closeDialog();
}
}, error: err => {
console.error('Error fetching evaluation cycles:', err);
}
})
}else {
}
});
} else {
this.showAlert('กรุณาเลือกรายการ', 'error');
}
}
......@@ -297,17 +320,34 @@ export class EditDefineDocumentFormComponent {
const filteredData = this.filterIndicators();
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) {
this.empassessmentRoundListCheckbox.push({ checkbox: false, item })
this.competencyTopicIds.push(item.groupAssessment1?.competencyIndicatorsCourses1Mini?.competencyIndicatorsCourses0?.competencyTopic?.competencyTopicId)
this.indicatorChange();
this.closeModalClass('form-assessment')
}
//############################# ปิด Modal Indicators #############################
showAlert(text: string, type: 'success' | 'error') {
Swal.fire({
title: 'แจ้งเตือน',
text: text,
icon: type,
confirmButtonText: 'ตกลง',
});
}
showAlertToastr(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
......@@ -315,22 +355,22 @@ export class EditDefineDocumentFormComponent {
}
openModalClass(id: string, type?: string) {
this.typeForm = type ?? ""
if (id == 'modal-alert') {
if (type == 'deleteForm') {
this.msg = 'ยืนยันการลบรายการ'
} else if (type == 'addForm' || type == 'addIndicator') {
this.msg = 'ยืนยันการบันทึกรายการ'
}
}
if (id) {
document.getElementById(id)?.classList.add('open');
document.getElementById(id)?.classList.remove('hidden');
setTimeout(() => {
document.getElementById(id)?.setAttribute('aria-overlay', 'false')
// this.typeForm = type ?? ""
// if (id == 'modal-alert') {
// if (type == 'deleteForm') {
// this.msg = 'ยืนยันการลบรายการ'
// } else if (type == 'addForm' || type == 'addIndicator') {
// this.msg = 'ยืนยันการบันทึกรายการ'
// }
// }
// if (id) {
// document.getElementById(id)?.classList.add('open');
// document.getElementById(id)?.classList.remove('hidden');
// setTimeout(() => {
// document.getElementById(id)?.setAttribute('aria-overlay', 'false')
}, 10);
}
// }, 10);
// }
this.isChecked = false;
this.numDataListChecked = 0;
......@@ -345,6 +385,13 @@ export class EditDefineDocumentFormComponent {
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.selectEmp = item
this.openModalClass(model);
......@@ -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 @@
(click)="modalStatus='edit';modalStatusEdit=(item.data.statusFrom.code== '0'?true:false);setData(item.data)"
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'"
data-hs-overlay="#evaluation-cycle-person-modal"
(click)="openModal('evaluation-cycle-person-modal',item.data.evaluationRoundId)"></i>
(click)="openModal(item.data.evaluationRoundId)"></i>
<!-- <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> -->
<!-- <span class="badge text-white m-1" *ngIf="item.data.statusCode.code!='1'"
......@@ -439,6 +438,22 @@
</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 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">
......
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 { EvaluationCycleModel, MyEvaluationCycleModel } from 'src/app/shared/model/evaluation-cycle.model';
import { EvaluationCycleService } from 'src/app/shared/services/evaluation-cycle.service';
......@@ -6,6 +6,7 @@ import { MyStatusCodeModel, StatusCodeModel } from 'src/app/shared/model/status-
import { EvaluationAssessmentService } from 'src/app/shared/services/evaluation-assessment.service';
import { PLService } from 'src/app/shared/services/pl.service';
import { PLModel, MyPLModel } from 'src/app/shared/model/pl.model';
import { MatDialog } from '@angular/material/dialog';
export interface DataModal {
search: string,
currentPage: number,
......@@ -18,6 +19,7 @@ export interface DataModal {
})
export class EvaluationCycleComponent {
@Output() evaluationRoundIdChange = new EventEmitter<string>();
@ViewChild("evaluationRoundModal") evaluationRoundModal: any;
apsPeriodStart: string = '';
apsPeriodEnd: string = '';
......@@ -48,11 +50,13 @@ export class EvaluationCycleComponent {
(this.currentDate.getFullYear() + 1) + "",
]
modalStatusEdit = false
dialogFormRef: any
constructor(private evaluationCycleService: EvaluationCycleService,
private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private renderer: Renderer2,
private pLService: PLService
private pLService: PLService,
private dialog: MatDialog
) { }
ngOnInit(): void {
......@@ -60,6 +64,7 @@ export class EvaluationCycleComponent {
this.unlisten = this.renderer.listen('document', 'keydown', (event) => {
if (event.key === 'Escape') {
this.evaluationRoundId = ''
this.dialogFormRef.close();
}
});
this.getPlList()
......@@ -214,17 +219,26 @@ export class EvaluationCycleComponent {
}
}
openModal(id: string, evaluationRoundId: string) {
openModal(evaluationRoundId: string) {
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.evaluationRoundIdChange.emit(evaluationRoundId)
setTimeout(() => {
document.getElementById(id)?.classList.add('open');
document.getElementById(id)?.classList.remove('hidden');
document.getElementById(id)?.setAttribute('aria-overlay', 'false');
}, 10);
}
// if (id == 'evaluation-cycle-person-modal') {
// this.evaluationRoundId = evaluationRoundId
// this.evaluationRoundIdChange.emit(evaluationRoundId)
// setTimeout(() => {
// document.getElementById(id)?.classList.add('open');
// document.getElementById(id)?.classList.remove('hidden');
// document.getElementById(id)?.setAttribute('aria-overlay', 'false');
// }, 10);
// }
}
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