Commit ce6154cd by Natthaphat

เพิ่ม modal Excel Report, Table memployee

parent 8d6cbd3d
......@@ -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>
&nbsp;
......@@ -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" allowfullscreen>
</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">&times;</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'">
&nbsp;
</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'">
&nbsp;
</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">&times;</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>
......
......@@ -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(targetModal: TemplateRef<any>, templateFile: 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() {
openModalvideoModal() {
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment