Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
M
myjob-manage
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
myjob-manage
Commits
ce6154cd
Commit
ce6154cd
authored
Jul 10, 2025
by
Natthaphat
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
เพิ่ม modal Excel Report, Table memployee
parent
8d6cbd3d
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
296 additions
and
211 deletions
+296
-211
excel-list.component.html
...al/set-excel-reports/excel-list/excel-list.component.html
+262
-186
excel-list.component.ts
...rtal/set-excel-reports/excel-list/excel-list.component.ts
+34
-25
No files found.
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.html
View file @
ce6154cd
...
...
@@ -194,7 +194,7 @@
<a
aria-label=
"anchor"
title=
"Print"
(
mouseenter
)="
buttonHover
.
set
(
item
.
fileName
+'
print
',!
buttonHover
.
get
(
item
.
fileName
))"
(
mouseleave
)="
buttonHover
.
clear
()"
(
click
)="
openPrintModal
(
printModal
,
item
);"
(
click
)="
openPrintModal
(
item
);"
class=
"ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning"
><i
class=
"ri-printer-line"
></i></a>
...
...
@@ -396,7 +396,7 @@
id=
"excelFileUpload"
[
checked
]="
templateFileType=
='upload'"
(
click
)="
templateFileTypeChange
()"
>
<label
class=
"custom-control-label cursor-pointer"
for=
"excelFileUpload"
>
<label
class=
"custom-control-label cursor-pointer
font-bold
"
for=
"excelFileUpload"
>
อัพโหลดเอ็กเซลล์ไฟล์
<span
*
ngIf=
"templateFileType=='upload'"
style=
"color: red"
>
*
</span>
</label>
...
...
@@ -704,106 +704,120 @@
<ng-template
#
videoModal
let-modal
>
<div
style=
"width: 100%; height: 100%;"
>
<iframe
style=
"width: 100%; height: 100%;"
[
src
]="
videoLink
|
safeUrl
"
frameborder=
"0"
allow=
"autoplay; encrypted-media"
allowfullscreen
>
<iframe
style=
"width: 100%; height: 100%;"
[
src
]="
videoLink
|
safeUrl
"
frameborder=
"0"
allow
=
"autoplay; encrypted-media"
allow
fullscreen
>
</iframe>
</div>
</ng-template>
<ng-template
#
printModal
let-modal
>
<div
class=
"
modal-header
"
>
<
h5
class=
"modal-title"
id=
"edittemplateLabel"
>
Excel Report
</h5
>
<button
type=
"button"
class=
"close"
(
click
)="
modal
.
dismiss
()"
aria-label=
"Close
"
>
<span
aria-hidden=
"true"
>
×
</span
>
</button>
</div
>
<div
class=
"modal-body"
>
<div
class=
"row"
>
<div
class=
"d-flex col-12 justify-content-center"
*
ngIf=
"loading||loadingExcel"
>
<div
*
ngFor=
"let item of [1,2,3]"
class=
"spinner-grow text-info mx-1"
role=
"status"
>
<
span
class=
"sr-only"
>
Loading...
</span
>
</
div
>
<div
class=
"
hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out
"
>
<
div
class=
"ti-modal-content"
>
<div
class=
"ti-modal-header flex justify-between items-center p-5
"
>
<h6
class=
"ti-modal-title text-[1rem] font-semibold text-defaulttextcolor"
id=
"mail-ComposeLabel"
>
Excel Report
</h6
>
<button
type=
"button"
class=
"hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(
click
)="
closeModalprintModal
()"
#
closeModal
>
<span
class=
"sr-only"
>
{{'Close' | translate}}
</span
>
<
i
class=
"ri-close-line"
></i
>
</
button
>
</div>
<ng-container
*
ngIf=
"!loading&&!loadingExcel"
>
<ng-container
*
ngFor=
"let item of variableSheet; let i=index"
>
<div
class=
"col-12 row"
>
<div
class=
"col-3 form-group justify-content-center font-weight-bold control-label col-form-label font-14"
style=
"text-align: end;"
>
{{item.label}}
<div
class=
"ti-modal-body px-4 mt-3"
>
<div
class=
"row"
>
<div
class=
"d-flex col-12 justify-content-center"
*
ngIf=
"loading||loadingExcel"
>
<div
*
ngFor=
"let item of [1,2,3]"
class=
"spinner-grow text-info mx-1"
role=
"status"
>
<span
class=
"sr-only"
>
Loading...
</span>
</div>
<div
class=
"col-3 d-flex form-group align-items-center"
>
<ng-container
*
ngIf=
"item.type=='text'"
>
<input
type=
"text"
class=
"form-control"
[(
ngModel
)]="
item
.
value
"
>
</ng-container>
<ng-container
*
ngIf=
"item.type=='list'"
>
<select
class=
"custom-select"
[(
ngModel
)]="
item
.
value
"
>
<option
*
ngFor=
"let list of item.option"
[
value
]="
list
.
value
"
>
{{list.text}}
</option>
</select>
</ng-container>
<ng-container
*
ngIf=
"item.type=='radio'"
>
<div
class=
"row m-0"
>
<ng-container
*
ngFor=
"let radioItem of item.option"
>
<div
class=
"col-auto custom-control custom-radio"
>
<input
type=
"radio"
class=
"custom-control-input"
[
name
]="'
group-
'
+
item
.
label
"
[
id
]="
radioItem
.
text
+
radioItem
.
value
"
[
value
]="
radioItem
.
value
"
[(
ngModel
)]="
item
.
value
"
>
<label
class=
"custom-control-label"
[
for
]="
radioItem
.
text
+
radioItem
.
value
"
>
{{radioItem.text}}
</label>
</div>
<ng-container
*
ngIf=
"!loading&&!loadingExcel"
>
<ng-container
*
ngFor=
"let item of variableSheet; let i=index"
>
<div
class=
"flex items-center mb-4"
>
<!-- Label -->
<label
class=
"w-1/4 text-right pr-4 font-semibold text-sm"
>
{{ item.label }}
</label>
<!-- Input -->
<div
class=
"w-3/4"
>
<ng-container
[
ngSwitch
]="
item
.
type
"
>
<!-- Text -->
<input
*
ngSwitchCase=
"'text'"
type=
"text"
class=
"form-input w-full"
[(
ngModel
)]="
item
.
value
"
/>
<!-- List -->
<select
*
ngSwitchCase=
"'list'"
class=
"form-select w-full"
[(
ngModel
)]="
item
.
value
"
>
<option
*
ngFor=
"let list of item.option"
[
value
]="
list
.
value
"
>
{{ list.text }}
</option>
</select>
<!-- Radio -->
<div
*
ngSwitchCase=
"'radio'"
class=
"flex flex-wrap gap-4"
>
<label
*
ngFor=
"let radioItem of item.option"
class=
"inline-flex items-center"
>
<input
type=
"radio"
class=
"form-radio mr-2"
[
name
]="'
group-
'
+
item
.
label
"
[
id
]="
radioItem
.
text
+
radioItem
.
value
"
[
value
]="
radioItem
.
value
"
[(
ngModel
)]="
item
.
value
"
/>
{{ radioItem.text }}
</label>
</div>
<!-- Help -->
<div
*
ngSwitchCase=
"'help'"
class=
"flex items-stretch"
>
<input
type=
"text"
readonly
class=
"form-input w-1/2 bg-white cursor-pointer"
[
value
]="
item
.
value
.
tdesc
"
(
click
)="
openModalData
(
item
)"
/>
<button
class=
"bg-primary hover:bg-primary text-white px-3 flex items-center justify-center rounded-none border"
type=
"button"
(
click
)="
openModalData
(
item
)"
>
<i
class=
"ri-search-line font-semibold align-middle"
></i>
</button>
<button
type=
"button"
class=
"bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
(
click
)="
item
.
value=
{id:'',tdesc:'',edesc:''}"
>
<i
class=
"fa fa-times text-xs"
></i>
</button>
</div>
<!-- Calendar -->
<div
*
ngSwitchCase=
"'calendar'"
class=
"flex items-stretch"
>
<!-- Input -->
<input
class=
"form-input w-1/2 bg-white cursor-pointer rounded-r-none"
style=
"border-color: #e9edf6;"
placeholder=
"dd.mm.yyyy"
name=
"dp1"
ngbDatepicker
#
d1=
"ngbDatepicker"
[(
ngModel
)]="
select
[
item
.
key
]"
readonly
(
click
)="
d1
.
toggle
()"
(
ngModelChange
)="
formatNgbDate
(
item
.
key
,
select
[
item
.
key
])"
#
c1=
"ngModel"
(
change
)="
validateDate
(
c1
)"
>
<!-- Calendar Button -->
<button
type=
"button"
class=
"bg-white hover:bg-primary text-primary hover:text-white px-3 flex items-center justify-center rounded-none border"
style=
"border-color: #154c9c;"
(
click
)="
d1
.
toggle
()"
>
<i
class=
"ri-calendar-2-line"
></i>
</button>
<!-- Clear Button -->
<button
type=
"button"
class=
"bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
(
click
)="
select
[
item
.
key
]=
null
;
formatNgbDate
(
item
.
key
)"
>
<i
class=
"fa fa-times text-xs"
></i>
</button>
</div>
</ng-container>
</div>
</ng-container>
<ng-container
*
ngIf=
"item.type=='help'"
>
<div
class=
"input-group"
>
<input
type=
"text"
readonly
class=
"form-control bg-white cursor-pointer"
[
value
]="
item
.
value
.
tdesc
"
(
click
)="
openModalData
(
item
,
modalData
)"
>
<div
class=
"input-group-append"
>
<button
class=
"btn mr-0 btn-info"
type=
"button"
(
click
)="
openModalData
(
item
,
modalData
)"
>
<i
class=
"fa fa-search"
></i>
</button>
</div>
</div>
</ng-container>
<ng-container
*
ngIf=
"item.type=='calendar'"
>
<div
class=
"input-group"
>
<input
class=
"form-control bg-white cursor-pointer"
placeholder=
"{{ 'dd.mm.yyyy' }}"
name=
"dp1"
ngbDatepicker
#
d1=
"ngbDatepicker"
[(
ngModel
)]="
select
[
item
.
key
]"
readonly
(
click
)="
d1
.
toggle
()"
(
ngModelChange
)="
formatNgbDate
(
item
.
key
,
select
[
item
.
key
])"
#
c1=
"ngModel"
(
change
)="
validateDate
(
c1
)"
>
<div
class=
"input-group-append"
>
<button
class=
"btn btn-outline-info no-shadow"
(
click
)="
d1
.
toggle
()"
type=
"button"
>
<i
class=
"far fa-calendar-alt"
></i>
</button>
</div>
</div>
</ng-container>
</div>
<div
class=
"col"
>
<ng-container
*
ngIf=
"item.type=='help'"
>
<button
type=
"button"
class=
"btn btn-danger btn-sm btn-circle"
(
click
)="
item
.
value=
{id:'',tdesc:'',edesc:''}"
><i
class=
"fa fa-times"
></i>
</button>
</ng-container>
<ng-container
*
ngIf=
"item.type=='calendar'"
>
<button
type=
"button"
class=
"btn btn-danger btn-sm btn-circle"
(
click
)="
select
[
item
.
key
]=
null
;
formatNgbDate
(
item
.
key
)"
><i
class=
"fa fa-times"
></i>
</button>
</ng-container>
<ng-container
*
ngIf=
"item.type=='list'"
>
<button
type=
"button"
class=
"btn btn-danger btn-sm btn-circle"
(
click
)="
item
.
value=
''
"
><i
class=
"fa fa-times"
></i>
</button>
</ng-container>
</div>
</div>
</ng-container>
<!-- <div *ngIf="variableSheet.length&&!loadingExcel"
</div>
</ng-container>
<!-- <div *ngIf="variableSheet.length&&!loadingExcel"
class="col-12 justify-content-center align-content-center d-flex" style="margin-bottom: 1rem;">
<button type="submit" class="btn btn-info waves-effect waves-light btn-w-100"
(click)="dowloadExcelReport()">
...
...
@@ -816,111 +830,173 @@
<span class="sr-only">Loading...</span>
</div>
</div> -->
<div
*
ngIf=
"!variableSheet.length"
class=
"col-12 justify-content-center align-content-center d-flex"
style=
"margin-bottom: 1rem;margin-top: 1rem;"
>
<div
class=
"col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14"
>
{{'No Data Found' }}
</div>
<div
*
ngIf=
"!variableSheet.length"
class=
"col-12 justify-content-center align-content-center d-flex"
style=
"margin-bottom: 1rem;margin-top: 1rem;"
>
<div
class=
"col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14"
>
{{'No Data Found' }}
</div>
</div>
<div
class=
"row col-12 flex justify-center"
*
ngIf=
"variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"
>
<div
class=
"col-12 d-flex justify-content-center align-content-center"
>
<button
type=
"button"
*
ngIf=
"excelReport.isDataGrid=='1'"
class=
"ti-btn ti-btn-primary-full"
(
click
)="
getExcelData
(
gridModal
,'
grid
')"
>
Datagrid
</button>
<ng-container
*
ngIf=
"excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'"
>
</ng-container>
<button
type=
"button"
*
ngIf=
"excelReport.isPivot=='1'"
class=
"ti-btn ti-btn-primary-full"
(
click
)="
getExcelData
(
pivotModal
,'
pivot
')"
>
Pivot
</button>
</div>
</div>
</ng-container>
</div>
<div
class=
"row col-12"
*
ngIf=
"variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')"
>
<div
class=
"col-12 d-flex justify-content-center align-content-center"
>
<button
type=
"button"
*
ngIf=
"excelReport.isDataGrid=='1'"
class=
"btn btn-info"
(
click
)="
getExcelData
(
gridModal
,'
grid
')"
>
Datagrid
</button>
<ng-container
*
ngIf=
"excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'"
>
</ng-container>
<button
type=
"button"
*
ngIf=
"excelReport.isPivot=='1'"
class=
"btn btn-info"
(
click
)="
getExcelData
(
pivotModal
,'
pivot
')"
>
Pivot
</button>
</div>
</div>
<div
class=
"border-t mt-3"
>
<div
class=
"ti-modal-footer flex justify-end gap-1 mb-3 mt-3 mr-3"
>
<ng-container
*
ngIf=
"variableSheet.length"
>
<button
type=
"submit"
class=
"ti-btn ti-btn-info-full waves-effect waves-light btn-w-100"
[
disabled
]="
loadingExcel
"
(
click
)="
dowloadExcelReport
()"
>
{{"Print" }}
</button>
</ng-container>
<button
type=
"button"
class=
"ti-btn bg-danger text-white !font-medium"
(
click
)="
closeModalprintModal
()"
>
ปิด
</button>
</div>
</
ng-container
>
</
div
>
</div>
</div>
<div
class=
"modal-footer "
>
<ng-container
*
ngIf=
"variableSheet.length"
>
<button
type=
"submit"
class=
"btn btn-info waves-effect waves-light btn-w-100"
[
disabled
]="
loadingExcel
"
(
click
)="
dowloadExcelReport
()"
>
{{"Print" }}
</button>
</ng-container>
<button
type=
"button"
class=
"btn btn-danger"
(
click
)="
modal
.
dismiss
()"
>
ปิด
</button>
</div>
</ng-template>
<ng-template
#
modalData
let-modal
>
<div
class=
"modal-header"
>
<h5
class=
"modal-title"
id=
"edittemplateLabel"
>
{{modalDetail.text.cardHead }}
</h5>
<button
type=
"button"
class=
"close"
(
click
)="
modal
.
dismiss
()"
aria-label=
"Close"
>
<span
aria-hidden=
"true"
>
×
</span>
</button>
</div>
<div
class=
"modal-body"
>
<div
class=
"d-flex mb-1"
>
<input
type=
"text"
placeholder=
"{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
class=
" form-control w-75 border-color-gray-full-focus"
[(
ngModel
)]='
searchModal
'
>
</div>
<div
class=
"table-responsive"
>
<table
class=
"table table-hover table-striped-myhr table-sm mb-0 no-wrap v-middle "
>
<thead
class=
"bg-info "
>
<tr
class=
"text-white font-weight-normal"
>
<th
class=
"font-weight-normal text-center"
scope=
"col"
*
ngFor=
"let item of modalDetail.text.tableHead"
>
{{item}}
</th>
</tr>
</thead>
<tbody
*
ngIf=
"!valueDetailFilter().length"
>
<tr>
<td
colspan=
"9"
class=
"font-weight-normal text-center"
>
{{"No Data Found" }}
</td>
</tr>
</tbody>
<tbody
*
ngIf=
"valueDetailFilter().length"
>
<tr
class=
"cursor-pointer"
*
ngFor=
"let item of valueDetailFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal; let i=index"
(
click
)="
selectData
(
item
);
modal
.
dismiss
()"
(
mouseenter
)="
tableHover
.
set
(
item
.
id
,!
tableHover
.
get
(
item
.
id
))"
(
mouseleave
)="
tableHover
.
clear
()"
[
ngStyle
]="{'
background-color
'
:tableHover
.
get
(
item
.
id
)?'
rgb
(
201
223
235
)'
:
'#
ffffff
'}"
>
<td
class=
"align-middle text-center"
>
{{item.id}}
</td>
<td
class=
"align-middle text-center"
>
{{item.tdesc}}
</td>
<td
class=
"align-middle text-center"
>
{{item.edesc}}
</td>
</tr>
</tbody>
</table>
</div>
<div
class=
"d-flex justify-content-end p-2"
>
<select
class=
"custom-select m-r-5 border-color-gray-full-focus"
style=
"width: auto"
[(
ngModel
)]="
pageSizeModal
"
(
ngModelChange
)="
pageModal=
1"
>
<option
*
ngFor=
"let item of [10,50,100]"
[
ngValue
]="
item
"
>
{{"Items per page"}}: {{item}}
</option>
</select>
<ngb-pagination
[
collectionSize
]="
valueDetailFilter
().
length
"
[(
page
)]="
pageModal
"
[
pageSize
]="
pageSizeModal
"
[
maxSize
]="
3
"
[
rotate
]="
true
"
>
<ng-template
ngbPaginationPrevious
>
{{"Prev"}}
</ng-template>
<ng-template
ngbPaginationNext
>
{{"Next"}}
</ng-template>
</ngb-pagination>
<div
class=
"hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out"
>
<div
class=
"ti-modal-content"
>
<div
class=
"ti-modal-header flex justify-between items-center p-5"
>
<h6
class=
"ti-modal-title text-[1rem] font-semibold text-defaulttextcolor"
id=
"mail-ComposeLabel"
>
{{modalDetail.text.cardHead }}
</h6>
<button
type=
"button"
class=
"hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(
click
)="
closeModalmodalData
()"
#
closeModal
>
<span
class=
"sr-only"
>
{{'Close' | translate}}
</span>
<i
class=
"ri-close-line"
></i>
</button>
</div>
<div
class=
"ti-modal-body px-4 mt-3"
>
<div
class=
"d-flex mb-1"
>
<input
type=
"text"
placeholder=
"{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
class=
" form-control w-75 border-color-gray-full-focus"
[(
ngModel
)]='
searchModal
'
>
</div>
<div
class=
"table-responsive"
>
<table
class=
"table table-hover table-striped-myhr table-sm mb-0 no-wrap v-middle "
style=
"width: 100%"
>
<thead
class=
"bg-info "
>
<tr
class=
"text-white font-weight-normal"
>
<th
class=
"font-weight-normal text-center"
scope=
"col"
*
ngFor=
"let item of modalDetail.text.tableHead"
>
{{item}}
</th>
</tr>
</thead>
<tbody
*
ngIf=
"!valueDetailFilter().length"
>
<tr>
<td
colspan=
"9"
class=
"font-weight-normal text-center"
>
{{"No Data Found" }}
</td>
</tr>
</tbody>
<tbody
*
ngIf=
"valueDetailFilter().length"
>
<tr
class=
"cursor-pointer"
*
ngFor=
"let item of valueDetailFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal; let i=index"
(
click
)="
selectData
(
item
);
closeModalmodalData
()"
(
mouseenter
)="
tableHover
.
set
(
item
.
id
,!
tableHover
.
get
(
item
.
id
))"
(
mouseleave
)="
tableHover
.
clear
()"
[
ngStyle
]="{'
background-color
'
:tableHover
.
get
(
item
.
id
)?'
rgb
(
201
223
235
)'
:
'#
ffffff
'}"
>
<td
class=
"align-middle text-center"
>
{{item.id}}
</td>
<td
class=
"align-middle text-center"
>
{{item.tdesc}}
</td>
<td
class=
"align-middle text-center"
>
{{item.edesc}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
class=
"box-footer !border-t-0"
>
<div
class=
"flex items-center flex-wrap overflow-auto"
*
ngIf=
"valueDetailFilter().length > 0"
>
<div
class=
"d-flex justify-content-end p-2"
>
<select
class=
"custom-select m-r-5 border-color-gray-full-focus"
style=
"width: auto"
[(
ngModel
)]="
pageSizeModal
"
(
ngModelChange
)="
pageModal=
1"
>
<option
*
ngFor=
"let item of [10,50,100]"
[
ngValue
]="
item
"
>
{{"Items per page"}}: {{item}}
</option>
</select>
</div>
<div
class=
"mb-2 sm:mb-0"
>
<div>
{{'Showing' | translate}} {{valueDetailFilter().length}} {{'entries'
| translate}}
<i
class=
"bi bi-arrow-right ms-2 font-semibold"
></i>
</div>
</div>
<div
class=
"ms-auto"
>
<nav
aria-label=
"Page navigation"
>
<ul
class=
"ti-pagination mb-0"
>
<li
*
ngIf=
"pageIndex>0"
class=
"page-item {{pageModal==0 ? 'disabled' : ''}}"
><a
class=
"page-link px-3 py-[0.375rem] cursor-pointer"
(
click
)="
pageModal =
pageModal-1;updatePagedItems()"
>
{{'Previous' |
translate}}
</a></li>
<li
class=
"page-item"
><a
class=
"page-link px-3 py-[0.375rem]"
href=
"javascript:void(0);"
*
ngIf=
"pageModal-1>0"
(
click
)="
pageModal =
pageModal-2;updatePagedItems()"
>
{{pageModal-1}}
</a>
</li>
<li
class=
"page-item"
><a
class=
"page-link px-3 py-[0.375rem]"
href=
"javascript:void(0);"
*
ngIf=
"pageModal>0 && ((pageModal-1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length))"
(
click
)="
pageModal =
pageModal-1;updatePagedItems()"
>
{{pageModal}}
</a></li>
<li
class=
"page-item"
><a
class=
"page-link active px-3 py-[0.375rem]"
href=
"javascript:void(0);"
>
{{pageModal +1}}
</a>
</li>
<li
class=
"page-item"
><a
class=
"page-link px-3 py-[0.375rem]"
href=
"javascript:void(0);"
*
ngIf=
"(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
(
click
)="
pageModal =
pageModal+1;updatePagedItems()"
>
{{pageModal +2}}
</a></li>
<li
class=
"page-item"
><a
class=
"page-link px-3 py-[0.375rem]"
href=
"javascript:void(0);"
*
ngIf=
"(pageModal+2)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
(
click
)="
pageModal =
pageModal+2;updatePagedItems()"
>
{{pageModal +3}}
</a></li>
<li
*
ngIf=
"(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
class=
"page-item"
><a
class=
"page-link px-3 py-[0.375rem] cursor-pointer"
(
click
)="
pageModal =
pageModal+1;updatePagedItems()"
>
{{'Next' |
translate}}
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div
class=
"border-t"
>
<div
class=
"ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3"
>
<button
type=
"button"
class=
"ti-btn bg-danger text-white !font-medium"
(
click
)="
closeModalmodalData
()"
>
ปิด
</button>
</div>
</div>
</div>
</div>
<div
class=
"modal-footer"
>
<button
type=
"button"
class=
"btn btn-danger"
(
click
)="
modal
.
close
()"
>
{{"ปิด"}}
</button>
</div>
</ng-template>
<ng-template
#
gridModal
let-modal
>
<div
class=
"modal-header"
>
<h5
class=
"modal-title"
id=
"edittemplateLabel"
>
GridData
</h5>
...
...
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.ts
View file @
ce6154cd
...
...
@@ -148,12 +148,16 @@ export class ExcelListComponent implements OnInit {
modalRefaddChild
:
any
;
modalRefexcel_portal
:
MatDialogRef
<
any
>
;
modalRefvideoModal
:
any
;
modalRefprintModal
:
any
;
modalRefmodalData
:
any
;
searchText
:
string
=
''
;
@
ViewChild
(
'addGroupModal'
)
addGroupModal
!
:
TemplateRef
<
any
>
;
@
ViewChild
(
'addChildModal'
)
addChildModal
!
:
TemplateRef
<
any
>
;
@
ViewChild
(
'excel_portalModal'
)
excel_portalModal
!
:
TemplateRef
<
any
>
;
@
ViewChild
(
'videoModal'
)
videoModal
!
:
TemplateRef
<
any
>
;
@
ViewChild
(
'printModal'
)
printModal
!
:
TemplateRef
<
any
>
;
@
ViewChild
(
'modalData'
)
modalData
!
:
TemplateRef
<
any
>
;
constructor
(
private
excelReportService
:
ExcelReportService
,
private
modalService
:
NgbModal
,
private
customCubeService
:
CustomCubeService
,
...
...
@@ -352,13 +356,6 @@ export class ExcelListComponent implements OnInit {
}
});
}
// openVideoModal(targetModal: TemplateRef<any>, videoLink: string) {
// this.videoLink = this.convertToEmbedUrl(videoLink)
// this.modalService.open(targetModal, {
// centered: true,
// windowClass: 'my-dialog-video-preview'
// })
// }
openVideoModal
(
videoLink
:
string
)
{
this
.
videoLink
=
this
.
convertToEmbedUrl
(
videoLink
);
this
.
modalRefvideoModal
=
this
.
modal
.
open
(
this
.
videoModal
,
{
...
...
@@ -368,14 +365,6 @@ export class ExcelListComponent implements OnInit {
backdropClass
:
'video-backdrop'
});
}
// openVideoModal(videoLink: string) {
// this.videoLink = this.convertToEmbedUrl(videoLink);
// this.modalRefvideoModal = this.modal.open(this.videoModal, {
// width: '100%',
// height: '100%',
// panelClass: 'video-dialog-custom'
// });
// }
convertToEmbedUrl
(
youtubeUrl
:
string
):
string
{
try
{
const
url
=
new
URL
(
youtubeUrl
);
...
...
@@ -559,12 +548,9 @@ export class ExcelListComponent implements OnInit {
this
.
openAlertModal
(
error
.
message
)
})
}
openPrintModal
(
t
argetModal
:
TemplateRef
<
any
>
,
t
emplateFile
:
TemplateFileModel
)
{
openPrintModal
(
templateFile
:
TemplateFileModel
)
{
this
.
getTemplateFile
(
templateFile
)
this
.
modalService
.
open
(
targetModal
,
{
centered
:
true
,
size
:
'lg'
})
this
.
openModalprintModal
()
}
getTemplateFile
(
templateFile
:
TemplateFileModel
)
{
this
.
loading
=
true
...
...
@@ -611,7 +597,7 @@ export class ExcelListComponent implements OnInit {
})
}
openModalData
(
data
:
any
,
modal
:
any
)
{
openModalData
(
data
:
any
)
{
this
.
searchModal
=
''
this
.
page
=
1
this
.
pageSize
=
10
...
...
@@ -624,7 +610,7 @@ export class ExcelListComponent implements OnInit {
tableHead
:
[
'ID'
,
'detailTH'
,
'detailENG'
]
}
}
this
.
modalService
.
open
(
modal
,
{
centered
:
true
,
size
:
'lg'
}
)
this
.
openModalmodalData
(
)
}
valueDetailFilter
():
ValueDetailItem
[]
{
...
...
@@ -894,15 +880,37 @@ export class ExcelListComponent implements OnInit {
this
.
modalRefexcel_portal
?.
close
()
}
openModvideoModal
()
{
openMod
al
videoModal
()
{
this
.
modalRefvideoModal
=
this
.
modal
.
open
(
this
.
videoModal
,
{
width
:
'1500px'
,
height
:
'700px'
})
}
closeModvideoModal
()
{
this
.
modalRefexcel_portal
?.
close
()
closeModalvideoModal
()
{
this
.
modalRefvideoModal
?.
close
()
}
openModalprintModal
()
{
this
.
modalRefprintModal
=
this
.
modal
.
open
(
this
.
printModal
,
{
width
:
'700px'
,
height
:
'300px'
})
}
closeModalprintModal
()
{
this
.
modalRefprintModal
?.
close
()
}
openModalmodalData
()
{
this
.
modalRefmodalData
=
this
.
modal
.
open
(
this
.
modalData
,
{
width
:
'800px'
,
height
:
'580px'
})
}
closeModalmodalData
()
{
this
.
modalRefmodalData
?.
close
()
}
}
\ No newline at end of file
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