Skip to content

M
myAppraisal
Commit 78c4a887 by Nattana Chaiyamat
Options

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

parent 853b91d6
Showing with 561 additions and 325 deletions
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.html
...@@ -12,13 +12,15 @@ ...@@ -12,13 +12,15 @@
</div> </div>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-45px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-success h-45px m-0 shadow-md"
data-hs-overlay="#edit-group-indicators-alert-modal">
<i class="ri-save-3-line"></i> <i class="ri-save-3-line"></i>
Save Save
</button> </button>
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"
(click)="getIndicatorsCoursesById()">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" <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" 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)"> transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
...@@ -57,22 +59,25 @@ ...@@ -57,22 +59,25 @@
<div class="grid grid-cols-11"> <div class="grid grid-cols-11">
<div class="space-y-2 col-span-2"> <div class="space-y-2 col-span-2">
<label class="ti-form-label">รหัสสมรรถนะ</label> <label class="ti-form-label">รหัสสมรรถนะ</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly value="CC-01"> <input type="text" class="ti-form-input bg-input-readonly" readonly
[(ngModel)]="indicatorsCourses.competencyTopic.competencyTopicId">
</div> </div>
<div class="col-span-1"></div> <div class="col-span-1"></div>
<div class="space-y-2 col-span-2"> <div class="space-y-2 col-span-2">
<label class="ti-form-label">ประเภท</label> <label class="ti-form-label">ประเภท</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly value="CC"> <input type="text" class="ti-form-input bg-input-readonly" readonly
[(ngModel)]="indicatorsCourses.competencyTopic.competencyType.tdesc">
</div> </div>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="ti-form-label">ชื่อสมรรถนะ</label> <label class="ti-form-label">ชื่อสมรรถนะ</label>
<textarea type="text" rows="2" class="ti-form-input bg-input-readonly" readonly>จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)</textarea> <textarea type="text" rows="2" class="ti-form-input bg-input-readonly" readonly
[(ngModel)]="indicatorsCourses.tdesc"> </textarea>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="ti-form-label">นิยามสมรรถนะ</label> <label class="ti-form-label">นิยามสมรรถนะ</label>
<textarea type="text" rows="3" class="ti-form-input bg-input-readonly" <textarea type="text" rows="3" class="ti-form-input bg-input-readonly" readonly
readonly>การส่งเสริมให้ทุกคนในองค์กรมีจิตสำนึกด้านความปลอดภัยและคุณภาพ โดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับแรก (Safety First) สวมใส่อุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจะเป็นสาเหตุของอุบัติเหตุรอบๆตัว รวมถึงการให้ความสำคัญกับคุณภาพของสินค้าและบริการที่ตนเองรับผิดชอบให้ได้มาตรฐาน(Quality Awareness) มีส่วนร่วมในการควบคุมปริมาณของเสีย (Defect) การแก้ไขงาน(Rework) หรือการหยุดรองาน (Delay) ให้น้อยที่สุด ประสิทธิภาพและประสิทธิผลในการปฏิบัติงานหรือเครื่องจักรสูงขึ้น (Effectiveness)</textarea> [(ngModel)]="indicatorsCourses.indicatorsCourseDetailTh"></textarea>
</div> </div>
</div> </div>
</div> </div>
...@@ -110,7 +115,8 @@ ...@@ -110,7 +115,8 @@
</td> </td>
<td class="align-start"> <td class="align-start">
<div *ngIf="data.behaviorIndicators.length" class="grid grid-cols-1 gap-2 mb-2"> <div *ngIf="data.behaviorIndicators.length" class="grid grid-cols-1 gap-2 mb-2">
<span *ngFor="let item of data.behaviorIndicators;" class="grid grid-cols-12 height-20px"> <span *ngFor="let item of data.behaviorIndicators | slice:0:-1;let l=index "
class="grid grid-cols-12 height-20px">
<div class="col-span-11 flex align-center"> <div class="col-span-11 flex align-center">
<div class="hs-tooltip ti-main-tooltip [--trigger:click] truncate"> <div class="hs-tooltip ti-main-tooltip [--trigger:click] truncate">
<a class="hs-tooltip-toggle cursor-pointer truncate" href="javascript:;"> <a class="hs-tooltip-toggle cursor-pointer truncate" href="javascript:;">
...@@ -122,17 +128,22 @@ ...@@ -122,17 +128,22 @@
</div> </div>
</div> </div>
<div class="col-span-1 text-center align-center"> <div class="col-span-1 text-center align-center">
<div class="ciricon border cursor-pointer"> <div class="ciricon border cursor-pointer"
(click)="dataSelect=data;dataSelectIndex=i;behaviorIndicatorsSelectIndex=l;deleteBehaviorIndicators()">
<i class="ri-close-line text-red-500"></i> <i class="ri-close-line text-red-500"></i>
</div> </div>
</div> </div>
</span> </span>
</div> </div>
<div class="flex rounded-md"> <div class="flex rounded-md">
<input type="text" id="hs-trailing-button-add-on" name="hs-trailing-button-add-on" <input type="text"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10"> class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10"
[(ngModel)]="data.behaviorIndicators[data.behaviorIndicators.length-1]">
<button type="button" <button type="button"
class="py-2 px-3 inline-flex flex-shrink-0 justify-center items-center gap-2 ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm"> class="py-2 px-3 inline-flex flex-shrink-0 justify-center items-center gap-2 ltr:rounded-r-md rtl:rounded-l-md border border-transparent font-semibold bg-secondary text-white hover:bg-secondary focus:z-10 focus:outline-none focus:ring-0 focus:ring-secondary transition-all text-sm"
[ngClass]="{'ti-btn-disabled': !data.behaviorIndicators[data.behaviorIndicators.length-1]}"
[disabled]="!data.behaviorIndicators[data.behaviorIndicators.length-1]"
(click)="dataSelect=data;dataSelectIndex=i;addBehaviorIndicators()">
add add
</button> </button>
</div> </div>
...@@ -146,22 +157,24 @@ ...@@ -146,22 +157,24 @@
class="ti-btn rounded-sm ti-btn-secondary text-center m-0 hs-tooltip ti-main-tooltip flex" class="ti-btn rounded-sm ti-btn-secondary text-center m-0 hs-tooltip ti-main-tooltip flex"
[ngClass]="{'cursor-default [--trigger:click]': m < 3, [ngClass]="{'cursor-default [--trigger:click]': m < 3,
' cursor-pointer [--trigger:hover]': m == 3}" style="height: 15px; width: 45px" ' cursor-pointer [--trigger:hover]': m == 3}" style="height: 15px; width: 45px"
(click)="(m < 3 ? null :dataSelect=data);(m < 3 ? null :assessmentToolsSelect=l)" (click)="(m < 3 ? null :dataSelectIndex=i);(m < 3 ? null :assessmentToolsSelectIndex=[l,m])"
[attr.data-hs-overlay]="m < 3 ? null : '#assessment-tools-modal'"> [attr.data-hs-overlay]="m < 3 ? null : '#assessment-tools-modal'">
<ng-container [ngSwitch]="m < 3"> <ng-container [ngSwitch]="m < 3">
<ng-container *ngSwitchCase="true"> <ng-container *ngSwitchCase="true">
<a class="hs-tooltip-toggle" href="javascript:;"> <a class="hs-tooltip-toggle" href="javascript:;">
{{item.nameShow}} {{item.code}}
<div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip"> <div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
{{item.code}} : {{item.name}} {{item.code}} : {{item.name}}
</div> </div>
</a> </a>
<div class="ciricon flex text-start items-center cursor-pointer"> <div class="ciricon flex text-start items-center cursor-pointer"
(click)="assessmentToolsSelectIndex=[l,m];deleteAssessmentTools()">
<i class="ri-close-line text-red-500"></i> <i class="ri-close-line text-red-500"></i>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngSwitchDefault> <ng-container *ngSwitchDefault>
<a class="hs-tooltip-toggle" href="javascript:;"> <a class="hs-tooltip-toggle" href="javascript:;"
(click)="dataSelectIndex=i;assessmentToolsSelectIndex=[l,m]">
... ...
<div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip"> <div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
คลิกเพื่อดูเครื่องมือประเมินเพิ่มเติม คลิกเพื่อดูเครื่องมือประเมินเพิ่มเติม
...@@ -172,14 +185,14 @@ ...@@ -172,14 +185,14 @@
</button> </button>
<button type="button" class="flex text-start items-center cursor-default"> <button type="button" class="flex text-start items-center cursor-default">
<i class="ti ti-circle-plus text-green-500 cursor-pointer" <i class="ti ti-circle-plus text-green-500 cursor-pointer"
(click)="dataSelect=undefined;assessmentToolsSelect=-1" (click)="dataSelectIndex=i;dataSelect=data;assessmentToolsSelectIndex=[l,data.assessmentTools.length]"
data-hs-overlay="#assessment-tools-modal"></i> data-hs-overlay="#assessment-tools-modal"></i>
</button> </button>
</span> </span>
<button *ngIf="!data.assessmentTools.length" type="button" <button *ngIf="!data.assessmentTools.length" type="button"
class="flex text-start items-center cursor-default"> class="flex text-start items-center cursor-default">
<i class="ti ti-circle-plus text-green-500 cursor-pointer" <i class="ti ti-circle-plus text-green-500 cursor-pointer"
(click)="dataSelect=undefined;assessmentToolsSelect=-1" (click)="dataSelectIndex=i;dataSelect=data;assessmentToolsSelectIndex=[0,data.assessmentTools.length]"
data-hs-overlay="#assessment-tools-modal"></i> data-hs-overlay="#assessment-tools-modal"></i>
</button> </button>
</div> </div>
...@@ -187,14 +200,15 @@ ...@@ -187,14 +200,15 @@
<td class="items-center justify-center"> <td class="items-center justify-center">
<div class="flex items-center w-full space-x-2"> <div class="flex items-center w-full space-x-2">
<i class="ti ti ti-book cursor-pointer i-gray px-1" style="font-size: 28px;" <i class="ti ti ti-book cursor-pointer i-gray px-1" style="font-size: 28px;"
data-hs-overlay="#curriculum-modal"></i> (click)="dataSelectIndex=i" data-hs-overlay="#curriculum-modal"></i>
<div class="flex flex-col flex-grow" *ngIf="data.curriculum.length"> <div class="flex flex-col flex-grow" *ngIf="data.curriculum.length">
<div class="grid grid-cols-1 gap-1"> <div class="grid grid-cols-1 gap-1">
<span *ngFor="let item of data.curriculum;" <span *ngFor="let item of data.curriculum;let l=index"
class="grid grid-cols-12 border rounded-sm px-5px bg-white"> class="grid grid-cols-12 border rounded-sm px-5px bg-white">
<span class="col-span-11 align-center truncate"> <span class="col-span-11 align-center truncate">
<div class="hs-tooltip ti-main-tooltip [--trigger:click] flex truncate"> <div class="hs-tooltip ti-main-tooltip [--trigger:click] flex truncate">
<a class="hs-tooltip-toggle cursor-pointer truncate" href="javascript:;"> <a class="hs-tooltip-toggle cursor-pointer truncate"
href="javascript:;">
{{item.name}} {{item.name}}
<div class="hs-tooltip-content ti-main-tooltip-content" <div class="hs-tooltip-content ti-main-tooltip-content"
role="tooltip"> role="tooltip">
...@@ -205,7 +219,8 @@ ...@@ -205,7 +219,8 @@
</span> </span>
<div class="col-span-1 flex justify-end items-center "> <div class="col-span-1 flex justify-end items-center ">
<div class="ciricon border cursor-pointer"> <div class="ciricon border cursor-pointer"
(click)="dataSelectIndex=i;curriculumSelectIndex=l;deleteCurriculumList()">
<i class="ri-close-line text-red-500"></i> <i class="ri-close-line text-red-500"></i>
</div> </div>
</div> </div>
...@@ -265,7 +280,8 @@ ...@@ -265,7 +280,8 @@
<div class="ti-modal-content"> <div class="ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
<span *ngIf="assessmentToolsSelect==-1">เพิ่ม</span>เครื่องมือประเมิน <span
*ngIf="assessmentToolsSelectIndex[1] == dataSelect.assessmentTools.length">เพิ่ม</span>เครื่องมือประเมิน
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
...@@ -280,8 +296,7 @@ ...@@ -280,8 +296,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="searchModal" placeholder="Search by No. or Name" [(ngModel)]="searchModal"
(ngModelChange)="assessmentToolsModalSearchChange()"> (ngModelChange)="assessmentToolsModalSearchChange()">
<div <div
...@@ -304,7 +319,7 @@ ...@@ -304,7 +319,7 @@
<thead class="height-50px"> <thead class="height-50px">
<tr class="font-size-12px"> <tr class="font-size-12px">
<ng-container <ng-container
*ngFor="let item of assessmentToolsSelect==-1 ? ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','การจัดการ'] : ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง'] ; let f = first; let l = last"> *ngFor="let item of (assessmentToolsSelectIndex[1] == dataSelect.assessmentTools.length) ? ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','การจัดการ'] : ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง'] ; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary" <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l&&item!='ชื่อที่เเสดง'"> [class.!text-center]="f||l&&item!='ชื่อที่เเสดง'">
<span class="font-size-12px font-weight-700">{{ item }}</span> <span class="font-size-12px font-weight-700">{{ item }}</span>
...@@ -315,24 +330,36 @@ ...@@ -315,24 +330,36 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!assessmentToolsListFilter().length"> <tbody *ngIf="assessmentToolsLoading">
<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="!assessmentToolsLoading&&!assessmentToolsListFilter().length">
<tr> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="assessmentToolsListFilter().length"> <tbody *ngIf="!assessmentToolsLoading&&assessmentToolsListFilter().length">
<tr <tr
*ngFor="let item of assessmentToolsListFilter() | slice:((currentPageModal-1) * 10) : (((currentPageModal-1) * 10) + 10);let i = index"> *ngFor="let item of assessmentToolsListFilter() | slice:((currentPageModal-1) * 10) : (((currentPageModal-1) * 10) + 10);let i = index">
<td class="flex justify-center">{{item.code}}</td> <td class="flex justify-center">{{item.code}}</td>
<td>{{item.name}}</td> <td>{{item.name}}</td>
<td>{{item.nameShow}}</td> <td>{{item.nameShow}}</td>
<td class="flex justify-center items-center" *ngIf="assessmentToolsSelect==-1"> <td class="flex justify-center items-center"
*ngIf="assessmentToolsSelectIndex[1] == dataSelect.assessmentTools.length">
<div class="px-1"> <div class="px-1">
<button type="button" <button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#assessment-tools-modal"> data-hs-overlay="#assessment-tools-modal"
(click)="addAssessmentTools(item)">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Select Select
</button> </button>
...@@ -412,8 +439,7 @@ ...@@ -412,8 +439,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="searchModal" placeholder="Search by No. or Name" [(ngModel)]="searchModal"
(ngModelChange)="curriculumModalSearchChange()"> (ngModelChange)="curriculumModalSearchChange()">
<div <div
...@@ -463,7 +489,7 @@ ...@@ -463,7 +489,7 @@
<div class="px-1"> <div class="px-1">
<button type="button" <button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#curriculum-modal"> data-hs-overlay="#curriculum-modal" (click)="addCurriculumList(item)">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Select Select
</button> </button>
...@@ -520,3 +546,41 @@ ...@@ -520,3 +546,41 @@
</div> </div>
</div> </div>
</div> </div>
<div id="edit-group-indicators-alert-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 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-indicators-alert-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-indicators-alert-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-group-indicators-alert-modal" (click)="saveIndicatorsCourses()">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.scss
...@@ -3,58 +3,58 @@ ...@@ -3,58 +3,58 @@
top: 96px; top: 96px;
z-index: 1; z-index: 1;
right: 41vw; right: 41vw;
} }
.button-help { .button-help {
position: absolute; position: absolute;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
right: 0vw; right: 0vw;
margin: 4.2rem; margin: 4.2rem;
margin-right: 10px; /* เพิ่มใหม่ 12/16*/ margin-right: 10px; /* เพิ่มใหม่ 12/16*/
} }
.htable{ .htable {
height: 400px; height: 400px;
} }
table.ti-custom-table thead { table.ti-custom-table thead {
height: 60px; height: 60px;
} }
table.ti-custom-table thead th span { table.ti-custom-table thead th span {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.ti-custom-table td{ .ti-custom-table td {
padding-left: 0.9rem; padding-left: 0.9rem;
padding-right: 1rem; padding-right: 1rem;
} }
.ti-custom-table thead th:first-child { .ti-custom-table thead th:first-child {
width: 120px; /* ปรับความกว้างตามที่ต้องการ */ width: 120px; /* ปรับความกว้างตามที่ต้องการ */
text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */ text-align: left; /* จัดตำแหน่งข้อความถ้าต้องการ */
padding-left: 2px; padding-left: 2px;
padding-right: 2px; padding-right: 2px;
} }
.ti-custom-table thead th:last-child { .ti-custom-table thead th:last-child {
width: 400px; /* ปรับความกว้างตามที่ต้องการ */ width: 400px; /* ปรับความกว้างตามที่ต้องการ */
} }
a.custom-link { a.custom-link {
padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */ padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
} }
/* สไตล์ของแถบเมนู */ /* สไตล์ของแถบเมนู */
.nav-tabs { .nav-tabs {
display: flex; display: flex;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
height: 20%; height: 20%;
} }
.nav-item { .nav-item {
list-style: none; list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */ margin-right: 10px; /* ช่องว่างระหว่างเมนู */
} }
.nav-link { .nav-link {
text-decoration: none; text-decoration: none;
padding: 10px 20px; padding: 10px 20px;
display: inline-block; display: inline-block;
...@@ -63,13 +63,13 @@ ...@@ -63,13 +63,13 @@
border-style: solid; border-style: solid;
border-color: #ccc; border-color: #ccc;
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
} }
.nav-link:hover { .nav-link:hover {
background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */ background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
} }
.nav-link.active { .nav-link.active {
color: #ffffff; /* สีตัวอักษรในสถานะ active */ color: #ffffff; /* สีตัวอักษรในสถานะ active */
font-size: large; font-size: large;
border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */ border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
...@@ -78,74 +78,58 @@ ...@@ -78,74 +78,58 @@
border-style: solid; border-style: solid;
border-color: rgb(var(--color-primary)); border-color: rgb(var(--color-primary));
border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
} }
.tab-content { .tab-content {
margin-top: 20px; margin-top: 20px;
} }
.tab-pane.active { .tab-pane.active {
display: block; display: block;
} }
.nav-item-text { .nav-item-text {
list-style: none; list-style: none;
margin-right: 10px; /* ช่องว่างระหว่างเมนู */ margin-right: 10px; /* ช่องว่างระหว่างเมนู */
} }
.nav-link-text { .nav-link-text {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: large; font-size: large;
color: #569bf5; color: #569bf5;
border-bottom: 2px solid #569bf5; border-bottom: 2px solid #569bf5;
line-height: 0.8; line-height: 0.8;
} }
.ti-pagination .page-link.active { .ti-pagination .page-link.active {
background-color: #569bf5; background-color: #569bf5;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
padding: 8px 12px; padding: 8px 12px;
} }
.box-body{ .box-body {
padding: 0rem; padding: 0rem;
} }
.page{ .page {
min-height: 0vh; 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 { .header-title-type {
width: 100%; width: 100%;
min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */ min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */ justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
align-items: center; /* จัดกลางแนวตั้ง */ align-items: center; /* จัดกลางแนวตั้ง */
padding-top: 50px; padding-top: 50px;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.body-content{ .body-content {
margin-bottom: 30px; margin-bottom: 30px;
overflow-y: auto; overflow-y: auto;
} }
.bg-input-readonly{ .bg-input-readonly {
background-color: rgb(241 245 249); background-color: rgb(241 245 249);
} }
.ciricon { .ciricon {
height: 12px; /* กำหนดความสูงของวงกลม */ height: 12px; /* กำหนดความสูงของวงกลม */
...@@ -161,4 +145,3 @@ ...@@ -161,4 +145,3 @@
.ri-close-line { .ri-close-line {
font-size: 15px; /* ขนาดไอคอน */ font-size: 15px; /* ขนาดไอคอน */
} }
\ No newline at end of file
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core'; import { Component, EventEmitter, Input, Output, OnInit, ChangeDetectorRef } from '@angular/core';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { AssessmentModel } from 'src/app/shared/model/assessment.model';
import { MyCompetencyAssessmentModel } from 'src/app/shared/model/competency-assessment.model';
import { MyCompetencyCourseModel } from 'src/app/shared/model/competency-course.model';
import { MyCompetencyIndicatorsCourses1ListModel } from 'src/app/shared/model/competency-indicators-courses1-list.model';
import { MyCompetencyIndicatorsCourses2ListModel } from 'src/app/shared/model/competency-indicators-courses2-list.model';
import { CompetencytopicModel, MyCompetencytopicModel } from 'src/app/shared/model/competencytopic.model';
import { IndicatorsCoursesModel, MyIndicatorsCoursesModel } from 'src/app/shared/model/indicators-courses.model';
import { AssessmentService } from 'src/app/shared/services/assessment.service';
import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
import { IndicatorsCoursesService } from 'src/app/shared/services/indicators-courses.service';
export interface DataModel { export interface DataModel {
code: string, code: string,
behaviorIndicators: string[], behaviorIndicators: string[],
...@@ -21,221 +31,141 @@ export interface CurriculumModal { ...@@ -21,221 +31,141 @@ export interface CurriculumModal {
styleUrls: ['./edit-group-indicators.scss'] styleUrls: ['./edit-group-indicators.scss']
}) })
export class EditGroupIndicators implements OnInit { export class EditGroupIndicators implements OnInit {
@Input() competencytopic: CompetencytopicModel = new MyCompetencytopicModel({})
indicatorsCourses: IndicatorsCoursesModel = new MyIndicatorsCoursesModel({})
@Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
search = "" search = ""
currentPage = 1 currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
dataList: DataModel[] = [ dataList: DataModel[] = []
{ dataSelect: DataModel = {
code: "1", behaviorIndicators: ["ปฏิบัติงานโดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับแรก (Safety First) สวมใส่อุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจะเป็นสาเหตุของอุบัติเหตุรอบๆตัวให้เป็นไปตามมาตรฐานด้านความปลอดภัย และคุณภาพ", "ปฏิบัติงานตามมาตรฐานด้านความปลอดภัยและคุณภาพของหน่วยงาน", "ปฎิบัติงานไม่ให้เกิดอุบัติเหตุ และรักษาคุณภาพตามความรับผิดชอบอย่างมีประสิทธิภาพ เช่นการควบคุมปริมาณของเสีย (Defect) การแก้ไขงาน(Rework) หรือการหยุดรองาน (Delay) ของทีมงานให้น้อยที่สุด", "มีความพร้อมในการทำงานทุกๆวัน ทั้งเรื่องวินัย มาตรฐานการทำงาน และหน้าที่ตามใบกำหนดหน้าที่งาน"] code: "",
, assessmentTools: [ behaviorIndicators: [],
[ assessmentTools: [],
{ code: "O", nameShow: "O", name: "O" } curriculum: []
] }
,[ dataSelectIndex: number = -1
{ code: "O", nameShow: "O", name: "O" } behaviorIndicatorsSelectIndex: number = -1
] dataSelectAssessmentToolsIndex: number = -1
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
]
, curriculum: [{ code: "CC-01-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2" }]
},
{
code: "2", behaviorIndicators: ["ควบคุมการทำงานโดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับแรก (Safety First) สวมใส่อุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจะเป็นสาเหตุของอุบัติเหตุรอบๆตัวให้เป็นไปตามมาตรฐานด้านความปลอดภัย และคุณภาพ",
"รวบรวมข้อมูล ปริมาณของเสีย (Defect)ด้านความปลอดภัยและคุณภาพของหน่วยงานและนำเสนอผู้บังคับบัญชาได้อย่างถูกต้องและทันเวลา",
"ดูแลการปฎิบัติงานของทีมงานไม่ให้เกิดอุบัติเหตุ และรักษาคุณภาพตามความรับผิดชอบอย่างมีประสิทธิภาพ เช่นการควบคุมปริมาณของเสีย (Defect) การแก้ไขงาน(Rework) หรือการหยุดรองาน (Delay) ของทีมงานให้น้อยที่สุด",
"รายงานข้อมูล ในการแก้ไขปัญหาให้กับผู้บังคับบัญชาตามมาตรฐานที่กำหนดไว้ เพื่อไม่ให้เกิดปัญหาซ้ำ"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
]
, curriculum: [{ code: "CC-01-02", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O3-O4" }]
},
{
code: "3", behaviorIndicators: ["จัดทำมาตรฐานด้านความปลอดภัย และคุณภาพของหน่วยงานเชื่อมโยงกับนโยบายบริษัท",
"ทบทวนและปรับปรุงการปฏิบัติงานของทีมงานให้เป็นไปตามนโยบายด้านความปลอดภัยและคุณภาพ",
"อธิบายและสื่อสารข้อมูลด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบอย่างมีประสิทธิภาพ",
"แก้ไขปัญหาเบื้องต้นด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบ"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
]
, curriculum: [{ code: "CC-01-03", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S1-S2" }]
},
{
code: "4", behaviorIndicators: ["สอนงานด้านความปลอดภัย และคุณภาพของบริษัทให้กับพนักงานในหน่วยงาน",
"ติดตามและปรับปรุงการทำงานด้านความปลอดภัยและคุณภาพของทีมงาน",
"คิดวิเคราะห์เพื่อแก้ปัญหาด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบ",
"นำเสนอและจัดทำรายงานด้านความปลอดภัยและคุณภาพทั้งภาษาไทยและภาษาอังกฤษ"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
]
, curriculum: [{ code: "CC-01-04", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S3-S4" }]
},
{
code: "5", behaviorIndicators: ["เป็นพี่เลี้ยงโดยสามารถให้คำปรึกษาพนักงานเพื่อสนับสนุนนโยบายด้านความปลอดภัย และคุณภาพของบริษัท",
"วางแผนด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบ",
"ตัดสินใจเพื่อให้เกิดความปลอดภัยและคุณภาพ",
"สร้างความร่วมมือระหว่างหน่วยงานเพื่อให้เกิดความปลอดภัยและคุณภาพที่มีประสิทธิภาพ"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
]
, curriculum: [{ code: "CC-01-05", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M1-M2" }]
},
{
code: "6", behaviorIndicators: ["เป็นโค้ช และผู้สนับสนุนนโยบายด้านความปลอดภัย และคุณภาพของบริษัท",
"สร้างกลยุทธ์ด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบ",
"เป็นผู้นำในการทำงานด้วยจิตสำนึกด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบ",
"สื่อสารนโยบายการพัฒนาและปรับปรุงระบบความปลอดภัยและคุณภาพในเชิงบวกให้กับพนักงานเป็นไปตามทิศทางเดียวกับนโยบายบริษัท"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
]
, curriculum: [{ code: "CC-01-06", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M3-M4" }]
},
{
code: "7", behaviorIndicators: ["เชื่อมโยงนโยบายด้านความปลอดภัย และคุณภาพของบริษัทกับผู้บริหาร",
"จัดการให้เป็นไปตามกลยุทธ์และทิศทางด้านความปลอดภัยและคุณภาพตามสายงานที่รับผิดชอบ",
"เป็นผู้นำในการสร้างวัฒนธรรมองค์กรให้พนักงานมีจิตสำนึกด้านความปลอดภัยและคุณภาพในสายงานที่รับผิดชอบ",
"ตัดสินใจด้านความปลอดภัยและคุณภาพในสายงานที่รับผิดชอบโดยผ่านทางคณะกรรมการฯ"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
]
, curriculum: [{ code: "CC-01-07", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ E1-E2" }]
},
{
code: "8", behaviorIndicators: ["กำหนดนโยบายด้านความปลอดภัย และคุณภาพของบริษัท",
"บริหารงานให้เป็นไปตามกลยุทธ์และทิศทางด้านความปลอดภัยและคุณภาพ",
"เป็นผู้นำในการสร้างวัฒนธรรมองค์กรให้พนักงานมีจิตสำนึกด้านความปลอดภัยและคุณภาพ",
"ตัดสินใจด้านความปลอดภัยและคุณภาพ"]
, assessmentTools: [
[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" },
{ code: "D", nameShow: "D", name: "D" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
,[
{ code: "O", nameShow: "O", name: "O" }
]
]
, curriculum: [{ code: "CC-01-08", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ E3-E4" }]
},
]
dataSelect?: DataModel
assessmentToolsSelect: number = -1
searchModal = "" searchModal = ""
currentPageModal = 1 currentPageModal = 1
pageModal = Array.from({ length: 1 }, (_, i) => i + 1); pageModal = Array.from({ length: 1 }, (_, i) => i + 1);
assessmentToolsLoading = false
assessmentToolsList: AssessmentToolsModal[] = []
assessmentToolsSelectIndex: number[] = [0, 0]
curriculumList: CurriculumModal[] = []
curriculumLoading = false
curriculumSelectIndex: number = -1
dataLoading = false
constructor(private assessmentService: AssessmentService,
private cdr: ChangeDetectorRef,
private toastr: ToastrService,
private competencycourseService: CompetencycourseService,
private indicatorsCoursesService: IndicatorsCoursesService) {
assessmentToolsList: AssessmentToolsModal[] = [ }
{ code: "01", nameShow: "O", name: "แบบสังเกต" },
{ code: "02", nameShow: "D", name: "แบบการปฏิบัติงาน" },
{ code: "03", nameShow: "P", name: "การบันทึก/เอกสาร" },
{ code: "04", nameShow: "I", name: "การสัมภาษณ์" },
{ code: "05", nameShow: "T", name: "แบบทดสอบ" }
]
curriculumList: CurriculumModal[] = [
{ code: "CC-01-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O1-O2" },
{ code: "CC-01-02", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ O3-O4" },
{ code: "CC-01-03", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S1-S2" },
{ code: "CC-01-04", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ S3-S4" },
{ code: "CC-01-05", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M1-M2" },
{ code: "CC-01-06", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality) สำหรับพนักงานระดับ M3-M4" }
]
ngOnInit() { ngOnInit() {
this.getIndicatorsCoursesById()
this.getAssessmentList()
this.getCompetencycourseList()
}
getIndicatorsCoursesById() {
this.dataLoading = true
this.indicatorsCoursesService.getById(this.competencytopic.competencyTopicId).subscribe({
next: response => {
this.indicatorsCourses = new MyIndicatorsCoursesModel(response)
this.dataList = this.indicatorsCourses.competencyIndicatorsCourses1List.map(x => {
const behaviorIndicators = x.competencyIndicatorsCourses2List.map(x => x.behavioralIndicators).concat([""]);
let assessmentTools = x.competencyIndicatorsCourses2List.map(x =>
x.competencyAssessment.map(y => ({ code: y.assessmentId, nameShow: y.shortName, name: y.tdesc }))
);
while (assessmentTools.length < behaviorIndicators.length - 1) {
assessmentTools.push([]);
}
return {
code: x.lineNo + '',
behaviorIndicators,
assessmentTools,
curriculum: x.competencyCourse.map(x => ({ code: x.competencyCourseId, name: x.tdesc }))
};
});
this.dataList.sort((a, b) => +a.code - +b.code)
let maxCode = Math.max(...this.dataList.map(x => +x.code))
while (this.dataList.length < +this.indicatorsCourses.competencyTopic.expectationLevel) {
this.dataList.push({
code: (++maxCode) + "",
behaviorIndicators: [""],
assessmentTools: [],
curriculum: []
})
}
this.dataLoading = false
this.searchChange() this.searchChange()
this.cdr.detectChanges()
}, error: error => {
this.dataLoading = false
this.cdr.detectChanges()
}
})
}
deleteBehaviorIndicators() {
if (this.dataSelectIndex > -1) {
this.dataList[this.dataSelectIndex].assessmentTools = this.dataList[this.dataSelectIndex].assessmentTools.filter((_, i) => i != this.behaviorIndicatorsSelectIndex)
this.dataList[this.dataSelectIndex].behaviorIndicators = this.dataList[this.dataSelectIndex].behaviorIndicators.filter((_, i) => i != this.behaviorIndicatorsSelectIndex)
}
}
addBehaviorIndicators() {
if (this.dataSelectIndex > -1) {
this.dataList[this.dataSelectIndex].assessmentTools.push([])
this.dataList[this.dataSelectIndex].behaviorIndicators.push("")
}
}
getAssessmentList() {
this.assessmentToolsLoading = true
this.assessmentService.getList().subscribe({
next: response => {
this.assessmentToolsList = response.map(x => (
{ code: x.assessmentId, nameShow: x.shortName, name: x.tdesc }
))
this.assessmentToolsLoading = false
this.cdr.detectChanges()
}, error: error => {
this.assessmentToolsLoading = false
this.cdr.detectChanges()
}
}
)
}
deleteAssessmentTools() {
if (this.dataSelectIndex > -1) {
this.dataList[this.dataSelectIndex].assessmentTools[this.assessmentToolsSelectIndex[0]] = this.dataList[this.dataSelectIndex].assessmentTools[this.assessmentToolsSelectIndex[0]].filter((_, i) => i != this.assessmentToolsSelectIndex[1])
}
}
addAssessmentTools(data: AssessmentToolsModal) {
if (this.dataSelectIndex > -1) this.dataList[this.dataSelectIndex].assessmentTools[this.assessmentToolsSelectIndex[0]].push(data)
}
deleteCompetencycourse() {
if (this.dataSelectIndex > -1) {
this.dataList[this.dataSelectIndex].curriculum = this.dataList[this.dataSelectIndex].curriculum.filter((_, i) => i != this.curriculumSelectIndex)
}
}
addCompetencycourse(data: CurriculumModal) {
if (this.dataSelectIndex > -1) this.dataList[this.dataSelectIndex].curriculum.push(data)
}
getCompetencycourseList() {
this.curriculumLoading = true
this.competencycourseService.getList().subscribe({
next: response => {
this.curriculumList = response.map(x => ({ code: x.competencyCourseId, name: x.tdesc }))
this.curriculumLoading = false
this.cdr.detectChanges()
}, error: error => {
this.curriculumLoading = false
this.cdr.detectChanges()
}
})
} }
onEdit() { onEdit() {
this.sendEdit.emit(false); this.sendEdit.emit(false);
...@@ -258,22 +188,84 @@ export class EditGroupIndicators implements OnInit { ...@@ -258,22 +188,84 @@ export class EditGroupIndicators implements OnInit {
this.pageModal = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); this.pageModal = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
} }
assessmentToolsListFilter() { assessmentToolsListFilter() {
const dataList = (this.assessmentToolsSelect > -1 && this.dataSelect) ? this.dataSelect.assessmentTools[this.assessmentToolsSelect] : this.assessmentToolsList if (this.dataSelectIndex > -1) {
return dataList.filter(x => { const assessmentTools = this.dataList[this.dataSelectIndex].assessmentTools.length ? this.dataList[this.dataSelectIndex].assessmentTools[this.assessmentToolsSelectIndex[0]] : []
const dataList = (this.assessmentToolsSelectIndex[1] == this.dataSelect.assessmentTools.length) ?
this.assessmentToolsList.filter(x => !assessmentTools.some(y => y.code == x.code)) :
this.dataList[this.dataSelectIndex].assessmentTools[this.assessmentToolsSelectIndex[0]]
return dataList?.filter(x => {
const match = x.code.includes(this.searchModal) || x.name.includes(this.searchModal); const match = x.code.includes(this.searchModal) || x.name.includes(this.searchModal);
return match; return match;
}); }) || []
}
return []
} }
curriculumModalSearchChange() { curriculumModalSearchChange() {
this.currentPageModal = 1; this.currentPageModal = 1;
const filteredData = this.curriculumListFilter(); const filteredData = this.curriculumListFilter();
this.pageModal = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1); this.pageModal = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
} }
curriculumListFilter() { curriculumListFilter() {
const dataList = this.curriculumList if (this.dataSelectIndex > -1) {
const dataList = this.curriculumList.filter(x => !this.dataList[this.dataSelectIndex].curriculum.some(y => y.code == x.code))
return dataList.filter(x => { return dataList.filter(x => {
const match = x.code.includes(this.searchModal) || x.name.includes(this.searchModal); const match = x.code.includes(this.searchModal) || x.name.includes(this.searchModal);
return match; return match;
}); });
} }
return []
}
addCurriculumList(data: CurriculumModal) {
if (this.dataSelectIndex > -1) {
this.dataList[this.dataSelectIndex].curriculum.push(data)
}
}
deleteCurriculumList() {
if (this.dataSelectIndex > -1) {
this.dataList[this.dataSelectIndex].curriculum = this.dataList[this.dataSelectIndex].curriculum.filter((_, i) => i != this.curriculumSelectIndex)
}
}
saveIndicatorsCourses() {
const body = new MyIndicatorsCoursesModel({
...this.indicatorsCourses,
competencyIndicatorsCourses1List: this.dataList.map(x =>
new MyCompetencyIndicatorsCourses1ListModel({
competencyCourse: x.curriculum.map(y => new MyCompetencyCourseModel({
competencyCourseId: y.code,
tdesc: y.name
})),
competencyCourseId: x.curriculum.map(y => y.code).join(","),
competencyIndicatorsCourses2List: x.assessmentTools.map((y, i) => new MyCompetencyIndicatorsCourses2ListModel({
assessmentId: y.map(z => z.code).join(','),
behavioralIndicators: x.behaviorIndicators[i],
competencyAssessment: y.map(z => new MyCompetencyAssessmentModel({
assessmentId: z.code,
tdesc: z.name,
shortName: z.nameShow
}))
}))
}))
})
this.indicatorsCoursesService.post(body).subscribe({
next: response => {
if (response.success) {
this.showAlert(response.message, 'success')
} else {
this.showAlert(response.message, 'error')
}
}, error: error => {
this.showAlert(error.message, 'error')
}
})
}
showAlert(text: string, type: 'success' | 'error') {
this.toastr[type](text, 'แจ้งเตือน', {
timeOut: 3000,
positionClass: 'toast-top-right',
})
}
} }
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html
...@@ -3,8 +3,7 @@ ...@@ -3,8 +3,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<div class="flex pr-2"> <div class="flex pr-2">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()"> [(ngModel)]="search" (ngModelChange)="searchChange()">
<div <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"> 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 @@ ...@@ -35,14 +34,24 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </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> <tr>
<td class="text-center" colspan="100%"> <td class="text-center" colspan="100%">
ไม่พบข้อมูล ไม่พบข้อมูล
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="dataListFilter().length"> <tbody *ngIf="!dataLoading&&dataListFilter().length">
<tr <tr
*ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index"> *ngFor="let item of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center"> <td class="text-center">
...@@ -52,7 +61,8 @@ ...@@ -52,7 +61,8 @@
<td class="text-center">{{item.type}}</td> <td class="text-center">{{item.type}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-eye cursor-pointer i-gray fs-l px-1"></i> <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> <i class="ti ti-file-download cursor-pointer i-gray fs-l px-1"></i>
</td> </td>
</tr> </tr>
...@@ -101,5 +111,6 @@ ...@@ -101,5 +111,6 @@
<ng-container *ngIf="editTab"> <ng-container *ngIf="editTab">
<app-edit-group-indicators (sendEdit)="editTab=$event;pathTitleChange()"></app-edit-group-indicators> <app-edit-group-indicators [competencytopic]="indicatorsCourses"
(sendEdit)="editTab=$event;pathTitleChange()"></app-edit-group-indicators>
</ng-container> </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 { 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 { export interface DataModel {
code: string, code: string,
name: string, name: string,
...@@ -17,19 +19,38 @@ export class IndicatorsAndCurriculumComponent { ...@@ -17,19 +19,38 @@ export class IndicatorsAndCurriculumComponent {
search = "" search = ""
page = Array.from({ length: 1 }, (_, i) => i + 1); page = Array.from({ length: 1 }, (_, i) => i + 1);
dataList: DataModel[] = [ dataList: DataModel[] = []
{ code: "CC-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)", type: "CC" }, indicatorsCoursesList: CompetencytopicModel[] = []
{ code: "CC-02", name: "การทำงานเป็นทีมแบบ TAT (TAT Teamwork)", type: "CC" }, indicatorsCourses: CompetencytopicModel = new MyCompetencytopicModel({})
{ code: "CC-03", name: "ความรับผิดชอบในหน้าที่และโปร่งใส (Accountability & Ethics)", type: "CC" }, dataLoading = false
{ code: "MC-01", name: "การคิดเชิงกลยุทธ์ (Strategic Thinking)", type: "MC" }, constructor(private toastr: ToastrService,
{ code: "MC-02", name: "การมีทัศนคติที่เติบโต (Mindset-Growth)", type: "MC" }, private cdr: ChangeDetectorRef,
{ code: "PC-01", name: "ความรู้ด้านกฎหมายแรงงาน, กฎหมายแพ่งพาณิชย์, กฎหมายอาญา", type: "PC" }, private competencytopicService: CompetencytopicService,
] ) {
constructor(private toastr: ToastrService) {
this.pathTitleChange() this.pathTitleChange()
}
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.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() { pathTitleChange() {
this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร', 'การจัดการตัวชี้วัดเเละหลักสูตร'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร']) this.sendPathTitle.emit(this.editTab ? ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร', 'การจัดการตัวชี้วัดเเละหลักสูตร'] : ['การประเมินสมรรถนะ', 'การจัดการสมรรถนะ', 'ตัวชี้วัดเเละหลักสูตร'])
} }
......
src/app/components/dashboard/dashboard.module.ts
...@@ -130,6 +130,7 @@ import { BranchService } from 'src/app/shared/services/่branch.service'; ...@@ -130,6 +130,7 @@ import { BranchService } from 'src/app/shared/services/่branch.service';
import { JobCodeService } from 'src/app/shared/services/่job-code.service'; import { JobCodeService } from 'src/app/shared/services/่job-code.service';
import { FileService } from 'src/app/shared/services/file.service'; import { FileService } from 'src/app/shared/services/file.service';
import { CompetencyGroupGradeService } from 'src/app/shared/services/competency-group-grade.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 = { export const MY_DATE_FORMATS = {
parse: { parse: {
...@@ -290,6 +291,7 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -290,6 +291,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
BranchService, BranchService,
FileService, FileService,
CompetencyGroupGradeService, CompetencyGroupGradeService,
IndicatorsCoursesService,
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
useClass: HttpRequestInterceptor, 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