Skip to content

M
myAppraisal
Commit f23fcb65 by Nattana Chaiyamat
Options

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

parent 98823242
Showing with 1175 additions and 471 deletions
src/app/components/competency-assessment/competency-management/competency-management.component.html
......@@ -32,13 +32,13 @@
<div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
<app-indicators-and-curriculum (sendPathTitle)="pathTitle=$event"></app-indicators-and-curriculum>
</div>
<div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2">
<div id="underline-2" class="hidden" role="tabpanel" aria-labelledby="underline-item-2">
<app-group-competencies *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-group-competencies>
<app-edit-group-competencies *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-group-competencies>
</div>
<div id="underline-3" role="tabpanel" aria-labelledby="underline-item-3">
<div id="underline-3" class="hidden" role="tabpanel" aria-labelledby="underline-item-3">
<app-set-approvers [pathTitle]="pathTitle" (sendPathTitle)="pathTitle=$event"></app-set-approvers>
</div>
</div>
......
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.html
<div class="header-title-type">
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-between">
<div class="flex">
<!-- Content ของ div แรก -->
<div class="flex">
<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>
ย้อนกลับ
class="ti-btn text-primary hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10 h-45px 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 class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
การจัดการตัวชี้วัดเเละหลักสูตร
</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">
</div>
</div>
<div class="flex justify-end">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-success h-45px m-0 shadow-md">
<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">
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px 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)">
......@@ -38,241 +34,309 @@
</svg>
Clear
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#edit-group-indicators-modal-add">
<i class="ti ti-file-plus"></i>
import
</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>
</div>
<div class="px-1">
<button type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 h-45px m-0 shadow-md">
<i class="ti ti-file-plus"></i>
import
</button>
</div>
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
</div>
<div class="body-content">
<div class="page">
<div class="border-b border-t border-gray-200 dark:border-white/10">
<div class="grid grid-cols-3 gap-6 mt-5">
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">รหัส Competency</label>
<div class="border-t border-gray-200 pt-10px grid grid-cols-1 space-y-6">
<div class="grid grid-cols-11">
<div class="space-y-2 col-span-2">
<label class="ti-form-label">รหัส Competency</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly>
</div>
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ประเภท</label>
<div class="col-span-1"></div>
<div class="space-y-2 col-span-2">
<label class="ti-form-label">ประเภท</label>
<input type="text" class="ti-form-input bg-input-readonly" readonly>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10 bg-input-readonly" readonly value="CC-01">
</div>
<div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10 bg-input-readonly" readonly value="CC">
</div>
<div class="space-y-2">
<label class="ti-form-label">ชื่อสมรรถนะ</label>
<textarea type="text" rows="2" class="ti-form-input bg-input-readonly" readonly></textarea>
</div>
<div class="space-y-2">
<label class="ti-form-label">นิยามสมรรถนะ</label>
<textarea type="text" rows="3" class="ti-form-input bg-input-readonly"
readonly> การส่งเสริมให้ทุกคนในองค์กรมีจจิตสำนึกด้านความปลอดภัยเเละคุณภาพ โดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับเเรก (Safety first) สวมอุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจจะเป็นสาเหตุของอุบัติเหตุรอบๆ
รวมถึงการให้ความสำคัญกับคุณรภาพของสินค้าเเละบริการที่ตนเองรับผิดชอบให้ได้มาตราฐาน(Quality Awareness)</textarea>
</div>
<label for="textarea-label" class="ti-form-label mt-10">ชื่อสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input bg-input-readonly" rows="2" cols="50" readonly>จิตสำนึกด้านความปลอดภัยเเละคุณภาพ (Safety & Quality)
</textarea>
<label for="textarea-label" class="ti-form-label mt-5">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input bg-input-readonly mb-5" rows="3" cols="50" readonly>การส่งเสริมให้ทุกคนในองค์กรมีจจิตสำนึกด้านความปลอดภัยเเละคุณภาพ โดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับเเรก (Safety first) สวมอุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจจะเป็นสาเหตุของอุบัติเหตุรอบๆ
รวมถึงการให้ความสำคัญกับคุณรภาพของสินค้าเเละบริการที่ตนเองรับผิดชอบให้ได้มาตราฐาน(Quality Awareness)
</textarea>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md htable">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1" >
<div class="overflow-auto shadow-md contenttable">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover" >
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสความคาดหวัง','ตัวชี้วัดพฤติกรรม','เครื่องมือประเมิน','หลักสูตร']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items; let i = index">
<td style="font-size: 12px; padding-left: 1.5rem; text-align:center;">{{ item[0] }}</td>
<td
style="
font-size: 12px;
padding-left: 1.5rem;
max-width: 200px; /* กำหนดความกว้างสูงสุด */
word-wrap: break-word;
white-space: pre-wrap;"
contenteditable="true"
(blur)="saveData($event,item[0])">{{ item[1] }}
</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">
<div style="display: flex; align-items: center;">
<button type="button" class="ti-btn rounded-sm ti-btn-secondary" style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
O
<div class="ciricon text-center">
<i class="ri-close-line text-red-500" data-hs-overlay="#edit-group-indicators-alert-delete-modal"></i>
<div class="page px-rem">
<div class="overflow-auto rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['รหัสความคาดหวัง','ตัวชี้วัดพฤติกรรม','เครื่องมือประเมิน','หลักสูตร']; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody *ngIf="!dataListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="dataListFilter().length">
<tr
*ngFor="let data of dataListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td class="text-center align-center">
{{ data.code }}
</td>
<td class="align-start">
<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">
<div class="col-span-11 flex align-center">
<div class="hs-tooltip ti-main-tooltip [--trigger:hover] truncate">
<div class="hs-tooltip-toggle cursor-pointer truncate">
{{item}}
<div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
{{item}}
</div>
</div>
</button>
<button type="button" style="display: flex; align-items: center; justify-content: center;">
<i class="ti ti-circle-plus text-green-500" style="font-size: 18px;" data-hs-overlay="#add-group-indicators-table-tool-modal"></i>
</button>
</div>
</div>
</td>
<td class="items-center justify-center">
<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;"
data-hs-overlay="#select-group-indicators-table-tool-modal"></i>
<div class="flex flex-col flex-grow space-y-2">
<input type="text" class="py-2 px-3 ti-form-input flex-grow" readonly placeholder="ข้อมูลตรงนี้">
<!-- <input type="text" class="py-2 px-3 ti-form-input flex-grow"> -->
<div class="col-span-1 text-center align-center">
<div class="ciricon border cursor-pointer">
<i class="ri-close-line text-red-500"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
<div id="add-group-indicators-table-tool-modal" class="hs-overlay hidden ti-modal">
</span>
</div>
<div class="flex rounded-md">
<input type="text" id="hs-trailing-button-add-on" name="hs-trailing-button-add-on"
class="ti-form-input rounded-none ltr:rounded-l-md rtl:rounded-r-md focus:z-10">
<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">
add
</button>
</div>
</td>
<td class="align-start">
<div class="grid grid-cols-1 gap-2" *ngIf="data.assessmentTools.length"
style="width: 240px !important;">
<span *ngFor="let assessmentTools of data.assessmentTools; let l=index"
class="grid grid-cols-5 text-center align-center height-20px">
<button type="button" *ngFor="let item of assessmentTools | slice: 0 : 4; let m=index"
class="ti-btn rounded-sm ti-btn-secondary text-center m-0 hs-tooltip ti-main-tooltip [--trigger:hover] flex"
[ngClass]="{'cursor-default': m < 3,
' cursor-pointer': m == 3}" style="height: 15px; width: 45px"
(click)="(m < 3 ? null :dataSelect=data);(m < 3 ? null :assessmentToolsSelect=l)"
[attr.data-hs-overlay]="m < 3 ? null : '#assessment-tools-modal'">
<ng-container [ngSwitch]="m < 3">
<ng-container *ngSwitchCase="true">
<span class="hs-tooltip-toggle">
{{item.nameShow}}
<div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
{{item.code}} : {{item.name}}
</div>
</span>
<div class="ciricon flex text-start items-center cursor-pointer">
<i class="ri-close-line text-red-500"></i>
</div>
</ng-container>
<ng-container *ngSwitchDefault>
<span class="hs-tooltip-toggle">
...
<div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
คลิกเพื่อดูเครื่องมือประเมินเพิ่มเติม
</div>
</span>
</ng-container>
</ng-container>
</button>
<button type="button" class="flex text-start items-center cursor-default">
<i class="ti ti-circle-plus text-green-500 cursor-pointer"
(click)="dataSelect=undefined;assessmentToolsSelect=-1"
data-hs-overlay="#assessment-tools-modal"></i>
</button>
</span>
<button *ngIf="!data.assessmentTools.length" type="button"
class="flex text-start items-center cursor-default">
<i class="ti ti-circle-plus text-green-500 cursor-pointer"
(click)="dataSelect=undefined;assessmentToolsSelect=-1"
data-hs-overlay="#assessment-tools-modal"></i>
</button>
</div>
</td>
<td class="items-center justify-center">
<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;"
data-hs-overlay="#curriculum-modal"></i>
<div class="flex flex-col flex-grow" *ngIf="data.curriculum.length">
<div class="grid grid-cols-1 gap-1">
<span *ngFor="let item of data.curriculum;"
class="grid grid-cols-12 border rounded-sm px-5px bg-white">
<span class="col-span-11 align-center truncate">
<div class="hs-tooltip ti-main-tooltip [--trigger:hover] flex truncate">
<div class="hs-tooltip-toggle cursor-pointer truncate">
{{item.name}}
<div class="hs-tooltip-content ti-main-tooltip-content"
role="tooltip">
{{item.name}}
</div>
</div>
</div>
</span>
<div class="col-span-1 flex justify-end items-center ">
<div class="ciricon border cursor-pointer">
<i class="ri-close-line text-red-500"></i>
</div>
</div>
</span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
<ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length) )
:(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
</div>
<div id="assessment-tools-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
เครื่องมือประเมิน
<span *ngIf="assessmentToolsSelect==-1">เพิ่ม</span>เครื่องมือประเมิน
</h3>
<div class="flex justify-end">
<button type="button"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#add-group-indicators-table-tool-modal">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#assessment-tools-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="searchModal"
(ngModelChange)="assessmentToolsModalSearchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<div class="page px-rem">
<div class="rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','Action']; let f = first; let l = last; let i = index">
*ngFor="let item of assessmentToolsSelect==-1 ? ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','Action'] : ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง'] ; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
[class.!text-center]="f||l&&item!='ชื่อที่เเสดง'">
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'เเบบสังเกตุ','O'],
['02', 'เเบบการปฏิบัติงาน','D'],
['03', 'การบันทึก/เอกสาร','P'],
['04', 'การสัมภาษณ์','I'],
['05', 'เเบบทดสอบ','T'],];let i = index">
<td class="flex justify-center" style="font-size: 12px; width: 20%; margin-left: 10px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 40%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<tbody *ngIf="!assessmentToolsListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="assessmentToolsListFilter().length">
<tr
*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>{{item.name}}</td>
<td>{{item.nameShow}}</td>
<td class="flex justify-center items-center" *ngIf="assessmentToolsSelect==-1">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#add-group-indicators-table-tool-modal">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#assessment-tools-modal">
<i class="ri-add-line"></i>
Add
Select
</button>
</div>
</td>
......@@ -280,124 +344,128 @@
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
<nav class="pagination-style-3 my-5" *ngIf="pageModal.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<a class="page-link" href="javascript:void(0);"
[class.active]="item==currentPageModal" (click)="currentPageModal=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal > pageModal.length-1 ? currentPageModal: currentPageModal+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageModal-1) * 10)+1}} to {{assessmentToolsListFilter().length<10
?assessmentToolsListFilter().length: (currentPageModal==pageModal.length ?
((currentPageModal * 10) - ((currentPageModal * 10) -
assessmentToolsListFilter().length) ) :(currentPageModal * 10) ) }} of
{{assessmentToolsListFilter().length}} items</span>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div id="select-group-indicators-table-tool-modal" class="hs-overlay hidden ti-modal">
<div id="curriculum-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-content">
<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="#select-group-indicators-table-tool-modal">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#curriculum-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
<div class="w-full min-height-50px mb-10px justify-between items-center">
<div class="flex justify-end">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name" [(ngModel)]="searchModal"
(ngModelChange)="curriculumModalSearchChange()">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<div class="page px-rem">
<div class="rounded-top-0.65rem">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead class="height-50px">
<tr class="font-size-12px">
<ng-container
*ngFor="let item of ['รหัส','ชื่อหลักสูตร','Action']; let f = first; let l = last; let i = index">
*ngFor="let item of ['รหัส','ชื่อหลักสูตร','Action'] ; let f = first; let l = last">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="30"
height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<span class="font-size-12px font-weight-700">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
<i class="ti ti-dots-vertical fs-l"></i>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['CC-01-01', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ 01-02'],
['CC-01-02', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ 03-04'],
['CC-01-03', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ S1-S2'],
['CC-01-04', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ S3-S4'],
['CC-01-05', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ M1-M2'],
['CC-01-06', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ M3-M4'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td class="flex justify-center">
<tbody *ngIf="!curriculumListFilter().length">
<tr>
<td class="text-center" colspan="100%">
ไม่พบข้อมูล
</td>
</tr>
</tbody>
<tbody *ngIf="curriculumListFilter().length">
<tr
*ngFor="let item of curriculumListFilter() | slice:((currentPageModal-1) * 10) : (((currentPageModal-1) * 10) + 10);let i = index">
<td class="flex justify-center">{{item.code}}</td>
<td>{{item.name}}</td>
<td class="flex justify-center items-center">
<div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#select-group-indicators-table-tool-modal">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#curriculum-modal">
<i class="ri-add-line"></i>
Select
</button>
......@@ -407,76 +475,559 @@
</tbody>
</table>
</div>
<nav class="pagination-style-3 my-5" *ngIf="pageModal.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page;let f = first;let l = last">
<ng-container
*ngIf="item==3&&currentPageModal!=1&&currentPageModal!=2&&currentPageModal!=3">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
<ng-container
*ngIf="(f||l)||(item==currentPageModal-1||item==currentPageModal||item==currentPageModal+1)">
<a class="page-link" href="javascript:void(0);"
[class.active]="item==currentPageModal" (click)="currentPageModal=item">{{item}}
</a>
</ng-container>
<ng-container
*ngIf="item==pageModal.length-2&&currentPageModal!=pageModal.length&&currentPageModal!=pageModal.length-1&&currentPageModal!=pageModal.length-2">
<a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
class="ri-more-line"></i>
</a>
</ng-container>
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPageModal = (currentPageModal > pageModal.length-1 ? currentPageModal: currentPageModal+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPageModal-1) * 10)+1}} to {{curriculumListFilter().length<10
?curriculumListFilter().length: (currentPageModal==pageModal.length ?
((currentPageModal * 10) - ((currentPageModal * 10) - curriculumListFilter().length)
) :(currentPageModal * 10) ) }} of {{curriculumListFilter().length}} items</span>
</ul>
</nav>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
</div>
</div>
<!-- <div class="header-title-type">
<div class="flex justify-between">
<div class="flex">
<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">
<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 type="button"
class="ti-btn ti-btn bg-pink-500/10 text-pink-500 hover:text-white hover:bg-pink-500 ring-offset-white focus:ring-pink-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
data-hs-overlay="#edit-group-indicators-modal-add">
<i class="ti ti-file-plus"></i>
import
</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>
<div id="edit-group-indicators-alert-delete-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-indicators-alert-delete-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
<div class="body-content">
<div class="page">
<div class="border-b border-t border-gray-200 dark:border-white/10">
<div class="grid grid-cols-3 gap-6 mt-5">
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">รหัส Competency</label>
</div>
<div class="col-span-1">
<label for="hs-trailing-button-add-on-with-icon" class="ti-form-label">ประเภท</label>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10 bg-input-readonly" readonly
value="CC-01">
</div>
<div class="col-span-1">
<input type="text" id="input-label" class="ti-form-input w-2/3 pr-10 bg-input-readonly" readonly
value="CC">
</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-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-group-indicators-alert-delete-modal" (click)="addUser();showSuccessDelete()">
ลบข้อมูล
</a>
<label for="textarea-label" class="ti-form-label mt-10">ชื่อสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input bg-input-readonly" rows="2" cols="50" readonly>จิตสำนึกด้านความปลอดภัยเเละคุณภาพ (Safety & Quality)
</textarea>
<label for="textarea-label" class="ti-form-label mt-5">นิยามสมรรถนะ</label>
<textarea type="text" id="detail_eng" class="ti-form-input bg-input-readonly mb-5" rows="3" cols="50"
readonly>การส่งเสริมให้ทุกคนในองค์กรมีจจิตสำนึกด้านความปลอดภัยเเละคุณภาพ โดยให้ความสำคัญกับเรื่องความปลอดภัยเป็นอันดับเเรก (Safety first) สวมอุปกรณ์ป้องกันเพื่อความปลอดภัย ระวังสิ่งที่อาจจะเป็นสาเหตุของอุบัติเหตุรอบๆ
รวมถึงการให้ความสำคัญกับคุณรภาพของสินค้าเเละบริการที่ตนเองรับผิดชอบให้ได้มาตราฐาน(Quality Awareness)
</textarea>
</div>
</div>
</div>
<div class="page px-rem">
<div class="overflow-auto table-bordered rounded-t-md htable">
<div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
<div class="overflow-auto shadow-md contenttable">
<table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัสความคาดหวัง','ตัวชี้วัดพฤติกรรม','เครื่องมือประเมิน','หลักสูตร']; let f = first; let l = last; let i = index">
<th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items; let i = index">
<td style="font-size: 12px; padding-left: 1.5rem; text-align:center;">{{ item[0] }}</td>
<td style="
font-size: 12px;
padding-left: 1.5rem;
max-width: 200px; /* กำหนดความกว้างสูงสุด */
word-wrap: break-word;
white-space: pre-wrap;" contenteditable="true" (blur)="saveData($event,item[0])">{{
item[1] }}
</td>
<td style="font-size: 12px; padding-left: 1.5rem; width: 150px;">
<div style="display: flex; align-items: center;">
<button type="button" class="ti-btn rounded-sm ti-btn-secondary"
style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
O
<div class="ciricon text-center">
<i class="ri-close-line text-red-500"
data-hs-overlay="#edit-group-indicators-alert-delete-modal"></i>
</div>
</button>
<button type="button"
style="display: flex; align-items: center; justify-content: center;">
<i class="ti ti-circle-plus text-green-500" style="font-size: 18px;"
data-hs-overlay="#add-group-indicators-table-tool-modal"></i>
</button>
</div>
</td>
<td class="items-center justify-center">
<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;"
data-hs-overlay="#select-group-indicators-table-tool-modal"></i>
<div class="flex flex-col flex-grow space-y-2">
<input type="text" class="py-2 px-3 ti-form-input flex-grow" readonly
placeholder="ข้อมูลตรงนี้">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a>
</li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
<div id="add-group-indicators-table-tool-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<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-indicators-table-tool-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อเครื่องมือประเมิน','ชื่อที่เเสดง','Action']; let f = first; let l = last; let i = index">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of[
['01', 'เเบบสังเกตุ','O'],
['02', 'เเบบการปฏิบัติงาน','D'],
['03', 'การบันทึก/เอกสาร','P'],
['04', 'การสัมภาษณ์','I'],
['05', 'เเบบทดสอบ','T'],];let i = index">
<td class="flex justify-center"
style="font-size: 12px; width: 20%; margin-left: 10px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 40%;">{{item[1]}}</td>
<td style="font-size: 12px; width: 20%;">{{item[2]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#add-group-indicators-table-tool-modal">
<i class="ri-add-line"></i>
Add
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);"
aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div id="select-group-indicators-table-tool-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out lg:!max-w-4xl lg:w-full m-3 lg:!mx-auto">
<div class="max-h-full overflow-hidden ti-modal-content">
<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="#select-group-indicators-table-tool-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body">
<div class="flex justify-end pb-1rem">
<div class="px-1">
<div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
placeholder="Search by No. or Name">
<div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i>
</div>
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div>
</div>
<div class="overflow-auto table-bordered" style="border-radius: 5px;">
<div class="overflow-auto border">
<table class="ti-custom-table ti-custom-table-head">
<thead>
<tr>
<ng-container
*ngFor="let item of ['รหัส','ชื่อหลักสูตร','Action']; let f = first; let l = last; let i = index">
<th scope="col"
class="relative px-10px py-10px bg-soft-secondary text-primary"
[class.!text-center]="f||l">
<span class="text-sm">{{ item }}</span>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==1">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
<div class="absolute top-1/2 transform -translate-y-1/2 right-0"
*ngIf="!f && i==2">
<svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
width="30" height="13" fill="currentColor" viewBox="0 0 16 16">
<path
d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
</path>
</svg>
</div>
</th>
</ng-container>
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of[
['CC-01-01', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ 01-02'],
['CC-01-02', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ 03-04'],
['CC-01-03', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ S1-S2'],
['CC-01-04', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ S3-S4'],
['CC-01-05', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ M1-M2'],
['CC-01-06', 'จิตสำนึกด้วยความปลอดภัยเเละคุณภาพ(Safety & Quality) สำหรับพนักงานระดับ M3-M4'],];let i = index">
<td class="flex justify-center" style="font-size: 12px;">{{item[0]}}</td>
<td style="font-size: 12px; width: 60%;">{{item[1]}}</td>
<td class="flex justify-center">
<div class="px-1">
<button type="button"
class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
data-hs-overlay="#select-group-indicators-table-tool-modal">
<i class="ri-add-line"></i>
Select
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="body-content" style="margin-top: 20px;">
<ul class="nav-tabs">
<div class="px-1 bg-white rounded-2 shadow justify-content-center align-items-center">
<div class="box-body">
<nav class="pagination-style-3 overflow-auto">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li><a class="page-link active" href="javascript:void(0);"
aria-current="page">1</a></li>
<li><a class="page-link" href="javascript:void(0);">2</a></li>
<li><a class="page-link" href="javascript:void(0);">3</a></li>
<li><a class="page-link" href="javascript:void(0);">4</a></li>
<li><a class="page-link" href="javascript:void(0);">5</a></li>
<li><a class="page-link" href="javascript:void(0);">...</a></li>
<li><a class="page-link" href="javascript:void(0);">31</a></li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
</ul>
<ul class="nav-tabs mt-1">
<p>Show 1 to 10 of 50 items</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="edit-group-indicators-alert-delete-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-indicators-alert-delete-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-delete-modal">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#edit-group-indicators-alert-delete-modal"
(click)="addUser();showSuccessDelete()">
ลบข้อมูล
</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.ts
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
export interface DataModel {
code: string,
behaviorIndicators: string[],
assessmentTools: AssessmentToolsModal[][],
curriculum: CurriculumModal[]
}
export interface AssessmentToolsModal {
code: string,
name: string,
nameShow: string,
}
export interface CurriculumModal {
code: string,
name: string
}
@Component({
selector: 'app-edit-group-indicators',
templateUrl: './edit-group-indicators.html',
......@@ -8,105 +22,192 @@ import { ToastrService } from 'ngx-toastr';
})
export class EditGroupIndicators implements OnInit {
@Output() sendEdit: EventEmitter<boolean> = new EventEmitter<boolean>();
activeTab: string = 'tab1';
isChecked: boolean = false;
// ข้อมูลที่จะใช้แสดงในตาราง
@Input() items: any[] = [
['1', '', 'CC'],
['2', '', 'MC'],
['3', '', 'PC']
];
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab(tab: { id: string, text: string }) {
this.activeTab = tab.id;
search = ""
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
dataList: DataModel[] = [
{
code: "1", behaviorIndicators: ["asdasdasdasdasdasdasdasdasdasddsdasdasdasdasdasdasdasdasdasdsad", "2", "3"], assessmentTools: [[
{ code: "O", nameShow: "O", name: "O" },
{ code: "A", nameShow: "A", name: "A" },
{ code: "D", nameShow: "D", name: "D" },
{ code: "O", nameShow: "O", name: "O" },
{ code: "A", nameShow: "A", name: "A" },
{ code: "D", nameShow: "D", name: "D" }
],[],[
{ code: "O", nameShow: "O", name: "O" },
]], curriculum: [{ code: "1", name: "1" }, { code: "asdasdasdasdasdasdasdasdasdasddsdasdasdasdasdasdasdasdasdasdsad", name: "asdasdasdasdasdasdasdasdasdasddsdasdasdasdasdasdasdasdasdasdsad" }, { code: "3", name: "3" }]
},
{ code: "2", behaviorIndicators: [], assessmentTools: [], curriculum: [] },
{ code: "3", behaviorIndicators: [], assessmentTools: [], curriculum: [] }
]
dataSelect?: DataModel
assessmentToolsSelect: number = -1
searchModal = ""
currentPageModal = 1
pageModal = Array.from({ length: 1 }, (_, i) => i + 1);
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() {
this.searchChange()
}
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(); // เรียกฟังก์ชันแจ้งเตือน
// });
searchChange() {
this.currentPage = 1;
const filteredData = this.dataListFilter();
this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
// เมื่อหน้าเว็บโหลดใหม่ดึงข้อมูลจาก localStorage
ngOnInit(): void {
this.items.forEach(item => {
const savedText = localStorage.getItem(`item-${item[0]}`);
if (savedText) {
item[1] = savedText; // ใช้ข้อมูลที่เก็บไว้
}
dataListFilter() {
return this.dataList.filter(x => {
const match = x.code.includes(this.search);
return match;
});
}
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 = '';
}
assessmentToolsModalSearchChange() {
this.currentPageModal = 1;
const filteredData = this.assessmentToolsListFilter();
this.pageModal = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
isAnyModalOpen(): boolean {
return Object.values(this.modalOptions).some(modal => modal.isModalOpen);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser() {
}
currentModal = "";
constructor(private toastr: ToastrService) { }
// แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
showSuccess() {
this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
assessmentToolsListFilter() {
const dataList = (this.assessmentToolsSelect > -1 && this.dataSelect) ? this.dataSelect.assessmentTools[this.assessmentToolsSelect] : this.assessmentToolsList
return dataList.filter(x => {
const match = x.code.includes(this.searchModal) || x.name.includes(this.searchModal);
return match;
});
}
showSuccessEdit() {
this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
curriculumModalSearchChange() {
this.currentPageModal = 1;
const filteredData = this.curriculumListFilter();
this.pageModal = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
}
showSuccessDelete() {
this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
curriculumListFilter() {
const dataList = this.curriculumList
return dataList.filter(x => {
const match = x.code.includes(this.searchModal) || x.name.includes(this.searchModal);
return match;
});
}
// activeTab: string = 'tab1';
// 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) { }
// // แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
// showSuccess() {
// this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
// }
// showSuccessEdit() {
// this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
// }
// showSuccessDelete() {
// this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', { timeOut: 3000, positionClass: 'toast-top-right' });
// }
}
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html
......@@ -13,7 +13,7 @@
</div>
</div>
<div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<button type="button" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
......@@ -53,7 +53,8 @@
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td class="flex justify-center">
<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)="editTab=true;pathTitleChange()"></i>
<i class="ti ti-file-download cursor-pointer i-gray fs-l px-1"></i>
</td>
</tr>
......@@ -63,7 +64,7 @@
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
<a aria-label="anchor" class="page-link !pl-0" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
......@@ -91,6 +92,11 @@
</a>
</li>
</ul>
<ul class="nav-tabs mt-3">
<span>Show {{((currentPage-1) * 10)+1}} to {{dataListFilter().length<10 ?dataListFilter().length:
(currentPage==page.length ? ((currentPage * 10) - ((currentPage * 10) - dataListFilter().length)
) :(currentPage * 10) ) }} of {{dataListFilter().length}} items</span>
</ul>
</nav>
</div>
</ng-container>
......
src/app/components/competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.ts
......@@ -14,8 +14,8 @@ export class IndicatorsAndCurriculumComponent {
@Output() sendPathTitle: EventEmitter<string[]> = new EventEmitter<string[]>();
editTab = false
currentPage = 1
page = Array.from({ length: 1 }, (_, i) => i + 1);
search = ""
page = Array.from({ length: 1 }, (_, i) => i + 1);
dataList: DataModel[] = [
{ code: "CC-01", name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)", type: "CC" },
......@@ -23,10 +23,11 @@ export class IndicatorsAndCurriculumComponent {
{ 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" }
{ code: "PC-01", name: "ความรู้ด้านกฎหมายแรงงาน, กฎหมายแพ่งพาณิชย์, กฎหมายอาญา", type: "PC" },
]
constructor(private toastr: ToastrService) {
this.pathTitleChange()
this.searchChange()
}
pathTitleChange() {
......@@ -76,5 +77,7 @@ export class IndicatorsAndCurriculumComponent {
editUser() {
console.log('แก้ไขผู้ใช้งาน');
}
}
src/assets/css/style.css
......@@ -3785,6 +3785,9 @@ select option:focus {
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-11 {
grid-column: span 11 / span 11;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
......@@ -4737,6 +4740,9 @@ select option:focus {
.cursor-text {
cursor: text;
}
.cursor-default {
cursor: default;
}
.select-all {
-webkit-user-select: all;
-moz-user-select: all;
......@@ -4800,6 +4806,24 @@ select option:focus {
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-auto {
grid-template-columns: auto;
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
......@@ -6297,6 +6321,10 @@ select option:focus {
.pr-50px {
padding-right: 50px;
}
.px-5px {
padding-left: 5px;
padding-right: 5px;
}
.px-10px {
padding-left: 10px;
padding-right: 10px;
......@@ -24778,29 +24806,45 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
margin-top: 20px !important;
}
.swal2-styled.swal2-confirm.\!swal2-button-bg-green {
background-color: #1DBE5A !important;
background-color: #1dbe5a !important;
border-radius: 20px !important;
}
.swal2-styled.swal2-confirm.\!swal2-button-bg-green:focus {
box-shadow: 0 0 0 0px rgba(110, 120, 129, 0.5) !important;
}
.swal2-styled.swal2-cancel.\!swal2-button-bg-gray {
background-color: #B3B3B3 !important;
background-color: #b3b3b3 !important;
border-radius: 20px !important;
}
.swal2-styled.swal2-cancel.\!swal2-button-bg-gray:focus {
box-shadow: 0 0 0 3px rgba(110, 120, 129, 0.5) !important;
}
.\!w-80px{
.\!w-80px {
width: 80px !important;
}
.\!h-80px{
.\!h-80px {
height: 80px !important;
}
.w-80px{
.w-80px {
width: 80px !important;
}
.h-80px{
.h-80px {
height: 80px !important;
}
\ No newline at end of file
}
.align-center {
align-content: center;
}
.align-start {
align-content: start;
}
.height-20px {
height: 20px;
}
.pl-0 {
padding-left: 0;
}
.\!pl-0 {
padding-left: 0 !important;
}
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