Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
M
myAppraisal
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
angular
myAppraisal
Commits
fea3780a
Commit
fea3780a
authored
Dec 25, 2024
by
LAPTOP-CV4JFSHE\kantavee
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
การจัดการสมรรถนะ>ตัวชี้วัดเเละหลักสูตร
parent
1cc49061
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
613 additions
and
3 deletions
+613
-3
competency-management.component.html
...ompetency-management/competency-management.component.html
+2
-3
indicators-and-curriculum.component.html
...s-and-curriculum/indicators-and-curriculum.component.html
+351
-0
indicators-and-curriculum.component.scss
...s-and-curriculum/indicators-and-curriculum.component.scss
+158
-0
indicators-and-curriculum.component.ts
...ors-and-curriculum/indicators-and-curriculum.component.ts
+100
-0
dashboard.module.ts
src/app/components/dashboard/dashboard.module.ts
+2
-0
No files found.
src/app/components/competency-management/competency-management.component.html
View file @
fea3780a
...
...
@@ -27,9 +27,8 @@
</div>
<div
class=
"mt-3 px-3rem"
>
<div
id=
"underline-1"
role=
"tabpanel"
aria-labelledby=
"underline-item-1"
>
<!-- <app-assessment-tool [pathTitle]="pathTitle"
(sendPathTitle)="pathTitle=$event"></app-assessment-tool> -->
sadasd
<app-indicators-and-curriculum
[
pathTitle
]="
pathTitle
"
(
sendPathTitle
)="
pathTitle=
$event"
></app-indicators-and-curriculum>
</div>
<div
id=
"underline-2"
role=
"tabpanel"
aria-labelledby=
"underline-item-2"
>
....
...
...
src/app/components/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.html
View file @
fea3780a
<div
class=
"header-title-type"
>
<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"
style=
"height: 40px;"
>
<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-10 m-0 shadow-md"
>
<i
class=
"ti ti-book fs-l"
></i>
Help
</button>
</div>
</div>
</div>
<div
class=
"page px-rem"
>
<div
class=
"overflow-auto table-bordered rounded-t-md"
>
<div
id=
"card-type-1"
role=
"tabpanel"
aria-labelledby=
"card-type-item-1"
>
<div
class=
"overflow-auto shadow-md"
>
<table
class=
"ti-custom-table ti-custom-table-head ti-custom-table-hover"
>
<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=
"!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[
['01', 'เเบบสังเกต','O'],
['02', 'เเบบการปฏิบัติงาน','D'],
['03', 'การบันทึก/เอกสาร','P'],
['04', 'การสัมภาษณ์','I'],
['05', 'เเบบทดสอบ','T']];let i = index"
>
<!-- <td style="font-size: 12px;" class="flex ">
<input type="checkbox" style="margin-right: 15px; transform:scale(0.7)">
{{item[0]}}
</td> -->
<td
class=
"flex justify-center items-center"
style=
"height: 40px; font-size: 12px; padding-right: 20px;"
>
<input
type=
"checkbox"
style=
"margin-right: 15px; transform: scale(0.7);"
>
<span
style=
"display: inline-block;"
class=
"w-10"
>
{{ item[0] }}
</span>
</td>
<td
style=
"font-size: 12px; padding-left: 1.5rem;"
>
{{item[1]}}
</td>
<td
style=
"font-size: 12px; padding-left: 1.5rem; width: 400px;"
>
{{item[2]}}
</td>
<td
class=
"flex justify-center"
>
<i
class=
"ti ti-edit cursor-pointer i-gray fs-l px-1"
data-hs-overlay=
"#indicators-and-curriculum-component-modal-edit"
></i>
<i
class=
"ti ti-trash cursor-pointer i-gray fs-l px-1"
data-hs-overlay=
""
></i>
</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=
"indicators-and-curriculum-component-modal-add"
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)]"
>
<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=
"#indicators-and-curriculum-component-modal-add"
>
<span
class=
"sr-only"
>
Close
</span>
<i
class=
"ti ti-circle-x fs-xxl"
></i>
</button>
</div>
</div>
<div
class=
"ti-modal-center"
>
<div
class=
"flex justify-end"
style=
"padding-right: 1rem;"
>
<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)"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
<path
d=
"M15 49A24 24 0 0 1 32 8"
></path>
<path
d=
"M49 15a24 24 0 0 1-17 41"
></path>
<polyline
points=
"15.03 40 15.03 48.97 8 48.97"
></polyline>
<polyline
points=
"48.97 24 48.97 15.03 56 15.03"
></polyline>
</g>
</svg>
Clear
</button>
</div>
<div
class=
"px-1"
>
<button
href=
"javascript:void(0);"
class=
"ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"
>
<i
class=
"ti ti-book fs-l"
></i>
Help
</button>
</div>
</div>
</div>
<div
class=
"ti-modal-body"
style=
"padding-top: 0px;"
>
<label
for=
"input-label"
class=
"ti-form-label mt-1rem"
>
รหัส *
</label>
<input
type=
"text"
id=
"input-label"
class=
"ti-form-input w-1/2"
>
<label
for=
"detail_th"
class=
"ti-form-label mt-1rem"
>
ชื่อเครื่องมือประเมิน (ไทย)*
</label>
<input
type=
"text"
id=
"detail_th"
class=
"ti-form-input w-full"
>
<label
for=
"detail_eng"
class=
"ti-form-label mt-1rem"
>
ชื่อเครื่องมือประเมิน (อังกฤษ)
</label>
<input
type=
"text"
id=
"detail_eng"
class=
"ti-form-input w-full"
>
<label
for=
"detail_eng"
class=
"ti-form-label mt-1rem"
>
ชื่อที่ใช้เเสดง *
</label>
<input
type=
"text"
id=
"showname"
class=
"ti-form-input w-full"
>
<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=
"#indicators-and-curriculum-component-modal-add"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#indicators-and-curriculum-component-alert-modal"
>
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div
id=
"indicators-and-curriculum-component-modal-edit"
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)]"
>
<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=
"#indicators-and-curriculum-component-modal-edit"
>
<span
class=
"sr-only"
>
Close
</span>
<i
class=
"ti ti-circle-x fs-xxl"
></i>
</button>
</div>
</div>
<div
class=
"ti-modal-center"
>
<div
class=
"flex justify-end"
style=
"padding-right: 1rem;"
>
<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)"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
<path
d=
"M15 49A24 24 0 0 1 32 8"
></path>
<path
d=
"M49 15a24 24 0 0 1-17 41"
></path>
<polyline
points=
"15.03 40 15.03 48.97 8 48.97"
></polyline>
<polyline
points=
"48.97 24 48.97 15.03 56 15.03"
></polyline>
</g>
</svg>
Clear
</button>
</div>
<div
class=
"px-1"
>
<button
href=
"javascript:void(0);"
class=
"ti-btn ti-btn-soft-warning h-45px m-0 shadow-md"
>
<i
class=
"ti ti-book fs-l"
></i>
Help
</button>
</div>
</div>
</div>
<div
class=
"ti-modal-body"
style=
"padding-top: 0px;"
>
<label
for=
"input-label"
class=
"ti-form-label mt-1rem"
>
รหัส *
</label>
<input
type=
"text"
id=
"input-label"
class=
"ti-form-input w-1/2 bg-input-readonly"
readonly
value=
"01"
>
<label
for=
"detail_th"
class=
"ti-form-label mt-1rem"
>
ชื่อเครื่องมือประเมิน (ไทย)*
</label>
<input
type=
"text"
id=
"detail_th"
class=
"ti-form-input w-full"
value=
"แบบสังเกต"
>
<label
for=
"detail_eng"
class=
"ti-form-label mt-1rem"
>
ชื่อเครื่องมือประเมิน (อังกฤษ)
</label>
<input
type=
"text"
id=
"detail_eng"
class=
"ti-form-input w-full"
value=
"แบบสังเกต"
>
<label
for=
"detail_eng"
class=
"ti-form-label mt-1rem"
>
ชื่อที่ใช้เเสดง *
</label>
<input
type=
"text"
id=
"showname"
class=
"ti-form-input w-full"
value=
"O"
>
<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=
"#indicators-and-curriculum-component-modal-edit"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#indicators-and-curriculum-component-alert-edit-modal"
>
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div
id=
"indicators-and-curriculum-component-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-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=
"#indicators-and-curriculum-component-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=
"#indicators-and-curriculum-component-modal-add"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#indicators-and-curriculum-component-alert-modal"
(
click
)="
addUser
();
showSuccess
()"
>
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div
id=
"indicators-and-curriculum-component-alert-edit-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=
"#indicators-and-curriculum-component-alert-edit-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=
"#indicators-and-curriculum-component-modal-edit"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#indicators-and-curriculum-component-alert-edit-modal"
(
click
)="
addUser
();
showSuccessEdit
()"
>
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div
id=
"indicators-and-curriculum-component-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=
"#indicators-and-curriculum-component-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=
"#indicators-and-curriculum-component-alert-delete-modal"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#indicators-and-curriculum-component-alert-delete-modal"
(
click
)="
addUser
();
showSuccessDelete
()"
>
ลบข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.scss
View file @
fea3780a
.button-clear
{
position
:
absolute
;
top
:
96px
;
z-index
:
1
;
right
:
41vw
;
}
.button-help
{
position
:
absolute
;
top
:
0px
;
z-index
:
1
;
right
:
0vw
;
margin
:
4
.2rem
;
margin-right
:
10px
;
/* เพิ่มใหม่ 12/16*/
}
table
.ti-custom-table
thead
{
height
:
60px
;
}
table
.ti-custom-table
thead
th
span
{
font-size
:
12px
;
font-weight
:
bold
;
}
.ti-custom-table
td
{
padding-left
:
0
.9rem
;
padding-right
:
1rem
;
}
.ti-custom-table
thead
th
:first-child
{
width
:
105px
;
/* ปรับความกว้างตามที่ต้องการ */
text-align
:
left
;
/* จัดตำแหน่งข้อความถ้าต้องการ */
}
.ti-custom-table
thead
th
:last-child
{
width
:
150px
;
/* ปรับความกว้างตามที่ต้องการ */
}
a
.custom-link
{
padding
:
10px
40px
;
/* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs
{
display
:
flex
;
width
:
100%
;
cursor
:
pointer
;
margin-bottom
:
10px
;
height
:
20%
;
}
.nav-item
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link
{
text-decoration
:
none
;
padding
:
10px
20px
;
display
:
inline-block
;
font-size
:
large
;
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
#ccc
;
border-radius
:
5px
5px
0px
0px
;
}
.nav-link
:hover
{
background-color
:
#f0f0f0
;
/* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active
{
color
:
#ffffff
;
/* สีตัวอักษรในสถานะ active */
font-size
:
large
;
border-bottom
:
3
.5px
solid
rgb
(
var
(
--
color-primary
));
/* เส้นใต้ */
background-color
:
rgb
(
var
(
--
color-primary
));
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
rgb
(
var
(
--
color-primary
));
border-radius
:
5px
5px
0px
0px
;
}
.tab-content
{
margin-top
:
20px
;
}
.tab-pane.active
{
display
:
block
;
}
.nav-item-text
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link-text
{
text-decoration
:
none
;
display
:
inline-block
;
font-size
:
large
;
color
:
#569bf5
;
border-bottom
:
2px
solid
#569bf5
;
line-height
:
0
.8
;
}
.ti-pagination
.page-link.active
{
background-color
:
#569bf5
;
color
:
white
;
border-radius
:
50%
;
padding
:
8px
12px
;
}
.box-body
{
padding
:
0rem
;
}
.page
{
min-height
:
0vh
;
}
// .ti-modal-content {
// width: 70%;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// max-height: 90%; /* จำกัดความสูงให้อยู่ใน modal */
// overflow-y: auto; /* เปิดการเลื่อนแนวตั้ง */
// }
// .ti-modal-body-content {
// display: flex; /* ใช้ flexbox เพื่อจัดตำแหน่ง */
// justify-content: center; /* จัดฟอร์มให้อยู่กลางในแนวนอน */
// flex-direction: column; /* ทำให้ฟอร์มแสดงผลในรูปแบบคอลัมน์ */
// height: calc(100% - 50px); /* ให้ความสูงเป็น 100% ลบด้วยระยะห่างข้างบน */
// margin-left: calc(15% - 30px);
// margin-right: 20px;
// }
.ti-modal-content-alert
{
width
:
35%
;
/* ความกว้างที่คุณต้องการ */
position
:
absolute
;
/* ทำให้สามารถจัดตำแหน่งได้ */
top
:
50%
;
/* ให้อยู่กลางในแนวตั้ง */
left
:
50%
;
/* ให้อยู่กลางในแนวนอน */
transform
:
translate
(
-50%
,
-50%
);
/* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color
:
#ffffff
;
}
// .header-title-type{
// width: 100%;
// height: 50px;
// margin-top: 10px;
// margin-bottom: 10px;
// }
.header-title-type
{
width
:
100%
;
min-height
:
50px
;
/* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
// margin-top: 50px;
// margin-bottom: 10px;
justify-content
:
space-between
;
/* จัดเรียงองค์ประกอบภายใน */
align-items
:
center
;
/* จัดกลางแนวตั้ง */
padding-top
:
10px
;
padding-bottom
:
1rem
;
}
\ No newline at end of file
src/app/components/competency-management/indicators-and-curriculum/indicators-and-curriculum.component.ts
View file @
fea3780a
import
{
Component
,
EventEmitter
,
Input
,
Output
}
from
'@angular/core'
;
import
{
ToastrService
}
from
'ngx-toastr'
;
@
Component
({
selector
:
'app-indicators-and-curriculum'
,
templateUrl
:
'./indicators-and-curriculum.component.html'
,
styleUrls
:
[
'./indicators-and-curriculum.component.scss'
]
})
export
class
IndicatorsAndCurriculumComponent
{
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'ตัวชี้วัดเเละหลักสูตร'
];
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
activeTab
:
string
=
'tab1'
;
// กำหนด tab เริ่มต้น
isChecked
:
boolean
=
false
;
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab
(
tab
:
{
id
:
string
,
text
:
string
})
{
this
.
sendPathTitle
.
emit
([
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
tab
.
text
]);
this
.
activeTab
=
tab
.
id
;
}
toggleCheckbox
():
void
{
this
.
isChecked
=
!
this
.
isChecked
;
}
// การจัดการการเปิดปิด modal
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
;
// ตั้งค่าค่าของ currentModal เป็น 'add' หรือ 'edit'
document
.
body
.
style
.
overflow
=
'hidden'
;
}
closeModal
(
name
:
string
)
{
this
.
modalOptions
[
name
].
isModalOpen
=
false
;
if
(
!
this
.
isAnyModalOpen
())
{
document
.
body
.
style
.
overflow
=
''
;
// คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen
():
boolean
{
return
Object
.
values
(
this
.
modalOptions
).
some
(
modal
=>
modal
.
isModalOpen
);
// ตรวจสอบว่า modal อื่นยังเปิดอยู่หรือไม่
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser
()
{
// ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
console
.
log
(
'เพิ่มผู้ใช้งาน'
);
}
deleteUser
()
{
// ฟังก์ชันสำหรับการลบผู้ใช้งาน
console
.
log
(
'ลบผู้ใช้งาน'
);
}
editUser
()
{
// ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
console
.
log
(
'แก้ไขผู้ใช้งาน'
);
}
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/dashboard/dashboard.module.ts
View file @
fea3780a
...
...
@@ -59,6 +59,7 @@ import { AssessmentToolComponent } from '../tool-register/assessment-tool/assess
import
{
CompetencyManagementComponent
}
from
'../competency-management/competency-management.component'
;
import
{
CourseRegistrationComponent
}
from
'../course-registration/course-registration.component'
;
import
{
DevelopmentCourseComponent
}
from
'../course-registration/development-course/development-course.component'
;
import
{
IndicatorsAndCurriculumComponent
}
from
'../competency-management/indicators-and-curriculum/indicators-and-curriculum.component'
;
...
...
@@ -103,6 +104,7 @@ import { DevelopmentCourseComponent } from '../course-registration/development-c
CompetencyManagementComponent
,
CourseRegistrationComponent
,
DevelopmentCourseComponent
,
IndicatorsAndCurriculumComponent
,
],
imports
:
[
CommonModule
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment