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
6cf36c51
Commit
6cf36c51
authored
Jan 15, 2025
by
Natthaphat Pankiang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
การประเมินสมรรถนะ > ทะเบียนเกรด
parent
4eb050dc
Expand all
Hide 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';
templateUrl
:
'./edit-group-competencies.component.html'
,
styleUrls
:
[
'./edit-group-competencies.component.scss'
]
})
export
class
EditGr
uo
pCompetenciesComponent
{
export
class
EditGr
ou
pCompetenciesComponent
{
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'จัดกลุ่มสมรรถนะ'
];
@
Output
()
sendPathTitle
:
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';
templateUrl
:
'./group-competencies.component.html'
,
styleUrls
:
[
'./group-competencies.component.scss'
]
})
export
class
Gr
uo
pCompetenciesComponent
{
export
class
Gr
ou
pCompetenciesComponent
{
@
Input
()
pathTitle
=
[
'การประเมินสมรรถนะ'
,
'การจัดการสมรรถนะ'
,
'จัดกลุ่มสมรรถนะ'
];
@
Output
()
sendPathTitle
:
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
import
{
ToolRegisterComponent
}
from
'../competency-assessment/tool-register/tool-register.component'
;
import
{
CourseRegistrationComponent
}
from
'../competency-assessment/course-registration/course-registration.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
{
SettingCompetencyComponent
}
from
'../competency-assessment/setting-competency/setting-competency.component'
;
import
{
IdpDevelopmentPlanComponent
}
from
'../competency-assessment/idp-development-plan/idp-development-plan.component'
;
...
...
@@ -35,6 +35,7 @@ import { SupervisorEvaluationComponent } from '../Performance Evaluation/supervi
import
{
EmployeeRegistrationComponent
}
from
'../company-components/employee-registration/employee-registration.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
{
GradeRegistrationComponent
}
from
'../competency-assessment/grade-registration/grade-registration.component'
;
...
...
@@ -64,7 +65,7 @@ const routes: Routes = [
{
path
:
"competency-management"
,
title
:
'การจัดการสมรรถนะ'
,
component
:
CompetencyManagementComponent
},
{
path
:
"job-detail-management"
,
title
:
'การจัดการรายละเอียดงาน'
,
component
:
JobDetailManagementComponent
},
{
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
:
"setting-competency"
,
title
:
'การตั้งค่า'
,
component
:
SettingCompetencyComponent
},
{
path
:
"idp-development-plan"
,
title
:
'เเผนพัฒนา IDP'
,
component
:
IdpDevelopmentPlanComponent
},
...
...
@@ -79,6 +80,7 @@ const routes: Routes = [
{
path
:
"employee-registration"
,
title
:
'ทะเบียนพนักงาน'
,
component
:
EmployeeRegistrationComponent
},
{
path
:
"name-registration-perfomance"
,
title
:
'ทะเบียนกำหนดชื่อ'
,
component
:
NameRegistrationPerfomanceComponent
},
{
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
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
{
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
{
EditGr
uo
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component'
;
import
{
Gr
ou
pCompetenciesComponent
}
from
'../competency-assessment/competency-management/group-competencies/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
{
EvaluationCycleComponent
}
from
'../competency-assessment/evaluation-cycle-manager/evaluation-cycle/evaluation-cycle.component'
;
import
{
SettingCompetencyComponent
}
from
'../competency-assessment/setting-competency/setting-competency.component'
;
...
...
@@ -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
{
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
{
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
({
declarations
:
[
...
...
@@ -148,8 +154,8 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
IndicatorsAndCurriculumComponent
,
ImportDataComponent
,
EditGroupIndicators
,
Gr
uo
pCompetenciesComponent
,
EditGr
uo
pCompetenciesComponent
,
Gr
ou
pCompetenciesComponent
,
EditGr
ou
pCompetenciesComponent
,
EvaluationCycleManagerComponent
,
EvaluationCycleComponent
,
SettingCompetencyComponent
,
...
...
@@ -185,7 +191,12 @@ import { DefineEvaluationFactorsComponent } from '../performance-management-eval
EditEvaluationGroupingComponent
,
ManagementCycleComponent
,
EvaluationFactorsComponent
,
DefineEvaluationFactorsComponent
DefineEvaluationFactorsComponent
,
GradeRegistrationComponent
,
GradeManagementComponent
,
AddGroupGradeComponent
,
EditGroupGradeComponent
,
SubGradeRegistrationComponent
,
],
imports
:
[
CommonModule
,
...
...
src/app/shared/services/navservice.ts
View file @
6cf36c51
...
...
@@ -121,7 +121,7 @@ export class NavService implements OnDestroy {
path
:
'/name-registration'
,
children
:
[
{
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
:
'/course-registration'
,
title
:
'ทะเบียนหลักสูตร'
,
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