Skip to content

M
myjob-manage
Commit 6f28c7db by Natthaphat
Options

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

parent e8b711e4
Showing with 581 additions and 325 deletions
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.html
<div class="row">
<div class="col-12">
<div class="card card-body">
<h4 class="card-title">รายการเอกสาร</h4>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Search By
<app-page-header [title]="'เพิ่มรายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'เพิ่มรายงาน Excel'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
รายการเอกสาร
</div>
<div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="searchBy">
<option style="color: red" [class.d-none]="searchBy==''" [value]="''">
{{searchBy!=''?'ยกเลิก':''}}</option>
<option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
<option [value]="'module'">โมดูล</option>
<option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
<option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option>
<option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option>
<option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
</select>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Condition
</div>
<div class="col-8 col-lg-3">
<select class="custom-select" [(ngModel)]="condition">
<option style="color: red" [class.d-none]="condition==''" [value]="''">
{{condition!=''?'ยกเลิก':''}}</option>
<option value="includes">คำในประโยค</option>
<option value="lt">น้อยกว่า</option>
<option value="gt">มากกว่า</option>
<option value="eq">เท่ากับ</option>
<option value="lte">น้อยกว่าเท่ากับ</option>
<option value="gte">มากกว่าเท่ากับ</option>
<option value="neq">ไม่เท่ากับ</option>
</select>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col-4 col-lg-3 text-right">
Key Value
</div>
<div class="col-8 col-lg-3">
<input type="text" class="form-control" [(ngModel)]="searchValue">
<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]="''">
{{searchBy!=''?'ยกเลิก':'--- เลือก ---'}}</option>
<option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
<option [value]="'module'">โมดูล</option>
<option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
<option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option>
<option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option>
<option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
</select>
</div>
<!-- Condition -->
<div class="d-flex flex-column" style="min-width: 200px;">
<label class="mb-1 font-medium text-sm">Condition</label>
<select class="form-control h-100" [(ngModel)]="condition">
<option style="color: red" [class.d-none]="condition==''" [value]="''">
{{condition!=''?'ยกเลิก':'--- เลือก ---'}}</option>
<option value="includes">คำในประโยค</option>
<option value="lt">น้อยกว่า</option>
<option value="gt">มากกว่า</option>
<option value="eq">เท่ากับ</option>
<option value="lte">น้อยกว่าเท่ากับ</option>
<option value="gte">มากกว่าเท่ากับ</option>
<option value="neq">ไม่เท่ากับ</option>
</select>
</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>
<!-- Buttons -->
<div class="flex items-end gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
style="margin-bottom: unset;" (click)="openTemplate.clear();templateListSearch()">
<i class="ri-search-line font-semibold align-middle"></i>ค้นหา
</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>
<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 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 class="table-responsive">
<table class="table mb-0 no-wrap v-middle ">
<thead class="bg-info text-white">
<tr>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาไทย)</th>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
<th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
<th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
<th class="text-center" scope="col">สร้างเมื่อ</th>
<th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th>
<th class="text-center" scope="col">Add file</th>
</tr>
</thead>
<tbody *ngIf="!template.filter.length">
<tr style="background-color:#ebf2f6">
<td colspan="7" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
<tbody *ngIf="template.filter.length">
<ng-container
*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))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
<td colspan="6" class="font-16 font-medium">
<span class="cursor-pointer text-info" style="text-decoration: underline;"
(click)="openAddGroupModal(addGroupModal,items)">
{{items.tname}}
</span>
<span *ngIf="items.tdesc">
-{{items.tdesc}}
</span>
</td>
<td class="text-center">
<ng-container *ngIf="items.templateFile.length">
<ng-container *ngIf="!openTemplate.get(items.templateId)">
<button type="button" title="เปิด" class="btn"
style="border:3px solid #2962ff;border-radius: 10%;" (click)="
openTemplate.set(items.templateId,true)"
(mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'open')?'#dfdfdf':'#ffffff'}">
<i class="fa fa-arrow-right text-info"></i>
</button>
</ng-container>
<ng-container *ngIf="openTemplate.get(items.templateId)">
<button type="button" title="ปิด" class="btn"
style="border:3px solid #2962ff;border-radius: 10%;" (click)="
openTemplate.set(items.templateId,false)"
(mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'close')?'#dfdfdf':'#ffffff'}">
<i class="fa fa-arrow-down text-info"></i>
</button>
</ng-container>
&nbsp;
</ng-container>
<button type="button" title="เพิ่ม EXCCHILD" class="btn"
style="border:3px solid #2962ff;border-radius: 10%;"
(click)="openAddChildModal(addChildModal,items,'add')"
(mouseenter)="buttonHover.set(items.templateId+'add',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'add')?'#dfdfdf':'#ffffff'}">
<i class="fa fa-floppy-o text-info"></i>
</button>
&nbsp;
<button type="button" title="ลบ" class="btn"
style="border:3px solid #2962ff;border-radius: 10%;"
(mouseenter)="buttonHover.set(items.templateId+'delete',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(items.templateId+'delete')?'#dfdfdf':'#ffffff'}"
(click)="deleteTemplate(items)">
<i class="fa fa-trash text-danger"></i>
</button>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาไทย)</th>
<th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
<th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
<th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
<th class="text-center" scope="col">สร้างเมื่อ</th>
<th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th>
<th class="text-center" scope="col">Add file</th>
</tr>
</thead>
<tbody *ngIf="!template.filter.length">
<tr style="background-color:#ebf2f6">
<td colspan="7" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
<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="openTemplate.get(items.templateId)">
<ng-container *ngIf="!isSearching">
<ng-container
*ngFor="let item of items.templateFile | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
*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))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
<ng-container *ngIf="downloadTemplateFileLoading.get(item.fileName)">
<td colspan="7" class="text-center">
<div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1"
role="status">
<span class="sr-only">Loading...</span>
</div>
</td>
</ng-container>
<ng-container *ngIf="!downloadTemplateFileLoading.get(item.fileName)">
<td style="white-space: normal !important;word-break: break-word;">
<i *ngIf="item.menuActive=='0'"
class="fa fa-times text-danger cursor-pointer"
style="text-decoration: underline;"
(click)="menuActiveTemplateFile(item)"></i>
<i *ngIf="item.menuActive=='1'"
class="fa fa-check text-success cursor-pointer"
style="text-decoration: underline;"
(click)="menuActiveTemplateFile(item)"></i>
&nbsp;
<span class="cursor-pointer text-info"
style="text-decoration: underline;"
(click)="openAddChildModal(addChildModal,item,'edit')">
{{item.tdesc}}
</span>
</td>
<td style="white-space: normal !important;word-break: break-word;">
{{item.edesc}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
<!-- {{item.createBy.thFullName}}</td> -->
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
{{formatISOToLocal(item.createDate).date}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
{{formatISOToLocal(item.createDate).time}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
{{item.module}}</td>
<td class="text-center" class="text-center">
<button type="button" title="Download File" class="btn"
style="border:3px solid #2962ff;border-radius: 10%"
(mouseenter)="buttonHover.set(item.fileName+'copy',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'copy')?'#dfdfdf':'#ffffff'}"
(click)="downloadTemplateFile(item)">
<i class="fa fa-files-o text-info"></i>
</button>
&nbsp;
<button type="button" title="Print" class="btn"
style="border:3px solid #2962ff;border-radius: 10%"
(mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'print')?'#dfdfdf':'#ffffff'}"
(click)="openPrintModal(printModal,item);">
<i class="fa fa-print text-info"></i>
</button>
[ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
<td colspan="6" class="font-16 font-medium">
<span class="cursor-pointer text-info" style="text-decoration: underline;"
(click)="openAddGroupModal(items)">
{{items.tname}}
</span>
<span *ngIf="items.tdesc">
-{{items.tdesc}}
</span>
</td>
<td class="text-center">
<ng-container *ngIf="items.templateFile.length">
<ng-container *ngIf="!openTemplate.get(items.templateId)">
<a aria-label="anchor" title="เปิด"
(click)="openTemplate.set(items.templateId, true)"
(mouseenter)="buttonHover.set(items.templateId, true)"
(mouseleave)="buttonHover.set(items.templateId, false)"
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
class="ri-arrow-right-line"></i></a>
</ng-container>
<ng-container *ngIf="openTemplate.get(items.templateId)">
<a aria-label="anchor" title="ปิด" (click)="
openTemplate.set(items.templateId,false)"
(mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
(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
class="ri-arrow-down-line"></i></a>
</ng-container>
&nbsp;
<button type="button" title="ลบ" class="btn"
style="border:3px solid #2962ff;border-radius: 10%;"
(mouseenter)="buttonHover.set(item.fileName+'delete',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()"
[ngStyle]="{'background-color':buttonHover.get(item.fileName+'delete')?'#dfdfdf':'#ffffff'}"
(click)="deleteTemplateFile(item)">
<i class="fa fa-trash text-danger"></i>
</button>
</td>
</ng-container>
</ng-container>
<a aria-label="anchor" title="เพิ่ม EXCCHILD"
(click)="openAddChildModal(items,'add')"
(mouseenter)="buttonHover.set(items.templateId+'add',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()"
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
class="ri-save-2-line"></i></a>
&nbsp;
<a aria-label="anchor" title="ลบ" (click)="deleteTemplate(items)"
(mouseenter)="buttonHover.set(items.templateId+'delete',!buttonHover.get(items.templateId))"
(mouseleave)="buttonHover.clear()"
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
class="ri-delete-bin-line"></i></a>
</td>
</tr>
<ng-container *ngIf="openTemplate.get(items.templateId)">
<ng-container
*ngFor="let item of items.templateFile | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
<tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
<ng-container *ngIf="downloadTemplateFileLoading.get(item.fileName)">
<td colspan="7" class="text-center">
<div *ngFor="let item of [1,2,3]"
class="spinner-grow text-info mx-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</td>
</ng-container>
<ng-container *ngIf="!downloadTemplateFileLoading.get(item.fileName)">
<td style="white-space: normal !important;word-break: break-word;">
<i *ngIf="item.menuActive=='0'"
class="fa fa-times text-danger cursor-pointer"
style="text-decoration: underline;"
(click)="menuActiveTemplateFile(item)"></i>
<i *ngIf="item.menuActive=='1'"
class="fa fa-check text-success cursor-pointer"
style="text-decoration: underline;"
(click)="menuActiveTemplateFile(item)"></i>
&nbsp;
<span class="cursor-pointer text-info"
style="text-decoration: underline;"
(click)="openAddChildModal(item,'edit')">
{{item.tdesc}}
</span>
</td>
<td style="white-space: normal !important;word-break: break-word;">
{{item.edesc}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
<!-- {{item.createBy.thFullName}}</td> -->
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
{{formatISOToLocal(item.createDate).date}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
{{formatISOToLocal(item.createDate).time}}</td>
<td class="text-center"
style="white-space: normal !important;word-break: break-word;">
{{item.module}}</td>
<td class="text-center" class="text-center">
<a aria-label="anchor" title="Download File"
(mouseenter)="buttonHover.set(item.fileName+'copy',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()"
(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
class="ri-file-download-line"></i></a>
&nbsp;
<a aria-label="anchor" title="Print"
(mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()"
(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
class="ri-printer-line"></i></a>
&nbsp;
<a aria-label="anchor" title="ลบ"
(mouseenter)="buttonHover.set(item.fileName+'delete',!buttonHover.get(item.fileName))"
(mouseleave)="buttonHover.clear()"
(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
class="ri-delete-bin-line"></i></a>
</td>
</ng-container>
</tr>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>
</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>
</tbody>
</table>
</div>
</div>
<div class="row justify-content-end align-items-center">
<i class="fa fa-times text-danger"></i>&nbsp;=&nbsp;used on menu&nbsp;&nbsp;&nbsp;
<i class="fa fa-check text-success"></i>&nbsp;=&nbsp;unused on menu&nbsp;&nbsp;&nbsp;
<i class="fa fa-files-o text-info"></i>&nbsp;=&nbsp;copy template&nbsp;&nbsp;&nbsp;
<i class="fa fa-print text-info"></i>&nbsp;=&nbsp;print report
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="template.filter.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'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>
<ng-template #addGroupModal let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">EXCHEAD, Template header excel</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="form-group row">
<label for="nameth" class="col-sm-4 col-form-label">
รหัสกลุ่มแม่แบบ</label>
<div class="col-sm-8">
<input type="text" class="form-control" disabled [value]="bodyTemplate.data.templateId">
<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">
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>
</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 class="ti-modal-body px-4 mt-3">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-title" class="form-label">รหัสกลุ่มแม่แบบ</label>
<input type="text" class="form-control !bg-input-readonly" id="deal-title" placeholder=""
value="AUTO-001" disabled [value]="bodyTemplate.data.templateId">
</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>
</div>
<div class="form-group row">
<label for="nameeng" class="col-sm-4 col-form-label">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</label>
<div class="col-sm-8">
<input type="text" class="form-control" [(ngModel)]="bodyTemplate.data.ename">
<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)="closeModalAddGroup()">
{{'Cancel' | translate}}
</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 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>
</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">
<label for="position" class="col-sm-4 col-form-label">รายละเอียด (ภาษาอังกฤษ)</label>
<div class="col-sm-8">
<textarea class="form-control" [(ngModel)]="bodyTemplate.data.edesc"></textarea>
<div class="ti-modal-body px-4 mt-3">
<div class="flex flex-col space-y-4">
<!-- ตัวเลือกไฟล์จาก 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 class="flex items-center gap-2 mb-2">
<input type="radio" class="custom-control-input cursor-pointer" name="excelFile"
id="excelFileUpload" [checked]="templateFileType=='upload'"
(click)="templateFileTypeChange()">
<label class="custom-control-label cursor-pointer" for="excelFileUpload">
อัพโหลดเอ็กเซลล์ไฟล์
<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>
<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>
<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">
<select class=" custom-select" [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 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>
</ng-template>
<ng-template #addChildModal let-modal>
<ng-template #addChildModals let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">EXCCHILD, Template file excel</h5>
<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';
import { SharedModule } from '../../../../../shared/shared.module';
import { MatPaginator } from '@angular/material/paginator';
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 { FormsModule, NgModel } from '@angular/forms';
import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
......@@ -57,6 +57,8 @@ export class ExcelListComponent implements OnInit {
template: { data: TemplateModel[], filter: TemplateModel[], loading: boolean } = { data: [], filter: [], loading: false }
templateFile: TemplateFileModel = new MyTemplateFileModel()
module: { data: ModuleModel[], loading: boolean } = { data: [], loading: false }
pageIndex: number = 0;
itemsPerPage: number = 10;
page = 1
pageSize = 10
pageModal = 1
......@@ -140,10 +142,18 @@ export class ExcelListComponent implements OnInit {
gridLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
pivotLayout: { stimulate: boolean, data: string } = { stimulate: false, data: '' }
setPerspective = ""
isSearching = false;
modalRef: any;
modalRefaddChild: any;
searchText: string = '';
@ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
@ViewChild('addChildModal') addChildModal!: TemplateRef<any>;
constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal,
private customCubeService: CustomCubeService,
private cdr: ChangeDetectorRef) {
private cdr: ChangeDetectorRef,
private modal: MatDialog) {
}
ngOnInit(): void {
......@@ -153,6 +163,31 @@ export class ExcelListComponent implements OnInit {
this.getExcelPortalgGroupList()
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() {
this.excelPortal.loading = true
this.excelReportService.getExcelPortalList().subscribe(response => {
......@@ -235,9 +270,9 @@ export class ExcelListComponent implements OnInit {
}, reason => {
})
}
openAddGroupModal(targetModal: TemplateRef<any>, data?: TemplateModel) {
openAddGroupModal(data?: TemplateModel) {
if (data) {
this.bodyTemplate.status = 'edit'
this.bodyTemplate.status = 'edit';
this.bodyTemplate.data = {
templateId: data.templateId,
tname: data.tname,
......@@ -245,9 +280,9 @@ export class ExcelListComponent implements OnInit {
tdesc: data.tdesc,
edesc: data.edesc,
module: data.module
}
};
} else {
this.bodyTemplate.status = 'add'
this.bodyTemplate.status = 'add';
this.bodyTemplate.data = {
templateId: '',
tname: '',
......@@ -255,32 +290,10 @@ export class ExcelListComponent implements OnInit {
tdesc: '',
edesc: '',
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) {
......@@ -302,7 +315,7 @@ export class ExcelListComponent implements OnInit {
})
}, reject => { })
}
openAddChildModal(targetModal: TemplateRef<any>, data: TemplateModel | TemplateFileModel, status: 'add' | 'edit') {
openAddChildModal(data: TemplateModel | TemplateFileModel, status: 'add' | 'edit') {
if (status == 'add') {
this.templateFile = new MyTemplateFileModel({ templateId: data.templateId, module: data.module })
this.templateFileType = 'portal'
......@@ -313,11 +326,7 @@ export class ExcelListComponent implements OnInit {
this.templateFileName = this.templateFile.portalId ? '' : this.templateFile.fileName
this.templateFile.realFileNameOld = this.templateFile.fileName
}
this.addChildModalRef = this.modalService.open(targetModal, {
centered: true,
backdrop: 'static',
size: 'lg'
})
this.openModaladdChild()
}
openExcelPortalModal(targetModal: TemplateRef<any>) {
......@@ -362,29 +371,42 @@ export class ExcelListComponent implements OnInit {
}
templateListSearch() {
if (!this.searchBy || !this.condition || !this.searchValue) {
this.template.filter = this.template.data.map(e => new MyTemplateModel(e))
}
const conditionMap: { [key: string]: (a: any, b: any) => boolean } = {
includes: (a, b) => (a || '').toString().toLowerCase().includes((b || '').toString().toLowerCase()),
lt: (a, b) => parseFloat(a) < parseFloat(b),
gt: (a, b) => parseFloat(a) > parseFloat(b),
eq: (a, b) => a == b,
lte: (a, b) => parseFloat(a) <= parseFloat(b),
gte: (a, b) => parseFloat(a) >= parseFloat(b),
neq: (a, b) => a != b,
};
this.isSearching = true;
const compareFn = conditionMap[this.condition];
if (!compareFn) {
this.template.filter = this.template.data.map(e => new MyTemplateModel(e))
}
setTimeout(() => {
if (!this.searchBy || !this.condition || !this.searchValue) {
this.template.filter = this.template.data.map(e => new MyTemplateModel(e));
this.isSearching = false;
return;
}
const conditionMap: { [key: string]: (a: any, b: any) => boolean } = {
includes: (a, b) => (a || '').toString().toLowerCase().includes((b || '').toString().toLowerCase()),
lt: (a, b) => parseFloat(a) < parseFloat(b),
gt: (a, b) => parseFloat(a) > parseFloat(b),
eq: (a, b) => a == b,
lte: (a, b) => parseFloat(a) <= parseFloat(b),
gte: (a, b) => parseFloat(a) >= parseFloat(b),
neq: (a, b) => a != b,
};
const compareFn = conditionMap[this.condition];
if (!compareFn) {
this.template.filter = this.template.data.map(e => new MyTemplateModel(e));
this.isSearching = false;
return;
}
this.template.filter = this.template.data
.filter(item => {
const value = (item as any)[this.searchBy];
return compareFn(value, this.searchValue);
})
.map(e => new MyTemplateModel(e));
this.template.filter = this.template.data.filter(item => {
const value = (item as any)[this.searchBy];
return compareFn(value, this.searchValue);
}).map(e => new MyTemplateModel(e));
this.isSearching = false;
}, 1000); // delay mock loading
}
onFileSelected(event: any) {
......@@ -802,4 +824,27 @@ export class ExcelListComponent implements OnInit {
}, 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";
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
FileUploadModule,
PdpaConfigComponent,
QuillModule
],
],
templateUrl: './pdpa-manage.component.html',
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";
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
FileUploadModule
],
],
templateUrl: './user-setting.component.html',
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