Skip to content

M
myjob-manage
Commit 6f28c7db by Natthaphat
Options

แก้ layout หน้าเพิ่มรายงาน Excel

parent e8b711e4
Showing with 440 additions and 184 deletions
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.html
<div class="row"> <app-page-header [title]="'เพิ่มรายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
<div class="col-12"> [title1]="'เพิ่มรายงาน Excel'"></app-page-header>
<div class="card card-body"> <div class="grid grid-cols-12 gap-6">
<h4 class="card-title">รายการเอกสาร</h4> <div class="xl:col-span-12 col-span-12">
<div class="row align-items-center mb-2"> <div class="box">
<div class="col-4 col-lg-3 text-right"> <div class="box-header justify-between">
Search By <div class="box-title">
</div> รายการเอกสาร
<div class="col-8 col-lg-3"> </div>
<select class="custom-select" [(ngModel)]="searchBy"> <div class="flex flex-wrap gap-4">
<!-- Search By -->
<div class="d-flex flex-column" style="min-width: 200px;">
<label class="mb-1 font-medium text-sm">Search By</label>
<select class="form-control h-100" [(ngModel)]="searchBy">
<option style="color: red" [class.d-none]="searchBy==''" [value]="''"> <option style="color: red" [class.d-none]="searchBy==''" [value]="''">
{{searchBy!=''?'ยกเลิก':''}}</option> {{searchBy!=''?'ยกเลิก':'--- เลือก ---'}}</option>
<option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option> <option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
<option [value]="'module'">โมดูล</option> <option [value]="'module'">โมดูล</option>
<option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option> <option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
...@@ -18,15 +22,13 @@ ...@@ -18,15 +22,13 @@
<option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option> <option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
</select> </select>
</div> </div>
</div>
<div class="row align-items-center mb-2"> <!-- Condition -->
<div class="col-4 col-lg-3 text-right"> <div class="d-flex flex-column" style="min-width: 200px;">
Condition <label class="mb-1 font-medium text-sm">Condition</label>
</div> <select class="form-control h-100" [(ngModel)]="condition">
<div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="condition">
<option style="color: red" [class.d-none]="condition==''" [value]="''"> <option style="color: red" [class.d-none]="condition==''" [value]="''">
{{condition!=''?'ยกเลิก':''}}</option> {{condition!=''?'ยกเลิก':'--- เลือก ---'}}</option>
<option value="includes">คำในประโยค</option> <option value="includes">คำในประโยค</option>
<option value="lt">น้อยกว่า</option> <option value="lt">น้อยกว่า</option>
<option value="gt">มากกว่า</option> <option value="gt">มากกว่า</option>
...@@ -36,25 +38,32 @@ ...@@ -36,25 +38,32 @@
<option value="neq">ไม่เท่ากับ</option> <option value="neq">ไม่เท่ากับ</option>
</select> </select>
</div> </div>
<!-- Key Value -->
<div class="d-flex flex-column" style="min-width: 200px;">
<label class="mb-1 font-medium text-sm">Key Value</label>
<input class="form-control h-100" type="text" placeholder="ค้นหา"
aria-label=".form-control-sm example" [(ngModel)]="searchValue">
</div> </div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right"> <!-- Buttons -->
Key Value <div class="flex items-end gap-2">
</div> <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
<div class="col-8 col-lg-3"> style="margin-bottom: unset;" (click)="openTemplate.clear();templateListSearch()">
<input type="text" class="form-control" [(ngModel)]="searchValue"> <i class="ri-search-line font-semibold align-middle"></i>ค้นหา
</div> </a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full"
style="margin-bottom: unset;" (click)="openAddGroupModal()">
<i class="ri-add-line font-semibold align-middle"></i>Add Group
</a>
</div> </div>
<div class="row justify-content-center align-items-center mb-2">
<button type="button" class="btn btn-info"
(click)="openTemplate.clear();templateListSearch()">ค้นหา</button>
</div> </div>
<div class="row m-0 justify-content-end align-items-center">
<button type="button" class="btn btn-info" (click)="openAddGroupModal(addGroupModal)">Add Group</button>
</div> </div>
<div class="box-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table mb-0 no-wrap v-middle "> <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead class="bg-info text-white"> <thead>
<tr> <tr>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาไทย)</th> <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาไทย)</th>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th> <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
...@@ -70,7 +79,16 @@ ...@@ -70,7 +79,16 @@
<td colspan="7" class="text-center">ไม่พบข้อมูล</td> <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="template.filter.length"> <tbody id="tableBody" *ngIf="isSearching || template.filter.length">
<tr *ngIf="isSearching">
<td colspan="7" class="loading">
<div class="spinner"></div>
<div class="spinner"></div>
<div class="spinner"></div>
<span>กำลังค้นหา...</span>
</td>
</tr>
<ng-container *ngIf="!isSearching">
<ng-container <ng-container
*ngFor="let items of template.filter | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index"> *ngFor="let items of template.filter | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))" <tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))"
...@@ -78,7 +96,7 @@ ...@@ -78,7 +96,7 @@
[ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}"> [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
<td colspan="6" class="font-16 font-medium"> <td colspan="6" class="font-16 font-medium">
<span class="cursor-pointer text-info" style="text-decoration: underline;" <span class="cursor-pointer text-info" style="text-decoration: underline;"
(click)="openAddGroupModal(addGroupModal,items)"> (click)="openAddGroupModal(items)">
{{items.tname}} {{items.tname}}
</span> </span>
<span *ngIf="items.tdesc"> <span *ngIf="items.tdesc">
...@@ -88,44 +106,36 @@ ...@@ -88,44 +106,36 @@
<td class="text-center"> <td class="text-center">
<ng-container *ngIf="items.templateFile.length"> <ng-container *ngIf="items.templateFile.length">
<ng-container *ngIf="!openTemplate.get(items.templateId)"> <ng-container *ngIf="!openTemplate.get(items.templateId)">
<button type="button" title="เปิด" class="btn" <a aria-label="anchor" title="เปิด"
style="border:3px solid #2962ff;border-radius: 10%;" (click)=" (click)="openTemplate.set(items.templateId, true)"
openTemplate.set(items.templateId,true)" (mouseenter)="buttonHover.set(items.templateId, true)"
(mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))" (mouseleave)="buttonHover.set(items.templateId, false)"
(mouseleave)="buttonHover.clear()" class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'open')?'#dfdfdf':'#ffffff'}"> class="ri-arrow-right-line"></i></a>
<i class="fa fa-arrow-right text-info"></i>
</button>
</ng-container> </ng-container>
<ng-container *ngIf="openTemplate.get(items.templateId)"> <ng-container *ngIf="openTemplate.get(items.templateId)">
<button type="button" title="ปิด" class="btn" <a aria-label="anchor" title="ปิด" (click)="
style="border:3px solid #2962ff;border-radius: 10%;" (click)="
openTemplate.set(items.templateId,false)" openTemplate.set(items.templateId,false)"
(mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))" (mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'close')?'#dfdfdf':'#ffffff'}"> class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
<i class="fa fa-arrow-down text-info"></i> class="ri-arrow-down-line"></i></a>
</button>
</ng-container> </ng-container>
&nbsp; &nbsp;
</ng-container> </ng-container>
<button type="button" title="เพิ่ม EXCCHILD" class="btn" <a aria-label="anchor" title="เพิ่ม EXCCHILD"
style="border:3px solid #2962ff;border-radius: 10%;" (click)="openAddChildModal(items,'add')"
(click)="openAddChildModal(addChildModal,items,'add')"
(mouseenter)="buttonHover.set(items.templateId+'add',!buttonHover.get(items.templateId))" (mouseenter)="buttonHover.set(items.templateId+'add',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'add')?'#dfdfdf':'#ffffff'}"> class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-success/10 text-success hover:bg-success hover:text-white hover:border-success"><i
<i class="fa fa-floppy-o text-info"></i> class="ri-save-2-line"></i></a>
</button>
&nbsp; &nbsp;
<button type="button" title="ลบ" class="btn" <a aria-label="anchor" title="ลบ" (click)="deleteTemplate(items)"
style="border:3px solid #2962ff;border-radius: 10%;"
(mouseenter)="buttonHover.set(items.templateId+'delete',!buttonHover.get(items.templateId))" (mouseenter)="buttonHover.set(items.templateId+'delete',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'delete')?'#dfdfdf':'#ffffff'}" class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
(click)="deleteTemplate(items)"> class="ri-delete-bin-line"></i></a>
<i class="fa fa-trash text-danger"></i>
</button>
</td> </td>
</tr> </tr>
<ng-container *ngIf="openTemplate.get(items.templateId)"> <ng-container *ngIf="openTemplate.get(items.templateId)">
...@@ -136,8 +146,8 @@ ...@@ -136,8 +146,8 @@
[ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}"> [ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
<ng-container *ngIf="downloadTemplateFileLoading.get(item.fileName)"> <ng-container *ngIf="downloadTemplateFileLoading.get(item.fileName)">
<td colspan="7" class="text-center"> <td colspan="7" class="text-center">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" <div *ngFor="let item of [1,2,3]"
role="status"> class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
</td> </td>
...@@ -155,7 +165,7 @@ ...@@ -155,7 +165,7 @@
&nbsp; &nbsp;
<span class="cursor-pointer text-info" <span class="cursor-pointer text-info"
style="text-decoration: underline;" style="text-decoration: underline;"
(click)="openAddChildModal(addChildModal,item,'edit')"> (click)="openAddChildModal(item,'edit')">
{{item.tdesc}} {{item.tdesc}}
</span> </span>
</td> </td>
...@@ -174,125 +184,316 @@ ...@@ -174,125 +184,316 @@
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
{{item.module}}</td> {{item.module}}</td>
<td class="text-center" class="text-center"> <td class="text-center" class="text-center">
<button type="button" title="Download File" class="btn" <a aria-label="anchor" title="Download File"
style="border:3px solid #2962ff;border-radius: 10%"
(mouseenter)="buttonHover.set(item.fileName+'copy',!buttonHover.get(item.fileName))" (mouseenter)="buttonHover.set(item.fileName+'copy',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'copy')?'#dfdfdf':'#ffffff'}" (click)="downloadTemplateFile(item)"
(click)="downloadTemplateFile(item)"> class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
<i class="fa fa-files-o text-info"></i> class="ri-file-download-line"></i></a>
</button>
&nbsp; &nbsp;
<button type="button" title="Print" class="btn" <a aria-label="anchor" title="Print"
style="border:3px solid #2962ff;border-radius: 10%"
(mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))" (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'print')?'#dfdfdf':'#ffffff'}" (click)="openPrintModal(printModal,item);"
(click)="openPrintModal(printModal,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
<i class="fa fa-print text-info"></i> class="ri-printer-line"></i></a>
</button>
&nbsp; &nbsp;
<button type="button" title="ลบ" class="btn" <a aria-label="anchor" title="ลบ"
style="border:3px solid #2962ff;border-radius: 10%;"
(mouseenter)="buttonHover.set(item.fileName+'delete',!buttonHover.get(item.fileName))" (mouseenter)="buttonHover.set(item.fileName+'delete',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()" (mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'delete')?'#dfdfdf':'#ffffff'}" (click)="deleteTemplateFile(item)"
(click)="deleteTemplateFile(item)"> class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
<i class="fa fa-trash text-danger"></i> class="ri-delete-bin-line"></i></a>
</button>
</td> </td>
</ng-container> </ng-container>
</tr> </tr>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="d-flex justify-content-end py-2">
<select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
<option [ngValue]="10">รายการต่อหน้า: 10</option>
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="template.filter.length"
[maxSize]="3" [rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
</div> </div>
<div class="row justify-content-end align-items-center"> <div class="box-footer">
<i class="fa fa-times text-danger"></i>&nbsp;=&nbsp;used on menu&nbsp;&nbsp;&nbsp; <div class="flex items-center flex-wrap overflow-auto" *ngIf="template.filter.length > 0">
<i class="fa fa-check text-success"></i>&nbsp;=&nbsp;unused on menu&nbsp;&nbsp;&nbsp; <div class="mb-2 sm:mb-0">
<i class="fa fa-files-o text-info"></i>&nbsp;=&nbsp;copy template&nbsp;&nbsp;&nbsp; <div>
<i class="fa fa-print text-info"></i>&nbsp;=&nbsp;print report {{'Showing' | translate}} {{template.filter.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 {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' |
translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0"
(click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchText == '' ? template.data.length : template.filter.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchText == '' ? template.data.length : template.filter.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchText == '' ? template.data.length : template.filter.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchText == '' ? template.data.length : template.filter.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="flex justify-end items-center flex-wrap gap-4 mt-3">
<div><i class="fa fa-times text-danger"></i> = used on menu</div>
<div><i class="fa fa-check text-success"></i> = unused on menu</div>
<div><i class="ri-file-download-line text-info"></i> = download files</div>
<div><i class="ri-printer-line text-warning"></i> = print report</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<ng-template #addGroupModal let-modal> <ng-template #addGroupModal let-modal>
<div class="modal-header"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<h5 class="modal-title" id="edittemplateLabel">EXCHEAD, Template header excel</h5> <div class="ti-modal-content">
<button type="button" class="close" (click)="modal.dismiss()" aria-label="Close"> <div class="ti-modal-header flex justify-between items-center p-5">
<span aria-hidden="true">&times;</span> <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
EXCHEAD, Template header excel
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeModalAddGroup()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="ti-modal-body px-4 mt-3">
<div class="form-group row"> <div class="grid grid-cols-12 gap-4">
<label for="nameth" class="col-sm-4 col-form-label">
รหัสกลุ่มแม่แบบ</label> <div class="xl:col-span-12 col-span-12">
<div class="col-sm-8"> <label for="deal-title" class="form-label">รหัสกลุ่มแม่แบบ</label>
<input type="text" class="form-control" disabled [value]="bodyTemplate.data.templateId"> <input type="text" class="form-control !bg-input-readonly" id="deal-title" placeholder=""
value="AUTO-001" disabled [value]="bodyTemplate.data.templateId">
</div> </div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">ชื่อกลุ่มรายงาน (ภาษาไทย)
<span class="required text-danger">*</span>
</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="bodyTemplate.data.tname">
<div class="text-danger" *ngIf="!bodyTemplate.data.tname">
กรอกชื่อกลุ่มรายงานภาษาไทย
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="bodyTemplate.data.ename">
<div class="text-danger" *ngIf="!bodyTemplate.data.ename">
Enter report group name in English
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">รายละเอียด (ภาษาไทย)</label>
<textarea type="text" class="form-control" id="deal-title"
placeholder="กรอกรายละเอียดภาษาไทย..." [(ngModel)]="bodyTemplate.data.tdesc"></textarea>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">รายละเอียด (ภาษาอังกฤษ)</label>
<textarea type="text" class="form-control" id="deal-title"
placeholder="Enter description in English..."
[(ngModel)]="bodyTemplate.data.edesc"></textarea>
</div>
<div class="xl:col-span-12 col-span-12">
<label class="form-label">
โมดูล
<span class="required text-danger">*</span>
</label>
<select class="form-select" required [disabled]="bodyTemplate.status=='edit'"
[(ngModel)]="bodyTemplate.data.module">
<option style="color: red" [class.d-none]="bodyTemplate.data.module==''" [value]="''">
{{bodyTemplate.data.module!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of module.data" [ngValue]="item.code">{{item.tdesc}}
</option>
</select>
</div> </div>
<div class="form-group row">
<label for="nameth" class="col-sm-4 col-form-label">ชื่อกลุ่มรายงาน (ภาษาไทย)<span
style="color: red">*</span></label>
<div class="col-sm-8">
<input type="text" class="form-control" [(ngModel)]="bodyTemplate.data.tname">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="ti-modal-footer flex justify-center gap-3 mb-3 mt-3">
<label for="nameeng" class="col-sm-4 col-form-label">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</label> <button type="button" class="ti-btn bg-danger text-white !font-medium" (click)="closeModalAddGroup()">
<div class="col-sm-8"> {{'Cancel' | translate}}
<input type="text" class="form-control" [(ngModel)]="bodyTemplate.data.ename"> </button>
<button type="button" [class.ti-btn-disabled]="!bodyTemplate.data.tname||!bodyTemplate.data.module"
[disabled]="!bodyTemplate.data.tname||!bodyTemplate.data.module" (click)="closeModalAddGroup()"
class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div> </div>
</div> </div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">รายละเอียด (ภาษาไทย)</label>
<div class="col-sm-8">
<textarea class="form-control" [(ngModel)]="bodyTemplate.data.tdesc"></textarea>
</div> </div>
</ng-template>
<ng-template #addChildModal let-modal>
<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">
EXCCHILD, Template file excel
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeModalAddGroup()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div> </div>
<div class="form-group row"> <div class="ti-modal-body px-4 mt-3">
<label for="position" class="col-sm-4 col-form-label">รายละเอียด (ภาษาอังกฤษ)</label> <div class="flex flex-col space-y-4">
<div class="col-sm-8">
<textarea class="form-control" [(ngModel)]="bodyTemplate.data.edesc"></textarea> <!-- ตัวเลือกไฟล์จาก Portal -->
<div>
<div class="flex items-center gap-2 mb-2">
<input type="radio" class="custom-control-input cursor-pointer" name="excelFile"
id="excelFilePortal" [checked]="templateFileType=='portal'"
(click)="templateFileTypeChange()">
<label class="custom-control-label cursor-pointer" for="excelFilePortal">
เลือกเอ็กเซลล์ไฟล์จาก Portal
<span *ngIf="templateFileType=='portal'" class="text-red-500">*</span>
</label>
</div>
<div *ngIf="templateFileType=='portal'" class="flex items-center gap-2">
<input *ngIf="templateFile.portalId" type="text" class="form-control bg-white w-full"
[value]="templateFile.portalId" readonly>
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
(click)="openExcelPortalModal(excel_portalModal)">
<i class="ri-search-line font-semibold align-middle"></i>
</button>
</div> </div>
</div> </div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">โมดูล<span style="color: red">*</span></label> <!-- อัปโหลดไฟล์ -->
<div class="col-sm-8"> <div>
<select class=" custom-select" [disabled]="bodyTemplate.status=='edit'" <div class="flex items-center gap-2 mb-2">
[(ngModel)]="bodyTemplate.data.module"> <input type="radio" class="custom-control-input cursor-pointer" name="excelFile"
<option style="color: red" [class.d-none]="bodyTemplate.data.module==''" [value]="''"> id="excelFileUpload" [checked]="templateFileType=='upload'"
{{bodyTemplate.data.module!=''?'ยกเลิก':''}}</option> (click)="templateFileTypeChange()">
<option *ngFor="let item of module.data" [ngValue]="item.code">{{item.tdesc}}</option> <label class="custom-control-label cursor-pointer" for="excelFileUpload">
</select> อัพโหลดเอ็กเซลล์ไฟล์
<span *ngIf="templateFileType=='upload'" class="text-red-500">*</span>
</label>
</div>
<div *ngIf="templateFileType=='upload'" class="flex items-center gap-2">
<input #fileInput type="file" accept=".xlsx" (change)="onFileSelected($event)"
class="hidden" />
<button class="ti-btn" (click)="fileInput.click()">เลือกไฟล์</button>
<span *ngIf="templateFileName">{{ templateFileName }}</span>
</div> </div>
</div> </div>
<!-- รายละเอียด ภาษาไทย -->
<div>
<label class="block mb-1">รายละเอียด (ภาษาไทย) <span class="text-red-500">*</span></label>
<input type="text" class="form-control w-full" [(ngModel)]="templateFile.tdesc">
</div>
<!-- รายละเอียด ภาษาอังกฤษ -->
<div>
<label class="block mb-1">รายละเอียด (ภาษาอังกฤษ)</label>
<input type="text" class="form-control w-full" [(ngModel)]="templateFile.edesc">
</div>
<!-- แบ่งปัน -->
<div>
<label class="block mb-1">แบ่งปัน</label>
<div class="flex gap-4">
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="share"
id="shareNo" [checked]="templateFile.isShare=='0'"
(click)="templateFile.isShare='0'">
<label class="custom-control-label cursor-pointer" for="shareNo">ไม่ใช่</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="share"
id="shareYes" [checked]="templateFile.isShare=='1'"
(click)="templateFile.isShare='1'">
<label class="custom-control-label cursor-pointer" for="shareYes">ใช่</label>
</div>
</div>
</div>
<!-- แสดง Pivot -->
<div>
<label class="block mb-1">แสดงรูปแบบ pivot</label>
<div class="flex gap-4">
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="pivot"
id="pivotNo" [checked]="templateFile.isPivot=='0'"
(click)="templateFile.isPivot='0'">
<label class="custom-control-label cursor-pointer" for="pivotNo">ไม่ใช่</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="pivot"
id="pivotYes" [checked]="templateFile.isPivot=='1'"
(click)="templateFile.isPivot='1'">
<label class="custom-control-label cursor-pointer" for="pivotYes">ใช่</label>
</div>
</div>
</div>
<!-- แสดง DataGrid -->
<div>
<label class="block mb-1">แสดงรูปแบบ datagrid</label>
<div class="flex gap-4">
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="datagt"
id="datagtNo" [checked]="templateFile.isDataGrid=='0'"
(click)="templateFile.isDataGrid='0'">
<label class="custom-control-label cursor-pointer" for="datagtNo">ไม่ใช่</label>
</div>
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="datagt"
id="datagtYes" [checked]="templateFile.isDataGrid=='1'"
(click)="templateFile.isDataGrid='1'">
<label class="custom-control-label cursor-pointer" for="datagtYes">ใช่</label>
</div>
</div>
</div>
</div>
</div>
<div class="ti-modal-footer flex justify-center gap-3 mb-3 mt-3">
<button type="button" class="ti-btn bg-danger text-white !font-medium" (click)="closeModaladdChild()">
{{'Cancel' | translate}}
</button>
<button type="submit"
[class.ti-btn-disabled]="(!templateFile.portalId&&!templateFileName)||!templateFile.tdesc"
[disabled]="(!templateFile.portalId&&!templateFileName)||!templateFile.tdesc"
(click)="postTemplateFile()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div> </div>
<div class="modal-footer ">
<button type="submit" class="btn btn-info" [disabled]="!bodyTemplate.data.tname||!bodyTemplate.data.module"
(click)="modal.close()">บันทึก</button>
<button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
</div> </div>
</ng-template> </ng-template>
<ng-template #addChildModal let-modal> <ng-template #addChildModals let-modal>
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">EXCCHILD, Template file excel</h5> <h5 class="modal-title" id="edittemplateLabel">EXCCHILD, Template file excel</h5>
<button type="button" class="close" (click)="modal.dismiss()" aria-label="Close"> <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
......
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.scss
.ti-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom-width: 1px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
}
\ No newline at end of file
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.ts
...@@ -17,7 +17,7 @@ import { NgSelectModule } from '@ng-select/ng-select'; ...@@ -17,7 +17,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
import { SharedModule } from '../../../../../shared/shared.module'; import { SharedModule } from '../../../../../shared/shared.module';
import { MatPaginator } from '@angular/material/paginator'; import { MatPaginator } from '@angular/material/paginator';
import { QuillModule } from 'ngx-quill'; import { QuillModule } from 'ngx-quill';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { FileUploadModule } from 'ng2-file-upload'; import { FileUploadModule } from 'ng2-file-upload';
import { FormsModule, NgModel } from '@angular/forms'; import { FormsModule, NgModel } from '@angular/forms';
import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component'; import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
...@@ -57,6 +57,8 @@ export class ExcelListComponent implements OnInit { ...@@ -57,6 +57,8 @@ export class ExcelListComponent implements OnInit {
template: { data: TemplateModel[], filter: TemplateModel[], loading: boolean } = { data: [], filter: [], loading: false } template: { data: TemplateModel[], filter: TemplateModel[], loading: boolean } = { data: [], filter: [], loading: false }
templateFile: TemplateFileModel = new MyTemplateFileModel() templateFile: TemplateFileModel = new MyTemplateFileModel()
module: { data: ModuleModel[], loading: boolean } = { data: [], loading: false } module: { data: ModuleModel[], loading: boolean } = { data: [], loading: false }
pageIndex: number = 0;
itemsPerPage: number = 10;
page = 1 page = 1
pageSize = 10 pageSize = 10
pageModal = 1 pageModal = 1
...@@ -140,10 +142,18 @@ export class ExcelListComponent implements OnInit { ...@@ -140,10 +142,18 @@ export class ExcelListComponent implements OnInit {
gridLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' } gridLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
pivotLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' } pivotLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
setPerspective = "" setPerspective = ""
isSearching = false;
modalRef: any;
modalRefaddChild: any;
searchText: string = '';
@ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
@ViewChild('addChildModal') addChildModal!: TemplateRef<any>;
constructor(private excelReportService: ExcelReportService, constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal, private modalService: NgbModal,
private customCubeService: CustomCubeService, private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef) { private cdr: ChangeDetectorRef,
private modal: MatDialog) {
} }
ngOnInit(): void { ngOnInit(): void {
...@@ -153,6 +163,31 @@ export class ExcelListComponent implements OnInit { ...@@ -153,6 +163,31 @@ export class ExcelListComponent implements OnInit {
this.getExcelPortalgGroupList() this.getExcelPortalgGroupList()
this.getExcelPortalTagsList() this.getExcelPortalTagsList()
} }
get totalItems(): number {
return this.searchText == ''
? this.template.data.length
: this.template.filter.length;
}
get totalPages(): number {
return Math.ceil(this.totalItems / this.itemsPerPage);
}
get totalPagesArray(): number[] {
return Array(this.totalPages).fill(0);
}
goToPage(index: number): void {
if (index < 0 || index >= this.totalPages) return;
this.pageIndex = index;
this.updatePagedItems();
}
updatePagedItems(): void {
const start = this.pageIndex * this.itemsPerPage;
const end = start + this.itemsPerPage;
const source = this.searchText == '' ? this.template.data : this.template.filter;
this.template.filter = source.slice(start, end);
}
getExcelPortalList() { getExcelPortalList() {
this.excelPortal.loading = true this.excelPortal.loading = true
this.excelReportService.getExcelPortalList().subscribe(response => { this.excelReportService.getExcelPortalList().subscribe(response => {
...@@ -235,9 +270,9 @@ export class ExcelListComponent implements OnInit { ...@@ -235,9 +270,9 @@ export class ExcelListComponent implements OnInit {
}, reason => { }, reason => {
}) })
} }
openAddGroupModal(targetModal: TemplateRef<any>, data?: TemplateModel) { openAddGroupModal(data?: TemplateModel) {
if (data) { if (data) {
this.bodyTemplate.status = 'edit' this.bodyTemplate.status = 'edit';
this.bodyTemplate.data = { this.bodyTemplate.data = {
templateId: data.templateId, templateId: data.templateId,
tname: data.tname, tname: data.tname,
...@@ -245,9 +280,9 @@ export class ExcelListComponent implements OnInit { ...@@ -245,9 +280,9 @@ export class ExcelListComponent implements OnInit {
tdesc: data.tdesc, tdesc: data.tdesc,
edesc: data.edesc, edesc: data.edesc,
module: data.module module: data.module
} };
} else { } else {
this.bodyTemplate.status = 'add' this.bodyTemplate.status = 'add';
this.bodyTemplate.data = { this.bodyTemplate.data = {
templateId: '', templateId: '',
tname: '', tname: '',
...@@ -255,32 +290,10 @@ export class ExcelListComponent implements OnInit { ...@@ -255,32 +290,10 @@ export class ExcelListComponent implements OnInit {
tdesc: '', tdesc: '',
edesc: '', edesc: '',
module: '' module: ''
};
} }
}
const modalRef = this.modalService.open(targetModal, {
centered: true,
backdrop: 'static',
size: 'lg'
})
modalRef.result.then(result => {
const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalConfirmRef.componentInstance.message = 'คุณต้องการบันทึกข้อมูลหรือไม่'
modalConfirmRef.result.then(result => {
this.excelReportService.postTemplate(this.bodyTemplate.data).subscribe((response: any) => {
this.openAlertModal(response.message)
if (response.success) {
this.getExcelList()
this.getModuleList()
}
}, error => { this.openAlertModal(error.message) })
}, reject => { })
}, reject => { })
this.openModalAddGroup()
} }
deleteTemplate(template: TemplateModel) { deleteTemplate(template: TemplateModel) {
...@@ -302,7 +315,7 @@ export class ExcelListComponent implements OnInit { ...@@ -302,7 +315,7 @@ export class ExcelListComponent implements OnInit {
}) })
}, reject => { }) }, reject => { })
} }
openAddChildModal(targetModal: TemplateRef<any>, data: TemplateModel | TemplateFileModel, status: 'add' | 'edit') { openAddChildModal(data: TemplateModel | TemplateFileModel, status: 'add' | 'edit') {
if (status == 'add') { if (status == 'add') {
this.templateFile = new MyTemplateFileModel({ templateId: data.templateId, module: data.module }) this.templateFile = new MyTemplateFileModel({ templateId: data.templateId, module: data.module })
this.templateFileType = 'portal' this.templateFileType = 'portal'
...@@ -313,11 +326,7 @@ export class ExcelListComponent implements OnInit { ...@@ -313,11 +326,7 @@ export class ExcelListComponent implements OnInit {
this.templateFileName = this.templateFile.portalId ? '' : this.templateFile.fileName this.templateFileName = this.templateFile.portalId ? '' : this.templateFile.fileName
this.templateFile.realFileNameOld = this.templateFile.fileName this.templateFile.realFileNameOld = this.templateFile.fileName
} }
this.addChildModalRef = this.modalService.open(targetModal, { this.openModaladdChild()
centered: true,
backdrop: 'static',
size: 'lg'
})
} }
openExcelPortalModal(targetModal: TemplateRef<any>) { openExcelPortalModal(targetModal: TemplateRef<any>) {
...@@ -362,9 +371,16 @@ export class ExcelListComponent implements OnInit { ...@@ -362,9 +371,16 @@ export class ExcelListComponent implements OnInit {
} }
templateListSearch() { templateListSearch() {
this.isSearching = true;
setTimeout(() => {
if (!this.searchBy || !this.condition || !this.searchValue) { if (!this.searchBy || !this.condition || !this.searchValue) {
this.template.filter = this.template.data.map(e => new MyTemplateModel(e)) this.template.filter = this.template.data.map(e => new MyTemplateModel(e));
this.isSearching = false;
return;
} }
const conditionMap: { [key: string]: (a: any, b: any) => boolean } = { const conditionMap: { [key: string]: (a: any, b: any) => boolean } = {
includes: (a, b) => (a || '').toString().toLowerCase().includes((b || '').toString().toLowerCase()), includes: (a, b) => (a || '').toString().toLowerCase().includes((b || '').toString().toLowerCase()),
lt: (a, b) => parseFloat(a) < parseFloat(b), lt: (a, b) => parseFloat(a) < parseFloat(b),
...@@ -377,14 +393,20 @@ export class ExcelListComponent implements OnInit { ...@@ -377,14 +393,20 @@ export class ExcelListComponent implements OnInit {
const compareFn = conditionMap[this.condition]; const compareFn = conditionMap[this.condition];
if (!compareFn) { if (!compareFn) {
this.template.filter = this.template.data.map(e => new MyTemplateModel(e)) this.template.filter = this.template.data.map(e => new MyTemplateModel(e));
this.isSearching = false;
return;
} }
this.template.filter = this.template.data
this.template.filter = this.template.data.filter(item => { .filter(item => {
const value = (item as any)[this.searchBy]; const value = (item as any)[this.searchBy];
return compareFn(value, this.searchValue); return compareFn(value, this.searchValue);
}).map(e => new MyTemplateModel(e)); })
.map(e => new MyTemplateModel(e));
this.isSearching = false;
}, 1000); // delay mock loading
} }
onFileSelected(event: any) { onFileSelected(event: any) {
...@@ -802,4 +824,27 @@ export class ExcelListComponent implements OnInit { ...@@ -802,4 +824,27 @@ export class ExcelListComponent implements OnInit {
}, 500); }, 500);
} }
} }
openModalAddGroup() {
this.modalRef = this.modal.open(this.addGroupModal, {
width: '1000px',
height: '500px'
})
}
closeModalAddGroup() {
this.modalRef?.close()
}
openModaladdChild() {
this.modalRefaddChild = this.modal.open(this.addChildModal, {
width: '1000px',
height: '500px'
})
}
closeModaladdChild() {
this.modalRefaddChild?.close()
}
} }
\ No newline at end of file
src/app/DPU/common/pdpa-manage/pdpa-manage.component.ts
...@@ -29,11 +29,10 @@ import { MyPdpaModel, PdpaModel } from "../../models/pdpa.model"; ...@@ -29,11 +29,10 @@ import { MyPdpaModel, PdpaModel } from "../../models/pdpa.model";
TranslateModule, TranslateModule,
NgSelectModule, NgSelectModule,
FormsModule, FormsModule,
MatPaginator,
FileUploadModule, FileUploadModule,
PdpaConfigComponent, PdpaConfigComponent,
QuillModule QuillModule
], ],
templateUrl: './pdpa-manage.component.html', templateUrl: './pdpa-manage.component.html',
styleUrl: './pdpa-manage.component.css' styleUrl: './pdpa-manage.component.css'
}) })
......
src/app/DPU/common/user-management/user-setting/user-setting.component.ts
...@@ -23,9 +23,8 @@ import { TokenService } from "../../../../shared/services/token.service"; ...@@ -23,9 +23,8 @@ import { TokenService } from "../../../../shared/services/token.service";
TranslateModule, TranslateModule,
NgSelectModule, NgSelectModule,
FormsModule, FormsModule,
MatPaginator,
FileUploadModule FileUploadModule
], ],
templateUrl: './user-setting.component.html', templateUrl: './user-setting.component.html',
styleUrl: './user-setting.component.css' styleUrl: './user-setting.component.css'
}) })
......
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