Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
M
mySkill-x
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
mySkill-x
Commits
6cf36c51
Commit
6cf36c51
authored
Jan 15, 2025
by
Natthaphat Pankiang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
การประเมินสมรรถนะ > ทะเบียนเกรด
parent
4eb050dc
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
1243 additions
and
10 deletions
+1243
-10
edit-group-competencies.component.ts
...t-group-competencies/edit-group-competencies.component.ts
+1
-1
group-competencies.component.ts
...gement/group-competencies/group-competencies.component.ts
+1
-1
add-group-grade.component.html
...management/add-group-grade/add-group-grade.component.html
+126
-0
add-group-grade.component.scss
...management/add-group-grade/add-group-grade.component.scss
+165
-0
add-group-grade.component.ts
...e-management/add-group-grade/add-group-grade.component.ts
+113
-0
edit-group-grade.component.html
...nagement/edit-froup-grade/edit-group-grade.component.html
+125
-0
edit-group-grade.component.scss
...nagement/edit-froup-grade/edit-group-grade.component.scss
+165
-0
edit-group-grade.component.ts
...management/edit-froup-grade/edit-group-grade.component.ts
+118
-0
grade-management.component.html
...stration/grade-management/grade-management.component.html
+0
-0
grade-management.component.scss
...stration/grade-management/grade-management.component.scss
+0
-0
grade-management.component.ts
...gistration/grade-management/grade-management.component.ts
+105
-0
sub-grade-registration.component.html
...-grade-registration/sub-grade-registration.component.html
+0
-0
sub-grade-registration.component.scss
...-grade-registration/sub-grade-registration.component.scss
+165
-0
sub-grade-registration.component.ts
...ub-grade-registration/sub-grade-registration.component.ts
+101
-0
grade-registration.component.html
...ment/grade-registration/grade-registration.component.html
+26
-0
grade-registration.component.scss
...ment/grade-registration/grade-registration.component.scss
+0
-0
grade-registration.component.ts
...ssment/grade-registration/grade-registration.component.ts
+11
-0
dashboard-routing.module.ts
src/app/components/dashboard/dashboard-routing.module.ts
+4
-2
dashboard.module.ts
src/app/components/dashboard/dashboard.module.ts
+16
-5
navservice.ts
src/app/shared/services/navservice.ts
+1
-1
No files found.
src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts
View file @
6cf36c51
...
@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
...
@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
templateUrl
:
'./edit-group-competencies.component.html'
,
templateUrl
:
'./edit-group-competencies.component.html'
,
styleUrls
:
[
'./edit-group-competencies.component.scss'
]
styleUrls
:
[
'./edit-group-competencies.component.scss'
]
})
})
export
class
EditGr
uo
pCompetenciesComponent
{
export
class
EditGr
ou
pCompetenciesComponent
{
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'จัดกลุ่มสมรรถนะ'
];
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'จัดกลุ่มสมรรถนะ'
];
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
@
Output
()
sendGroupShow
:
EventEmitter
<
string
>
=
new
EventEmitter
<
string
>
();
@
Output
()
sendGroupShow
:
EventEmitter
<
string
>
=
new
EventEmitter
<
string
>
();
...
...
src/app/components/competency-assessment/competency-management/group-competencies/group-competencies.component.ts
View file @
6cf36c51
...
@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
...
@@ -6,7 +6,7 @@ import { ToastrService } from 'ngx-toastr';
templateUrl
:
'./group-competencies.component.html'
,
templateUrl
:
'./group-competencies.component.html'
,
styleUrls
:
[
'./group-competencies.component.scss'
]
styleUrls
:
[
'./group-competencies.component.scss'
]
})
})
export
class
Gr
uo
pCompetenciesComponent
{
export
class
Gr
ou
pCompetenciesComponent
{
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'จัดกลุ่มสมรรถนะ'
];
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'จัดกลุ่มสมรรถนะ'
];
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
@
Output
()
sendGroupShow
:
EventEmitter
<
string
>
=
new
EventEmitter
<
string
>
();
@
Output
()
sendGroupShow
:
EventEmitter
<
string
>
=
new
EventEmitter
<
string
>
();
...
...
src/app/components/competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component.html
0 → 100644
View file @
6cf36c51
<div
class=
"flex justify-between"
>
<div
class=
"flex"
>
<!-- Content ของ div แรก -->
<div
class=
"flex"
>
<button
type=
"button"
class=
"ti-btn text-primary hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
(
click
)="
onEdit
()"
>
<i
class=
"ti ti-chevron-left"
></i>
ย้อนกลับ
</button>
<div
class=
"text-2xl font-bold py-2 text-primary px-2"
>
เพิ่มกลุ่มเกรด
</div>
</div>
</div>
<div
class=
"flex justify-end"
>
<div
class=
"px-1"
>
<button
type=
"button"
class=
"ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
data-hs-overlay=
"#add-group-grade-alert-add-modal"
>
<i
class=
"ri-save-3-line"
></i>
Save
</button>
</div>
<div
class=
"px-1"
>
<button
type=
"button"
class=
"ti-btn ti-btn-soft-indigo h-10 m-0 shadow-md"
>
<svg
class=
"svg-indigo"
width=
"16"
height=
"16"
viewBox=
"0 0 64.00 64.00"
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
stroke=
"#595BEA"
stroke-width=
"3.84"
transform=
"rotate(45)matrix(-1, 0, 0, 1, 0, 0)"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
<path
d=
"M15 49A24 24 0 0 1 32 8"
></path>
<path
d=
"M49 15a24 24 0 0 1-17 41"
></path>
<polyline
points=
"15.03 40 15.03 48.97 8 48.97"
></polyline>
<polyline
points=
"48.97 24 48.97 15.03 56 15.03"
></polyline>
</g>
</svg>
Clear
</button>
</div>
<div
class=
"px-1"
>
<button
href=
"javascript:void(0);"
class=
"ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"
>
<i
class=
"ti ti-book fs-l"
></i>
Help
</button>
</div>
</div>
</div>
<div
class=
"body-content"
>
<div
class=
"page"
>
<div
class=
"border-b border-gray-200 dark:border-white/10 px-8"
>
<nav
class=
"flex rtl:space-x-reverse space-x-5"
style=
"padding-top: 20px;"
>
<a
class=
"border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href=
"javascript:void(0);"
id=
"underline-item-1"
data-hs-tab=
"#underline-1"
aria-controls=
"underline-1"
(
click
)="
activeTab =
'details-add'
"
>
รายละเอียด
</a>
<a
class=
"border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href=
"javascript:void(0);"
id=
"underline-item-2"
data-hs-tab=
"#underline-2"
aria-controls=
"underline-2"
(
click
)="
activeTab =
'grade-register'
"
>
ทะเบียนเกรด
</a>
</nav>
</div>
<div
class=
"mt-3 px-3rem"
>
<div
*
ngIf=
"activeTab === 'details-add'"
id=
"underline-1"
role=
"tabpanel"
aria-labelledby=
"underline-item-1"
>
<div
class=
"page px-rem"
>
<label
for=
"input-label"
class=
"ti-form-label"
>
กำหนดรหัสกลุ่มเกรด
</label>
<input
type=
"text"
id=
"input-label"
class=
"ti-form-input w-1/4"
placeholder=
""
>
<label
for=
"detail_th"
class=
"ti-form-label mt-2rem"
>
รายละเอียด (ไทย)*
</label>
<input
type=
"text"
id=
"detail_th"
class=
"ti-form-input w-1/2"
placeholder=
""
>
<label
for=
"detail_eng"
class=
"ti-form-label mt-2rem"
>
รายละเอียด (อังกฤษ)
</label>
<input
type=
"text"
id=
"detail_eng"
class=
"ti-form-input w-1/2"
placeholder=
""
>
</div>
</div>
<div
*
ngIf=
"activeTab === 'grade-register'"
id=
"underline-2"
role=
"tabpanel"
aria-labelledby=
"underline-item-2"
>
<app-sub-grade-registration></app-sub-grade-registration>
</div>
</div>
</div>
</div>
<div
id=
"add-group-grade-alert-add-modal"
class=
"hs-overlay hidden ti-modal"
>
<div
class=
"hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"
>
<div
class=
"max-h-full overflow-hidden ti-modal-content-alert w-full"
>
<div
class=
"ti-modal-header"
>
<h3
class=
"text-xxl font-bold text-primary"
>
แจ้งเตือน
</h3>
<div
class=
"flex justify-end"
>
<button
type=
"button"
class=
"hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay=
"#add-group-grade-alert-add-modal"
>
<span
class=
"sr-only"
>
Close
</span>
<i
class=
"ti ti-circle-x fs-xxl"
></i>
</button>
</div>
</div>
<div
class=
"ti-modal-body "
>
<p
class=
"mt-1 text-gray-800 dark:text-white/70"
>
ยืนยันการเพิ่มข้อมูลหรือไม่!
</p>
<div
class=
"flex justify-end mt-2rem mb-1rem"
>
<button
type=
"button"
class=
"hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay=
"#add-group-grade-alert-add-modal"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#add-group-grade-alert-add-modal"
(
click
)="
addUser
();
showSuccessAdd
()"
>
เพิ่มข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component.scss
0 → 100644
View file @
6cf36c51
.button-clear
{
position
:
absolute
;
top
:
96px
;
z-index
:
1
;
right
:
41vw
;
}
.button-help
{
position
:
absolute
;
top
:
0px
;
z-index
:
1
;
right
:
0vw
;
margin
:
4
.2rem
;
margin-right
:
10px
;
/* เพิ่มใหม่ 12/16*/
}
.htable
{
height
:
400px
;
}
table
.ti-custom-table
thead
{
height
:
60px
;
}
table
.ti-custom-table
thead
th
span
{
font-size
:
12px
;
font-weight
:
bold
;
}
.ti-custom-table
td
{
padding-left
:
0
.9rem
;
padding-right
:
1rem
;
}
.ti-custom-table
thead
th
:first-child
{
width
:
120px
;
/* ปรับความกว้างตามที่ต้องการ */
text-align
:
left
;
/* จัดตำแหน่งข้อความถ้าต้องการ */
padding-left
:
2px
;
padding-right
:
2px
;
}
.ti-custom-table
thead
th
:last-child
{
width
:
400px
;
/* ปรับความกว้างตามที่ต้องการ */
}
a
.custom-link
{
padding
:
10px
40px
;
/* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs
{
display
:
flex
;
width
:
100%
;
cursor
:
pointer
;
margin-bottom
:
10px
;
height
:
20%
;
}
.nav-item
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link
{
text-decoration
:
none
;
padding
:
10px
20px
;
display
:
inline-block
;
font-size
:
large
;
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
#ccc
;
border-radius
:
5px
5px
0px
0px
;
}
.nav-link
:hover
{
background-color
:
#f0f0f0
;
/* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active
{
color
:
#ffffff
;
/* สีตัวอักษรในสถานะ active */
font-size
:
large
;
border-bottom
:
3
.5px
solid
rgb
(
var
(
--
color-primary
));
/* เส้นใต้ */
background-color
:
rgb
(
var
(
--
color-primary
));
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
rgb
(
var
(
--
color-primary
));
border-radius
:
5px
5px
0px
0px
;
}
.tab-content
{
margin-top
:
20px
;
}
.tab-pane.active
{
display
:
block
;
}
.nav-item-text
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link-text
{
text-decoration
:
none
;
display
:
inline-block
;
font-size
:
large
;
color
:
#569bf5
;
border-bottom
:
2px
solid
#569bf5
;
line-height
:
0
.8
;
}
.ti-pagination
.page-link.active
{
background-color
:
#569bf5
;
color
:
white
;
border-radius
:
50%
;
padding
:
8px
12px
;
}
.box-body
{
padding
:
0rem
;
}
.page
{
min-height
:
0vh
;
}
.ti-modal-content
{
padding
:
1rem
;
height
:
650px
;
overflow-y
:
auto
;
}
.ti-modal-content-alert
{
width
:
35%
;
/* ความกว้างที่คุณต้องการ */
position
:
absolute
;
/* ทำให้สามารถจัดตำแหน่งได้ */
top
:
50%
;
/* ให้อยู่กลางในแนวตั้ง */
left
:
50%
;
/* ให้อยู่กลางในแนวนอน */
transform
:
translate
(
-50%
,
-50%
);
/* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color
:
#ffffff
;
}
.header-title-type
{
width
:
100%
;
min-height
:
50px
;
/* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
justify-content
:
space-between
;
/* จัดเรียงองค์ประกอบภายใน */
align-items
:
center
;
/* จัดกลางแนวตั้ง */
padding-top
:
50px
;
padding-bottom
:
1rem
;
}
.body-content
{
margin-bottom
:
30px
;
overflow-y
:
auto
;
}
.bg-input-readonly
{
background-color
:
rgb
(
241
245
249
);
}
.ciricon
{
height
:
12px
;
/* กำหนดความสูงของวงกลม */
width
:
12px
;
/* กำหนดความกว้างของวงกลม */
background-color
:
#ffffff
;
font-weight
:
bold
;
display
:
flex
;
/* ใช้ Flexbox */
justify-content
:
center
;
/* จัดตำแหน่งแนวนอนให้กึ่งกลาง */
align-items
:
center
;
/* จัดตำแหน่งแนวตั้งให้กึ่งกลาง */
border-radius
:
2px
;
/* ทำให้เป็นวงกลม */
}
.ri-close-line
{
font-size
:
15px
;
/* ขนาดไอคอน */
}
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component.ts
0 → 100644
View file @
6cf36c51
import
{
Component
,
EventEmitter
,
Input
,
Output
,
OnInit
}
from
'@angular/core'
;
import
{
ToastrService
}
from
'ngx-toastr'
;
@
Component
({
selector
:
'app-add-group-grade'
,
templateUrl
:
'./add-group-grade.component.html'
,
styleUrls
:
[
'./add-group-grade.component.scss'
]
})
export
class
AddGroupGradeComponent
implements
OnInit
{
@
Input
()
statusGroup
=
'add'
;
@
Output
()
sendEdit
:
EventEmitter
<
boolean
>
=
new
EventEmitter
<
boolean
>
();
activeTab
:
string
=
'details-add'
;
isChecked
:
boolean
=
false
;
// ข้อมูลที่จะใช้แสดงในตาราง
@
Input
()
items
:
any
[]
=
[
[
'1'
,
''
,
'CC'
],
[
'2'
,
''
,
'MC'
],
[
'3'
,
''
,
'PC'
]
];
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab
(
tab
:
{
id
:
string
,
text
:
string
})
{
this
.
activeTab
=
tab
.
id
;
}
onEdit
()
{
this
.
sendEdit
.
emit
(
false
);
}
// ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
saveData
(
event
:
any
,
id
:
any
):
void
{
const
updatedText
=
event
.
target
.
innerText
;
// ข้อความที่พิมพ์เข้าไป
// เก็บข้อมูลใน localStorage
localStorage
.
setItem
(
`item-
${
id
}
`
,
updatedText
);
// ฟังก์ชันอัปเดตข้อมูล (หากต้องการส่งไปยัง API)
this
.
updateItem
(
id
,
updatedText
);
}
// ฟังก์ชันในการอัพเดตข้อมูล
updateItem
(
id
:
any
,
updatedText
:
string
):
void
{
// ส่งข้อมูลไปยัง API เพื่อบันทึกข้อมูลในฐานข้อมูล
// ตัวอย่างเช่น:
// this.myService.updateItem(id, updatedText).subscribe(response => {
// this.showSuccessEdit(); // เรียกฟังก์ชันแจ้งเตือน
// });
}
// เมื่อหน้าเว็บโหลดใหม่ดึงข้อมูลจาก localStorage
ngOnInit
():
void
{
this
.
items
.
forEach
(
item
=>
{
const
savedText
=
localStorage
.
getItem
(
`item-
${
item
[
0
]}
`
);
if
(
savedText
)
{
item
[
1
]
=
savedText
;
// ใช้ข้อมูลที่เก็บไว้
}
});
}
modalOptions
:
{
[
nameModal
:
string
]:
{
isModalOpen
:
boolean
;
modalSize
:
string
;
backdropClose
:
boolean
;
};
}
=
{
"add"
:
{
isModalOpen
:
false
,
modalSize
:
'm'
,
backdropClose
:
true
},
"edit"
:
{
isModalOpen
:
false
,
modalSize
:
'm'
,
backdropClose
:
true
}
};
openModal
(
name
:
string
,
size
:
string
,
closeOnBackdrop
?:
boolean
)
{
this
.
modalOptions
[
name
].
modalSize
=
size
;
this
.
modalOptions
[
name
].
backdropClose
=
closeOnBackdrop
||
false
;
this
.
modalOptions
[
name
].
isModalOpen
=
true
;
this
.
currentModal
=
name
;
document
.
body
.
style
.
overflow
=
'hidden'
;
}
closeModal
(
name
:
string
)
{
this
.
modalOptions
[
name
].
isModalOpen
=
false
;
if
(
!
this
.
isAnyModalOpen
())
{
document
.
body
.
style
.
overflow
=
''
;
}
}
isAnyModalOpen
():
boolean
{
return
Object
.
values
(
this
.
modalOptions
).
some
(
modal
=>
modal
.
isModalOpen
);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser
()
{
}
currentModal
=
""
;
constructor
(
private
toastr
:
ToastrService
)
{
}
// แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
showSuccessAdd
()
{
this
.
toastr
.
success
(
'บันทึกข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
});
}
showSuccessEdit
()
{
this
.
toastr
.
success
(
'เเก้ไขข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
});
}
showSuccessDelete
()
{
this
.
toastr
.
success
(
'ลบข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
});
}
}
src/app/components/competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component.html
0 → 100644
View file @
6cf36c51
<div
class=
"flex justify-between"
>
<div
class=
"flex"
>
<!-- Content ของ div แรก -->
<div
class=
"flex"
>
<button
type=
"button"
class=
"ti-btn text-primary hover:bg-blue-100 focus:ring-blue-500 dark:focus:ring-offset-white/10 h-10 m-0 shadow-md"
(
click
)="
onEdit
()"
>
<i
class=
"ti ti-chevron-left"
></i>
ย้อนกลับ
</button>
<div
class=
"text-2xl font-bold py-2 text-primary px-2"
>
แก้ไขกลุ่มเกรด
</div>
</div>
</div>
<div
class=
"flex justify-end"
>
<div
class=
"px-1"
>
<button
type=
"button"
class=
"ti-btn ti-btn-soft-success h-10 m-0 shadow-md"
data-hs-overlay=
"#edit-group-grade-alert-add-modal"
>
<i
class=
"ri-save-3-line"
></i>
Save
</button>
</div>
<div
class=
"px-1"
>
<button
type=
"button"
class=
"ti-btn ti-btn-soft-indigo h-10 m-0 shadow-md"
>
<svg
class=
"svg-indigo"
width=
"16"
height=
"16"
viewBox=
"0 0 64.00 64.00"
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
stroke=
"#595BEA"
stroke-width=
"3.84"
transform=
"rotate(45)matrix(-1, 0, 0, 1, 0, 0)"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
<path
d=
"M15 49A24 24 0 0 1 32 8"
></path>
<path
d=
"M49 15a24 24 0 0 1-17 41"
></path>
<polyline
points=
"15.03 40 15.03 48.97 8 48.97"
></polyline>
<polyline
points=
"48.97 24 48.97 15.03 56 15.03"
></polyline>
</g>
</svg>
Clear
</button>
</div>
<div
class=
"px-1"
>
<button
href=
"javascript:void(0);"
class=
"ti-btn ti-btn-soft-warning h-10 m-0 shadow-md"
>
<i
class=
"ti ti-book fs-l"
></i>
Help
</button>
</div>
</div>
</div>
<div
class=
"body-content"
>
<div
class=
"page"
>
<div
class=
"border-b border-gray-200 dark:border-white/10 px-8"
>
<nav
class=
"flex rtl:space-x-reverse space-x-5"
style=
"padding-top: 20px;"
>
<a
class=
"border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
href=
"javascript:void(0);"
id=
"underline-item-1"
data-hs-tab=
"#underline-1"
aria-controls=
"underline-1"
(
click
)="
activeTab =
'details-edit'
"
>
รายละเอียด
</a>
<a
class=
"border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
href=
"javascript:void(0);"
id=
"underline-item-2"
data-hs-tab=
"#underline-2"
aria-controls=
"underline-2"
(
click
)="
activeTab =
'grade-register'
"
>
ทะเบียนเกรด
</a>
</nav>
</div>
<div
class=
"mt-3 px-3rem"
>
<div
*
ngIf=
"activeTab === 'details-edit'"
id=
"underline-1"
role=
"tabpanel"
aria-labelledby=
"underline-item-1"
>
<div
class=
"page px-rem"
>
<label
for=
"input-label"
class=
"ti-form-label"
>
กำหนดรหัสกลุ่มเกรด
</label>
<input
type=
"text"
id=
"input-label"
class=
"ti-form-input w-1/4 bg-input-readonly"
readonly
[
ngModel
]="
dataSelect
.
code
"
>
<label
for=
"detail_th"
class=
"ti-form-label mt-2rem"
>
รายละเอียด (ไทย)*
</label>
<input
type=
"text"
id=
"detail_th"
class=
"ti-form-input w-1/2"
[
ngModel
]="
dataSelect
.
tdesc
"
>
<label
for=
"detail_eng"
class=
"ti-form-label mt-2rem"
>
รายละเอียด (อังกฤษ)
</label>
<input
type=
"text"
id=
"detail_eng"
class=
"ti-form-input w-1/2"
placeholder=
""
>
</div>
</div>
<div
*
ngIf=
"activeTab === 'grade-register'"
id=
"details-tab"
id=
"underline-2"
role=
"tabpanel"
aria-labelledby=
"underline-item-2"
>
<app-sub-grade-registration></app-sub-grade-registration>
</div>
</div>
</div>
</div>
<div
id=
"edit-group-grade-alert-add-modal"
class=
"hs-overlay hidden ti-modal"
>
<div
class=
"hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center"
>
<div
class=
"max-h-full overflow-hidden ti-modal-content-alert w-full"
>
<div
class=
"ti-modal-header"
>
<h3
class=
"text-xxl font-bold text-primary"
>
แจ้งเตือน
</h3>
<div
class=
"flex justify-end"
>
<button
type=
"button"
class=
"hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay=
"#edit-group-grade-alert-add-modal"
>
<span
class=
"sr-only"
>
Close
</span>
<i
class=
"ti ti-circle-x fs-xxl"
></i>
</button>
</div>
</div>
<div
class=
"ti-modal-body "
>
<p
class=
"mt-1 text-gray-800 dark:text-white/70"
>
ยืนยันการเพิ่มข้อมูลหรือไม่!
</p>
<div
class=
"flex justify-end mt-2rem mb-1rem"
>
<button
type=
"button"
class=
"hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay=
"#edit-group-grade-alert-add-modal"
>
ย้อนกลับ
</button>
<a
class=
"ti-btn ti-btn-success"
href=
"javascript:void(0);"
data-hs-overlay=
"#edit-group-grade-alert-add-modal"
(
click
)="
addUser
();
showSuccessAdd
()"
>
เพิ่มข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component.scss
0 → 100644
View file @
6cf36c51
.button-clear
{
position
:
absolute
;
top
:
96px
;
z-index
:
1
;
right
:
41vw
;
}
.button-help
{
position
:
absolute
;
top
:
0px
;
z-index
:
1
;
right
:
0vw
;
margin
:
4
.2rem
;
margin-right
:
10px
;
/* เพิ่มใหม่ 12/16*/
}
.htable
{
height
:
400px
;
}
table
.ti-custom-table
thead
{
height
:
60px
;
}
table
.ti-custom-table
thead
th
span
{
font-size
:
12px
;
font-weight
:
bold
;
}
.ti-custom-table
td
{
padding-left
:
0
.9rem
;
padding-right
:
1rem
;
}
.ti-custom-table
thead
th
:first-child
{
width
:
120px
;
/* ปรับความกว้างตามที่ต้องการ */
text-align
:
left
;
/* จัดตำแหน่งข้อความถ้าต้องการ */
padding-left
:
2px
;
padding-right
:
2px
;
}
.ti-custom-table
thead
th
:last-child
{
width
:
400px
;
/* ปรับความกว้างตามที่ต้องการ */
}
a
.custom-link
{
padding
:
10px
40px
;
/* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs
{
display
:
flex
;
width
:
100%
;
cursor
:
pointer
;
margin-bottom
:
10px
;
height
:
20%
;
}
.nav-item
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link
{
text-decoration
:
none
;
padding
:
10px
20px
;
display
:
inline-block
;
font-size
:
large
;
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
#ccc
;
border-radius
:
5px
5px
0px
0px
;
}
.nav-link
:hover
{
background-color
:
#f0f0f0
;
/* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active
{
color
:
#ffffff
;
/* สีตัวอักษรในสถานะ active */
font-size
:
large
;
border-bottom
:
3
.5px
solid
rgb
(
var
(
--
color-primary
));
/* เส้นใต้ */
background-color
:
rgb
(
var
(
--
color-primary
));
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
rgb
(
var
(
--
color-primary
));
border-radius
:
5px
5px
0px
0px
;
}
.tab-content
{
margin-top
:
20px
;
}
.tab-pane.active
{
display
:
block
;
}
.nav-item-text
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link-text
{
text-decoration
:
none
;
display
:
inline-block
;
font-size
:
large
;
color
:
#569bf5
;
border-bottom
:
2px
solid
#569bf5
;
line-height
:
0
.8
;
}
.ti-pagination
.page-link.active
{
background-color
:
#569bf5
;
color
:
white
;
border-radius
:
50%
;
padding
:
8px
12px
;
}
.box-body
{
padding
:
0rem
;
}
.page
{
min-height
:
0vh
;
}
.ti-modal-content
{
padding
:
1rem
;
height
:
650px
;
overflow-y
:
auto
;
}
.ti-modal-content-alert
{
width
:
35%
;
/* ความกว้างที่คุณต้องการ */
position
:
absolute
;
/* ทำให้สามารถจัดตำแหน่งได้ */
top
:
50%
;
/* ให้อยู่กลางในแนวตั้ง */
left
:
50%
;
/* ให้อยู่กลางในแนวนอน */
transform
:
translate
(
-50%
,
-50%
);
/* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color
:
#ffffff
;
}
.header-title-type
{
width
:
100%
;
min-height
:
50px
;
/* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
justify-content
:
space-between
;
/* จัดเรียงองค์ประกอบภายใน */
align-items
:
center
;
/* จัดกลางแนวตั้ง */
padding-top
:
50px
;
padding-bottom
:
1rem
;
}
.body-content
{
margin-bottom
:
30px
;
overflow-y
:
auto
;
}
.bg-input-readonly
{
background-color
:
rgb
(
241
245
249
);
}
.ciricon
{
height
:
12px
;
/* กำหนดความสูงของวงกลม */
width
:
12px
;
/* กำหนดความกว้างของวงกลม */
background-color
:
#ffffff
;
font-weight
:
bold
;
display
:
flex
;
/* ใช้ Flexbox */
justify-content
:
center
;
/* จัดตำแหน่งแนวนอนให้กึ่งกลาง */
align-items
:
center
;
/* จัดตำแหน่งแนวตั้งให้กึ่งกลาง */
border-radius
:
2px
;
/* ทำให้เป็นวงกลม */
}
.ri-close-line
{
font-size
:
15px
;
/* ขนาดไอคอน */
}
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component.ts
0 → 100644
View file @
6cf36c51
import
{
Component
,
EventEmitter
,
Input
,
Output
,
OnInit
}
from
'@angular/core'
;
import
{
ToastrService
}
from
'ngx-toastr'
;
export
interface
DataModel
{
check
:
boolean
;
code
:
string
;
tdesc
:
string
;
edesc
:
string
;
}
@
Component
({
selector
:
'app-edit-group-grade'
,
templateUrl
:
'./edit-group-grade.component.html'
,
styleUrls
:
[
'./edit-group-grade.component.scss'
]
})
export
class
EditGroupGradeComponent
implements
OnInit
{
@
Input
()
dataSelect
=
{
check
:
false
,
code
:
''
,
tdesc
:
''
,
edesc
:
''
}
@
Output
()
sendEdit
:
EventEmitter
<
boolean
>
=
new
EventEmitter
<
boolean
>
();
activeTab
:
string
=
'details-edit'
;
isChecked
:
boolean
=
false
;
// ข้อมูลที่จะใช้แสดงในตาราง
@
Input
()
items
:
any
[]
=
[
[
'1'
,
''
,
'CC'
],
[
'2'
,
''
,
'MC'
],
[
'3'
,
''
,
'PC'
]
];
// ฟังก์ชันในการเปลี่ยนแท็บ
changeTab
(
tab
:
{
id
:
string
,
text
:
string
})
{
this
.
activeTab
=
tab
.
id
;
}
onEdit
()
{
this
.
sendEdit
.
emit
(
false
);
}
// ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
saveData
(
event
:
any
,
id
:
any
):
void
{
const
updatedText
=
event
.
target
.
innerText
;
// ข้อความที่พิมพ์เข้าไป
// เก็บข้อมูลใน localStorage
localStorage
.
setItem
(
`item-
${
id
}
`
,
updatedText
);
// ฟังก์ชันอัปเดตข้อมูล (หากต้องการส่งไปยัง API)
this
.
updateItem
(
id
,
updatedText
);
}
// ฟังก์ชันในการอัพเดตข้อมูล
updateItem
(
id
:
any
,
updatedText
:
string
):
void
{
// ส่งข้อมูลไปยัง API เพื่อบันทึกข้อมูลในฐานข้อมูล
// ตัวอย่างเช่น:
// this.myService.updateItem(id, updatedText).subscribe(response => {
// this.showSuccessEdit(); // เรียกฟังก์ชันแจ้งเตือน
// });
}
// เมื่อหน้าเว็บโหลดใหม่ดึงข้อมูลจาก localStorage
ngOnInit
():
void
{
this
.
items
.
forEach
(
item
=>
{
const
savedText
=
localStorage
.
getItem
(
`item-
${
item
[
0
]}
`
);
if
(
savedText
)
{
item
[
1
]
=
savedText
;
// ใช้ข้อมูลที่เก็บไว้
}
});
}
modalOptions
:
{
[
nameModal
:
string
]:
{
isModalOpen
:
boolean
;
modalSize
:
string
;
backdropClose
:
boolean
;
};
}
=
{
"add"
:
{
isModalOpen
:
false
,
modalSize
:
'm'
,
backdropClose
:
true
},
"edit"
:
{
isModalOpen
:
false
,
modalSize
:
'm'
,
backdropClose
:
true
}
};
openModal
(
name
:
string
,
size
:
string
,
closeOnBackdrop
?:
boolean
)
{
this
.
modalOptions
[
name
].
modalSize
=
size
;
this
.
modalOptions
[
name
].
backdropClose
=
closeOnBackdrop
||
false
;
this
.
modalOptions
[
name
].
isModalOpen
=
true
;
this
.
currentModal
=
name
;
document
.
body
.
style
.
overflow
=
'hidden'
;
}
closeModal
(
name
:
string
)
{
this
.
modalOptions
[
name
].
isModalOpen
=
false
;
if
(
!
this
.
isAnyModalOpen
())
{
document
.
body
.
style
.
overflow
=
''
;
}
}
isAnyModalOpen
():
boolean
{
return
Object
.
values
(
this
.
modalOptions
).
some
(
modal
=>
modal
.
isModalOpen
);
}
// ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
addUser
()
{
}
currentModal
=
""
;
constructor
(
private
toastr
:
ToastrService
)
{
}
// แสดงข้อความแจ้งเตือนเมื่อการบันทึกสำเร็จ
showSuccessAdd
()
{
this
.
toastr
.
success
(
'บันทึกข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
});
}
showSuccessEdit
()
{
this
.
toastr
.
success
(
'เเก้ไขข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
});
}
showSuccessDelete
()
{
this
.
toastr
.
success
(
'ลบข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
});
}
}
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.html
0 → 100644
View file @
6cf36c51
This diff is collapsed.
Click to expand it.
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.scss
0 → 100644
View file @
6cf36c51
src/app/components/competency-assessment/grade-registration/grade-management/grade-management.component.ts
0 → 100644
View file @
6cf36c51
import
{
Component
,
EventEmitter
,
Input
,
Output
}
from
'@angular/core'
;
import
{
ToastrService
}
from
'ngx-toastr'
;
export
interface
DataModel
{
check
:
boolean
;
code
:
string
;
tdesc
:
string
;
edesc
:
string
;
}
@
Component
({
selector
:
'app-grade-management'
,
templateUrl
:
'./grade-management.component.html'
,
styleUrls
:
[
'./grade-management.component.scss'
],
})
export
class
GradeManagementComponent
{
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
addTab
=
false
;
editTab
=
false
;
currentPage
=
1
;
page
=
Array
.
from
({
length
:
1
},
(
_
,
i
)
=>
i
+
1
);
numDataListChecked
=
0
;
isDataListChecked
=
false
;
isDataListCheckedAll
=
false
;
search
=
''
;
dataList
:
DataModel
[]
=
[
{
check
:
false
,
code
:
'01'
,
tdesc
:
'กลุ่ม 1'
,
edesc
:
'Group 1'
},
{
check
:
false
,
code
:
'02'
,
tdesc
:
'กลุ่ม 2'
,
edesc
:
'Group 2'
},
{
check
:
false
,
code
:
'03'
,
tdesc
:
'กลุ่ม 3'
,
edesc
:
'Group 3'
},
{
check
:
false
,
code
:
'04'
,
tdesc
:
'กลุ่ม 4'
,
edesc
:
'Group 4'
},
{
check
:
false
,
code
:
'05'
,
tdesc
:
'กลุ่ม 5'
,
edesc
:
'Group 5'
},
{
check
:
false
,
code
:
'06'
,
tdesc
:
'กลุ่ม 6'
,
edesc
:
'Group 6'
},
{
check
:
false
,
code
:
'07'
,
tdesc
:
'กลุ่ม 7'
,
edesc
:
'Group 7'
},
];
dataSelect
:
DataModel
=
{
check
:
false
,
code
:
''
,
tdesc
:
''
,
edesc
:
''
}
constructor
(
private
toastr
:
ToastrService
)
{
this
.
pathTitleChange
();
}
pathTitleChange
(
data
?:
DataModel
)
{
this
.
editTab
=
data
?
true
:
false
this
.
dataSelect
=
data
||
{
check
:
false
,
code
:
''
,
tdesc
:
''
,
edesc
:
''
}
this
.
sendPathTitle
.
emit
(
this
.
addTab
?
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
,
'เพิ่มกลุ่มเกรด'
]
:
this
.
editTab
?
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
,
'แก้ไขกลุ่มเกรด'
]
:
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
]
);
}
searchChange
()
{
this
.
currentPage
=
1
;
const
filteredData
=
this
.
dataListFilter
();
this
.
page
=
Array
.
from
({
length
:
Math
.
ceil
(
filteredData
.
length
/
10
)
},
(
_
,
i
)
=>
i
+
1
);
}
dataListFilter
()
{
return
this
.
dataList
.
filter
((
x
)
=>
{
const
match
=
x
.
code
.
includes
(
this
.
search
)
||
x
.
tdesc
.
includes
(
this
.
search
);
if
(
!
match
)
x
.
check
=
false
;
return
match
;
});
}
dataListCheck
()
{
const
dataCheck
=
this
.
dataListFilter
();
this
.
isDataListChecked
=
dataCheck
.
some
((
x
)
=>
x
.
check
);
this
.
isDataListCheckedAll
=
dataCheck
.
length
?
dataCheck
.
every
((
x
)
=>
x
.
check
)
:
false
;
this
.
numDataListChecked
=
dataCheck
.
filter
((
x
)
=>
x
.
check
).
length
;
}
dataListCheckAll
()
{
const
selectAll
=
this
.
isDataListCheckedAll
;
this
.
dataList
.
forEach
((
x
)
=>
(
x
.
check
=
selectAll
));
this
.
dataListCheck
();
// อัปเดตสถานะการเช็ก
}
showSuccess
()
{
this
.
toastr
.
success
(
'เพิ่มผู้ใช้ใหม่สำเร็จ!'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
,
});
}
showEdit
()
{
this
.
toastr
.
success
(
'ลบข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
,
});
}
showSuccessDelete
()
{
this
.
toastr
.
success
(
'ลบข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
,
});
}
addUser
()
{
}
}
src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.html
0 → 100644
View file @
6cf36c51
This diff is collapsed.
Click to expand it.
src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.scss
0 → 100644
View file @
6cf36c51
.button-clear
{
position
:
absolute
;
top
:
96px
;
z-index
:
1
;
right
:
41vw
;
}
.button-help
{
position
:
absolute
;
top
:
0px
;
z-index
:
1
;
right
:
0vw
;
margin
:
4
.2rem
;
margin-right
:
10px
;
/* เพิ่มใหม่ 12/16*/
}
.htable
{
height
:
400px
;
}
table
.ti-custom-table
thead
{
height
:
60px
;
}
table
.ti-custom-table
thead
th
span
{
font-size
:
12px
;
font-weight
:
bold
;
}
.ti-custom-table
td
{
padding-left
:
0
.9rem
;
padding-right
:
1rem
;
}
.ti-custom-table
thead
th
:first-child
{
width
:
120px
;
/* ปรับความกว้างตามที่ต้องการ */
text-align
:
left
;
/* จัดตำแหน่งข้อความถ้าต้องการ */
padding-left
:
2px
;
padding-right
:
2px
;
}
.ti-custom-table
thead
th
:last-child
{
width
:
400px
;
/* ปรับความกว้างตามที่ต้องการ */
}
a
.custom-link
{
padding
:
10px
40px
;
/* ปรับ padding ให้เพิ่มขนาด */
}
/* สไตล์ของแถบเมนู */
.nav-tabs
{
display
:
flex
;
width
:
100%
;
cursor
:
pointer
;
margin-bottom
:
10px
;
height
:
20%
;
}
.nav-item
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link
{
text-decoration
:
none
;
padding
:
10px
20px
;
display
:
inline-block
;
font-size
:
large
;
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
#ccc
;
border-radius
:
5px
5px
0px
0px
;
}
.nav-link
:hover
{
background-color
:
#f0f0f0
;
/* เปลี่ยนสีเมื่อ hover */
}
.nav-link.active
{
color
:
#ffffff
;
/* สีตัวอักษรในสถานะ active */
font-size
:
large
;
border-bottom
:
3
.5px
solid
rgb
(
var
(
--
color-primary
));
/* เส้นใต้ */
background-color
:
rgb
(
var
(
--
color-primary
));
border-width
:
2px
2px
0px
2px
;
border-style
:
solid
;
border-color
:
rgb
(
var
(
--
color-primary
));
border-radius
:
5px
5px
0px
0px
;
}
.tab-content
{
margin-top
:
20px
;
}
.tab-pane.active
{
display
:
block
;
}
.nav-item-text
{
list-style
:
none
;
margin-right
:
10px
;
/* ช่องว่างระหว่างเมนู */
}
.nav-link-text
{
text-decoration
:
none
;
display
:
inline-block
;
font-size
:
large
;
color
:
#569bf5
;
border-bottom
:
2px
solid
#569bf5
;
line-height
:
0
.8
;
}
.ti-pagination
.page-link.active
{
background-color
:
#569bf5
;
color
:
white
;
border-radius
:
50%
;
padding
:
8px
12px
;
}
.box-body
{
padding
:
0rem
;
}
.page
{
min-height
:
0vh
;
}
.ti-modal-content
{
padding
:
1rem
;
height
:
650px
;
overflow-y
:
auto
;
}
.ti-modal-content-alert
{
width
:
35%
;
/* ความกว้างที่คุณต้องการ */
position
:
absolute
;
/* ทำให้สามารถจัดตำแหน่งได้ */
top
:
50%
;
/* ให้อยู่กลางในแนวตั้ง */
left
:
50%
;
/* ให้อยู่กลางในแนวนอน */
transform
:
translate
(
-50%
,
-50%
);
/* เคลื่อนที่ modal กลับมาให้ตรงกลาง */
background-color
:
#ffffff
;
}
.header-title-type
{
width
:
100%
;
min-height
:
50px
;
/* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
justify-content
:
space-between
;
/* จัดเรียงองค์ประกอบภายใน */
align-items
:
center
;
/* จัดกลางแนวตั้ง */
padding-top
:
50px
;
padding-bottom
:
1rem
;
}
.body-content
{
margin-bottom
:
30px
;
overflow-y
:
auto
;
}
.bg-input-readonly
{
background-color
:
rgb
(
241
245
249
);
}
.ciricon
{
height
:
12px
;
/* กำหนดความสูงของวงกลม */
width
:
12px
;
/* กำหนดความกว้างของวงกลม */
background-color
:
#ffffff
;
font-weight
:
bold
;
display
:
flex
;
/* ใช้ Flexbox */
justify-content
:
center
;
/* จัดตำแหน่งแนวนอนให้กึ่งกลาง */
align-items
:
center
;
/* จัดตำแหน่งแนวตั้งให้กึ่งกลาง */
border-radius
:
2px
;
/* ทำให้เป็นวงกลม */
}
.ri-close-line
{
font-size
:
15px
;
/* ขนาดไอคอน */
}
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component.ts
0 → 100644
View file @
6cf36c51
import
{
Component
,
EventEmitter
,
Input
,
Output
}
from
'@angular/core'
;
import
{
ToastrService
}
from
'ngx-toastr'
;
export
interface
DataModel
{
check
:
boolean
;
code
:
string
;
details
:
string
;
grade
:
string
;
highscore
:
string
;
lowscore
:
string
;
weight
:
string
;
}
@
Component
({
selector
:
'app-sub-grade-registration'
,
templateUrl
:
'./sub-grade-registration.component.html'
,
styleUrls
:
[
'./sub-grade-registration.component.scss'
],
})
export
class
SubGradeRegistrationComponent
{
@
Output
()
sendPathTitle
:
EventEmitter
<
string
[]
>
=
new
EventEmitter
<
string
[]
>
();
modalStatus
:
"add"
|
"edit"
=
"add"
addTab
=
false
;
editTab
=
false
;
currentPage
=
1
;
page
=
Array
.
from
({
length
:
1
},
(
_
,
i
)
=>
i
+
1
);
numDataListChecked
=
0
;
isDataListChecked
=
false
;
isDataListCheckedAll
=
false
;
search
=
''
;
dataList
:
DataModel
[]
=
[
{
check
:
false
,
code
:
'O1A'
,
details
:
'ระดับ A'
,
grade
:
'A'
,
highscore
:
'O1A'
,
lowscore
:
'O1A'
,
weight
:
'O1A'
},
{
check
:
false
,
code
:
'O2B'
,
details
:
'ระดับ B'
,
grade
:
'B'
,
highscore
:
'O1B'
,
lowscore
:
'O1B'
,
weight
:
'O1B'
},
];
constructor
(
private
toastr
:
ToastrService
)
{
this
.
pathTitleChange
();
}
pathTitleChange
()
{
this
.
sendPathTitle
.
emit
(
this
.
addTab
?
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
,
'เพิ่มกลุ่มเกรด'
]
:
this
.
editTab
?
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
,
'แก้ไขกลุ่มเกรด'
]
:
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
]
);
}
searchChange
()
{
this
.
currentPage
=
1
;
const
filteredData
=
this
.
dataListFilter
();
this
.
page
=
Array
.
from
({
length
:
Math
.
ceil
(
filteredData
.
length
/
10
)
},
(
_
,
i
)
=>
i
+
1
);
}
dataListFilter
()
{
return
this
.
dataList
.
filter
((
x
)
=>
{
const
match
=
x
.
code
.
includes
(
this
.
search
)
||
x
.
details
.
includes
(
this
.
search
);
if
(
!
match
)
x
.
check
=
false
;
return
match
;
});
}
dataListCheck
()
{
const
dataCheck
=
this
.
dataListFilter
();
this
.
isDataListChecked
=
dataCheck
.
some
((
x
)
=>
x
.
check
);
this
.
isDataListCheckedAll
=
dataCheck
.
length
?
dataCheck
.
every
((
x
)
=>
x
.
check
)
:
false
;
this
.
numDataListChecked
=
dataCheck
.
filter
((
x
)
=>
x
.
check
).
length
;
}
dataListCheckAll
()
{
const
selectAll
=
this
.
isDataListCheckedAll
;
this
.
dataList
.
forEach
((
x
)
=>
(
x
.
check
=
selectAll
));
this
.
dataListCheck
();
// อัปเดตสถานะการเช็ก
}
showSuccessAdd
()
{
this
.
toastr
.
success
(
'เพิ่มข้อมูลสำเร็จ!'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
,
});
}
showSuccessEdit
()
{
this
.
toastr
.
success
(
'แก้ไขข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
,
});
}
showSuccessDelete
()
{
this
.
toastr
.
success
(
'ลบข้อมูลสำเร็จ'
,
'เเจ้งเตือน'
,
{
timeOut
:
3000
,
positionClass
:
'toast-top-right'
,
});
}
addUser
()
{
}
}
src/app/components/competency-assessment/grade-registration/grade-registration.component.html
0 → 100644
View file @
6cf36c51
<app-page-header
[
pathTitle
]="
pathTitle
"
></app-page-header>
<div
class=
"bg-card-white"
>
</div>
<div
class=
"block-main-content"
>
<div
class=
"font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem"
>
ทะเบียนเกรด
</div>
<div
class=
"page pt-0.75rem"
>
<div
class=
"border-b border-gray-200 dark:border-white/10 px-8"
>
<nav
class=
"-mb-0.5 flex space-x-6 rtl:space-x-reverse"
>
<a
class=
"font-size-16px font-weight-500 hs-tab-active:font-weight-700 hs-tab-active:border-secondary hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500 hover:text-secondary active"
href=
"javascript:void(0);"
id=
"underline-item-1"
data-hs-tab=
"#underline-1"
aria-controls=
"underline-1"
(
click
)="
pathTitle =
['การประเมินสมรรถนะ','ทะเบียนเกรด','การจัดการเกรด']"
>
การจัดการเกรด
</a>
</nav>
</div>
<div
class=
"px-2rem pt-50px"
>
<div
id=
"underline-1"
role=
"tabpanel"
aria-labelledby=
"underline-item-1"
>
<app-grade-management
(
sendPathTitle
)="
pathTitle=
$event"
></app-grade-management>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/components/competency-assessment/grade-registration/grade-registration.component.scss
0 → 100644
View file @
6cf36c51
src/app/components/competency-assessment/grade-registration/grade-registration.component.ts
0 → 100644
View file @
6cf36c51
import
{
Component
}
from
'@angular/core'
;
@
Component
({
selector
:
'app-grade-registration'
,
templateUrl
:
'./grade-registration.component.html'
,
styleUrls
:
[
'./grade-registration.component.scss'
]
})
export
class
GradeRegistrationComponent
{
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'ทะเบียนเกรด'
,
'การจัดการเกรด'
]
groupShow
=
'1'
}
src/app/components/dashboard/dashboard-routing.module.ts
View file @
6cf36c51
...
@@ -20,7 +20,7 @@ import { NameRegistrationComponent } from '../competency-assessment/name-registr
...
@@ -20,7 +20,7 @@ import { NameRegistrationComponent } from '../competency-assessment/name-registr
import
{
ToolRegisterComponent
}
from
'../competency-assessment/tool-register/tool-register.component'
;
import
{
ToolRegisterComponent
}
from
'../competency-assessment/tool-register/tool-register.component'
;
import
{
CourseRegistrationComponent
}
from
'../competency-assessment/course-registration/course-registration.component'
;
import
{
CourseRegistrationComponent
}
from
'../competency-assessment/course-registration/course-registration.component'
;
import
{
CompetencyManagementComponent
}
from
'../competency-assessment/competency-management/competency-management.component'
;
import
{
CompetencyManagementComponent
}
from
'../competency-assessment/competency-management/competency-management.component'
;
import
{
EditGr
uo
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component'
;
import
{
EditGr
ou
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component'
;
import
{
EvaluationCycleManagerComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component'
;
import
{
EvaluationCycleManagerComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component'
;
import
{
SettingCompetencyComponent
}
from
'../competency-assessment/setting-competency/setting-competency.component'
;
import
{
SettingCompetencyComponent
}
from
'../competency-assessment/setting-competency/setting-competency.component'
;
import
{
IdpDevelopmentPlanComponent
}
from
'../competency-assessment/idp-development-plan/idp-development-plan.component'
;
import
{
IdpDevelopmentPlanComponent
}
from
'../competency-assessment/idp-development-plan/idp-development-plan.component'
;
...
@@ -35,6 +35,7 @@ import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervi
...
@@ -35,6 +35,7 @@ import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervi
import
{
EmployeeRegistrationComponent
}
from
'../company-components/employee-registration/employee-registration.component'
;
import
{
EmployeeRegistrationComponent
}
from
'../company-components/employee-registration/employee-registration.component'
;
import
{
NameRegistrationPerfomanceComponent
}
from
'../performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component'
;
import
{
NameRegistrationPerfomanceComponent
}
from
'../performance-management-evaluation/name-registration-perfomance/name-registration-perfomance.component'
;
import
{
EvaluationFactorsComponent
}
from
'../performance-management-evaluation/evaluation-factors/evaluation-factors.component'
;
import
{
EvaluationFactorsComponent
}
from
'../performance-management-evaluation/evaluation-factors/evaluation-factors.component'
;
import
{
GradeRegistrationComponent
}
from
'../competency-assessment/grade-registration/grade-registration.component'
;
...
@@ -64,7 +65,7 @@ const routes: Routes = [
...
@@ -64,7 +65,7 @@ const routes: Routes = [
{
path
:
"competency-management"
,
title
:
'การจัดการสมรรถนะ'
,
component
:
CompetencyManagementComponent
},
{
path
:
"competency-management"
,
title
:
'การจัดการสมรรถนะ'
,
component
:
CompetencyManagementComponent
},
{
path
:
"job-detail-management"
,
title
:
'การจัดการรายละเอียดงาน'
,
component
:
JobDetailManagementComponent
},
{
path
:
"job-detail-management"
,
title
:
'การจัดการรายละเอียดงาน'
,
component
:
JobDetailManagementComponent
},
{
path
:
"course-registration"
,
title
:
'ทะเบียนหลักสูตร'
,
component
:
CourseRegistrationComponent
},
{
path
:
"course-registration"
,
title
:
'ทะเบียนหลักสูตร'
,
component
:
CourseRegistrationComponent
},
{
path
:
"edit-group-competencies"
,
title
:
'แก้ไขกลุ่มสมรรถนะ'
,
component
:
EditGr
uo
pCompetenciesComponent
},
{
path
:
"edit-group-competencies"
,
title
:
'แก้ไขกลุ่มสมรรถนะ'
,
component
:
EditGr
ou
pCompetenciesComponent
},
{
path
:
"evaluation-cycle-manager"
,
title
:
'การจัดการรอบการประเมิน'
,
component
:
EvaluationCycleManagerComponent
},
{
path
:
"evaluation-cycle-manager"
,
title
:
'การจัดการรอบการประเมิน'
,
component
:
EvaluationCycleManagerComponent
},
{
path
:
"setting-competency"
,
title
:
'การตั้งค่า'
,
component
:
SettingCompetencyComponent
},
{
path
:
"setting-competency"
,
title
:
'การตั้งค่า'
,
component
:
SettingCompetencyComponent
},
{
path
:
"idp-development-plan"
,
title
:
'เเผนพัฒนา IDP'
,
component
:
IdpDevelopmentPlanComponent
},
{
path
:
"idp-development-plan"
,
title
:
'เเผนพัฒนา IDP'
,
component
:
IdpDevelopmentPlanComponent
},
...
@@ -79,6 +80,7 @@ const routes: Routes = [
...
@@ -79,6 +80,7 @@ const routes: Routes = [
{
path
:
"employee-registration"
,
title
:
'ทะเบียนพนักงาน'
,
component
:
EmployeeRegistrationComponent
},
{
path
:
"employee-registration"
,
title
:
'ทะเบียนพนักงาน'
,
component
:
EmployeeRegistrationComponent
},
{
path
:
"name-registration-perfomance"
,
title
:
'ทะเบียนกำหนดชื่อ'
,
component
:
NameRegistrationPerfomanceComponent
},
{
path
:
"name-registration-perfomance"
,
title
:
'ทะเบียนกำหนดชื่อ'
,
component
:
NameRegistrationPerfomanceComponent
},
{
path
:
"evaluation-factors"
,
title
:
'การประเมินจัดการประสิทธิภาพ'
,
component
:
EvaluationFactorsComponent
},
{
path
:
"evaluation-factors"
,
title
:
'การประเมินจัดการประสิทธิภาพ'
,
component
:
EvaluationFactorsComponent
},
{
path
:
"grade-registration"
,
title
:
'ทะเบียนเกรด'
,
component
:
GradeRegistrationComponent
},
]
]
}
}
...
...
src/app/components/dashboard/dashboard.module.ts
View file @
6cf36c51
...
@@ -63,8 +63,8 @@ import { DevelopmentCourseComponent } from '../competency-assessment/course-regi
...
@@ -63,8 +63,8 @@ import { DevelopmentCourseComponent } from '../competency-assessment/course-regi
import
{
CompetencyManagementComponent
}
from
'../competency-assessment/competency-management/competency-management.component'
;
import
{
CompetencyManagementComponent
}
from
'../competency-assessment/competency-management/competency-management.component'
;
import
{
IndicatorsAndCurriculumComponent
}
from
'../competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component'
;
import
{
IndicatorsAndCurriculumComponent
}
from
'../competency-assessment/competency-management/indicators-and-curriculum/indicators-and-curriculum.component'
;
import
{
EditGroupIndicators
}
from
'../competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators'
;
import
{
EditGroupIndicators
}
from
'../competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators'
;
import
{
Gr
uo
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/group-competencies.component'
;
import
{
Gr
ou
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/group-competencies.component'
;
import
{
EditGr
uo
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component'
;
import
{
EditGr
ou
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component'
;
import
{
EvaluationCycleManagerComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component'
;
import
{
EvaluationCycleManagerComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle-manager.component'
;
import
{
EvaluationCycleComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component'
;
import
{
EvaluationCycleComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component'
;
import
{
SettingCompetencyComponent
}
from
'../competency-assessment/setting-competency/setting-competency.component'
;
import
{
SettingCompetencyComponent
}
from
'../competency-assessment/setting-competency/setting-competency.component'
;
...
@@ -102,6 +102,12 @@ import { AssessmentTopicsComponent } from '../performance-management-evaluation/
...
@@ -102,6 +102,12 @@ import { AssessmentTopicsComponent } from '../performance-management-evaluation/
import
{
ManagementCycleComponent
}
from
'../performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component'
;
import
{
ManagementCycleComponent
}
from
'../performance-management-evaluation/evaluation-cycle-performance/management-evaluation-cycle/management-evaluation-cycle.component'
;
import
{
EvaluationFactorsComponent
}
from
'../performance-management-evaluation/evaluation-factors/evaluation-factors.component'
;
import
{
EvaluationFactorsComponent
}
from
'../performance-management-evaluation/evaluation-factors/evaluation-factors.component'
;
import
{
DefineEvaluationFactorsComponent
}
from
'../performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component'
;
import
{
DefineEvaluationFactorsComponent
}
from
'../performance-management-evaluation/evaluation-factors/define-evaluation-factors/define-evaluation-factors.component'
;
import
{
GradeRegistrationComponent
}
from
'../competency-assessment/grade-registration/grade-registration.component'
;
import
{
GradeManagementComponent
}
from
'../competency-assessment/grade-registration/grade-management/grade-management.component'
;
import
{
AddGroupGradeComponent
}
from
'../competency-assessment/grade-registration/grade-management/add-group-grade/add-group-grade.component'
;
import
{
EditGroupGradeComponent
}
from
'../competency-assessment/grade-registration/grade-management/edit-froup-grade/edit-group-grade.component'
;
import
{
SubGradeRegistrationComponent
}
from
'../competency-assessment/grade-registration/grade-management/sub-grade-registration/sub-grade-registration.component'
;
@
NgModule
({
@
NgModule
({
declarations
:
[
declarations
:
[
...
@@ -148,8 +154,8 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
...
@@ -148,8 +154,8 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
IndicatorsAndCurriculumComponent
,
IndicatorsAndCurriculumComponent
,
ImportDataComponent
,
ImportDataComponent
,
EditGroupIndicators
,
EditGroupIndicators
,
Gr
uo
pCompetenciesComponent
,
Gr
ou
pCompetenciesComponent
,
EditGr
uo
pCompetenciesComponent
,
EditGr
ou
pCompetenciesComponent
,
EvaluationCycleManagerComponent
,
EvaluationCycleManagerComponent
,
EvaluationCycleComponent
,
EvaluationCycleComponent
,
SettingCompetencyComponent
,
SettingCompetencyComponent
,
...
@@ -185,7 +191,12 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
...
@@ -185,7 +191,12 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
EditEvaluationGroupingComponent
,
EditEvaluationGroupingComponent
,
ManagementCycleComponent
,
ManagementCycleComponent
,
EvaluationFactorsComponent
,
EvaluationFactorsComponent
,
DefineEvaluationFactorsComponent
DefineEvaluationFactorsComponent
,
GradeRegistrationComponent
,
GradeManagementComponent
,
AddGroupGradeComponent
,
EditGroupGradeComponent
,
SubGradeRegistrationComponent
,
],
],
imports
:
[
imports
:
[
CommonModule
,
CommonModule
,
...
...
src/app/shared/services/navservice.ts
View file @
6cf36c51
...
@@ -121,7 +121,7 @@ export class NavService implements OnDestroy {
...
@@ -121,7 +121,7 @@ export class NavService implements OnDestroy {
path
:
'/name-registration'
,
path
:
'/name-registration'
,
children
:
[
children
:
[
{
path
:
'/name-registration'
,
title
:
'ทะเบียนกำหนดชื่อ'
,
type
:
'link'
},
{
path
:
'/name-registration'
,
title
:
'ทะเบียนกำหนดชื่อ'
,
type
:
'link'
},
{
path
:
'/
dashboard/ecommerce
'
,
title
:
'ทะเบียนเกรด'
,
type
:
'link'
},
{
path
:
'/
grade-registration
'
,
title
:
'ทะเบียนเกรด'
,
type
:
'link'
},
{
path
:
'/tool-register'
,
title
:
'ทะเบียนเครื่องมือ'
,
type
:
'link'
},
{
path
:
'/tool-register'
,
title
:
'ทะเบียนเครื่องมือ'
,
type
:
'link'
},
{
path
:
'/course-registration'
,
title
:
'ทะเบียนหลักสูตร'
,
type
:
'link'
},
{
path
:
'/course-registration'
,
title
:
'ทะเบียนหลักสูตร'
,
type
:
'link'
},
{
path
:
'/idp-development-plan'
,
title
:
'แผนพัฒนา IDP'
,
type
:
'link'
},
{
path
:
'/idp-development-plan'
,
title
:
'แผนพัฒนา IDP'
,
type
:
'link'
},
...
...
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