Skip to content

M
myjob-manage
Commit 83db1670 by Natthaphat
Options

เพิ่ม datagird sysfunction ## npm i --force

parent 5e69bb3f
Showing with 121 additions and 81 deletions
package-lock.json
......@@ -35,7 +35,12 @@
"@syncfusion/ej2-angular-grids": "^29.2.4",
"@syncfusion/ej2-angular-inputs": "^29.2.4",
"@syncfusion/ej2-angular-pivotview": "^29.2.4",
"@syncfusion/ej2-grids": "^29.2.11",
"@syncfusion/ej2-base": "^29.2.4",
"@syncfusion/ej2-buttons": "^29.2.4",
"@syncfusion/ej2-data": "^29.2.4",
"@syncfusion/ej2-dropdowns": "^29.2.4",
"@syncfusion/ej2-grids": "^29.2.4",
"@syncfusion/ej2-inputs": "^29.2.4",
"@tailwindcss/forms": "^0.5.7",
"@types/google.maps": "^3.58.1",
"@types/googlemaps": "^3.43.3",
......
package.json
......@@ -35,12 +35,17 @@
"@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-grids": "^29.2.11",
"@syncfusion/ej2-base": "^29.2.4",
"@syncfusion/ej2-buttons": "^29.2.4",
"@syncfusion/ej2-data": "^29.2.4",
"@syncfusion/ej2-dropdowns": "^29.2.4",
"@syncfusion/ej2-grids": "^29.2.4",
"@syncfusion/ej2-inputs": "^29.2.4",
"@syncfusion/ej2-angular-charts": "^29.2.4",
"@tailwindcss/forms": "^0.5.7",
"@types/google.maps": "^3.58.1",
"@types/googlemaps": "^3.43.3",
......@@ -115,4 +120,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
......@@ -90,7 +90,7 @@
</tr>
<ng-container *ngIf="!isSearching">
<ng-container
*ngFor="let items of template.filter | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
*ngFor="let items of template.filter | slice: page * pageSize : (page + 1) * 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'}">
......@@ -140,7 +140,7 @@
</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">
*ngFor="let item of items.templateFile | slice: page * pageSize : (page+1) * 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'}">
......@@ -226,31 +226,25 @@
<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
<li *ngIf="page > 0" class="page-item {{page==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>
(click)="page = page - 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>0 && ((pageIndex-1)*10 < (searchText == '' ? template.data.length : template.filter.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
*ngIf="page > 0" (click)="page = page - 1; updatePagedItems()">{{page}}</a>
</li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
href="javascript:void(0);">{{page + 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>
*ngIf="(page + 1) * pageSize < template.filter.length"
(click)="page = page + 1; updatePagedItems()">{{page + 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>
*ngIf="(page + 2) * pageSize < template.filter.length"
(click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
<li *ngIf="(page + 1) * pageSize < template.filter.length" class="page-item"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="page = page + 1; updatePagedItems()">{{'Next' | translate}}</a>
</li>
</ul>
</nav>
......@@ -302,7 +296,9 @@
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</label>
<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.ename">
<div class="text-danger" *ngIf="!bodyTemplate.data.ename">
......@@ -336,14 +332,18 @@
</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)="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 class="border-t">
<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.ename ||!bodyTemplate.data.module"
[disabled]="!bodyTemplate.data.tname || !bodyTemplate.data.ename ||!bodyTemplate.data.module"
(click)="closeModalAddGroup()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
......@@ -379,14 +379,18 @@
</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"
<div *ngIf="templateFileType=='portal'" class="flex items-center w-full col-span-2">
<input *ngIf="templateFile.portalId" type="text"
class="form-control bg-white w-full flex-grow" style="border-radius: 0px;"
[value]="templateFile.portalId" readonly>
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
(click)="openExcelPortalModal()">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-btn-primary-full flex-shrink-0 !mb-0"
style="border-radius: 0.1rem;" (click)="openExcelPortalModal()">
<i class="ri-search-line font-semibold align-middle"></i>
</button>
</div>
</div>
<!-- อัปโหลดไฟล์ -->
......@@ -501,7 +505,7 @@
<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-end gap-3 mb-3 mt-3 mr-3">
<button type="button" class="ti-btn bg-danger text-white !font-medium"
(click)="closeModaladdChild()">
{{'Cancel' | translate}}
......@@ -592,7 +596,7 @@
</tbody>
<tbody *ngIf="excelPortalFilter().length">
<ng-container
*ngFor="let item of excelPortalFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal ; let i = index">
*ngFor="let item of excelPortalFilter() | slice: pageModal * pageSizeModal : (pageModal+1) * 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'}">
......@@ -646,7 +650,7 @@
</div>
</div>
<div class="box-footer">
<div class="box-footer !border-t-0">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="excelPortalFilter().length > 0">
<div class="mb-2 sm:mb-0">
<div>
......@@ -656,31 +660,36 @@
</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
<ul class="ti-pagination mb-0">
<li *ngIf="pageModal > 0" class="page-item"><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>
(click)="pageModal = pageModal - 1; updatePagedItems()">{{'Previous' |
translate}}</a>
</li>
<li class="page-item" *ngIf="pageModal - 1 >= 0">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageModal = pageModal - 1; updatePagedItems()">{{pageModal}}</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>
href="javascript:void(0);">{{pageModal + 1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(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)"
<li class="page-item"
*ngIf="(pageModal + 1) * pageSizeModal < excelPortalFilter().length">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageModal = pageModal + 1; updatePagedItems()">{{pageModal + 2}}</a>
</li>
<li class="page-item"
*ngIf="(pageModal + 2) * pageSizeModal < excelPortalFilter().length">
<a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
(click)="pageModal = pageModal + 2; updatePagedItems()">{{pageModal + 3}}</a>
</li>
<li *ngIf="(pageModal + 1) * pageSizeModal < excelPortalFilter().length"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
(click)="pageModal = pageModal + 1; updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
......@@ -689,9 +698,8 @@
</div>
</div>
<div class="mt-3">
<div class="ti-modal-footer flex justify-center gap-3 mb-3 mt-3">
<div class="border-t mt-3">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button type="button" class="ti-btn bg-danger text-white !font-medium"
(click)="closeModalexcel_portal()">
{{'Cancel' | translate}}
......@@ -911,7 +919,7 @@
</tbody>
<tbody *ngIf="valueDetailFilter().length">
<tr class="cursor-pointer"
*ngFor="let item of valueDetailFilter() | slice: (pageModal-1) * pageSizeModal : (pageModal-1) * pageSizeModal + pageSizeModal; let i=index"
*ngFor="let item of valueDetailFilter() | slice: pageModal * pageSizeModal : (pageModal+1) * pageSizeModal; let i=index"
(click)="selectData(item);closeModalmodalData()"
(mouseenter)="tableHover.set(item.id,!tableHover.get(item.id))"
(mouseleave)="tableHover.clear()"
......@@ -950,7 +958,7 @@
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageIndex>0" class="page-item {{pageModal==0 ? 'disabled' : ''}}"><a
<li *ngIf="pageModal>0" class="page-item {{pageModal==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageModal = pageModal-1;updatePagedItems()">{{'Previous' |
translate}}</a></li>
......@@ -1086,9 +1094,9 @@
</app-pivot-syncfution>
</div>
<div class="border-t">
<div class="border-t mt-3">
<div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
<button *ngIf="!loadingExcel" type="button" class="btn btn-info"
<button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
(click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
{{"Save Perspective"}}
</button>
......
src/app/DPU/common/myportal/set-excel-reports/excel-list/excel-list.component.ts
......@@ -58,11 +58,12 @@ 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 }
pagedItems: TemplateModel[] = [];
pageIndex: number = 0;
itemsPerPage: number = 10;
page = 1
page = 0
pageSize = 10
pageModal = 1
pageModal = 0
pageSizeModal = 10
searchBy = ''
condition = ''
......@@ -150,8 +151,8 @@ export class ExcelListComponent implements OnInit {
modalRefvideoModal: any;
modalRefprintModal: any;
modalRefmodalData: any;
modalRefgridModal: any;
modalRefpivotModal: any;
modalRefgridModal: MatDialogRef<any>;
modalRefpivotModal: MatDialogRef<any>;
searchText: string = '';
@ViewChild('addGroupModal') addGroupModal!: TemplateRef<any>;
......@@ -195,12 +196,15 @@ export class ExcelListComponent implements OnInit {
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);
updatePagedItems() {
const data = this.searchText == '' ? this.template.data : this.template.filter;
const start = this.page * this.pageSize; // ถ้า page = 1 → เริ่มที่ index 10
const end = start + this.pageSize;
this.pagedItems = data.slice(start, end);
}
getExcelPortalList() {
this.excelPortal.loading = true
this.excelReportService.getExcelPortalList().subscribe(response => {
......@@ -343,8 +347,8 @@ export class ExcelListComponent implements OnInit {
}
openExcelPortalModal() {
this.pageModal = 1;
this.pageSizeModal = 10;
this.pageModal = 0;
this.pageSizeModal = 5;
this.modalRefexcel_portal = this.modal.open(this.excel_portalModal, {
width: '1500px',
......@@ -802,7 +806,7 @@ export class ExcelListComponent implements OnInit {
this.dataList = response.excelData as any
this.loadingExcel = false
if (type === 'grid') {
this.modal.open(this.gridModal, {
this.modalRefgridModal = this.modal.open(this.gridModal, {
width: '1000px',
height: '700px',
data: {
......@@ -813,8 +817,8 @@ export class ExcelListComponent implements OnInit {
autoFocus: false
});
} else if (type === 'pivot') {
this.modal.open(this.pivotModal, {
width: '800px',
this.modalRefpivotModal = this.modal.open(this.pivotModal, {
width: '1000px',
height: '580px',
data: {
pivotData: (response.excelPerspective as any).pivotStr,
......@@ -939,7 +943,7 @@ export class ExcelListComponent implements OnInit {
closeModalgridModal() {
this.modalRefgridModal?.close()
}
closeModalpivotModal() {
this.modalRefpivotModal?.close()
}
......
src/styles.scss
......@@ -31,6 +31,23 @@
@import "../node_modules/angular-calendar/scss/angular-calendar.scss";
@import '../node_modules/quill/dist/quill.core.css';
@import '../node_modules/quill/dist/quill.snow.css';
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800');
@import url("https://fonts.googleapis.com/css?family=Kanit:300,400,600,700,800");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.css';
// @import "../node_modules/angular-calendar/scss/angular-calendar.scss";
//swiperjs
......
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