Skip to content

Commit eee9e86

Browse files
oguzhanagiroguzhanagir
committed
Added primeng and sorting table
1 parent 677dc92 commit eee9e86

File tree

27 files changed

+1020
-673
lines changed

27 files changed

+1020
-673
lines changed

‎angular/angular.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@
3636
"src/assets/freeze-ui/freeze-ui.css",
3737
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
3838
"node_modules/admin-lte-css-only/css/adminlte.min.css",
39-
"src/shared/core.less"
39+
"src/shared/core.less",
40+
"node_modules/primeng/resources/primeng.min.css",
41+
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css"
4042
],
4143
"scripts": [
4244
"node_modules/moment/min/moment.min.js",

‎angular/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
"@angular/platform-browser": "^18.1.2",
2222
"@angular/platform-browser-dynamic": "^18.1.2",
2323
"@angular/router": "^18.1.2",
24-
"@microsoft/signalr": "^8.0.7",
2524
"@fortawesome/fontawesome-free": "^6.6.0",
25+
"@microsoft/signalr": "^8.0.7",
2626
"abp-ng2-module": "10.0.0",
2727
"abp-web-resources": "^5.9.1",
2828
"admin-lte-css-only": "^3.2.0",
@@ -33,7 +33,9 @@
3333
"moment-timezone": "0.5.45",
3434
"ngx-bootstrap": "^18.0.2",
3535
"ngx-pagination": "^6.0.3",
36+
"primeng": "^17.18.11",
3637
"push.js": "1.0.12",
38+
"rtl-detect": "^1.1.2",
3739
"rxjs": "^7.8.1",
3840
"sweetalert2": "^11.12.2",
3941
"ts-helpers": "^1.1.2",

‎angular/src/app/roles/roles.component.html

Lines changed: 95 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,110 +6,150 @@
66
<h1>{{ "Roles" | localize }}</h1>
77
</div>
88
<div class="col-6 text-right">
9-
<a href="javascript:;"
10-
class="btn bg-blue"
11-
(click)="createRole()">
9+
<a href="javascript:;" class="btn bg-blue" (click)="createRole()">
1210
<i class="fa fa-plus-square"></i>
1311
{{ "Create" | localize }}
1412
</a>
1513
</div>
1614
</div>
1715
</div>
1816
</section>
19-
<section class="content px-2">
17+
<section class="content px-2 pb-5">
2018
<div class="container-fluid">
21-
<div class="card">
19+
<div class="card mb-0 table-wrapper">
2220
<div class="card-header">
2321
<div class="row">
2422
<div class="col-md-6">&emsp;</div>
2523
<div class="col-md-6">
2624
<div class="input-group">
2725
<div class="input-group-prepend">
28-
<button type="button"
29-
class="btn bg-blue"
30-
(click)="getDataPage(1)">
26+
<button type="button" class="btn bg-blue" (click)="list()">
3127
<i class="fas fa-search"></i>
3228
</button>
3329
</div>
34-
<input type="text"
30+
<input
31+
type="text"
3532
class="form-control"
3633
name="keyword"
3734
[placeholder]="'SearchWithThreeDot' | localize"
3835
[(ngModel)]="keyword"
39-
(keyup.enter)="getDataPage(1)" />
40-
</div>
36+
(keyup.enter)="list()"
37+
/>
4138
</div>
4239
</div>
4340
</div>
44-
<div class="card-body">
45-
<div class="table-responsive">
46-
<table class="table table-striped table-bordered"
47-
[busy]="isTableLoading">
48-
<thead class="bg-light">
41+
</div>
42+
<div class="card-body">
43+
<div class="table-responsive">
44+
<!--<Primeng-TurboTable-Start>-->
45+
<div
46+
class="primeng-datatable-container table-striped table-bordered"
47+
>
48+
<p-table
49+
#dataTable
50+
sortMode="multiple"
51+
(onLazyLoad)="list($event)"
52+
[value]="primengTableHelper.records"
53+
rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
54+
[paginator]="false"
55+
[lazy]="true"
56+
[tableStyle]="{ 'min-width': '50rem' }"
57+
>
58+
<ng-template pTemplate="header">
4959
<tr>
50-
<th>{{ "RoleName" | localize }}</th>
51-
<th>{{ "DisplayName" | localize }}</th>
52-
<th style="width: 200px;">{{ "Actions" | localize }}</th>
60+
<th style="min-width: 150px" pSortableColumn="name">
61+
{{ "RoleName" | localize }}
62+
<p-sortIcon field="name"></p-sortIcon>
63+
</th>
64+
<th style="min-width: 150px" pSortableColumn="displayName">
65+
{{ "DisplayName" | localize }}
66+
<p-sortIcon field="displayName"></p-sortIcon>
67+
</th>
68+
<th style="min-width: 130px">
69+
{{ "Actions" | localize }}
70+
</th>
5371
</tr>
54-
</thead>
55-
<tbody>
56-
@for (
57-
role of roles
58-
| paginate
59-
: {
60-
id: 'server',
61-
itemsPerPage: pageSize,
62-
currentPage: pageNumber,
63-
totalItems: totalItems
64-
}
65-
; track
66-
role.id) {
72+
</ng-template>
73+
74+
<ng-template pTemplate="body" let-record="$implicit">
6775
<tr>
68-
<td>{{ role.name }}</td>
69-
<td>{{ role.displayName }}</td>
7076
<td>
71-
<button type="button"
77+
<span class="p-column-title">{{
78+
"RoleName" | localize
79+
}}</span>
80+
<span>
81+
{{ record.name }}
82+
</span>
83+
</td>
84+
<td>
85+
<span class="p-column-title">{{
86+
"DisplayName" | localize
87+
}}</span>
88+
<span>
89+
{{ record.displayName }}
90+
</span>
91+
</td>
92+
<td>
93+
<button
94+
type="button"
7295
class="btn btn-sm bg-secondary"
73-
(click)="editRole(role)">
96+
(click)="editRole(record)"
97+
>
7498
<i class="fas fa-pencil-alt"></i>
7599
{{ "Edit" | localize }}
76100
</button>
77-
<button type="button"
101+
<button
102+
type="button"
78103
class="btn btn-sm bg-danger mx-2"
79-
(click)="delete(role)">
104+
(click)="delete(record)"
105+
>
80106
<i class="fas fa-trash"></i>
81107
{{ "Delete" | localize }}
82108
</button>
83109
</td>
84110
</tr>
85-
}
86-
</tbody>
87-
</table>
111+
</ng-template>
112+
</p-table>
113+
<div
114+
class="primeng-no-data"
115+
*ngIf="primengTableHelper.totalRecordsCount == 0"
116+
>
117+
{{ "NoData" | localize }}
118+
</div>
119+
</div>
120+
<!--<Primeng-TurboTable-End>-->
88121
</div>
89122
</div>
90-
<div class="card-footer table-card-footer bg-light border-top">
91-
<div class="row">
123+
<div class="card-footer table-card-footer bg-white border-top">
124+
<div class="row d-flex justify-content-center align-items-center">
92125
<div class="col-sm-4 col-12 text-sm-left text-center">
93-
<button class="btn btn-secondary"
94-
(click)="refresh()">
126+
<button class="btn btn-secondary" (click)="refresh()">
95127
<i class="fas fa-redo-alt"></i>
96128
</button>
97129
</div>
98-
<div class="col-sm-4 col-12 text-center">
99-
<p class="mb-0 my-2">
100-
{{ "TotalRecordsCount" | localize: totalItems }}
101-
</p>
102-
</div>
103-
<div class="col-sm-4 col-12">
130+
<div class="col-sm-8 col-12">
104131
<div class="float-sm-right m-auto">
105-
<abp-pagination-controls id="server"
106-
(pageChange)="getDataPage($event)">
107-
</abp-pagination-controls>
132+
<div class="primeng-paging-container">
133+
<p-paginator
134+
[rows]="primengTableHelper.defaultRecordsCountPerPage"
135+
#paginator
136+
(onPageChange)="list($event)"
137+
[totalRecords]="primengTableHelper.totalRecordsCount"
138+
[rowsPerPageOptions]="
139+
primengTableHelper.predefinedRecordsCountPerPage
140+
"
141+
[showCurrentPageReport]="true"
142+
[currentPageReportTemplate]="
143+
'TotalRecordsCount'
144+
| localize : primengTableHelper.totalRecordsCount
145+
"
146+
></p-paginator>
147+
</div>
108148
</div>
109149
</div>
110150
</div>
111151
</div>
112152
</div>
113153
</div>
114154
</section>
115-
</div>
155+
</div>

‎angular/src/app/roles/roles.component.ts

Lines changed: 53 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,94 @@
1-
import { Component, Injector, ChangeDetectorRef } from '@angular/core';
2-
import { finalize } from 'rxjs/operators';
3-
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
4-
import { appModuleAnimation } from '@shared/animations/routerTransition';
1+
import {
2+
Component,
3+
Injector,
4+
ChangeDetectorRef,
5+
ViewChild,
6+
} from "@angular/core";
7+
import { finalize } from "rxjs/operators";
8+
import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
9+
import { appModuleAnimation } from "@shared/animations/routerTransition";
510
import {
611
PagedListingComponentBase,
7-
PagedRequestDto
8-
} from '@shared/paged-listing-component-base';
12+
} from "@shared/paged-listing-component-base";
913
import {
1014
RoleServiceProxy,
1115
RoleDto,
12-
RoleDtoPagedResultDto
13-
} from '@shared/service-proxies/service-proxies';
14-
import { CreateRoleDialogComponent } from './create-role/create-role-dialog.component';
15-
import { EditRoleDialogComponent } from './edit-role/edit-role-dialog.component';
16-
17-
class PagedRolesRequestDto extends PagedRequestDto {
18-
keyword: string;
19-
}
16+
RoleDtoPagedResultDto,
17+
} from "@shared/service-proxies/service-proxies";
18+
import { CreateRoleDialogComponent } from "./create-role/create-role-dialog.component";
19+
import { EditRoleDialogComponent } from "./edit-role/edit-role-dialog.component";
20+
import { Table } from "primeng/table";
21+
import { LazyLoadEvent } from "primeng/api";
22+
import { ActivatedRoute } from "@angular/router";
23+
import { Paginator } from 'primeng/paginator';
2024

2125
@Component({
22-
templateUrl: './roles.component.html',
23-
animations: [appModuleAnimation()]
26+
templateUrl: "./roles.component.html",
27+
animations: [appModuleAnimation()],
2428
})
2529
export class RolesComponent extends PagedListingComponentBase<RoleDto> {
2630
roles: RoleDto[] = [];
27-
keyword = '';
31+
keyword = "";
32+
@ViewChild("dataTable", { static: true }) dataTable: Table;
33+
@ViewChild('paginator', { static: true }) paginator: Paginator;
2834

2935
constructor(
3036
injector: Injector,
3137
private _rolesService: RoleServiceProxy,
3238
private _modalService: BsModalService,
39+
private _activatedRoute: ActivatedRoute,
3340
cd: ChangeDetectorRef
3441
) {
3542
super(injector, cd);
43+
this.keyword = this._activatedRoute.snapshot.queryParams["keyword"] || "";
3644
}
3745

38-
list(
39-
request: PagedRolesRequestDto,
40-
pageNumber: number,
41-
finishedCallback: Function
42-
): void {
43-
request.keyword = this.keyword;
46+
list(event?: LazyLoadEvent): void {
47+
if (this.primengTableHelper.shouldResetPaging(event)) {
48+
this.paginator.changePage(0);
49+
50+
if (
51+
this.primengTableHelper.records &&
52+
this.primengTableHelper.records.length > 0
53+
) {
54+
return;
55+
}
56+
}
57+
58+
59+
this.primengTableHelper.showLoadingIndicator();
4460

4561
this._rolesService
46-
.getAll(request.keyword, request.skipCount, request.maxResultCount)
62+
.getAll(
63+
this.keyword,
64+
this.primengTableHelper.getSorting(this.dataTable),
65+
this.primengTableHelper.getSkipCount(this.paginator, event),
66+
this.primengTableHelper.getMaxResultCount(this.paginator, event)
67+
)
4768
.pipe(
4869
finalize(() => {
49-
finishedCallback();
70+
this.primengTableHelper.hideLoadingIndicator();
5071
})
5172
)
5273
.subscribe((result: RoleDtoPagedResultDto) => {
53-
this.roles = result.items;
54-
this.showPaging(result, pageNumber);
74+
this.primengTableHelper.records = result.items;
75+
this.primengTableHelper.totalRecordsCount = result.totalCount;
76+
this.primengTableHelper.hideLoadingIndicator();
5577
this.cd.detectChanges();
5678
});
5779
}
5880

5981
delete(role: RoleDto): void {
6082
abp.message.confirm(
61-
this.l('RoleDeleteWarningMessage', role.displayName),
83+
this.l("RoleDeleteWarningMessage", role.displayName),
6284
undefined,
6385
(result: boolean) => {
6486
if (result) {
6587
this._rolesService
6688
.delete(role.id)
6789
.pipe(
6890
finalize(() => {
69-
abp.notify.success(this.l('SuccessfullyDeleted'));
91+
abp.notify.success(this.l("SuccessfullyDeleted"));
7092
this.refresh();
7193
})
7294
)
@@ -90,14 +112,14 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
90112
createOrEditRoleDialog = this._modalService.show(
91113
CreateRoleDialogComponent,
92114
{
93-
class: 'modal-lg',
115+
class: "modal-lg",
94116
}
95117
);
96118
} else {
97119
createOrEditRoleDialog = this._modalService.show(
98120
EditRoleDialogComponent,
99121
{
100-
class: 'modal-lg',
122+
class: "modal-lg",
101123
initialState: {
102124
id: id,
103125
},

‎angular/src/app/roles/roles.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { RolesRoutingModule } from './roles-routing.module';
44
import { RolesComponent } from './roles.component';
55
import { CreateRoleDialogComponent } from './create-role/create-role-dialog.component';
66
import { EditRoleDialogComponent } from './edit-role/edit-role-dialog.component';
7+
import { CommonModule } from '@angular/common';
78

89
@NgModule({
910
declarations: [RolesComponent, CreateRoleDialogComponent, EditRoleDialogComponent],
10-
imports: [SharedModule, RolesRoutingModule],
11+
imports: [SharedModule, RolesRoutingModule, CommonModule],
1112
})
1213
export class RolesModule {}

0 commit comments

Comments
 (0)