Skip to content

M
myjob-manage
Commit 8d6cbd3d by Natthaphat
Options

เพิ่ม modal EXCCHILD, Template file excel, EXCEL_PORTAL ## npm i --force ด้วย เพิ่ม sweetalert ไป

parent 6f28c7db
Showing with 339 additions and 297 deletions
package-lock.json
......@@ -88,6 +88,7 @@
"sass": "^1.69.7",
"simplebar-angular": "^3.2.4",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.22.2",
"swiper": "^8.4.7",
"tslib": "^2.6.2",
"zone.js": "~0.14.2"
......@@ -19690,6 +19691,16 @@
"promise-polyfill": "^6.0.2"
}
},
"node_modules/sweetalert2": {
"version": "11.22.2",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.22.2.tgz",
"integrity": "sha512-GFQGzw8ZXF23PO79WMAYXLl4zYmLiaKqYJwcp5eBF07wiI5BYPbZtKi2pcvVmfUQK+FqL1risJAMxugcPbGIyg==",
"license": "MIT",
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/limonte"
}
},
"node_modules/swiper": {
"version": "8.4.7",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz",
......
package.json
......@@ -35,11 +35,11 @@
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@syncfusion/ej2-angular-base": "^29.2.4",
"@syncfusion/ej2-angular-charts": "^29.2.4",
"@syncfusion/ej2-angular-dropdowns": "^29.2.4",
"@syncfusion/ej2-angular-grids": "^29.2.4",
"@syncfusion/ej2-angular-inputs": "^29.2.4",
"@syncfusion/ej2-angular-pivotview": "^29.2.4",
"@syncfusion/ej2-angular-charts": "^29.2.4",
"@syncfusion/ej2-grids": "^30.1.39",
"@tailwindcss/forms": "^0.5.7",
"@types/google.maps": "^3.58.1",
......@@ -93,6 +93,7 @@
"sass": "^1.69.7",
"simplebar-angular": "^3.2.4",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.22.2",
"swiper": "^8.4.7",
"tslib": "^2.6.2",
"zone.js": "~0.14.2"
......@@ -114,4 +115,4 @@
"tailwindcss": "^3.3.2",
"typescript": "~5.2.2"
}
}
\ No newline at end of file
}
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.html
......@@ -358,7 +358,7 @@
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeModalAddGroup()" #closeModal>
(click)="closeModaladdChild()" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
......@@ -367,60 +367,81 @@
<div class="flex flex-col space-y-4">
<!-- ตัวเลือกไฟล์จาก Portal -->
<div>
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<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">
<label class="custom-control-label cursor-pointer font-bold" for="excelFilePortal">
เลือกเอ็กเซลล์ไฟล์จาก Portal
<span *ngIf="templateFileType=='portal'" class="text-red-500">*</span>
<span *ngIf="templateFileType=='portal'" class="text-red">*</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)">
(click)="openExcelPortalModal()">
<i class="ri-search-line font-semibold align-middle"></i>
</button>
</div>
</div>
<!-- อัปโหลดไฟล์ -->
<div>
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<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>
<span *ngIf="templateFileType=='upload'" style="color: red">*</span>
</label>
</div>
<div *ngIf="templateFileType=='upload'" class="flex items-center gap-2">
<div *ngIf="templateFileType=='upload'" class="flex items-center gap-2 truncate">
<input #fileInput type="file" accept=".xlsx" (change)="onFileSelected($event)"
class="hidden" />
<button class="ti-btn" (click)="fileInput.click()">เลือกไฟล์</button>
<span *ngIf="templateFileName">{{ templateFileName }}</span>
style="display: none;" />
<button (click)="fileInput.click()"
class="px-2 py-1 border border-black rounded bg-white hover:bg-gray-100 shadow-sm font-bold whitespace-nowrap">
เลือกไฟล์
</button>
<span *ngIf="templateFileName"
class="truncate block max-w-[200px] overflow-hidden whitespace-nowrap text-ellipsis">
{{ 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 class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<div
class="col-span-3 lg:col-span-5 sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full rtl:space-x-reverse">
<label class="ti-form-label block mb-1 font-bold" style="width: 50%;">รายละเอียด (ภาษาไทย)
</label>
<input type="text" id="input-label" class="ti-form-input w-full "
[(ngModel)]="templateFile.tdesc">
</div>
</div>
<!-- รายละเอียด ภาษาอังกฤษ -->
<div>
<label class="block mb-1">รายละเอียด (ภาษาอังกฤษ)</label>
<input type="text" class="form-control w-full" [(ngModel)]="templateFile.edesc">
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<div
class="col-span-3 lg:col-span-5 sm:inline-flex sm:items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full rtl:space-x-reverse">
<label class="ti-form-label block mb-1 font-bold" style="width: 50%;">รายละเอียด
(ภาษาอังกฤษ)
</label>
<input type="text" id="input-label" class="ti-form-input w-full "
[(ngModel)]="templateFile.edesc">
</div>
</div>
<!-- แบ่งปัน -->
<div>
<label class="block mb-1">แบ่งปัน</label>
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<label class="ti-form-label block mb-1 font-bold">แบ่งปัน</label>
<div class="flex gap-4">
<div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="share"
......@@ -438,8 +459,8 @@
</div>
<!-- แสดง Pivot -->
<div>
<label class="block mb-1">แสดงรูปแบบ pivot</label>
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<label class="ti-form-label block mb-1 font-bold">แสดงรูปแบบ 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"
......@@ -457,8 +478,8 @@
</div>
<!-- แสดง DataGrid -->
<div>
<label class="block mb-1">แสดงรูปแบบ datagrid</label>
<div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<label class="ti-form-label block mb-1 font-bold">แสดงรูปแบบ 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"
......@@ -478,261 +499,212 @@
</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 class="border-t mt-3">
<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>
</ng-template>
<ng-template #excel_portalModal 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">
EXCEL_PORTAL
</h6>
<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">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row ml-0">
<div class="custom-control custom-radio col-sm-4 d-flex align-items-center">
<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"
(click)="templateFileTypeChange()">เลือกเอ็กเซลล์ไฟล์จาก
Portal<span *ngIf="templateFileType=='portal'" style="color: red">*</span></label>
</div>
<div class="col-sm-8 d-flex align-items-center">
<ng-container *ngIf="templateFileType=='portal'">
<input *ngIf="templateFile.portalId" type="text" class="form-control col-10 bg-white"
[value]="templateFile.portalId" readonly>
<button type="button" class="btn btn-info mr-2 col-auto"
(click)="openExcelPortalModal(excel_portalModal)"><i
class="fa fa-search text-white"></i></button>
</ng-container>
</div>
</div>
<div class="form-group row ml-0">
<div class="custom-control custom-radio col-sm-4">
<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"
(click)="templateFileTypeChange()">อัพโหลดเอ็กเซลล์ไฟล์<span *ngIf="templateFileType=='upload'"
style="color: red">*</span></label>
</div>
<div class="col-sm-8 d-flex align-items-center">
<ng-container *ngIf="templateFileType=='upload'">
<input #fileInput type="file" accept=".xlsx" (change)="onFileSelected($event)"
style="display:none;" />
<button (click)="fileInput.click()">เลือกไฟล์</button>
&nbsp;
<span *ngIf="templateFileName">{{ templateFileName }}</span>
</ng-container>
</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)]="templateFile.tdesc">
</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)]="templateFile.edesc">
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">แบ่งปัน</label>
<div class="row col-sm-8">
<div class="custom-control custom-radio m-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="custom-control custom-radio m-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>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
(click)="closeModalexcel_portal()" #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">แสดงรูปแบบ pivot</label>
<div class="row col-sm-8">
<div class="custom-control custom-radio m-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="custom-control custom-radio m-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 class="ti-modal-body px-4 mt-3">
<div class="flex flex-col space-y-4">
<div class="flex flex-wrap items-start justify-between gap-4">
<div class="flex flex-wrap gap-4">
<div class="flex flex-col min-w-[200px]">
<select class="custom-select" [(ngModel)]="excelPortalSearch.groupId">
<option value="" *ngIf="excelPortalSearch.groupId==''" disabled selected hidden>
เลือกกลุ่ม</option>
<option style="color: red" [class.d-none]="excelPortalSearch.groupId==''"
[value]="''">
{{excelPortalSearch.groupId!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalGroup.data" [ngValue]="item.groupId">
{{item.thName}}
</option>
</select>
</div>
<div class="flex flex-col min-w-[200px]">
<select class="custom-select" [(ngModel)]="excelPortalSearch.tags">
<option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>เลือก
tags</option>
<option style="color: red" [class.d-none]="excelPortalSearch.tags==''" [value]="''">
{{excelPortalSearch.tags!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalTags.data" [ngValue]="item.value">
{{item.value}}
</option>
</select>
</div>
</div>
<div class="flex flex-col min-w-[200px]">
<input type="text" class="form-control" placeholder="ค้นหา"
[(ngModel)]="excelPortalSearch.search">
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table mb-0 no-wrap v-middle " style="width: 100%;">
<thead class="bg-info text-white">
<tr>
<th class="text-center" scope="col">Ex.</th>
<th class="text-center" scope="col">VDO</th>
<th class="text-center" scope="col" style="min-width: 200px">Name</th>
<th class="text-center" scope="col" style="min-width: 200px">Description</th>
<th class="text-center" scope="col">Database Support</th>
<th class="text-center" scope="col">Pivot</th>
<th class="text-center" scope="col">DataGrid</th>
<th class="text-center" scope="col">Download</th>
<th class="text-center" scope="col">Last Download</th>
<th class="text-center" scope="col">Upload Date</th>
</tr>
</thead>
<tbody *ngIf="!excelPortalFilter().length">
<tr style="background-color:#ebf2f6;">
<td colspan="10" class="text-center align-middle">ไม่พบข้อมูล</td>
</tr>
</tbody>
<tbody *ngIf="excelPortalFilter().length">
<ng-container
*ngFor="let item of excelPortalFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal ; let i = index">
<tr (mouseenter)="tableHover.set(item.excelId,!tableHover.get(item.excelId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.excelId)?'rgb(201 223 235)':'#ebf2f6'}">
<td><img *ngIf="item.getImg()" class="border p-1" style="width: auto;"
[src]="item.getImg()">
</td>
<td>
<button *ngIf="item.link1" type="button"
class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
(click)="openVideoModal(item.link1)"><i
class="ri-search-line font-semibold align-middle"></i></button>
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.thName}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.thDesc}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.dbSupport}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.isPivot}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.isDataGrid}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.dwTime}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.downloadDate}} {{item.downloadTime}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.uploadDate}} {{item.uploadTime}}
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="position" class="col-sm-4 col-form-label">แสดงรูปแบบ datagrid</label>
<div class="row col-sm-8">
<div class="custom-control custom-radio m-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="custom-control custom-radio m-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 class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="excelPortalFilter().length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{excelPortalFilter().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 == '' ? excelPortalFilter().length : excelPortalFilter().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 == '' ? excelPortalFilter().length : excelPortalFilter().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 == '' ? excelPortalFilter().length : excelPortalFilter().length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchText == '' ? excelPortalFilter().length : excelPortalFilter().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>
</div>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-info"
[disabled]="(!templateFile.portalId&&!templateFileName)||!templateFile.tdesc"
(click)="postTemplateFile()">บันทึก</button>
<button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
</div>
</ng-template>
<ng-template #excel_portalModal let-modal>
<div class="modal-header">
<h5 class="modal-title" id="edittemplateLabel">EXCEL_PORTAL</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 align-items-center mb-2">
<div class="col-12 col-lg-3 mb-2">
<select class="custom-select" [(ngModel)]="excelPortalSearch.groupId">
<option value="" *ngIf="excelPortalSearch.groupId==''" disabled selected hidden>เลือกกลุ่ม
</option>
<option style="color: red" [class.d-none]="excelPortalSearch.groupId==''" [value]="''">
{{excelPortalSearch.groupId!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalGroup.data; let i=index" [ngValue]="item.groupId">
{{item.thName}}
</option>
</select>
</div>
<div class="col-12 col-lg-3 mb-2">
<select class="custom-select" [(ngModel)]="excelPortalSearch.tags">
<option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>เลือกtags
</option>
<option style="color: red" [class.d-none]="excelPortalSearch.tags==''" [value]="''">
{{excelPortalSearch.tags!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalTags.data; let i=index" [ngValue]="item.value">{{item.value}}
</option>
</select>
</div>
<div class="col-12 col-lg-6 d-flex justify-content-end mb-2">
<div class="col-12 col-lg-6 p-0">
<input type="text" class="form-control" placeholder="ค้นหา" [(ngModel)]="excelPortalSearch.search">
<div class="mt-3">
<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)="closeModalexcel_portal()">
{{'Cancel' | translate}}
</button>
</div>
</div>
</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">Ex.</th>
<th class="text-center" scope="col">VDO</th>
<th class="text-center" scope="col" style="min-width: 200px">Name</th>
<th class="text-center" scope="col" style="min-width: 200px">Description</th>
<th class="text-center" scope="col">Database Support</th>
<th class="text-center" scope="col">Pivot</th>
<th class="text-center" scope="col">DataGrid</th>
<th class="text-center" scope="col">Download</th>
<th class="text-center" scope="col">Last Download</th>
<th class="text-center" scope="col">Upload Date</th>
</tr>
</thead>
<tbody *ngIf="!excelPortalFilter().length">
<tr style="background-color:#ebf2f6">
<td colspan="10" class="text-center">ไม่พบข้อมูล</td>
</tr>
</tbody>
<tbody *ngIf="excelPortalFilter().length">
<ng-container
*ngFor="let item of excelPortalFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal ; let i = index">
<tr (mouseenter)="tableHover.set(item.excelId,!tableHover.get(item.excelId))"
(mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.excelId)?'rgb(201 223 235)':'#ebf2f6'}">
<td><img *ngIf="item.getImg()" class="border p-1" [src]="item.getImg()">
</td>
<td>
<button *ngIf="item.link1" type="button" class="btn btn-info"
(click)="openVideoModal(videoModal,item.link1)"><i
class="fa fa-search text-white"></i></button>
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.thName}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.thDesc}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.dbSupport}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.isPivot}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.isDataGrid}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.dwTime}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.downloadDate}} {{item.downloadTime}}
</td>
<td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;">
{{item.uploadDate}} {{item.uploadTime}}
</td>
</tr>
</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)]="pageSizeModal"
(ngModelChange)="pageModal">
<option [ngValue]="10">รายการต่อหน้า: 10</option>
<option [ngValue]="50">รายการต่อหน้า: 50</option>
<option [ngValue]="100">รายการต่อหน้า: 100</option>
</select>
<ngb-pagination [(page)]="pageModal" [pageSize]="pageSizeModal"
[collectionSize]="excelPortalFilter().length" [maxSize]="3" [rotate]="true">
<ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
<ng-template ngbPaginationNext>ถัดไป</ng-template>
</ngb-pagination>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
</div>
</ng-template>
<ng-template #videoModal let-modal>
<div style="width: 100%; height: 70vh;">
<iframe class="w-100 h-100" [src]="videoLink | safeUrl" frameborder="0" allow="autoplay; encrypted-media"
<div style="width: 100%; height: 100%;">
<iframe style="width: 100%; height: 100%;" [src]="videoLink | safeUrl" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
......
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.ts
......@@ -17,12 +17,13 @@ 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 { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { FileUploadModule } from 'ng2-file-upload';
import { FormsModule, NgModel } from '@angular/forms';
import { DatagridSyncfutionComponent } from '../../../../../datagrid-syncfution/datagrid-syncfution.component';
import { PivotSyncfutionComponent } from "../../../../../pivot-syncfution/pivot-syncfution.component";
import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
import Swal from 'sweetalert2';
export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] }
}
......@@ -145,10 +146,14 @@ export class ExcelListComponent implements OnInit {
isSearching = false;
modalRef: any;
modalRefaddChild: any;
modalRefexcel_portal: MatDialogRef<any>;
modalRefvideoModal: 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>;
constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal,
private customCubeService: CustomCubeService,
......@@ -164,7 +169,7 @@ export class ExcelListComponent implements OnInit {
this.getExcelPortalTagsList()
}
get totalItems(): number {
return this.searchText == ''
return this.searchText == ''
? this.template.data.length
: this.template.filter.length;
}
......@@ -185,7 +190,7 @@ export class ExcelListComponent implements OnInit {
updatePagedItems(): void {
const start = this.pageIndex * this.itemsPerPage;
const end = start + this.itemsPerPage;
const source = this.searchText == '' ? this.template.data : this.template.filter;
const source = this.searchText == '' ? this.template.data : this.template.filter;
this.template.filter = source.slice(start, end);
}
getExcelPortalList() {
......@@ -329,25 +334,48 @@ export class ExcelListComponent implements OnInit {
this.openModaladdChild()
}
openExcelPortalModal(targetModal: TemplateRef<any>) {
this.pageModal = 1
this.pageSizeModal = 10
const modalRef = this.modalService.open(targetModal, {
centered: true,
backdrop: 'static',
size: 'xl'
})
modalRef.result.then(result => {
this.templateFile.portalId = result.excelId
}, reject => { })
openExcelPortalModal() {
this.pageModal = 1;
this.pageSizeModal = 10;
this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
width: '1500px',
height: '700px',
maxWidth: 'none',
disableClose: true,
data: {}
});
this.modalRefexcel_portal.afterClosed().subscribe(result => {
if (result?.excelId) {
this.templateFile.portalId = result.excelId;
}
});
}
openVideoModal(targetModal: TemplateRef<any>, videoLink: string) {
this.videoLink = this.convertToEmbedUrl(videoLink)
this.modalService.open(targetModal, {
centered: true,
windowClass: 'my-dialog-video-preview'
})
// 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, {
width: '50%',
height: '50%',
panelClass: 'video-preview-dialog',
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);
......@@ -690,20 +718,28 @@ export class ExcelListComponent implements OnInit {
}
templateFileTypeChange() {
if (this.templateFileName || this.templateFile.portalId) {
const modalConfirmRef = this.modalService.open(ConfirmModalComponent, {
centered: true,
backdrop: 'static',
})
modalConfirmRef.componentInstance.message = 'คุณต้องการยกเลิกไฟล์ที่เลือกหรือไม่'
modalConfirmRef.result.then(result => {
this.onToggleTemplateFile()
}, reject => { })
if (this.templateFileName || this.templateFile?.portalId) {
Swal.fire({
title: 'ยืนยันการดำเนินการ',
text: 'คุณต้องการยกเลิกไฟล์ที่เลือกหรือไม่',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'ใช่, ยกเลิกไฟล์',
cancelButtonText: 'ไม่',
confirmButtonColor: '#d33', // สีปุ่มยืนยัน (แดง)
cancelButtonColor: '#3085d6', // สีปุ่มยกเลิก (น้ำเงิน)
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
this.onToggleTemplateFile();
}
});
} else {
this.onToggleTemplateFile()
this.onToggleTemplateFile();
}
}
onToggleTemplateFile() {
if (this.templateFileType == 'portal') {
this.templateFileType = 'upload'
......@@ -838,7 +874,7 @@ export class ExcelListComponent implements OnInit {
openModaladdChild() {
this.modalRefaddChild = this.modal.open(this.addChildModal, {
width: '1000px',
width: '700px',
height: '500px'
})
}
......@@ -847,4 +883,26 @@ export class ExcelListComponent implements OnInit {
this.modalRefaddChild?.close()
}
openModalexcel_portal() {
this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
width: '1500px',
height: '700px'
})
}
closeModalexcel_portal() {
this.modalRefexcel_portal?.close()
}
openModvideoModal() {
this.modalRefvideoModal = this.modal.open(this.videoModal, {
width: '1500px',
height: '700px'
})
}
closeModvideoModal() {
this.modalRefexcel_portal?.close()
}
}
\ No newline at end of file
src/app/DPU/models/excel-portal.model.ts
......@@ -83,7 +83,7 @@ export class MyExcelPortalModel implements ExcelPortalModel {
this.uploadTime = data?.uploadTime || ''
}
getImg() {
return this.thumbnail ? environment.baseUrl + "files/image/" + this.thumbnail : ''
return this.thumbnail ? environment.url + "files/image/" + this.thumbnail : ''
}
}
......
src/assets/css/style.css
......@@ -3650,7 +3650,7 @@ label {
}
.swal2-container .swal2-styled.swal2-cancel {
@apply bg-light text-defaulttextcolor py-[0.375rem] px-3 text-[0.8125rem] !important;
@apply bg-danger text-white py-[0.375rem] px-3 text-[0.8125rem] !important;
}
/* end:: cart */
......
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