Skip to content

M
mySkill-x
Commit d10ab523 by Nattana Chaiyamat
Options

syncfution

parent c3dce23e
Showing with 576 additions and 13 deletions
package-lock.json
...@@ -28,6 +28,16 @@ ...@@ -28,6 +28,16 @@
"@ng-select/ng-select": "^11.0.0", "@ng-select/ng-select": "^11.0.0",
"@ngrx/store": "^16.0.1", "@ngrx/store": "^16.0.1",
"@swimlane/ngx-charts": "^20.4.1", "@swimlane/ngx-charts": "^20.4.1",
"@syncfusion/ej2-angular-base": "26.2.10",
"@syncfusion/ej2-angular-dropdowns": "26.2.13",
"@syncfusion/ej2-angular-grids": "26.2.14",
"@syncfusion/ej2-angular-inputs": "26.2.14",
"@syncfusion/ej2-base": "26.2.10",
"@syncfusion/ej2-buttons": "26.2.10",
"@syncfusion/ej2-data": "26.2.14",
"@syncfusion/ej2-dropdowns": "26.2.13",
"@syncfusion/ej2-grids": "26.2.14",
"@syncfusion/ej2-inputs": "26.2.14",
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
"angular-calendar": "^0.31.0", "angular-calendar": "^0.31.0",
"angular2-multiselect-dropdown": "^5.0.4", "angular2-multiselect-dropdown": "^5.0.4",
...@@ -93,7 +103,6 @@ ...@@ -93,7 +103,6 @@
"eslint": "^8.43.0", "eslint": "^8.43.0",
"gulp-postcss": "^9.0.1", "gulp-postcss": "^9.0.1",
"jasmine-core": "~5.0.1", "jasmine-core": "~5.0.1",
"jwt-decode": "^4.0.0",
"karma": "~6.4.2", "karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0", "karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1", "karma-coverage": "~2.2.1",
...@@ -6381,6 +6390,222 @@ ...@@ -6381,6 +6390,222 @@
"rxjs": "^6.5.3 || ^7.4.0" "rxjs": "^6.5.3 || ^7.4.0"
} }
}, },
"node_modules/@syncfusion/ej2-angular-base": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-26.2.10.tgz",
"integrity": "sha512-Qf088nJx9WgWs+h52QnW3HRTWgoGBuhS2Lx4XxXmohbOLnc91KlsG8Fjwq6hRhm1nxEQvaYnY7jTjtIr1lyong==",
"hasInstallScript": true,
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-icons": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-angular-dropdowns": {
"version": "26.2.13",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-dropdowns/-/ej2-angular-dropdowns-26.2.13.tgz",
"integrity": "sha512-VC47xbgnwqrZOlRwXc+jqm70JklMF8oDmce76afPm1hRX2A7jSJiZt11T5o4+PQOUXrD5mcwvyruZRgyhbZ0Xw==",
"dependencies": {
"@syncfusion/ej2-angular-base": "~26.2.10",
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-dropdowns": "26.2.13",
"tslib": "^2.3.0"
}
},
"node_modules/@syncfusion/ej2-angular-grids": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-grids/-/ej2-angular-grids-26.2.14.tgz",
"integrity": "sha512-PUY0j4+SIMnJR2h/txj9HmtHnjk/s7Qjd0LthFyNfZQnUXmUPezON0fMWokeRb8Fi1qokjCSASKtc/pGu/2uGw==",
"dependencies": {
"@syncfusion/ej2-angular-base": "~26.2.10",
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-grids": "26.2.14",
"tslib": "^2.3.0"
}
},
"node_modules/@syncfusion/ej2-angular-inputs": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-inputs/-/ej2-angular-inputs-26.2.14.tgz",
"integrity": "sha512-k5Zw1o/V2zq8filYs2i2SnbVHnHvv72VMx0jscGqA7upha4Ztj3TboZHy+lYAPLc5Pe17iIggDecwlqt6Te7Ww==",
"dependencies": {
"@syncfusion/ej2-angular-base": "~26.2.10",
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-inputs": "26.2.14",
"tslib": "^2.3.0"
}
},
"node_modules/@syncfusion/ej2-base": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-26.2.10.tgz",
"integrity": "sha512-i7TCvXGNsHmCoLA9AlHn3dIAyH8Bce6KCZUGshJS0EKu623SkVKjvWVWtgfar75/8SbTGWZQlGqEW5egYm3uTA==",
"dependencies": {
"@syncfusion/ej2-icons": "~26.2.10"
},
"bin": {
"syncfusion-license": "bin/syncfusion-license.js"
}
},
"node_modules/@syncfusion/ej2-buttons": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-26.2.10.tgz",
"integrity": "sha512-WcErxTAI9r5PQQSOQNSWsaKfzYdSww+YeQaT4SO1xItMPDAEhWSqscnTMk46vDg6w5vRbAbB1US+3BAXJtOS1w==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-calendars": {
"version": "26.2.12",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-calendars/-/ej2-calendars-26.2.12.tgz",
"integrity": "sha512-6sAauvGexP2Wg7FodNi6ewna1JRyKS7VuKfPYh5Q6i3xrq0AvgxiZk7xaL3oq+U3t59w/de/S+eq4cpQSpI93Q==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10",
"@syncfusion/ej2-inputs": "~26.2.11",
"@syncfusion/ej2-lists": "~26.2.11",
"@syncfusion/ej2-popups": "~26.2.11"
}
},
"node_modules/@syncfusion/ej2-compression": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-26.2.10.tgz",
"integrity": "sha512-cCcABW1SUG+O8lGKzAj3zi7yLguslFVxEFSfMk9GWajC9SNgzICiKo7HR8Sz3HG9M4tmrH5aNKqM2mbYG6Lr0Q==",
"dependencies": {
"@syncfusion/ej2-file-utils": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-data": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-26.2.14.tgz",
"integrity": "sha512-KJ5JsRwBbKjNLkFvkLgUz5SkC4zTJxS40mmBdWJTTROopKYjcHAe9HJxQJmJUOy/gxqfx5iPINVJaArqdtpPeQ==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-dropdowns": {
"version": "26.2.13",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-26.2.13.tgz",
"integrity": "sha512-aRQyN5unJz2bnXL90zuE23rG5l8Q4y24ymigL33chsa+bWQw7Fx8MCHXqNostzo2A4qtsL6FLT7MoCOnGYpmkg==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-data": "~26.2.10",
"@syncfusion/ej2-inputs": "~26.2.13",
"@syncfusion/ej2-lists": "~26.2.11",
"@syncfusion/ej2-navigations": "~26.2.12",
"@syncfusion/ej2-notifications": "~26.2.10",
"@syncfusion/ej2-popups": "~26.2.11"
}
},
"node_modules/@syncfusion/ej2-excel-export": {
"version": "26.2.11",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-excel-export/-/ej2-excel-export-26.2.11.tgz",
"integrity": "sha512-R0Q3QXXEDvdRrWrQIIxuGcJJCLPqrJpSlvGIw9SNmaB4FCOxDhgqHjrzorAremGw4e4Ke9lq0S5MZhaPU9Tebg==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-compression": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-file-utils": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-26.2.10.tgz",
"integrity": "sha512-sHWGPT6PrZcNKqNl27tfntEMjL6Ctr2dbTtsacTnlf68tM1dGyYSdKuGtE/Rhn866oCCCKyRvTmItEeh6MINOw=="
},
"node_modules/@syncfusion/ej2-grids": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-grids/-/ej2-grids-26.2.14.tgz",
"integrity": "sha512-2dmXpp3z2dFMKKy6aCyXmtGpBHA2vRH8ygd0aRm+YwVX1H3HLeHHhkODyCDDzUpN2TX9Pt0/0qzX1tP3Crnnwg==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10",
"@syncfusion/ej2-calendars": "~26.2.12",
"@syncfusion/ej2-compression": "~26.2.10",
"@syncfusion/ej2-data": "~26.2.14",
"@syncfusion/ej2-dropdowns": "~26.2.13",
"@syncfusion/ej2-excel-export": "~26.2.11",
"@syncfusion/ej2-file-utils": "~26.2.10",
"@syncfusion/ej2-inputs": "~26.2.14",
"@syncfusion/ej2-lists": "~26.2.14",
"@syncfusion/ej2-navigations": "~26.2.12",
"@syncfusion/ej2-notifications": "~26.2.10",
"@syncfusion/ej2-pdf-export": "~26.2.14",
"@syncfusion/ej2-popups": "~26.2.11",
"@syncfusion/ej2-splitbuttons": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-icons": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-26.2.10.tgz",
"integrity": "sha512-ay+kr1oVqBOCe9MwJ0vjXS85CDAA5XwtwKb/Gf8cdz79IpsX/1VOvqOBofYu1+OPfbMX9w9mCLciNCMPCaRZFA=="
},
"node_modules/@syncfusion/ej2-inputs": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-26.2.14.tgz",
"integrity": "sha512-Lo8pqhhhCT30PVzj+gX6idPySSq4R0Sh36vnMZ7ubxf46rbg0Bw7Ftov8mPP9lLQSql+ixLYTjVpTEP1b9UIuA==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10",
"@syncfusion/ej2-popups": "~26.2.11",
"@syncfusion/ej2-splitbuttons": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-lists": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-26.2.14.tgz",
"integrity": "sha512-8tQdVIzbHYcCjxYns57etpoJvTTp3lMY2bExbD4agZij1mdgGv/PMdp29RepcnSZMw6FsX6Eqp2hriXzrwL6Lg==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10",
"@syncfusion/ej2-data": "~26.2.14",
"@syncfusion/ej2-popups": "~26.2.11"
}
},
"node_modules/@syncfusion/ej2-navigations": {
"version": "26.2.12",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-26.2.12.tgz",
"integrity": "sha512-SAFkU75y/SZTSsrE+NyWX/+1HqyYr2sqARFAqXKu87mfYDsxVjsroSXQuDEbwRRujCr3reR0znEkW/zQ+RM5mA==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10",
"@syncfusion/ej2-data": "~26.2.10",
"@syncfusion/ej2-inputs": "~26.2.11",
"@syncfusion/ej2-lists": "~26.2.11",
"@syncfusion/ej2-popups": "~26.2.11"
}
},
"node_modules/@syncfusion/ej2-notifications": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-notifications/-/ej2-notifications-26.2.10.tgz",
"integrity": "sha512-TXpsKfTK7lERvvFNOcEB7n7veNLIEUMM9SY1Ihk06fl+YJa4YGL6aSVUvQJilE8PJyFeu4MpPN6bmVvEM01NCw==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10",
"@syncfusion/ej2-popups": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-pdf-export": {
"version": "26.2.14",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-26.2.14.tgz",
"integrity": "sha512-sO2F2jUgmm8uNx1dAyFp+cz00UAU7mMM5p1ulQi8K2Km+mN90A9eZNcKzCBABX21anJqaXOgaicZHhOrqP2BTg==",
"dependencies": {
"@syncfusion/ej2-compression": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-popups": {
"version": "26.2.11",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-26.2.11.tgz",
"integrity": "sha512-JMIj3JLSgc6pjN3gAydCruD+DXyH565g5R+5jHsI78BfeDu+/uTdunm7May5zMgr2AmFAKOE6VdQhjEyr3/DJg==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-buttons": "~26.2.10"
}
},
"node_modules/@syncfusion/ej2-splitbuttons": {
"version": "26.2.10",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-26.2.10.tgz",
"integrity": "sha512-uvGS9e4K0qcVxhzFBP9VheWrAgOFciSLyHo1qcxgxAyOhuqVhBeBZgmjBiFXXwJHiSW9FM37FQVV0iD0LcVEnw==",
"dependencies": {
"@syncfusion/ej2-base": "~26.2.10",
"@syncfusion/ej2-popups": "~26.2.10"
}
},
"node_modules/@tailwindcss/forms": { "node_modules/@tailwindcss/forms": {
"version": "0.5.6", "version": "0.5.6",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
...@@ -12871,15 +13096,6 @@ ...@@ -12871,15 +13096,6 @@
"node >= 0.2.0" "node >= 0.2.0"
] ]
}, },
"node_modules/jwt-decode": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
"dev": true,
"engines": {
"node": ">=18"
}
},
"node_modules/karma": { "node_modules/karma": {
"version": "6.4.2", "version": "6.4.2",
"resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz", "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.2.tgz",
......
package.json
...@@ -78,7 +78,17 @@ ...@@ -78,7 +78,17 @@
"swiper": "^8.4.6", "swiper": "^8.4.6",
"tslib": "^2.5.3", "tslib": "^2.5.3",
"wnumb": "^1.2.0", "wnumb": "^1.2.0",
"zone.js": "~0.13.1" "zone.js": "~0.13.1",
"@syncfusion/ej2-angular-base": "26.2.10",
"@syncfusion/ej2-angular-dropdowns": "26.2.13",
"@syncfusion/ej2-angular-grids": "26.2.14",
"@syncfusion/ej2-angular-inputs": "26.2.14",
"@syncfusion/ej2-base": "26.2.10",
"@syncfusion/ej2-buttons": "26.2.10",
"@syncfusion/ej2-data": "26.2.14",
"@syncfusion/ej2-dropdowns": "26.2.13",
"@syncfusion/ej2-grids": "26.2.14",
"@syncfusion/ej2-inputs": "26.2.14"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^16.1.1", "@angular-devkit/build-angular": "^16.1.1",
......
src/app/components/dashboard/dashboard.module.ts
...@@ -165,6 +165,10 @@ import { ConfigPermissionService } from 'src/app/shared/services/config-permissi ...@@ -165,6 +165,10 @@ import { ConfigPermissionService } from 'src/app/shared/services/config-permissi
import { TimeAttendanceManageComponent } from '../performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component'; import { TimeAttendanceManageComponent } from '../performance-management-evaluation/time-attendance/time-attendance-manage/time-attendance-manage.component';
import { TimeAttendanceStatisticsComponent } from '../performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component'; import { TimeAttendanceStatisticsComponent } from '../performance-management-evaluation/time-attendance/time-attendance-statistics/time-attendance-statistics.component';
import { TokenService } from 'src/app/shared/services/token.service'; import { TokenService } from 'src/app/shared/services/token.service';
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { DatagridSyncfutionComponent } from '../datagrid-syncfution/datagrid-syncfution.component';
export const MY_DATE_FORMATS = { export const MY_DATE_FORMATS = {
...@@ -295,6 +299,7 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -295,6 +299,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
RolePermissionConfigComponent, RolePermissionConfigComponent,
TimeAttendanceManageComponent, TimeAttendanceManageComponent,
TimeAttendanceStatisticsComponent, TimeAttendanceStatisticsComponent,
DatagridSyncfutionComponent
], ],
imports: [ imports: [
CommonModule, CommonModule,
...@@ -313,6 +318,9 @@ export class CustomDateAdapter extends NativeDateAdapter { ...@@ -313,6 +318,9 @@ export class CustomDateAdapter extends NativeDateAdapter {
MatInputModule, MatInputModule,
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,
GridModule,
DropDownListModule,
RatingModule
], ],
providers: [ providers: [
Bu1Service, Bu1Service,
......
src/app/components/datagrid-syncfution/data.ts 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/app/components/datagrid-syncfution/datagrid-syncfution.component.html 0 → 100644
<ejs-grid #grid id='Grid' [dataSource]="dataSource" [allowFiltering]="allowFiltering" [filterSettings]="filterSettings"
[groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings"
(actionBegin)="onActionBegin($event)" (actionComplete)="onActionComplete($event)"
(rowSelected)="onRowSelectedCheckbox($event.data)" (rowDeselected)="onRowDeselectedCheckbox($event.data)"
showColumnMenu='true' allowPaging='true' allowGrouping='true' allowSorting='true' showColumnMenu='true'
allowFiltering='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
[selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)' width="auto" allowReordering='true'
[loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
[allowMultiSorting]='true'>
<e-columns>
<e-column type='checkbox' width='50' *ngIf="checkBoxSetting"></e-column>
<e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
[format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="col.editType"
[validationRules]="col.validationRules" [allowEditing]="'true'" [allowSorting]="'true'" [allowFiltering]="true"
[visible]="col.visible" [type]="col.type">
<ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700 text-primary">{{ col.headerText }}</span>
</ng-template>
</e-column>
<e-column headerText='action' width='150' textAlign='Center' *ngIf="actionSetting">
<ng-template #headerTemplate let-data>
<span class="font-size-12px font-weight-700 text-primary">การจัดการ</span>
</ng-template>
<ng-template #template let-data>
<i class="ti ti-eye cursor-pointer i-gray fs-l px-1" (click)="onNextPage(data)" *ngIf="canChild"></i>
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#modal-detail" *ngIf="canEdit"
(click)="onViewSelected(data)"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" data-hs-overlay="#modal-delete" *ngIf="canDelete"
(click)="onRemoveSelected(data)"></i>
</ng-template>
</e-column>
</e-columns>
<!-- Add Aggregates -->
<!-- <e-aggregates>
<e-aggregate>
<e-columns>
<e-column *ngFor="let col of columns" [field]="col.field" [type]="'Count'"
[footerTemplate]="'รวมทั้งหมด: ${Count}'" [textAlign]="'Right'">
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates> -->
</ejs-grid>
src/app/components/datagrid-syncfution/datagrid-syncfution.component.scss 0 → 100644
// th{
// position: relative; // เทียบเท่า class "relative"
// padding: 10px; // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
// background-color: rgb(96 165 250 / 0.1); // ตัวอย่างแทน "bg-soft-secondary"
// color: #2b2b2b; // ตัวอย่างแทน "text-primary"
// text-align: center !important; // เทียบเท่า "!text-center"
// // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
// font-weight: 600;
// border-bottom: 1px solid #eee;
// }
.e-headercell,
.e-detailheadercell {
background-color: rgb(96 165 250 / 0.1) !important;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
background: rgb(96 165 250) !important;
color: #fff;
opacity: 1 !important;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
background-color: rgb(96 165 250) !important;
border-color: transparent;
color: #fff;
}
.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
border: 1px solid !important;
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
font-family: "e-icons";
height: 18px;
line-height: 10px;
padding: 2px 0;
text-align: center;
vertical-align: middle;
width: 1rem !important;
border-color: #64748b !important;
}
.e-grid td.e-selectionbackground {
background-color: #aec2ec !important;
}
src/app/components/datagrid-syncfution/datagrid-syncfution.component.ts 0 → 100644
import {
Component,
Input,
Output,
EventEmitter,
ViewEncapsulation,
OnInit,
ViewChild,
SimpleChanges
} from '@angular/core';
import { EditService, ReorderService, SortService, GroupService, ColumnMenuService, PageService, FilterService, SelectionSettingsModel, ToolbarItems, ToolbarService, GridComponent, PdfExportService, ExcelExportService, DetailRowService, DetailDataBoundEventArgs, Grid, AggregateService, PdfExportProperties, LoadingIndicatorModel } from '@syncfusion/ej2-angular-grids';
import { GroupSettingsModel, FilterSettingsModel, ColumnModel } from '@syncfusion/ej2-angular-grids';
import { Query } from '@syncfusion/ej2-data';
import { L10n, setCulture } from '@syncfusion/ej2-base';
setCulture('th-TH');
L10n.load({
'en-US': {
'pager': {
'currentPageInfo': '',
'totalItemsInfo': '{1} to {2} of {0}',
}
},
'th-TH': {
'pager': {
'currentPageInfo': '',
'totalItemsInfo': '{0} รายการ',
'totalRecordsInfo': '{0} รายการ',
'firstPageTooltip': 'หน้าแรก',
'lastPageTooltip': 'หน้าสุดท้าย',
'nextPageTooltip': 'ถัดไป',
'previousPageTooltip': 'ก่อนหน้า',
'nextPagerTooltip': 'ถัดไป',
'previousPagerTooltip': 'ก่อนหน้า',
'pageInput': '{0}',
'page': 'หน้า',
'pagerDropDown': 'รายการ',
'pagerAll': 'ทั้งหมด',
'pageSize': 'รายการต่อหน้า',
'pageSizeAll': 'ทั้งหมด',
'pageCount': 'จำนวนหน้า',
'pageCountAll': 'ทั้งหมด'
}
}
});
@Component({
selector: 'app-datagrid-syncfution',
templateUrl: './datagrid-syncfution.component.html',
styleUrls: ['./datagrid-syncfution.component.scss'],
providers: [AggregateService, SortService, GroupService, ColumnMenuService, PageService, FilterService, ToolbarService, PdfExportService, ExcelExportService, DetailRowService, ReorderService, EditService],
encapsulation: ViewEncapsulation.None
})
export class DatagridSyncfutionComponent implements OnInit {
/**
* ======================
* @Input() ส่วนรับค่า
* ======================
*/
@ViewChild('grid') public grid?: GridComponent;
@Input() checkBoxSetting = true
@Input() actionSetting = true
@Input() detailSetting = false
@Input() childList = ''
@Input() searchText = ''
@Input() dataSource: any[] = []; // ข้อมูลที่จะแสดงในตาราง
@Input() columns: ColumnModel[] = []; // กำหนดโครงสร้างของคอลัมน์
@Input() childColumns: ColumnModel[] = [];
@Input() allowSorting = true;
@Input() allowFiltering = true;
@Input() filterSettings?: FilterSettingsModel = { type: 'Excel' };;
@Input() groupSettings?: GroupSettingsModel = { allowReordering: true, showGroupedColumn: true, showDropArea: false };
public selectionOptions?: SelectionSettingsModel = { checkboxOnly: true };
// ตัวอย่างการตั้งค่าอื่น ๆ ตามต้องการ
@Input() toolbarOptions?: ToolbarItems[] = ['Print', 'ExcelExport', 'CsvExport'];
@Input() editSettings? = { allowEditing: true, mode: 'Batch' };
@Input() initialPage? = { pageSizes: true, pageSize: 10 };
@Input() canDelete = true
@Input() canChild = false
@Input() canEdit = true
// ... เป็นต้น
public query: Query = new Query().addParams('dataCount', '1000');
loadingIndicator : LoadingIndicatorModel = { indicatorType: 'Shimmer' };
/**
* ======================
* @Output() ส่วนส่ง Event
* ======================
*/
// ตัวอย่าง event เมื่อเลือกแถว
@Output() rowSelected = new EventEmitter<any>();
@Output() childSelected = new EventEmitter<any>();
@Output() rowRemoveSelected = new EventEmitter<any>();
@Output() rowSelectedCheckbox = new EventEmitter<any>();
@Output() rowDeselectedCheckbox = new EventEmitter<any>();
// ตัวอย่าง event เมื่อมีการลบ / แก้ไข
@Output() actionBegin = new EventEmitter<any>();
@Output() actionComplete = new EventEmitter<any>();
public selectedRecord?: any;
// อาจมี event อื่น ๆ เช่น pageChange, filterChange, ฯลฯ
// แล้วแต่ logic ที่ต้องการให้ parent รู้
// @Output() pageChanged = new EventEmitter<number>();
// @Output() filterChanged = new EventEmitter<FilterEventArgs>();
// ...
ngOnInit(): void {
// this.query = new Query().addParams('dataCount', '1000');
this.loadingIndicator = { indicatorType: 'Shimmer' };
// ถ้ามี logic ของ child เอง เช่นตั้งค่าเริ่มต้น
// ให้เขียนตรงนี้ได้
}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes)
this.query = new Query().addParams('dataCount', '1000');
this.loadingIndicator = {indicatorType: 'Shimmer'};
if (changes) {
if (changes['searchText']) {
this.search(changes['searchText'].currentValue)
}
}
//Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
//Add '${implements OnChanges}' to the class.
}
/**
* =============================
* ฟังก์ชันที่ผูกกับ Event ของ <ejs-grid>
* =============================
*/
public onViewSelected(args: any) {
// เมื่อมีการ select row
this.rowSelected.emit(args);
}
public onNextPage(args: any) {
// เมื่อมีการ select row
this.childSelected.emit(args);
}
public onRemoveSelected(args: any) {
// เมื่อมีการ select row
this.rowRemoveSelected.emit(args);
}
public onRowSelectedCheckbox(args: any) {
// เมื่อมีการ select row
this.rowSelectedCheckbox.emit(args);
}
public onRowDeselectedCheckbox(args: any) {
// เมื่อมีการ select row
this.rowDeselectedCheckbox.emit(args);
}
public onActionBegin(args: any) {
this.actionBegin.emit(args);
}
public onActionComplete(args: any) {
this.actionComplete.emit(args);
}
toolbarClick(args: any): void {
// if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
// const pdfExportProperties: PdfExportProperties = {
// exportType: 'CurrentPage'
// };
// this.grid/pdfExport(pdfExportProperties);
// }
if (args.item.id === 'Grid_excelexport') {
// 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.grid?.excelExport();
}
else if (args.item.id === 'Grid_csvexport') {
// 'Grid_csvexport' -> Grid component id + _ + toolbar item name
this.grid?.csvExport();
}
// (this.grid as GridComponent).excelExport();
}
showDetails(data: any) {
console.log(data)
this.selectedRecord = data;
this.rowSelected.emit(this.selectedRecord);
}
search(text?: string) {
if(text){
(this.grid as GridComponent).search(text);
}
}
detailDataBound(e: DetailDataBoundEventArgs) {
console.log(e)
let detail = new Grid({
// ─────────────────────────────────────────────────────────────
// เดิมเป็น data.filter(...) เทียบ EmployeeID
// เปลี่ยนมาใช้ e.data.massessesList โดยตรง
// ─────────────────────────────────────────────────────────────
dataSource: (e.data as any)[this.childList.toString()],
columns: this.childColumns
});
detail.appendTo((e.detailElement as HTMLElement).querySelector('.custom-grid') as HTMLElement);
// let detail = new Grid({
// dataSource: data.filter((item: Object) => (item as ColumnSpanDataType)[this.childList] === (e.data as any)[this.childList]),
// columns: [
// { field: 'OrderID', headerText: 'Order ID', width: 110 },
// { field: 'CustomerID', headerText: 'Customer Name', width: 140 },
// { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
// ]
// });
// detail.appendTo((e.detailElement as HTMLElement).querySelector('.custom-grid') as HTMLElement);
}
}
src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { registerLicense } from '@syncfusion/ej2-base';
// Registering Syncfusion license key
registerLicense('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5ad0VjXH9ac3NRQWhc');
platformBrowserDynamic().bootstrapModule(AppModule) platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err)); .catch(err => console.error(err));
src/styles.scss
...@@ -35,6 +35,17 @@ ...@@ -35,6 +35,17 @@
// dark styles start // dark styles start
@import "../src/assets/iconfonts/flag-icon-css/flag-icon.min.css"; @import "../src/assets/iconfonts/flag-icon-css/flag-icon.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';
@media (min-width: 992px) { @media (min-width: 992px) {
[data-nav-layout="horizontal"][dir="rtl"] .main-menu-container { [data-nav-layout="horizontal"][dir="rtl"] .main-menu-container {
.slide-right { .slide-right {
......
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