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
121a3293
Commit
121a3293
authored
3 months ago
by
Nattana Chaiyamat
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
modal
parent
38921ef9
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
465 additions
and
17 deletions
+465
-17
department-register.component.html
...it/department-register/department-register.component.html
+253
-3
department-register.component.scss
...it/department-register/department-register.component.scss
+160
-0
department-register.component.ts
...unit/department-register/department-register.component.ts
+39
-0
style.css
src/assets/css/style.css
+1
-1
styles.scss
src/styles.scss
+12
-13
No files found.
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.html
View file @
121a3293
...
...
@@ -8,7 +8,9 @@
</div>
</div>
<div
class=
"px-1"
>
<button
type=
"button"
class=
"button-blue-light"
><i
class=
"ri-add-line"
></i>
Add
</button>
<button
type=
"button"
class=
"button-blue-light"
(
click
)="
openModal
('
add
','
m
',
false
)"
>
<i
class=
"ri-add-line"
></i>
Add
</button>
</div>
<div
class=
"px-1"
>
<button
type=
"button"
class=
"button-purple-light"
><i
class=
"ri-printer-line"
></i>
Print
</button>
...
...
@@ -96,7 +98,8 @@
<td
class=
"body-table-center"
>
<div
class=
"px-1"
>
<svg
width=
"16"
height=
"16"
viewBox=
"0 0 24 24"
id=
"Layer_1"
data-name=
"Layer 1"
xmlns=
"http://www.w3.org/2000/svg"
fill=
"#64748b"
stroke=
"#64748b"
>
xmlns=
"http://www.w3.org/2000/svg"
fill=
"#64748b"
stroke=
"#64748b"
class=
"cursor-pointer"
(
click
)="
openModal
('
edit
','
m
',
false
)"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
...
...
@@ -121,7 +124,7 @@
</div>
<div
class=
"px-1"
>
<svg
width=
"16"
height=
"16"
viewBox=
"0 0 24 24"
fill=
"none"
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"#64748b"
>
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"#64748b"
class=
"cursor-pointer"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
...
...
@@ -149,4 +152,250 @@
</table>
</div>
</div>
</div>
<!-- Backdrop add -->
<div
class=
"modal-backdrop"
*
ngIf=
"modalOptions['add'].isModalOpen"
[
ngClass
]="{
'
no-close
'
:
!
modalOptions
['
add
'].
backdropClose
}"
(
click
)="
modalOptions
['
add
'].
backdropClose
&&
closeModal
('
add
')"
></div>
<!-- Modal add -->
<div
class=
"modal"
[
ngClass
]="
modalOptions
['
add
'].
modalSize
"
*
ngIf=
"modalOptions['add'].isModalOpen"
>
<div
class=
"modal-content"
>
<!-- Header -->
<div
class=
"modal-header"
>
<div
class=
"modal-head-title"
>
เพิ่มข้อมูลทะเบียนฝ่าย
</div>
<button
(
click
)="
closeModal
('
add
')"
>
<svg
width=
"20"
height=
"20"
viewBox=
"0 0 32 32"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
xmlns:sketch=
"http://www.bohemiancoding.com/sketch/ns"
fill=
"#f23354"
stroke=
"#f23354"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
<title>
cross-circle
</title>
<desc>
Created with Sketch Beta.
</desc>
<defs>
</defs>
<g
id=
"Page-1"
stroke-width=
"0.41600000000000004"
fill=
"none"
fill-rule=
"evenodd"
sketch:type=
"MSPage"
>
<g
id=
"Icon-Set"
sketch:type=
"MSLayerGroup"
transform=
"translate(-568.000000, -1087.000000)"
fill=
"#f23354"
>
<path
d=
"M584,1117 C576.268,1117 570,1110.73 570,1103 C570,1095.27 576.268,1089 584,1089 C591.732,1089 598,1095.27 598,1103 C598,1110.73 591.732,1117 584,1117 L584,1117 Z M584,1087 C575.163,1087 568,1094.16 568,1103 C568,1111.84 575.163,1119 584,1119 C592.837,1119 600,1111.84 600,1103 C600,1094.16 592.837,1087 584,1087 L584,1087 Z M589.717,1097.28 C589.323,1096.89 588.686,1096.89 588.292,1097.28 L583.994,1101.58 L579.758,1097.34 C579.367,1096.95 578.733,1096.95 578.344,1097.34 C577.953,1097.73 577.953,1098.37 578.344,1098.76 L582.58,1102.99 L578.314,1107.26 C577.921,1107.65 577.921,1108.29 578.314,1108.69 C578.708,1109.08 579.346,1109.08 579.74,1108.69 L584.006,1104.42 L588.242,1108.66 C588.633,1109.05 589.267,1109.05 589.657,1108.66 C590.048,1108.27 590.048,1107.63 589.657,1107.24 L585.42,1103.01 L589.717,1098.71 C590.11,1098.31 590.11,1097.68 589.717,1097.28 L589.717,1097.28 Z"
id=
"cross-circle"
sketch:type=
"MSShapeGroup"
>
</path>
</g>
</g>
</g>
</svg>
</button>
<div
class=
"button-clear"
>
<button
type=
"button"
class=
"button-indigo-light modal-button"
>
<svg
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=
"button-help"
>
<button
type=
"button"
class=
"button-yellow-light modal-button"
>
<svg
width=
"16"
height=
"16"
viewBox=
"-2.4 -2.4 28.80 28.80"
fill=
"none"
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"#E7A927"
transform=
"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"
stroke=
"#ffffff"
stroke-width=
"2.4"
>
<path
d=
"M12 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
>
</path>
</g>
<g
id=
"SVGRepo_iconCarrier"
>
<path
d=
"M12 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
>
</path>
</g>
</svg>
Help
</button>
</div>
</div>
<!-- Body -->
<div
class=
"modal-body"
>
<label
for=
"department"
class=
"block text-sm mb-2 dark:text-white"
>
ฝ่าย
</label>
<div
class=
"flex mb-5"
>
<div
class=
"relative w-full"
>
<input
type=
"text"
id=
"department"
name=
"department"
class=
"py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-small"
>
</div>
</div>
<label
for=
"detail_th"
class=
"block text-sm mb-2 dark:text-white"
>
รายละเอียดฝ่าย (ไทย)
</label>
<div
class=
"flex mb-5"
>
<div
class=
"relative w-full"
>
<input
type=
"text"
id=
"detail_th"
name=
"detailth"
class=
"py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full"
>
</div>
</div>
<label
for=
"detail_eng"
class=
"block text-sm mb-2 dark:text-white"
>
รายละเอียดฝ่าย (อังกฤษ)
</label>
<div
class=
"flex mb-5"
>
<div
class=
"relative w-full"
>
<input
type=
"text"
id=
"detail_eng"
name=
"detail_eng"
class=
"py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full"
>
</div>
</div>
<div
class=
"flex justify-end"
>
<button
type=
"button"
class=
"modal-button-white mr-1"
(
click
)="
closeModal
('
add
')"
>
ย้อนกลับ
</button>
<button
type=
"button"
class=
"modal-button-green ml-1"
(
click
)="
closeModal
('
add
')"
>
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
<!-- Backdrop edit -->
<div
class=
"modal-backdrop"
*
ngIf=
"modalOptions['edit'].isModalOpen"
[
ngClass
]="{
'
no-close
'
:
!
modalOptions
['
edit
'].
backdropClose
}"
(
click
)="
modalOptions
['
edit
'].
backdropClose
&&
closeModal
('
edit
')"
></div>
<!-- Modal edit -->
<div
class=
"modal"
[
ngClass
]="
modalOptions
['
edit
'].
modalSize
"
*
ngIf=
"modalOptions['edit'].isModalOpen"
>
<div
class=
"modal-content"
>
<!-- Header -->
<div
class=
"modal-header"
>
<div
class=
"modal-head-title"
>
แก้ไขข้อมูลทะเบียนฝ่าย
</div>
<button
(
click
)="
closeModal
('
edit
')"
>
<svg
width=
"20"
height=
"20"
viewBox=
"0 0 32 32"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
xmlns:sketch=
"http://www.bohemiancoding.com/sketch/ns"
fill=
"#f23354"
stroke=
"#f23354"
>
<g
id=
"SVGRepo_bgCarrier"
stroke-width=
"0"
></g>
<g
id=
"SVGRepo_tracerCarrier"
stroke-linecap=
"round"
stroke-linejoin=
"round"
></g>
<g
id=
"SVGRepo_iconCarrier"
>
<title>
cross-circle
</title>
<desc>
Created with Sketch Beta.
</desc>
<defs>
</defs>
<g
id=
"Page-1"
stroke-width=
"0.41600000000000004"
fill=
"none"
fill-rule=
"evenodd"
sketch:type=
"MSPage"
>
<g
id=
"Icon-Set"
sketch:type=
"MSLayerGroup"
transform=
"translate(-568.000000, -1087.000000)"
fill=
"#f23354"
>
<path
d=
"M584,1117 C576.268,1117 570,1110.73 570,1103 C570,1095.27 576.268,1089 584,1089 C591.732,1089 598,1095.27 598,1103 C598,1110.73 591.732,1117 584,1117 L584,1117 Z M584,1087 C575.163,1087 568,1094.16 568,1103 C568,1111.84 575.163,1119 584,1119 C592.837,1119 600,1111.84 600,1103 C600,1094.16 592.837,1087 584,1087 L584,1087 Z M589.717,1097.28 C589.323,1096.89 588.686,1096.89 588.292,1097.28 L583.994,1101.58 L579.758,1097.34 C579.367,1096.95 578.733,1096.95 578.344,1097.34 C577.953,1097.73 577.953,1098.37 578.344,1098.76 L582.58,1102.99 L578.314,1107.26 C577.921,1107.65 577.921,1108.29 578.314,1108.69 C578.708,1109.08 579.346,1109.08 579.74,1108.69 L584.006,1104.42 L588.242,1108.66 C588.633,1109.05 589.267,1109.05 589.657,1108.66 C590.048,1108.27 590.048,1107.63 589.657,1107.24 L585.42,1103.01 L589.717,1098.71 C590.11,1098.31 590.11,1097.68 589.717,1097.28 L589.717,1097.28 Z"
id=
"cross-circle"
sketch:type=
"MSShapeGroup"
>
</path>
</g>
</g>
</g>
</svg>
</button>
<div
class=
"button-clear"
>
<button
type=
"button"
class=
"button-indigo-light modal-button"
>
<svg
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=
"button-help"
>
<button
type=
"button"
class=
"button-yellow-light modal-button"
>
<svg
width=
"16"
height=
"16"
viewBox=
"-2.4 -2.4 28.80 28.80"
fill=
"none"
xmlns=
"http://www.w3.org/2000/svg"
stroke=
"#E7A927"
transform=
"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"
stroke=
"#ffffff"
stroke-width=
"2.4"
>
<path
d=
"M12 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
>
</path>
</g>
<g
id=
"SVGRepo_iconCarrier"
>
<path
d=
"M12 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5V18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 18.5C20.5 18.5 19.5 16.5 16 16.5C12.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 18.5C3.5 18.5 4.5 16.5 8 16.5C11.5 16.5 12 18.5 12 18.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M20.5 6.5C20.5 6.5 19.5 4.5 16 4.5C12.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
></path>
<path
d=
"M3.5 6.5C3.5 6.5 4.5 4.5 8 4.5C11.5 4.5 12 6.5 12 6.5"
stroke=
"#E7A927"
stroke-linecap=
"round"
>
</path>
</g>
</svg>
Help
</button>
</div>
</div>
<!-- Body -->
<div
class=
"modal-body"
>
<label
for=
"department"
class=
"block text-sm mb-2 dark:text-white"
>
ฝ่าย
</label>
<div
class=
"flex mb-5"
>
<div
class=
"relative w-full"
>
<input
type=
"text"
id=
"department"
name=
"department"
class=
"py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-small input-disabled"
disabled
value=
"01"
>
</div>
</div>
<label
for=
"detail_th"
class=
"block text-sm mb-2 dark:text-white"
>
รายละเอียดฝ่าย (ไทย)
</label>
<div
class=
"flex mb-5"
>
<div
class=
"relative w-full"
>
<input
type=
"text"
id=
"detail_th"
name=
"detailth"
class=
"py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full"
value=
"ฝ่าย 1"
>
</div>
</div>
<label
for=
"detail_eng"
class=
"block text-sm mb-2 dark:text-white"
>
รายละเอียดฝ่าย (อังกฤษ)
</label>
<div
class=
"flex mb-5"
>
<div
class=
"relative w-full"
>
<input
type=
"text"
id=
"detail_eng"
name=
"detail_eng"
class=
"py-2 px-3 border-gray-200 rounded-sm text-sm modal-input-full"
value=
"department 1"
>
</div>
</div>
<div
class=
"flex justify-end"
>
<button
type=
"button"
class=
"modal-button-white mr-1"
(
click
)="
closeModal
('
edit
')"
>
ย้อนกลับ
</button>
<button
type=
"button"
class=
"modal-button-green ml-1"
(
click
)="
closeModal
('
edit
')"
>
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.scss
View file @
121a3293
...
...
@@ -56,3 +56,163 @@
color
:
#569bf5
;
border-bottom
:
3
.5px
solid
#569bf5
;
}
//modal
$modal-padding
:
20px
;
$header-footer-color
:
#f4f4f4
00
;
$border-color
:
#ddd
;
$header-footer-height
:
60px
;
// กำหนดความสูงของ header + footer รวมกัน
$modal-sizes
:
(
s
:
300px
,
m
:
500px
,
l
:
800px
,
vw10
:
10vw
,
vw20
:
20vw
,
vw30
:
30vw
,
vw40
:
40vw
,
vw50
:
50vw
,
vw60
:
60vw
,
vw70
:
70vw
,
vw80
:
80vw
,
vw90
:
90vw
,
vw100
:
100vw
);
.modal-backdrop
{
position
:
fixed
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
background-color
:
rgba
(
0
,
0
,
0
,
0
.5
);
z-index
:
999
;
}
.modal
{
position
:
fixed
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
background-color
:
#fff
;
border-radius
:
10px
;
box-shadow
:
0
4px
6px
rgba
(
0
,
0
,
0
,
0
.1
);
z-index
:
1000
;
display
:
flex
;
flex-direction
:
column
;
max-height
:
80vh
;
// จำกัดความสูงของ Modal ทั้งหมด
@each
$size
,
$width
in
$modal-sizes
{
&
.
#{
$size
}
{
width
:
$width
;
}
}
.modal-content
{
display
:
flex
;
flex-direction
:
column
;
height
:
100%
;
}
.modal-header
{
background-color
:
$header-footer-color
;
padding
:
$modal-padding
;
border-bottom
:
1px
solid
$border-color
;
display
:
flex
;
justify-content
:
space-between
;
align-items
:
center
;
height
:
$header-footer-height
;
// กำหนดความสูงของ Header
.modal-head-title
{
color
:
rgb
(
var
(
--
color-primary
));
font-weight
:
700
;
font-size
:
large
;
}
}
.modal-body
{
flex
:
1
;
overflow-y
:
auto
;
// ทำให้สามารถ scroll ได้
padding
:
$modal-padding
;
max-height
:
calc
(
80vh
-
#{
$header-footer-height
*
2
}
);
// คำนวณความสูงของ Body หลังจากหัก Header และ Footer
}
.modal-footer
{
background-color
:
$header-footer-color
;
padding
:
$modal-padding
;
border-top
:
1px
solid
$border-color
;
display
:
flex
;
justify-content
:
flex-end
;
height
:
$header-footer-height
;
// กำหนดความสูงของ Footer
}
.button-clear
{
position
:
absolute
;
right
:
105px
;
top
:
60px
;
z-index
:
1
;
.modal-button
{
border-radius
:
7px
!
important
;
}
}
.button-help
{
position
:
absolute
;
right
:
15px
;
top
:
60px
;
z-index
:
1
;
.modal-button
{
border-radius
:
7px
!
important
;
}
}
.modal-input-small
{
width
:
50%
;
}
.modal-input-full
{
width
:
100%
;
}
.modal-button-green
{
min-width
:
5rem
;
background-color
:
#1dbe5a
;
--tw-text-opacity
:
1
;
color
:
#ffffff
;
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
border-radius
:
0
.25rem
;
border-width
:
1px
;
border-color
:
transparent
;
padding-top
:
0
.5rem
;
padding-bottom
:
0
.5rem
;
padding-left
:
0
.75rem
;
padding-right
:
0
.75rem
;
font-size
:
0
.875rem
;
line-height
:
1
.25rem
;
font-weight
:
400
;
transition-property
:
all
;
transition-timing-function
:
cubic-bezier
(
0
.4
,
0
,
0
.2
,
1
);
transition-duration
:
150ms
;
}
.modal-button-white
{
min-width
:
5rem
;
background-color
:
#ffffff
;
--tw-text-opacity
:
1
;
color
:
#475569
;
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
border-radius
:
0
.25rem
;
border-width
:
1px
;
border-color
:
transparent
;
padding-top
:
0
.5rem
;
padding-bottom
:
0
.5rem
;
padding-left
:
0
.75rem
;
padding-right
:
0
.75rem
;
font-size
:
0
.875rem
;
line-height
:
1
.25rem
;
font-weight
:
400
;
transition-property
:
all
;
transition-timing-function
:
cubic-bezier
(
0
.4
,
0
,
0
.2
,
1
);
transition-duration
:
150ms
;
--tw-border-opacity
:
1
;
border-color
:
rgb
(
226
232
240
/
var
(
--
tw-border-opacity
));
}
}
This diff is collapsed.
Click to expand it.
src/app/components/company-registration/branch-business-unit/department-register/department-register.component.ts
View file @
121a3293
...
...
@@ -6,4 +6,43 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls
:
[
'./department-register.component.scss'
]
})
export
class
DepartmentRegisterComponent
{
modalOptions
:
{
[
nameModal
:
string
]:
{
// ชื่อตรวจสอบการเปิดปิด
isModalOpen
:
boolean
;
// เปิด/ปิด
modalSize
:
string
;
// ขนาดของ Modal (s,m,l,vw10-vw100 )
backdropClose
:
boolean
;
// (คลิก Backdrop แล้ว true ปิด false ไม่ปิด )
}
}
=
{
"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
;
document
.
body
.
style
.
overflow
=
'hidden'
;
// ล็อก Scroll
}
closeModal
(
name
:
string
)
{
this
.
modalOptions
[
name
].
isModalOpen
=
false
;
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่
if
(
!
this
.
isAnyModalOpen
())
{
document
.
body
.
style
.
overflow
=
''
;
// คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
}
isAnyModalOpen
():
boolean
{
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่
return
Object
.
values
(
this
.
modalOptions
).
some
(
modal
=>
modal
.
isModalOpen
);
// หากไม่มี Modal อื่นเปิด
}
}
This diff is collapsed.
Click to expand it.
src/assets/css/style.css
View file @
121a3293
...
...
@@ -1604,7 +1604,7 @@ select option:active,
color
:
rgb
(
255
255
255
/
var
(
--tw-text-opacity
));
}
.box-body
{
padding
:
0
rem
;
padding
:
1.5
rem
;
}
.box-footer
{
border-bottom-right-radius
:
0.25rem
;
...
...
This diff is collapsed.
Click to expand it.
src/styles.scss
View file @
121a3293
...
...
@@ -357,8 +357,6 @@ ngx-dropzone {
display
:
flex
;
padding
:
1rem
1rem
0
.5rem
1rem
;
font-size
:
x-large
;
margin-bottom
:
10px
;
margin-left
:
15px
;
}
.bg-card-white
{
background-color
:
#ffffff
;
...
...
@@ -479,9 +477,9 @@ ngx-dropzone {
}
.button-red-light
{
min-width
:
5rem
;
background-color
:
#
FEDDDE
;
background-color
:
#
feddde
;
--tw-text-opacity
:
1
;
color
:
#
F
23354
;
color
:
#
f
23354
;
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
...
...
@@ -500,12 +498,11 @@ ngx-dropzone {
transition-duration
:
150ms
;
box-shadow
:
rgba
(
149
,
157
,
165
,
0
.2
)
0px
6px
24px
;
}
.button-red-light
{
.button-indigo-light
{
min-width
:
5rem
;
background-color
:
#
FEDDDE
;
background-color
:
#
dce3fe
;
--tw-text-opacity
:
1
;
color
:
#
F23354
;
color
:
#
595bea
;
display
:
inline-flex
;
align-items
:
center
;
justify-content
:
center
;
...
...
@@ -524,7 +521,6 @@ ngx-dropzone {
transition-duration
:
150ms
;
box-shadow
:
rgba
(
149
,
157
,
165
,
0
.2
)
0px
6px
24px
;
}
.shadow-gray-smoke
{
box-shadow
:
rgba
(
149
,
157
,
165
,
0
.2
)
0px
6px
24px
;
}
...
...
@@ -532,10 +528,9 @@ ngx-dropzone {
.head-table
{
padding
:
10px
20px
;
/* เพิ่มระยะขอบ */
font-weight
:
bold
!
important
;
font-size
:
12px
!
important
;
background-color
:
#
E6F0FF
!
important
;
/* พื้นหลังสำหรับ header */
font-size
:
large
!
important
;
background-color
:
#
e6f0ff
!
important
;
/* พื้นหลังสำหรับ header */
color
:
rgb
(
var
(
--
color-primary
));
text-align
:
center
!
important
;
}
.head-table-icon
{
...
...
@@ -546,7 +541,11 @@ ngx-dropzone {
display
:
flex
;
justify-content
:
center
;
}
.body-table-left
{
.body-table-left
{
display
:
flex
;
margin-left
:
20px
;
}
.input-disabled
{
background-color
:
#aaaaaa
!
important
;
}
This diff is collapsed.
Click to expand it.
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