Commit 6cf36c51 by Natthaphat Pankiang

การประเมินสมรรถนะ > ทะเบียนเกรด

parent 4eb050dc
......@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
templateUrl: './edit-group-competencies.component.html',
styleUrls: ['./edit-group-competencies.component.scss']
})
export class EditGruopCompetenciesComponent {
export class EditGroupCompetenciesComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'จัดกลุ่มสมรรถนะ'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
@Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
......
......@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
templateUrl: './group-competencies.component.html',
styleUrls: ['./group-competencies.component.scss']
})
export class GruopCompetenciesComponent {
export class GroupCompetenciesComponent {
@Input() pathTitle = ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'จัดกลุ่มสมรรถนะ'];
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
@Output() sendGroupShow: EventEmitter<string> = new EventEmitter<string>();
......
<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="#add-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-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">
<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="">
<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="">
<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="underline-2" role="tabpanel"
aria-labelledby="underline-item-2">
<app-sub-grade-registration></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">
<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="#add-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="#add-group-grade-alert-add-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#add-group-grade-alert-add-modal" (click)="addUser();showSuccessAdd()">
เพิ่มข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
.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
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' });
}
}
<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
.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
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' });
}
}
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
export interface DataModel {
check: boolean;
code: string;
tdesc: string;
edesc: string;
}
@Component({
selector: 'app-grade-management',
templateUrl: './grade-management.component.html',
styleUrls: ['./grade-management.component.scss'],
})
export class GradeManagementComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
addTab = false;
editTab = false;
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: '' }
constructor(private toastr: ToastrService) {
this.pathTitleChange();
}
pathTitleChange(data?: DataModel) {
this.editTab = data ? true : false
this.dataSelect = data || { check: false, code: '', tdesc: '', edesc: '' }
this.sendPathTitle.emit(
this.addTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'เพิ่มกลุ่มเกรด']
: this.editTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'แก้ไขกลุ่มเกรด']
: ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด']
);
}
searchChange() {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.dataList.filter((x) => {
const match = x.code.includes(this.search) || x.tdesc.includes(this.search);
if (!match) x.check = false;
return match;
});
}
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListChecked = dataCheck.some((x) => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every((x) => x.check) : false;
this.numDataListChecked = dataCheck.filter((x) => x.check).length;
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.dataList.forEach((x) => (x.check = selectAll));
this.dataListCheck(); // อัปเดตสถานะการเช็ก
}
showSuccess() {
this.toastr.success('เพิ่มผู้ใช้ใหม่สำเร็จ!', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showEdit() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
});
}
addUser() {
}
}
.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
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
export interface DataModel {
check: boolean;
code: string;
details: string;
grade: string;
highscore: string;
lowscore: string;
weight: string;
}
@Component({
selector: 'app-sub-grade-registration',
templateUrl: './sub-grade-registration.component.html',
styleUrls: ['./sub-grade-registration.component.scss'],
})
export class SubGradeRegistrationComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
modalStatus: "add" | "edit" = "add"
addTab = false;
editTab = false;
currentPage = 1;
page = Array.from({ length: 1 }, (_, i) => i + 1);
numDataListChecked = 0;
isDataListChecked = false;
isDataListCheckedAll = false;
search = '';
dataList: DataModel[] = [
{ check: false, code: 'O1A', details: 'ระดับ A', grade: 'A', highscore: 'O1A', lowscore: 'O1A', weight: 'O1A' },
{ check: false, code: 'O2B', details: 'ระดับ B', grade: 'B', highscore: 'O1B', lowscore: 'O1B', weight: 'O1B' },
];
constructor(private toastr: ToastrService) {
this.pathTitleChange();
}
pathTitleChange() {
this.sendPathTitle.emit(
this.addTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'เพิ่มกลุ่มเกรด']
: this.editTab
? ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด', 'แก้ไขกลุ่มเกรด']
: ['การประเมินสมรรถนะ', 'ทะเบียนเกรด', 'การจัดการเกรด']
);
}
searchChange() {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
dataListFilter() {
return this.dataList.filter((x) => {
const match = x.code.includes(this.search) || x.details.includes(this.search);
if (!match) x.check = false;
return match;
});
}
dataListCheck() {
const dataCheck = this.dataListFilter();
this.isDataListChecked = dataCheck.some((x) => x.check);
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every((x) => x.check) : false;
this.numDataListChecked = dataCheck.filter((x) => x.check).length;
}
dataListCheckAll() {
const selectAll = this.isDataListCheckedAll;
this.dataList.forEach((x) => (x.check = selectAll));
this.dataListCheck(); // อัปเดตสถานะการเช็ก
}
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',
});
}
addUser() {
}
}
<app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
<div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
ทะเบียนเกรด
</div>
<div class="page pt-0.75rem">
<div class="border-b border-gray-200 dark:border-white/10 px-8">
<nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
<a class="font-size-16px font-weight-500 hs-tab-active:font-weight-700 hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 hover:text-secondary active"
href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
aria-controls="underline-1"
(click)="pathTitle = ['การประเมินสมรรถนะ','ทะเบียนเกรด','การจัดการเกรด']">
การจัดการเกรด
</a>
</nav>
</div>
<div class="px-2rem pt-50px">
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-grade-management (sendPathTitle)="pathTitle=$event"></app-grade-management>
</div>
</div>
</div>
</div>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: 'app-grade-registration',
templateUrl: './grade-registration.component.html',
styleUrls: ['./grade-registration.component.scss']
})
export class GradeRegistrationComponent {
pathTitle = ['การประเมินสมรรถนะ', 'ทะเบียนเกรด','การจัดการเกรด']
groupShow = '1'
}
......@@ -20,7 +20,7 @@ import { NameRegistrationComponent } from '../competency-assessment/name-registr
import { ToolRegisterComponent } from '../competency-assessment/tool-register/tool-register.component';
import { CourseRegistrationComponent } from '../competency-assessment/course-registration/course-registration.component';
import { CompetencyManagementComponent } from '../competency-assessment/competency-management/competency-management.component';
import { EditGruopCompetenciesComponent } from '../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component';
import { EditGroupCompetenciesComponent } from '../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component';
import { EvaluationCycleManagerComponent } from '../competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component';
import { SettingCompetencyComponent } from '../competency-assessment/setting-competency/setting-competency.component';
import { IdpDevelopmentPlanComponent } from '../competency-assessment/idp-development-plan/idp-development-plan.component';
......@@ -35,6 +35,7 @@ import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervi
import { EmployeeRegistrationComponent } from '../company-components/employee-registration/employee-registration.component';
import { NameRegistrationPerfomanceComponent } from '../performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component';
import { EvaluationFactorsComponent } from '../performance-management-evaluation/evaluation-factors/evaluation-factors.component';
import { GradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-registration.component';
......@@ -64,7 +65,7 @@ const routes: Routes = [
{ path: "competency-management",title: 'การจัดการสมรรถนะ', component: CompetencyManagementComponent },
{ path: "job-detail-management",title: 'การจัดการรายละเอียดงาน', component: JobDetailManagementComponent },
{ path: "course-registration",title: 'ทะเบียนหลักสูตร', component: CourseRegistrationComponent },
{ path: "edit-group-competencies",title: 'แก้ไขกลุ่มสมรรถนะ', component: EditGruopCompetenciesComponent },
{ path: "edit-group-competencies",title: 'แก้ไขกลุ่มสมรรถนะ', component: EditGroupCompetenciesComponent },
{ path: "evaluation-cycle-manager",title: 'การจัดการรอบการประเมิน', component: EvaluationCycleManagerComponent },
{ path: "setting-competency",title: 'การตั้งค่า', component: SettingCompetencyComponent },
{ path: "idp-development-plan",title: 'เเผนพัฒนา IDP', component: IdpDevelopmentPlanComponent },
......@@ -79,6 +80,7 @@ const routes: Routes = [
{ path: "employee-registration",title: 'ทะเบียนพนักงาน', component: EmployeeRegistrationComponent },
{ path: "name-registration-perfomance",title: 'ทะเบียนกำหนดชื่อ', component: NameRegistrationPerfomanceComponent },
{ path: "evaluation-factors",title: 'การประเมินจัดการประสิทธิภาพ', component: EvaluationFactorsComponent },
{ path: "grade-registration",title: 'ทะเบียนเกรด', component: GradeRegistrationComponent },
]
}
......
......@@ -63,8 +63,8 @@ import { DevelopmentCourseComponent } from '../competency-assessment/course-regi
import { CompetencyManagementComponent } from '../competency-assessment/competency-management/competency-management.component';
import { IndicatorsAndCurriculumComponent } from '../competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component';
import { EditGroupIndicators } from '../competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators';
import { GruopCompetenciesComponent } from '../competency-assessment/competency-management/group-competencies/group-competencies.component';
import { EditGruopCompetenciesComponent } from '../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component';
import { GroupCompetenciesComponent } from '../competency-assessment/competency-management/group-competencies/group-competencies.component';
import { EditGroupCompetenciesComponent } from '../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component';
import { EvaluationCycleManagerComponent } from '../competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component';
import { EvaluationCycleComponent } from '../competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component';
import { SettingCompetencyComponent } from '../competency-assessment/setting-competency/setting-competency.component';
......@@ -102,6 +102,12 @@ import { AssessmentTopicsComponent } from '../performance-management-evaluation/
import { ManagementCycleComponent } from '../performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component';
import { EvaluationFactorsComponent } from '../performance-management-evaluation/evaluation-factors/evaluation-factors.component';
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 { SubGradeRegistrationComponent } from '../competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component';
@NgModule({
declarations: [
......@@ -148,8 +154,8 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
IndicatorsAndCurriculumComponent,
ImportDataComponent,
EditGroupIndicators,
GruopCompetenciesComponent,
EditGruopCompetenciesComponent,
GroupCompetenciesComponent,
EditGroupCompetenciesComponent,
EvaluationCycleManagerComponent,
EvaluationCycleComponent,
SettingCompetencyComponent,
......@@ -185,7 +191,12 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
EditEvaluationGroupingComponent,
ManagementCycleComponent,
EvaluationFactorsComponent,
DefineEvaluationFactorsComponent
DefineEvaluationFactorsComponent,
GradeRegistrationComponent,
GradeManagementComponent,
AddGroupGradeComponent,
EditGroupGradeComponent,
SubGradeRegistrationComponent,
],
imports: [
CommonModule,
......
......@@ -121,7 +121,7 @@ export class NavService implements OnDestroy {
path: '/name-registration',
children: [
{ path: '/name-registration', title: 'ทะเบียนกำหนดชื่อ', type: 'link' },
{ path: '/dashboard/ecommerce', title: 'ทะเบียนเกรด', type: 'link' },
{ path: '/grade-registration', title: 'ทะเบียนเกรด', type: 'link' },
{ path: '/tool-register', title: 'ทะเบียนเครื่องมือ', type: 'link' },
{ path: '/course-registration', title: 'ทะเบียนหลักสูตร', type: 'link' },
{ path: '/idp-development-plan', title: 'แผนพัฒนา IDP', type: 'link' },
......
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