Skip to content

M
myAppraisal
Commit 853b91d6 by Nattana Chaiyamat
Options

ทะเบียนเกรด

parent 3eeeb5e5
Showing with 329 additions and 675 deletions
src/app/components/competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component.ts deleted 100644 → 0
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-add-group-grade',
templateUrl: './add-group-grade.component.html',
styleUrls: ['./add-group-grade.component.scss']
})
export class AddGroupGradeComponent implements OnInit {
@Input() statusGroup = 'add' ;
@Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
activeTab: string = 'details-add';
isChecked: boolean = false;
// ข้อมูลที่จะใช้แสดงในตาราง
@Input() items: any[] = [
['1', '', 'CC'],
['2', '', 'MC'],
['3', '', 'PC']
];
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.activeTab = tab.id;
}
onEdit() {
this.sendEdit.emit(false);
}
// ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
saveData(event: any, id: any): void {
const updatedText = event.target.innerText; // ข้อความที่พิมพ์เข้าไป
// เก็บข้อมูลใน localStorage
localStorage.setItem(`item-${id}`, updatedText);
// ฟังก์ชันอัปเดตข้อมูล (หากต้องการส่งไปยัง API)
this.updateItem(id, updatedText);
}
// ฟังก์ชันในการอัพเดตข้อมูล
updateItem(id: any, updatedText: string): void {
// ส่งข้อมูลไปยัง API เพื่อบันทึกข้อมูลในฐานข้อมูล
// ตัวอย่างเช่น:
// this.myService.updateItem(id, updatedText).subscribe(response => {
// this.showSuccessEdit(); // เรียกฟังก์ชันแจ้งเตือน
// });
}
// เมื่อหน้าเว็บโหลดใหม่ดึงข้อมูลจาก localStorage
ngOnInit(): void {
this.items.forEach(item => {
const savedText = localStorage.getItem(`item-${item[0]}`);
if (savedText) {
item[1] = savedText; // ใช้ข้อมูลที่เก็บไว้
}
});
}
modalOptions: {
[nameModal: string]: {
isModalOpen: boolean;
modalSize: string;
backdropClose: boolean;
};
} = {
"add": { isModalOpen: false, modalSize: 'm', backdropClose: true },
"edit": { isModalOpen: false, modalSize: 'm', backdropClose: true }
};
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name;
document.body.style.overflow = 'hidden';
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
if (!this.isAnyModalOpen()) {
document.body.style.overflow = '';
}
}
isAnyModalOpen(): boolean {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
}
currentModal = "";
constructor(private toastr: ToastrService) { }
// แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
}
}
src/app/components/competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component.html deleted 100644 → 0
<div class="flex justify-between">
<div class="flex">
<!-- Content ของ div แรก -->
<div class="flex">
<button type="button"
class="ti-btn text-primary hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
(click)="onEdit()">
<i class="ti ti-chevron-left"></i>
ย้อนกลับ
</button>
<div class="text-2xl font-bold py-2 text-primary px-2">
แก้ไขกลุ่มเกรด
</div>
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
data-hs-overlay="#edit-group-grade-alert-add-modal">
<i class="ri-save-3-line"></i>
Save
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-10 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-10 m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="body-content">
<div class="page">
<div class="border-b border-gray-200 dark:border-white/10 px-8">
<nav class="flex rtl:space-x-reverse space-x-5" style="padding-top: 20px;">
<a class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="activeTab = 'details-edit'">
รายละเอียด
</a>
<a class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" (click)="activeTab = 'grade-register'">
ทะเบียนเกรด
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div *ngIf="activeTab === 'details-edit'" id="underline-1" role="tabpanel"
aria-labelledby="underline-item-1">
<div class="page px-rem">
<label for="input-label" class="ti-form-label">กำหนดรหัสกลุ่มเกรด</label>
<input type="text" id="input-label" class="ti-form-input w-1/4 bg-input-readonly" readonly [ngModel]="dataSelect.code">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-1/2" [ngModel]="dataSelect.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-1/2" placeholder="">
</div>
</div>
<div *ngIf="activeTab === 'grade-register'" id="details-tab" id="underline-2" role="tabpanel"
aria-labelledby="underline-item-2">
<app-sub-grade-registration></app-sub-grade-registration>
</div>
</div>
</div>
</div>
<div id="edit-group-grade-alert-add-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-alert 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="#edit-group-grade-alert-add-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="#edit-group-grade-alert-add-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-group-grade-alert-add-modal" (click)="addUser();showSuccessAdd()">
เพิ่มข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component.scss deleted 100644 → 0
.button-clear {
position: absolute;
top: 96px;
z-index: 1;
right: 41vw;
}
.button-help {
position: absolute;
top: 0px;
z-index: 1;
right: 0vw;
margin: 4.2rem;
margin-right: 10px; /* เพิ่มใหม่ 12/16*/
}
.htable{
height: 400px;
}
table.ti-custom-table thead {
height: 60px;
}
table.ti-custom-table thead th span {
font-size: 12px;
font-weight: bold;
}
.ti-custom-table td{
padding-left: 0.9rem;
padding-right: 1rem;
}
.ti-custom-table thead th:first-child {
width: 120px; /* ปรับความกว้างตามที่ต้องการ */
text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
padding-left: 2px;
padding-right: 2px;
}
.ti-custom-table thead th:last-child {
width: 400px; /* ปรับความกว้างตามที่ต้องการ */
}
a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs {
display: flex;
width: 100%;
cursor: pointer;
margin-bottom: 10px;
height: 20%;
}
.nav-item {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link {
text-decoration: none;
padding: 10px 20px;
display: inline-block;
font-size: large;
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: #ccc;
border-radius: 5px 5px 0px 0px;
}
.nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
background-color: rgb(var(--color-primary));
border-width: 2px 2px 0px 2px;
border-style: solid;
border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px;
}
.tab-content {
margin-top: 20px;
}
.tab-pane.active {
display: block;
}
.nav-item-text {
list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */
}
.nav-link-text {
text-decoration: none;
display: inline-block;
font-size: large;
color: #569bf5;
border-bottom: 2px solid #569bf5;
line-height: 0.8;
}
.ti-pagination .page-link.active {
background-color: #569bf5;
color: white;
border-radius: 50%;
padding: 8px 12px;
}
.box-body{
padding: 0rem;
}
.page{
min-height: 0vh;
}
.ti-modal-content {
padding: 1rem;
height: 650px;
overflow-y: auto;
}
.ti-modal-content-alert{
width: 35%; /* ความกว้างที่คุณต้องการ */
position: absolute; /* ทำให้สามารถจัดตำแหน่งได้ */
top: 50%; /* ให้อยู่กลางในแนวตั้ง */
left: 50%; /* ให้อยู่กลางในแนวนอน */
transform: translate(-50%, -50%); /* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color: #ffffff;
}
.header-title-type {
width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */
padding-top: 50px;
padding-bottom: 1rem;
}
.body-content{
margin-bottom: 30px;
overflow-y: auto;
}
.bg-input-readonly{
background-color: rgb(241 245 249);
}
.ciricon {
height: 12px; /* กำหนดความสูงของวงกลม */
width: 12px; /* กำหนดความกว้างของวงกลม */
background-color: #ffffff;
font-weight: bold;
display: flex; /* ใช้ Flexbox */
justify-content: center; /* จัดตำแหน่งแนวนอนให้กึ่งกลาง */
align-items: center; /* จัดตำแหน่งแนวตั้งให้กึ่งกลาง */
border-radius: 2px; /* ทำให้เป็นวงกลม */
}
.ri-close-line {
font-size: 15px; /* ขนาดไอคอน */
}
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component.ts deleted 100644 → 0
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
export interface DataModel {
check: boolean;
code: string;
tdesc: string;
edesc: string;
}
@Component({
selector: 'app-edit-group-grade',
templateUrl: './edit-group-grade.component.html',
styleUrls: ['./edit-group-grade.component.scss']
})
export class EditGroupGradeComponent implements OnInit {
@Input() dataSelect = { check: false, code: '', tdesc: '', edesc: '' }
@Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
activeTab: string = 'details-edit';
isChecked: boolean = false;
// ข้อมูลที่จะใช้แสดงในตาราง
@Input() items: any[] = [
['1', '', 'CC'],
['2', '', 'MC'],
['3', '', 'PC']
];
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.activeTab = tab.id;
}
onEdit() {
this.sendEdit.emit(false);
}
// ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
saveData(event: any, id: any): void {
const updatedText = event.target.innerText; // ข้อความที่พิมพ์เข้าไป
// เก็บข้อมูลใน localStorage
localStorage.setItem(`item-${id}`, updatedText);
// ฟังก์ชันอัปเดตข้อมูล (หากต้องการส่งไปยัง API)
this.updateItem(id, updatedText);
}
// ฟังก์ชันในการอัพเดตข้อมูล
updateItem(id: any, updatedText: string): void {
// ส่งข้อมูลไปยัง API เพื่อบันทึกข้อมูลในฐานข้อมูล
// ตัวอย่างเช่น:
// this.myService.updateItem(id, updatedText).subscribe(response => {
// this.showSuccessEdit(); // เรียกฟังก์ชันแจ้งเตือน
// });
}
// เมื่อหน้าเว็บโหลดใหม่ดึงข้อมูลจาก localStorage
ngOnInit(): void {
this.items.forEach(item => {
const savedText = localStorage.getItem(`item-${item[0]}`);
if (savedText) {
item[1] = savedText; // ใช้ข้อมูลที่เก็บไว้
}
});
}
modalOptions: {
[nameModal: string]: {
isModalOpen: boolean;
modalSize: string;
backdropClose: boolean;
};
} = {
"add": { isModalOpen: false, modalSize: 'm', backdropClose: true },
"edit": { isModalOpen: false, modalSize: 'm', backdropClose: true }
};
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
this.currentModal = name;
document.body.style.overflow = 'hidden';
}
closeModal(name: string) {
this.modalOptions[name].isModalOpen = false;
if (!this.isAnyModalOpen()) {
document.body.style.overflow = '';
}
}
isAnyModalOpen(): boolean {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
}
currentModal = "";
constructor(private toastr: ToastrService) { }
// แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
showSuccessAdd() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
}
}
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { CompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { MyCompetencyGroupGradeModel } from 'src/app/shared/model/competency-group-grade.model';
import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
export interface DataModel {
check: boolean;
code: string;
tdesc: string;
edesc: string;
competencyGrades: CompetencyGradeModel[]
}
@Component({
......@@ -15,41 +19,57 @@ export interface DataModel {
})
export class GradeManagementComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
addTab = false;
editTab = false;
typeTab: "" | "add" | "edit" = "";
currentPage = 1;
page = Array.from({ length: 1 }, (_, i) => i + 1);
numDataListChecked = 0;
isDataListChecked = false;
isDataListCheckedAll = false;
search = '';
dataList: DataModel[] = [
{ check: false, code: '01', tdesc: 'กลุ่ม 1', edesc: 'Group 1' },
{ check: false, code: '02', tdesc: 'กลุ่ม 2', edesc: 'Group 2' },
{ check: false, code: '03', tdesc: 'กลุ่ม 3', edesc: 'Group 3' },
{ check: false, code: '04', tdesc: 'กลุ่ม 4', edesc: 'Group 4' },
{ check: false, code: '05', tdesc: 'กลุ่ม 5', edesc: 'Group 5' },
{ check: false, code: '06', tdesc: 'กลุ่ม 6', edesc: 'Group 6' },
{ check: false, code: '07', tdesc: 'กลุ่ม 7', edesc: 'Group 7' },
];
dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '' }
dataList: DataModel[] = [];
dataLoading = false
dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
constructor(private toastr: ToastrService) {
this.pathTitleChange();
constructor(private toastr: ToastrService,
private competencyGroupGradeService: CompetencyGroupGradeService,
private cdr: ChangeDetectorRef) {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด'])
}
pathTitleChange(data?: DataModel) {
this.editTab = data ? true : false
this.dataSelect = data || { check: false, code: '', tdesc: '', edesc: '' }
this.sendPathTitle.emit(
this.addTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'เพิ่มกลุ่มเกรด']
: this.editTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'แก้ไขกลุ่มเกรด']
: ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด']
);
ngOnInit(): void {
this.getCompetencyGroupGradeList()
}
selectData(data?: DataModel) {
this.dataSelect = JSON.parse(JSON.stringify(data || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }))
}
getCompetencyGroupGradeList() {
this.dataLoading = true
this.competencyGroupGradeService.getList().subscribe({
next: response => {
this.dataList = response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades }))
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
pathTitleChange(tap?: 'add' | 'edit') {
this.typeTab = tap || ''
switch (this.typeTab) {
case 'add': {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'เพิ่มกลุ่มเกรด'])
break;
}
case 'edit': {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'แก้ไขกลุ่มเกรด'])
break;
}
default: {
this.sendPathTitle.emit(['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด'])
}
}
}
searchChange() {
......@@ -60,7 +80,7 @@ export class GradeManagementComponent {
dataListFilter() {
return this.dataList.filter((x) => {
const match = x.code.includes(this.search) || x.tdesc.includes(this.search);
const match = x.code.toLowerCase().includes(this.search.toLowerCase()) || x.tdesc.toLowerCase().includes(this.search.toLowerCase()) || x.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match;
});
......@@ -68,7 +88,6 @@ export class GradeManagementComponent {
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;
}
......@@ -76,31 +95,34 @@ export class GradeManagementComponent {
dataListCheckAll() {
this.isDataListCheckedAll = !this.isDataListCheckedAll;
const selectAll = this.isDataListCheckedAll;
this.dataList.forEach((x) => (x.check = selectAll));
this.dataListCheck(); // อัปเดตสถานะการเช็ก
}
showSuccess() {
this.toastr.success('เพิ่มผู้ใช้ใหม่สำเร็จ!', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showEdit() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
this.dataList = this.dataList.filter((x) => {
const match = x.code.toLowerCase().includes(this.search.toLowerCase()) || x.tdesc.toLowerCase().includes(this.search.toLowerCase()) || x.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match;
}).map((x) => ({ ...x, check: selectAll }));
this.dataListCheck();
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
})
}
addUser() {
deleteCompetencyGroupGradeList() {
const body = this.dataSelect.code ? new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc }) : this.dataList.filter(x => x.check).map(x => new MyCompetencyGroupGradeModel({ groupGradeId: x.code, tdesc: x.tdesc, edesc: x.edesc }))
this.competencyGroupGradeService.delete(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencyGroupGradeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
}
src/app/components/competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component.html → src/app/components/competency-assessment/grade-registration/grade-management/group-grade/group-grade.component.html
<div class="flex justify-between">
<div class="flex justify-between mb-10px">
<div class="flex">
<!-- Content ของ div แรก -->
<div class="flex">
<button type="button"
class="ti-btn text-primary hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
(click)="onEdit()">
<i class="ti ti-chevron-left"></i>
ย้อนกลับ
</button>
<div class="text-2xl font-bold py-2 text-primary px-2">
เพิ่มกลุ่มเกรด
</div>
<button type="button"
class="ti-btn text-primary hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
(click)="backTab()">
<i class="ti ti-chevron-left"></i>
ย้อนกลับ
</button>
<div class="text-2xl font-bold py-2 text-primary px-2">
{{typeTab=='add'?'เพิ่ม':'แก้ไข'}}กลุ่มเกรด
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
data-hs-overlay="#add-group-grade-alert-add-modal">
[ngClass]="{'ti-btn-disabled': !dataSelect.code}" data-hs-overlay="#add-group-grade-alert-add-modal"
[disabled]="!dataSelect.code">
<i class="ri-save-3-line"></i>
Save
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-10 m-0 shadow-md">
<button type="button" class="ti-btn ti-btn-soft-indigo h-10 m-0 shadow-md" (click)="clear()">
<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)">
......@@ -49,45 +47,42 @@
</div>
<div class="body-content">
<div class="page">
<div class="border-b border-gray-200 dark:border-white/10 px-8">
<nav class="flex rtl:space-x-reverse space-x-5" style="padding-top: 20px;">
<a class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1" (click)="activeTab = 'details-add'">
รายละเอียด
</a>
<a class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
aria-controls="underline-2" (click)="activeTab = 'grade-register'">
ทะเบียนเกรด
</a>
</nav>
</div>
<div class="mt-3 px-3rem">
<div *ngIf="activeTab === 'details-add'" id="underline-1" role="tabpanel"
aria-labelledby="underline-item-1">
<nav class="flex rtl:space-x-reverse space-x-2 border-b border-gray-200">
<a (click)="currentTab=1"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
รายละเอียด
</a>
<a (click)="currentTab=2"
class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2" aria-controls="card-type-2">
ทะเบียนเกรด
</a>
</nav>
<div class="pt-50px">
<div *ngIf="currentTab==1" id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="page px-rem">
<label for="input-label" class="ti-form-label">กำหนดรหัสกลุ่มเกรด</label>
<input type="text" id="input-label" class="ti-form-input w-1/4" placeholder="">
<input type="text" id="input-label" class="ti-form-input w-1/4" [(ngModel)]="dataSelect.code">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)*</label>
<input type="text" id="detail_th" class="ti-form-input w-1/2" placeholder="">
<input type="text" id="detail_th" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.tdesc">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input w-1/2" placeholder="">
<input type="text" id="detail_eng" class="ti-form-input w-1/2" [(ngModel)]="dataSelect.edesc">
</div>
</div>
<div *ngIf="activeTab === 'grade-register'" id="underline-2" role="tabpanel"
aria-labelledby="underline-item-2">
<app-sub-grade-registration></app-sub-grade-registration>
<div *ngIf="currentTab==2" id="card-type-2" class="hidden" role="tabpanel"
aria-labelledby="card-type-item-2">
<app-sub-grade-registration [dataSelect]="dataSelect"
(sendDataSelect)="dataSelect=$event"></app-sub-grade-registration>
</div>
</div>
</div>
</div>
<div id="add-group-grade-alert-add-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-alert w-full">
......@@ -105,7 +100,7 @@
</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">
......@@ -115,7 +110,7 @@
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#add-group-grade-alert-add-modal" (click)="addUser();showSuccessAdd()">
data-hs-overlay="#add-group-grade-alert-add-modal" (click)="postCompetencyGroupGrade()">
เพิ่มข้อมูล
</a>
</div>
......
src/app/components/competency-assessment/grade-registration/grade-management/group-grade/group-grade.component.ts 0 → 100644
import { Component, EventEmitter, Input, Output, OnInit, ChangeDetectorRef } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { CompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { MyCompetencyGroupGradeModel } from 'src/app/shared/model/competency-group-grade.model';
import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
export interface DataModel {
check: boolean
code: string
tdesc: string
edesc: string
competencyGrades: CompetencyGradeModel[]
}
@Component({
selector: 'app-group-grade',
templateUrl: './group-grade.component.html',
styleUrls: ['./group-grade.component.scss']
})
export class GroupGradeComponent implements OnInit {
@Output() sendBackTab: EventEmitter<undefined> = new EventEmitter<undefined>();
@Input() typeTab: 'add' | 'edit' = 'add'
@Input() dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
dataOriginal: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
@Output() sendDataList: EventEmitter<DataModel[]> = new EventEmitter<DataModel[]>();
currentTab = 1
constructor(private toastr: ToastrService,
private competencyGroupGradeService: CompetencyGroupGradeService,
private cdr: ChangeDetectorRef) { }
ngOnInit(): void {
this.dataOriginal = JSON.parse(JSON.stringify(this.dataSelect || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }))
}
clear() {
this.dataSelect = JSON.parse(JSON.stringify(this.dataOriginal || { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }))
}
backTab() {
this.sendBackTab.emit();
}
postCompetencyGroupGrade() {
this.competencyGroupGradeService.post(new MyCompetencyGroupGradeModel({ groupGradeId: this.dataSelect.code, tdesc: this.dataSelect.tdesc, edesc: this.dataSelect.edesc, competencyGrades: this.dataSelect.competencyGrades })).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
this.getCompetencyGroupGradeList()
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
getCompetencyGroupGradeList() {
this.competencyGroupGradeService.getList().subscribe({
next: response => {
this.sendDataList.emit(response.map(x => ({ check: false, code: x.groupGradeId, tdesc: x.tdesc, edesc: x.edesc, competencyGrades: x.competencyGrades })))
this.cdr.detectChanges()
}
})
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
}
src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { CompetencyGradeModel, MyCompetencyGradeModel } from 'src/app/shared/model/competency-grades.model';
import { MyCompetencyGroupGradeModel } from 'src/app/shared/model/competency-group-grade.model';
import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
export interface DataModel {
check: boolean;
code: string;
details: string;
grade: string;
highscore: string;
lowscore: string;
weight: string;
check: boolean
code: string
tdesc: string
edesc: string
competencyGrades: CompetencyGradeModel[]
}
@Component({
......@@ -17,49 +18,38 @@ export interface DataModel {
styleUrls: ['./sub-grade-registration.component.scss'],
})
export class SubGradeRegistrationComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
modalStatus: "add" | "edit" = "add"
addTab = false;
editTab = false;
@Input() dataSelect: DataModel = { check: false, code: '', tdesc: '', edesc: '', competencyGrades: [] }
@Output() sendDataSelect: EventEmitter<DataModel> = new EventEmitter<DataModel>();
competencyGrade: { select: CompetencyGradeModel, dataList: { check: boolean, data: CompetencyGradeModel }[] } = { select: new MyCompetencyGradeModel({}), dataList: [] }
currentPage = 1;
page = Array.from({ length: 1 }, (_, i) => i + 1);
numDataListChecked = 0;
isDataListChecked = false;
isDataListCheckedAll = false;
search = '';
dataList: DataModel[] = [
{ check: false, code: '01A', details: 'ระดับ A', grade: 'A', highscore: '100', lowscore: '80', weight: '1' },
{ check: false, code: '01B', details: 'ระดับ B', grade: 'B', highscore: '79', lowscore: '70', weight: '1' },
{ check: false, code: '01C', details: 'ระดับ C', grade: 'C', highscore: '69', lowscore: '60', weight: '1' },
{ check: false, code: '01D', details: 'ระดับ D', grade: 'D', highscore: '59', lowscore: '50', weight: '1' },
{ check: false, code: '01F', details: 'ระดับ F', grade: 'F', highscore: '49', lowscore: '0', weight: '1' },
];
constructor(private toastr: ToastrService) {
this.pathTitleChange();
modalStatus: 'add' | 'edit' | 'delete' = 'add'
constructor(private toastr: ToastrService,
private competencyGroupGradeService: CompetencyGroupGradeService,
private cdr: ChangeDetectorRef
) {
}
pathTitleChange() {
this.sendPathTitle.emit(
this.addTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'เพิ่มกลุ่มเกรด']
: this.editTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'แก้ไขกลุ่มเกรด']
: ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด']
);
ngOnInit(): void {
this.competencyGrade.dataList = this.dataSelect.competencyGrades.map(x => ({ check: false, data: x }))
this.searchChange()
}
searchChange() {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
selectData(data?: { check: boolean, data: CompetencyGradeModel }) {
this.competencyGrade.select = new MyCompetencyGradeModel(data?.data || {})
}
dataListFilter() {
return this.dataList.filter((x) => {
const match = x.code.includes(this.search) || x.details.includes(this.search);
return this.competencyGrade.dataList.filter((x) => {
const data = x.data
const match = data.gradeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match;
});
......@@ -67,38 +57,47 @@ export class SubGradeRegistrationComponent {
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListChecked = dataCheck.some((x) => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every((x) => x.check) : false;
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
this.numDataListChecked = dataCheck.filter((x) => x.check).length;
}
dataListCheckAll() {
this.isDataListCheckedAll = !this.isDataListCheckedAll;
const selectAll = this.isDataListCheckedAll;
this.dataList.forEach((x) => (x.check = selectAll));
this.dataListCheck(); // อัปเดตสถานะการเช็ก
}
showSuccessAdd() {
this.toastr.success('เพิ่มข้อมูลสำเร็จ!', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
this.competencyGrade.dataList = this.competencyGrade.dataList.filter((x) => {
const data = x.data
const match = data.gradeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
if (!match) x.check = false;
return match;
}).map(x => ({ ...x, check: selectAll }));
this.dataListCheck();
}
showSuccessEdit() {
this.toastr.success('แก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
updateCompetencyGroupGrade() {
switch (this.modalStatus) {
case 'add': {
this.competencyGrade.dataList.push({ check: false, data: this.competencyGrade.select })
this.cdr.detectChanges()
break
}
case 'edit': {
this.competencyGrade.dataList = this.competencyGrade.dataList.map(x => x.data.gradeId == this.competencyGrade.select.gradeId ? { check: false, data: this.competencyGrade.select } : x)
this.cdr.detectChanges()
break
}
case 'delete': {
this.competencyGrade.dataList = this.competencyGrade.select.gradeId ? this.competencyGrade.dataList.filter(x => x.data.gradeId != this.competencyGrade.select.gradeId) : this.competencyGrade.dataList.filter(x => !x.check)
this.cdr.detectChanges()
break
}
}
this.sendDataSelect.emit({ ...this.dataSelect, competencyGrades: this.competencyGrade.dataList.map(x => x.data) })
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
addUser() {
}
}
src/app/components/dashboard/dashboard.module.ts
......@@ -104,8 +104,7 @@ import { EvaluationFactorsComponent } from '../performance-management-evaluation
import { DefineEvaluationFactorsComponent } from '../performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component';
import { GradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-registration.component';
import { GradeManagementComponent } from '../competency-assessment/grade-registration/grade-management/grade-management.component';
import { AddGroupGradeComponent } from '../competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component';
import { EditGroupGradeComponent } from '../competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component';
import { GroupGradeComponent } from '../competency-assessment/grade-registration/grade-management/group-grade/group-grade.component';
import { SubGradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component';
import { SettingPerformanceEvalutionComponent } from '../performance-management-evaluation/setting-performance-evalution/setting-performance-evalution.component';
import { AssessmentSystemConfigurationComponent } from '../performance-management-evaluation/setting-performance-evalution/assessment-system-configuration/assessment-system-configuration.component';
......@@ -130,6 +129,7 @@ import { NativeDateAdapter } from '@angular/material/core';
import { BranchService } from 'src/app/shared/services/่branch.service';
import { JobCodeService } from 'src/app/shared/services/่job-code.service';
import { FileService } from 'src/app/shared/services/file.service';
import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.service';
export const MY_DATE_FORMATS = {
parse: {
......@@ -240,8 +240,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
DefineEvaluationFactorsComponent,
GradeRegistrationComponent,
GradeManagementComponent,
AddGroupGradeComponent,
EditGroupGradeComponent,
GroupGradeComponent,
SubGradeRegistrationComponent,
SettingPerformanceEvalutionComponent,
AssessmentSystemConfigurationComponent,
......@@ -290,6 +289,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
JobCodeService,
BranchService,
FileService,
CompetencyGroupGradeService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
......
src/app/components/performance-evaluation/self-evaluation/self-evaluation.component.html
......@@ -318,4 +318,4 @@
</table>
</div>
</div>
</ng-template>
</ng-template>
\ No newline at end of file
src/app/shared/model/competency-grades.model.ts 0 → 100644
export interface CompetencyGradeModel {
gradeId: string
companyId: string
edesc: string
tdesc: string
gradeDetail: string
gradeMaxScore: number
gradeMinScore: number
weight: number
}
export class MyCompetencyGradeModel implements CompetencyGradeModel {
gradeId: string
companyId: string
edesc: string
tdesc: string
gradeDetail: string
gradeMaxScore: number
gradeMinScore: number
weight: number
constructor(data: Partial<CompetencyGradeModel>) {
this.gradeId = data.gradeId || ""
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
this.gradeDetail = data.gradeDetail || ""
this.gradeMaxScore = data.gradeMaxScore ?? 0
this.gradeMinScore = data.gradeMinScore ?? 0
this.weight = data.weight ?? 0
}
}
src/app/shared/model/competency-group-grade.model.ts 0 → 100644
import { CompetencyGradeModel, MyCompetencyGradeModel } from "./competency-grades.model"
export interface CompetencyGroupGradeModel {
groupGradeId: string
companyId: string
edesc: string
tdesc: string
competencyGrades: CompetencyGradeModel[]
}
export class MyCompetencyGroupGradeModel implements CompetencyGroupGradeModel {
groupGradeId: string
companyId: string
edesc: string
tdesc: string
competencyGrades: CompetencyGradeModel[]
constructor(data: Partial<CompetencyGroupGradeModel>) {
this.groupGradeId = data.groupGradeId || ""
this.companyId = data.companyId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.competencyGrades = data.competencyGrades?.map(x => (new MyCompetencyGradeModel(x))) || []
}
}
src/app/shared/services/competency-group-grade.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AlertModel } from '../model/alert.model';
import { CompetencyGroupGradeModel } from '../model/competency-group-grade.model';
@Injectable({
providedIn: 'root'
})
export class CompetencyGroupGradeService {
api = "/competency-group-grade"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getById(plId: string): Observable<CompetencyGroupGradeModel> {
return this.http.get<CompetencyGroupGradeModel>(this.urlApi + "/" + plId)
}
getList(): Observable<CompetencyGroupGradeModel[]> {
return this.http.get<CompetencyGroupGradeModel[]>(this.urlApi + "/lists")
}
post(body: CompetencyGroupGradeModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: CompetencyGroupGradeModel | CompetencyGroupGradeModel[]): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
\ No newline at end of file
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