Skip to content

M
myAppraisal
Commit 78c4a887 by Nattana Chaiyamat
Options

การประเมินสมรรถนะ > การจัดการสมรรถนะ > ตัวชี้วัดเเละหลักสูตร

parent 853b91d6
Showing with 347 additions and 168 deletions
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.scss
.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;
}
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);
}
.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; /* กำหนดความสูงของวงกลม */
......@@ -161,4 +145,3 @@
.ri-close-line {
font-size: 15px; /* ขนาดไอคอน */
}
\ No newline at end of file
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html
......@@ -3,8 +3,7 @@
<div class="flex justify-end">
<div class="flex pr-2">
<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 by No. or Name"
<input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
......@@ -35,14 +34,24 @@
</ng-container>
</tr>
</thead>
<tbody *ngIf="!dataListFilter().length">
<tbody *ngIf="dataLoading">
<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="!dataLoading&&!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="dataListFilter().length">
<tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center">
......@@ -52,7 +61,8 @@
<td class="text-center">{{item.type}}</td>
<td class="flex justify-center">
<i class="ti ti-eye cursor-pointer i-gray fs-l px-1"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="editTab=true;pathTitleChange()"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
(click)="selectIndicatorsCourses(item);editTab=true;pathTitleChange()"></i>
<i class="ti ti-file-download cursor-pointer i-gray fs-l px-1"></i>
</td>
</tr>
......@@ -101,5 +111,6 @@
<ng-container *ngIf="editTab">
<app-edit-group-indicators (sendEdit)="editTab=$event;pathTitleChange()"></app-edit-group-indicators>
</ng-container>
<app-edit-group-indicators [competencytopic]="indicatorsCourses"
(sendEdit)="editTab=$event;pathTitleChange()"></app-edit-group-indicators>
</ng-container>
\ No newline at end of file
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.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 { CompetencytopicModel, MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.model';
import { CompetencytopicService } from 'src/app/shared/services/competencytopic.service';
export interface DataModel {
code: string,
name: string,
......@@ -17,19 +19,38 @@ export class IndicatorsAndCurriculumComponent {
search = ""
page = Array.from({ length: 1 }, (_, i) => i + 1);
dataList: DataModel[] = [
{ code: "CC-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)", type: "CC" },
{ code: "CC-02", name: "การทำงานเป็นทีมแบบ TAT (TAT Teamwork)", type: "CC" },
{ code: "CC-03", name: "ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)", type: "CC" },
{ code: "MC-01", name: "การคิดเชิงกลยุทธ์ (Strategic Thinking)", type: "MC" },
{ code: "MC-02", name: "การมีทัศนคติที่เติบโต (Mindset-Growth)", type: "MC" },
{ code: "PC-01", name: "ความรู้ด้านกฎหมายแรงงาน, กฎหมายแพ่งพาณิชย์, กฎหมายอาญา", type: "PC" },
]
constructor(private toastr: ToastrService) {
dataList: DataModel[] = []
indicatorsCoursesList: CompetencytopicModel[] = []
indicatorsCourses: CompetencytopicModel = new MyCompetencytopicModel({})
dataLoading = false
constructor(private toastr: ToastrService,
private cdr: ChangeDetectorRef,
private competencytopicService: CompetencytopicService,
) {
this.pathTitleChange()
this.searchChange()
}
ngOnInit(): void {
this.getList()
}
getList() {
this.dataLoading = true
this.competencytopicService.getList().subscribe({
next: response => {
this.dataList = response.map(x => ({ code: x.competencyTopicId, name: x.tdesc, type: x.competencyType.tdesc }))
this.indicatorsCoursesList = response
this.dataLoading = false
this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
selectIndicatorsCourses(data: DataModel) {
const indicatorsCourses = this.indicatorsCoursesList.find(x => x.competencyTopicId == data.code)
this.indicatorsCourses = new MyCompetencytopicModel(indicatorsCourses || {})
}
pathTitleChange() {
this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร', 'การจัดการตัวชี้วัดเเละหลักสูตร'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร'])
}
......@@ -78,6 +99,6 @@ export class IndicatorsAndCurriculumComponent {
console.log('แก้ไขผู้ใช้งาน');
}
}
src/app/components/dashboard/dashboard.module.ts
......@@ -130,6 +130,7 @@ 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';
import { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service';
export const MY_DATE_FORMATS = {
parse: {
......@@ -290,6 +291,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
BranchService,
FileService,
CompetencyGroupGradeService,
IndicatorsCoursesService,
{
provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor,
......
src/app/shared/model/competency-assessment.model.ts 0 → 100644
export interface CompetencyAssessmentModel {
assessmentId: string
companyId: string
edesc: string
tdesc: string
shortName: string
}
export class MyCompetencyAssessmentModel implements CompetencyAssessmentModel {
assessmentId: string
companyId: string
edesc: string
tdesc: string
shortName: string
constructor(data: Partial<CompetencyAssessmentModel>) {
this.assessmentId = data.assessmentId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.companyId = data.companyId || ""
this.shortName = data.shortName || ""
}
}
src/app/shared/model/competency-course.model.ts 0 → 100644
export interface CompetencyCourseModel {
competencyCourseId: string
companyId: string
edesc: string
tdesc: string
courseDetail: string
courseTopic: string
}
export class MyCompetencyCourseModel implements CompetencyCourseModel {
competencyCourseId: string
companyId: string
edesc: string
tdesc: string
courseDetail: string
courseTopic: string
constructor(data: Partial<CompetencyCourseModel>) {
this.competencyCourseId = data.competencyCourseId || ""
this.tdesc = data.tdesc || ""
this.edesc = data.edesc || ""
this.companyId = data.companyId || ""
this.courseDetail = data.courseDetail || ""
this.courseTopic = data.courseTopic || ""
}
}
src/app/shared/model/competency-indicators-courses1-list.model.ts 0 → 100644
import { CompetencyCourseModel, MyCompetencyCourseModel } from "./competency-course.model"
import { CompetencyIndicatorsCourses2ListModel, MyCompetencyIndicatorsCourses2ListModel } from "./competency-indicators-courses2-list.model"
export interface CompetencyIndicatorsCourses1ListModel {
lineNo: number
companyId: string
competencyCourseId: string
competencyCourse: CompetencyCourseModel[]
competencyIndicatorsCourses2List: CompetencyIndicatorsCourses2ListModel[]
}
export class MyCompetencyIndicatorsCourses1ListModel implements CompetencyIndicatorsCourses1ListModel {
lineNo: number
companyId: string
competencyCourseId: string
competencyCourse: CompetencyCourseModel[]
competencyIndicatorsCourses2List: CompetencyIndicatorsCourses2ListModel[]
constructor(data: Partial<CompetencyIndicatorsCourses1ListModel>) {
this.lineNo = data.lineNo ?? 0
this.companyId = data.companyId || ""
this.competencyCourseId = data.competencyCourseId || ""
this.competencyCourse = data.competencyCourse?.map(x => new MyCompetencyCourseModel(x)) || []
this.competencyIndicatorsCourses2List = data.competencyIndicatorsCourses2List?.map(x => new MyCompetencyIndicatorsCourses2ListModel(x)) || []
}
}
src/app/shared/model/competency-indicators-courses2-list.model.ts 0 → 100644
import { CompetencyAssessmentModel, MyCompetencyAssessmentModel } from "./competency-assessment.model"
export interface CompetencyIndicatorsCourses2ListModel {
runNo: number
companyId: string
assessmentId: string
behavioralIndicators: string
competencyAssessment: CompetencyAssessmentModel[]
}
export class MyCompetencyIndicatorsCourses2ListModel implements CompetencyIndicatorsCourses2ListModel {
runNo: number
companyId: string
assessmentId: string
behavioralIndicators: string
competencyAssessment: CompetencyAssessmentModel[]
constructor(data: Partial<CompetencyIndicatorsCourses2ListModel>) {
this.runNo = data.runNo ?? 0
this.companyId = data.companyId || ""
this.assessmentId = data.assessmentId || ""
this.behavioralIndicators = data.behavioralIndicators || ""
this.competencyAssessment = data.competencyAssessment?.map(x => new MyCompetencyAssessmentModel(x)) || []
}
}
src/app/shared/model/indicators-courses.model.ts 0 → 100644
import { CompetencyIndicatorsCourses1ListModel, MyCompetencyIndicatorsCourses1ListModel } from "./competency-indicators-courses1-list.model";
import { CompetencytopicModel, MyCompetencytopicModel } from "./competencytopic.model";
export interface IndicatorsCoursesModel {
competencyTopic: CompetencytopicModel
companyId: string
edesc: string
tdesc: string
indicatorsCourseDetailTh: string
indicatorsCourseDetailEn: string
competencyIndicatorsCourses1List: CompetencyIndicatorsCourses1ListModel[]
}
export class MyIndicatorsCoursesModel implements IndicatorsCoursesModel {
competencyTopic: CompetencytopicModel
companyId: string
edesc: string
tdesc: string
indicatorsCourseDetailTh: string
indicatorsCourseDetailEn: string
competencyIndicatorsCourses1List: CompetencyIndicatorsCourses1ListModel[]
constructor(data: Partial<IndicatorsCoursesModel>) {
this.competencyTopic = new MyCompetencytopicModel(data.competencyTopic || {})
this.companyId = data.companyId || ""
this.edesc = data.edesc || ""
this.tdesc = data.tdesc || ""
this.indicatorsCourseDetailTh = data.indicatorsCourseDetailTh || ""
this.indicatorsCourseDetailEn = data.indicatorsCourseDetailEn || ""
this.competencyIndicatorsCourses1List = data.competencyIndicatorsCourses1List?.map(x => new MyCompetencyIndicatorsCourses1ListModel(x)) || []
}
}
src/app/shared/services/indicators-courses.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 { IndicatorsCoursesModel } from '../model/indicators-courses.model';
@Injectable({
providedIn: 'root'
})
export class IndicatorsCoursesService {
api = "/indicators-courses"
urlApi = environment.baseUrl + this.api
constructor(private http: HttpClient) {
}
getList(): Observable<IndicatorsCoursesModel[]> {
return this.http.get<IndicatorsCoursesModel[]>(this.urlApi + "/lists")
}
getById(competencyIndicatorsId: string): Observable<IndicatorsCoursesModel> {
return this.http.get<IndicatorsCoursesModel>(this.urlApi + "/" + competencyIndicatorsId)
}
post(body: IndicatorsCoursesModel): Observable<AlertModel> {
return this.http.post<AlertModel>(this.urlApi, body)
}
delete(body: IndicatorsCoursesModel): Observable<AlertModel> {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body
};
return this.http.delete<AlertModel>(this.urlApi, options)
}
}
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