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 253 additions and 210 deletions
package-lock.json
...@@ -88,6 +88,7 @@ ...@@ -88,6 +88,7 @@
"sass": "^1.69.7", "sass": "^1.69.7",
"simplebar-angular": "^3.2.4", "simplebar-angular": "^3.2.4",
"sweetalert": "^2.1.2", "sweetalert": "^2.1.2",
"sweetalert2": "^11.22.2",
"swiper": "^8.4.7", "swiper": "^8.4.7",
"tslib": "^2.6.2", "tslib": "^2.6.2",
"zone.js": "~0.14.2" "zone.js": "~0.14.2"
...@@ -19690,6 +19691,16 @@ ...@@ -19690,6 +19691,16 @@
"promise-polyfill": "^6.0.2" "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": { "node_modules/swiper": {
"version": "8.4.7", "version": "8.4.7",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz", "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.7.tgz",
......
package.json
...@@ -35,11 +35,11 @@ ...@@ -35,11 +35,11 @@
"@ngx-translate/core": "^15.0.0", "@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0", "@ngx-translate/http-loader": "^8.0.0",
"@syncfusion/ej2-angular-base": "^29.2.4", "@syncfusion/ej2-angular-base": "^29.2.4",
"@syncfusion/ej2-angular-charts": "^29.2.4",
"@syncfusion/ej2-angular-dropdowns": "^29.2.4", "@syncfusion/ej2-angular-dropdowns": "^29.2.4",
"@syncfusion/ej2-angular-grids": "^29.2.4", "@syncfusion/ej2-angular-grids": "^29.2.4",
"@syncfusion/ej2-angular-inputs": "^29.2.4", "@syncfusion/ej2-angular-inputs": "^29.2.4",
"@syncfusion/ej2-angular-pivotview": "^29.2.4", "@syncfusion/ej2-angular-pivotview": "^29.2.4",
"@syncfusion/ej2-angular-charts": "^29.2.4",
"@syncfusion/ej2-grids": "^30.1.39", "@syncfusion/ej2-grids": "^30.1.39",
"@tailwindcss/forms": "^0.5.7", "@tailwindcss/forms": "^0.5.7",
"@types/google.maps": "^3.58.1", "@types/google.maps": "^3.58.1",
...@@ -93,6 +93,7 @@ ...@@ -93,6 +93,7 @@
"sass": "^1.69.7", "sass": "^1.69.7",
"simplebar-angular": "^3.2.4", "simplebar-angular": "^3.2.4",
"sweetalert": "^2.1.2", "sweetalert": "^2.1.2",
"sweetalert2": "^11.22.2",
"swiper": "^8.4.7", "swiper": "^8.4.7",
"tslib": "^2.6.2", "tslib": "^2.6.2",
"zone.js": "~0.14.2" "zone.js": "~0.14.2"
......
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.html
...@@ -358,7 +358,7 @@ ...@@ -358,7 +358,7 @@
</h6> </h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor" <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> <span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i> <i class="ri-close-line"></i>
</button> </button>
...@@ -367,60 +367,81 @@ ...@@ -367,60 +367,81 @@
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<!-- ตัวเลือกไฟล์จาก Portal --> <!-- ตัวเลือกไฟล์จาก 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"> <div class="flex items-center gap-2 mb-2">
<input type="radio" class="custom-control-input cursor-pointer" name="excelFile" <input type="radio" class="custom-control-input cursor-pointer" name="excelFile"
id="excelFilePortal" [checked]="templateFileType=='portal'" id="excelFilePortal" [checked]="templateFileType=='portal'"
(click)="templateFileTypeChange()"> (click)="templateFileTypeChange()">
<label class="custom-control-label cursor-pointer" for="excelFilePortal">
<label class="custom-control-label cursor-pointer font-bold" for="excelFilePortal">
เลือกเอ็กเซลล์ไฟล์จาก Portal เลือกเอ็กเซลล์ไฟล์จาก Portal
<span *ngIf="templateFileType=='portal'" class="text-red-500">*</span> <span *ngIf="templateFileType=='portal'" class="text-red">*</span>
</label> </label>
</div> </div>
<div *ngIf="templateFileType=='portal'" class="flex items-center gap-2"> <div *ngIf="templateFileType=='portal'" class="flex items-center gap-2">
<input *ngIf="templateFile.portalId" type="text" class="form-control bg-white w-full" <input *ngIf="templateFile.portalId" type="text" class="form-control bg-white w-full"
[value]="templateFile.portalId" readonly> [value]="templateFile.portalId" readonly>
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-primary-full" <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> <i class="ri-search-line font-semibold align-middle"></i>
</button> </button>
</div> </div>
</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"> <div class="flex items-center gap-2 mb-2">
<input type="radio" class="custom-control-input cursor-pointer" name="excelFile" <input type="radio" class="custom-control-input cursor-pointer" name="excelFile"
id="excelFileUpload" [checked]="templateFileType=='upload'" id="excelFileUpload" [checked]="templateFileType=='upload'"
(click)="templateFileTypeChange()"> (click)="templateFileTypeChange()">
<label class="custom-control-label cursor-pointer" for="excelFileUpload"> <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> </label>
</div> </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)" <input #fileInput type="file" accept=".xlsx" (change)="onFileSelected($event)"
class="hidden" /> style="display: none;" />
<button class="ti-btn" (click)="fileInput.click()">เลือกไฟล์</button>
<span *ngIf="templateFileName">{{ templateFileName }}</span> <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> </div>
<!-- รายละเอียด ภาษาไทย --> <div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<div> <div
<label class="block mb-1">รายละเอียด (ภาษาไทย) <span class="text-red-500">*</span></label> 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">
<input type="text" class="form-control w-full" [(ngModel)]="templateFile.tdesc"> <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>
<!-- รายละเอียด ภาษาอังกฤษ --> <div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<div> <div
<label class="block mb-1">รายละเอียด (ภาษาอังกฤษ)</label> 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">
<input type="text" class="form-control w-full" [(ngModel)]="templateFile.edesc"> <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>
<!-- แบ่งปัน --> <!-- แบ่งปัน -->
<div> <div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<label class="block mb-1">แบ่งปัน</label> <label class="ti-form-label block mb-1 font-bold">แบ่งปัน</label>
<div class="flex gap-4"> <div class="flex gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="share" <input type="radio" class="custom-control-input cursor-pointer" name="share"
...@@ -438,8 +459,8 @@ ...@@ -438,8 +459,8 @@
</div> </div>
<!-- แสดง Pivot --> <!-- แสดง Pivot -->
<div> <div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<label class="block mb-1">แสดงรูปแบบ pivot</label> <label class="ti-form-label block mb-1 font-bold">แสดงรูปแบบ pivot</label>
<div class="flex gap-4"> <div class="flex gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="pivot" <input type="radio" class="custom-control-input cursor-pointer" name="pivot"
...@@ -457,8 +478,8 @@ ...@@ -457,8 +478,8 @@
</div> </div>
<!-- แสดง DataGrid --> <!-- แสดง DataGrid -->
<div> <div class="sm:grid grid-cols-3 gap-x-6 space-y-4 lg:space-y-0 mt-5">
<label class="block mb-1">แสดงรูปแบบ datagrid</label> <label class="ti-form-label block mb-1 font-bold">แสดงรูปแบบ datagrid</label>
<div class="flex gap-4"> <div class="flex gap-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<input type="radio" class="custom-control-input cursor-pointer" name="datagt" <input type="radio" class="custom-control-input cursor-pointer" name="datagt"
...@@ -478,8 +499,11 @@ ...@@ -478,8 +499,11 @@
</div> </div>
</div> </div>
<div class="border-t mt-3">
<div class="ti-modal-footer flex justify-center gap-3 mb-3 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()"> <button type="button" class="ti-btn bg-danger text-white !font-medium"
(click)="closeModaladdChild()">
{{'Cancel' | translate}} {{'Cancel' | translate}}
</button> </button>
<button type="submit" <button type="submit"
...@@ -490,158 +514,63 @@ ...@@ -490,158 +514,63 @@
</div> </div>
</div> </div>
</div> </div>
</ng-template>
<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>
</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>
</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>
</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> </div>
</ng-template> </ng-template>
<ng-template #excel_portalModal let-modal> <ng-template #excel_portalModal 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">EXCEL_PORTAL</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">
EXCEL_PORTAL
</h6>
<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> </button>
</div> </div>
<div class="modal-body"> <div class="ti-modal-body px-4 mt-3">
<div class="row align-items-center mb-2"> <div class="flex flex-col space-y-4">
<div class="col-12 col-lg-3 mb-2"> <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"> <select class="custom-select" [(ngModel)]="excelPortalSearch.groupId">
<option value="" *ngIf="excelPortalSearch.groupId==''" disabled selected hidden>เลือกกลุ่ม <option value="" *ngIf="excelPortalSearch.groupId==''" disabled selected hidden>
</option> เลือกกลุ่ม</option>
<option style="color: red" [class.d-none]="excelPortalSearch.groupId==''" [value]="''"> <option style="color: red" [class.d-none]="excelPortalSearch.groupId==''"
[value]="''">
{{excelPortalSearch.groupId!=''?'ยกเลิก':''}}</option> {{excelPortalSearch.groupId!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalGroup.data; let i=index" [ngValue]="item.groupId"> <option *ngFor="let item of excelPortalGroup.data" [ngValue]="item.groupId">
{{item.thName}} {{item.thName}}
</option> </option>
</select> </select>
</div> </div>
<div class="col-12 col-lg-3 mb-2">
<div class="flex flex-col min-w-[200px]">
<select class="custom-select" [(ngModel)]="excelPortalSearch.tags"> <select class="custom-select" [(ngModel)]="excelPortalSearch.tags">
<option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>เลือกtags <option value="" *ngIf="excelPortalSearch.tags==''" disabled selected hidden>เลือก
</option> tags</option>
<option style="color: red" [class.d-none]="excelPortalSearch.tags==''" [value]="''"> <option style="color: red" [class.d-none]="excelPortalSearch.tags==''" [value]="''">
{{excelPortalSearch.tags!=''?'ยกเลิก':''}}</option> {{excelPortalSearch.tags!=''?'ยกเลิก':''}}</option>
<option *ngFor="let item of excelPortalTags.data; let i=index" [ngValue]="item.value">{{item.value}} <option *ngFor="let item of excelPortalTags.data" [ngValue]="item.value">
{{item.value}}
</option> </option>
</select> </select>
</div> </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> </div>
<div class="flex flex-col min-w-[200px]">
<input type="text" class="form-control" placeholder="ค้นหา"
[(ngModel)]="excelPortalSearch.search">
</div> </div>
</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 mb-0 no-wrap v-middle " style="width: 100%;">
<thead class="bg-info text-white"> <thead class="bg-info text-white">
<tr> <tr>
<th class="text-center" scope="col">Ex.</th> <th class="text-center" scope="col">Ex.</th>
...@@ -657,8 +586,8 @@ ...@@ -657,8 +586,8 @@
</tr> </tr>
</thead> </thead>
<tbody *ngIf="!excelPortalFilter().length"> <tbody *ngIf="!excelPortalFilter().length">
<tr style="background-color:#ebf2f6"> <tr style="background-color:#ebf2f6;">
<td colspan="10" class="text-center">ไม่พบข้อมูล</td> <td colspan="10" class="text-center align-middle">ไม่พบข้อมูล</td>
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="excelPortalFilter().length"> <tbody *ngIf="excelPortalFilter().length">
...@@ -667,12 +596,14 @@ ...@@ -667,12 +596,14 @@
<tr (mouseenter)="tableHover.set(item.excelId,!tableHover.get(item.excelId))" <tr (mouseenter)="tableHover.set(item.excelId,!tableHover.get(item.excelId))"
(mouseleave)="tableHover.clear()" (mouseleave)="tableHover.clear()"
[ngStyle]="{'background-color':tableHover.get(item.excelId)?'rgb(201 223 235)':'#ebf2f6'}"> [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><img *ngIf="item.getImg()" class="border p-1" style="width: auto;"
[src]="item.getImg()">
</td> </td>
<td> <td>
<button *ngIf="item.link1" type="button" class="btn btn-info" <button *ngIf="item.link1" type="button"
(click)="openVideoModal(videoModal,item.link1)"><i class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
class="fa fa-search text-white"></i></button> (click)="openVideoModal(item.link1)"><i
class="ri-search-line font-semibold align-middle"></i></button>
</td> </td>
<td class="cursor-pointer" (click)="modal.close(item)" <td class="cursor-pointer" (click)="modal.close(item)"
style="white-space: normal !important;word-break: break-word;"> style="white-space: normal !important;word-break: break-word;">
...@@ -711,28 +642,69 @@ ...@@ -711,28 +642,69 @@
</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)]="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> </div>
<div class="modal-footer "> </div>
<button type="button" class="btn btn-danger" (click)="modal.dismiss()">ปิด</button>
<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 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> </div>
</ng-template> </ng-template>
<ng-template #videoModal let-modal> <ng-template #videoModal let-modal>
<div style="width: 100%; height: 70vh;"> <div style="width: 100%; height: 100%;">
<iframe class="w-100 h-100" [src]="videoLink | safeUrl" frameborder="0" allow="autoplay; encrypted-media" <iframe style="width: 100%; height: 100%;" [src]="videoLink | safeUrl" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen> allowfullscreen>
</iframe> </iframe>
</div> </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'; ...@@ -17,12 +17,13 @@ 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 { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatDialog, MatDialogModule, MatDialogRef } 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';
import { PivotSyncfutionComponent } from "../../../../../pivot-syncfution/pivot-syncfution.component"; import { PivotSyncfutionComponent } from "../../../../../pivot-syncfution/pivot-syncfution.component";
import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe'; import { SafeUrlPipe } from '../../../../../../pipe/safe-url.pipe';
import Swal from 'sweetalert2';
export interface ModalDetail { export interface ModalDetail {
text: { cardHead: string, search: string[], tableHead: string[] } text: { cardHead: string, search: string[], tableHead: string[] }
} }
...@@ -145,10 +146,14 @@ export class ExcelListComponent implements OnInit { ...@@ -145,10 +146,14 @@ export class ExcelListComponent implements OnInit {
isSearching = false; isSearching = false;
modalRef: any; modalRef: any;
modalRefaddChild: any; modalRefaddChild: any;
modalRefexcel_portal: MatDialogRef<any>;
modalRefvideoModal: any;
searchText: string = ''; searchText: string = '';
@ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>; @ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
@ViewChild('addChildModal') addChildModal!: TemplateRef<any>; @ViewChild('addChildModal') addChildModal!: TemplateRef<any>;
@ViewChild('excel_portalModal') excel_portalModal!: TemplateRef<any>;
@ViewChild('videoModal') videoModal!: TemplateRef<any>;
constructor(private excelReportService: ExcelReportService, constructor(private excelReportService: ExcelReportService,
private modalService: NgbModal, private modalService: NgbModal,
private customCubeService: CustomCubeService, private customCubeService: CustomCubeService,
...@@ -329,25 +334,48 @@ export class ExcelListComponent implements OnInit { ...@@ -329,25 +334,48 @@ export class ExcelListComponent implements OnInit {
this.openModaladdChild() this.openModaladdChild()
} }
openExcelPortalModal(targetModal: TemplateRef<any>) { openExcelPortalModal() {
this.pageModal = 1 this.pageModal = 1;
this.pageSizeModal = 10 this.pageSizeModal = 10;
const modalRef = this.modalService.open(targetModal, {
centered: true, this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
backdrop: 'static', width: '1500px',
size: 'xl' height: '700px',
}) maxWidth: 'none',
modalRef.result.then(result => { disableClose: true,
this.templateFile.portalId = result.excelId data: {}
}, reject => { }) });
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, { // openVideoModal(targetModal: TemplateRef<any>, videoLink: string) {
centered: true, // this.videoLink = this.convertToEmbedUrl(videoLink)
windowClass: 'my-dialog-video-preview' // 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 { convertToEmbedUrl(youtubeUrl: string): string {
try { try {
const url = new URL(youtubeUrl); const url = new URL(youtubeUrl);
...@@ -690,20 +718,28 @@ export class ExcelListComponent implements OnInit { ...@@ -690,20 +718,28 @@ export class ExcelListComponent implements OnInit {
} }
templateFileTypeChange() { templateFileTypeChange() {
if (this.templateFileName || this.templateFile.portalId) { if (this.templateFileName || this.templateFile?.portalId) {
const modalConfirmRef = this.modalService.open(ConfirmModalComponent, { Swal.fire({
centered: true, title: 'ยืนยันการดำเนินการ',
backdrop: 'static', text: 'คุณต้องการยกเลิกไฟล์ที่เลือกหรือไม่',
}) icon: 'warning',
modalConfirmRef.componentInstance.message = 'คุณต้องการยกเลิกไฟล์ที่เลือกหรือไม่' showCancelButton: true,
modalConfirmRef.result.then(result => { confirmButtonText: 'ใช่, ยกเลิกไฟล์',
this.onToggleTemplateFile() cancelButtonText: 'ไม่',
}, reject => { }) confirmButtonColor: '#d33', // สีปุ่มยืนยัน (แดง)
cancelButtonColor: '#3085d6', // สีปุ่มยกเลิก (น้ำเงิน)
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
this.onToggleTemplateFile();
}
});
} else { } else {
this.onToggleTemplateFile() this.onToggleTemplateFile();
} }
} }
onToggleTemplateFile() { onToggleTemplateFile() {
if (this.templateFileType == 'portal') { if (this.templateFileType == 'portal') {
this.templateFileType = 'upload' this.templateFileType = 'upload'
...@@ -838,7 +874,7 @@ export class ExcelListComponent implements OnInit { ...@@ -838,7 +874,7 @@ export class ExcelListComponent implements OnInit {
openModaladdChild() { openModaladdChild() {
this.modalRefaddChild = this.modal.open(this.addChildModal, { this.modalRefaddChild = this.modal.open(this.addChildModal, {
width: '1000px', width: '700px',
height: '500px' height: '500px'
}) })
} }
...@@ -847,4 +883,26 @@ export class ExcelListComponent implements OnInit { ...@@ -847,4 +883,26 @@ export class ExcelListComponent implements OnInit {
this.modalRefaddChild?.close() 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 { ...@@ -83,7 +83,7 @@ export class MyExcelPortalModel implements ExcelPortalModel {
this.uploadTime = data?.uploadTime || '' this.uploadTime = data?.uploadTime || ''
} }
getImg() { 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 { ...@@ -3650,7 +3650,7 @@ label {
} }
.swal2-container .swal2-styled.swal2-cancel { .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 */ /* 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