Added primeng and sorting table

Author: oguzhanagir

angular/angular.json

@@ -36,7 +36,9 @@
               "src/assets/freeze-ui/freeze-ui.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "node_modules/admin-lte-css-only/css/adminlte.min.css",
-              "src/shared/core.less"
+              "src/shared/core.less",
+              "node_modules/primeng/resources/primeng.min.css",
+              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css"
             ],
             "scripts": [
               "node_modules/moment/min/moment.min.js",

angular/package.json

@@ -21,8 +21,8 @@
     "@angular/platform-browser": "^18.1.2",
     "@angular/platform-browser-dynamic": "^18.1.2",
     "@angular/router": "^18.1.2",
-    "@microsoft/signalr": "^8.0.7",
     "@fortawesome/fontawesome-free": "^6.6.0",
+    "@microsoft/signalr": "^8.0.7",
     "abp-ng2-module": "10.0.0",
     "abp-web-resources": "^5.9.1",
     "admin-lte-css-only": "^3.2.0",
@@ -33,7 +33,9 @@
     "moment-timezone": "0.5.45",
     "ngx-bootstrap": "^18.0.2",
     "ngx-pagination": "^6.0.3",
+    "primeng": "^17.18.11",
     "push.js": "1.0.12",
+    "rtl-detect": "^1.1.2",
     "rxjs": "^7.8.1",
     "sweetalert2": "^11.12.2",
     "ts-helpers": "^1.1.2",

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

@@ -6,110 +6,150 @@
           <h1>{{ "Roles" | localize }}</h1>
         </div>
         <div class="col-6 text-right">
-          <a href="javascript:;"
-            class="btn bg-blue"
-            (click)="createRole()">
+          <a href="javascript:;" class="btn bg-blue" (click)="createRole()">
             <i class="fa fa-plus-square"></i>
             {{ "Create" | localize }}
           </a>
         </div>
       </div>
     </div>
   </section>
-  <section class="content px-2">
+  <section class="content px-2 pb-5">
     <div class="container-fluid">
-      <div class="card">
+      <div class="card mb-0 table-wrapper">
         <div class="card-header">
           <div class="row">
             <div class="col-md-6">&emsp;</div>
             <div class="col-md-6">
               <div class="input-group">
                 <div class="input-group-prepend">
-                  <button type="button"
-                    class="btn bg-blue"
-                    (click)="getDataPage(1)">
+                  <button type="button" class="btn bg-blue" (click)="list()">
                     <i class="fas fa-search"></i>
                   </button>
                 </div>
-                <input type="text"
+                <input
+                  type="text"
                   class="form-control"
                   name="keyword"
                   [placeholder]="'SearchWithThreeDot' | localize"
                   [(ngModel)]="keyword"
-                  (keyup.enter)="getDataPage(1)" />
-                </div>
+                  (keyup.enter)="list()"
+                />
               </div>
             </div>
           </div>
-          <div class="card-body">
-            <div class="table-responsive">
-              <table class="table table-striped table-bordered"
-                [busy]="isTableLoading">
-                <thead class="bg-light">
+        </div>
+        <div class="card-body">
+          <div class="table-responsive">
+            <!--<Primeng-TurboTable-Start>-->
+            <div
+              class="primeng-datatable-container table-striped table-bordered"
+            >
+              <p-table
+                #dataTable
+                sortMode="multiple"
+                (onLazyLoad)="list($event)"
+                [value]="primengTableHelper.records"
+                rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
+                [paginator]="false"
+                [lazy]="true"
+                [tableStyle]="{ 'min-width': '50rem' }"
+              >
+                <ng-template pTemplate="header">
                   <tr>
-                    <th>{{ "RoleName" | localize }}</th>
-                    <th>{{ "DisplayName" | localize }}</th>
-                    <th style="width: 200px;">{{ "Actions" | localize }}</th>
+                    <th style="min-width: 150px" pSortableColumn="name">
+                      {{ "RoleName" | localize }}
+                      <p-sortIcon field="name"></p-sortIcon>
+                    </th>
+                    <th style="min-width: 150px" pSortableColumn="displayName">
+                      {{ "DisplayName" | localize }}
+                      <p-sortIcon field="displayName"></p-sortIcon>
+                    </th>
+                    <th style="min-width: 130px">
+                      {{ "Actions" | localize }}
+                    </th>
                   </tr>
-                </thead>
-                <tbody>
-                  @for (
-                    role of roles
-                    | paginate
-                    : {
-                    id: 'server',
-                    itemsPerPage: pageSize,
-                    currentPage: pageNumber,
-                    totalItems: totalItems
-                  }
-                  ; track
-                  role.id) {
+                </ng-template>
+
+                <ng-template pTemplate="body" let-record="$implicit">
                   <tr>
-                    <td>{{ role.name }}</td>
-                    <td>{{ role.displayName }}</td>
                     <td>
-                      <button type="button"
+                      <span class="p-column-title">{{
+                        "RoleName" | localize
+                      }}</span>
+                      <span>
+                        {{ record.name }}
+                      </span>
+                    </td>
+                    <td>
+                      <span class="p-column-title">{{
+                        "DisplayName" | localize
+                      }}</span>
+                      <span>
+                        {{ record.displayName }}
+                      </span>
+                    </td>
+                    <td>
+                      <button
+                        type="button"
                         class="btn btn-sm bg-secondary"
-                        (click)="editRole(role)">
+                        (click)="editRole(record)"
+                      >
                         <i class="fas fa-pencil-alt"></i>
                         {{ "Edit" | localize }}
                       </button>
-                      <button type="button"
+                      <button
+                        type="button"
                         class="btn btn-sm bg-danger mx-2"
-                        (click)="delete(role)">
+                        (click)="delete(record)"
+                      >
                         <i class="fas fa-trash"></i>
                         {{ "Delete" | localize }}
                       </button>
                     </td>
                   </tr>
-                }
-              </tbody>
-            </table>
+                </ng-template>
+              </p-table>
+              <div
+                class="primeng-no-data"
+                *ngIf="primengTableHelper.totalRecordsCount == 0"
+              >
+                {{ "NoData" | localize }}
+              </div>
+            </div>
+            <!--<Primeng-TurboTable-End>-->
           </div>
         </div>
-        <div class="card-footer table-card-footer bg-light border-top">
-          <div class="row">
+        <div class="card-footer table-card-footer bg-white border-top">
+          <div class="row d-flex justify-content-center align-items-center">
             <div class="col-sm-4 col-12 text-sm-left text-center">
-              <button class="btn btn-secondary"
-                (click)="refresh()">
+              <button class="btn btn-secondary" (click)="refresh()">
                 <i class="fas fa-redo-alt"></i>
               </button>
             </div>
-            <div class="col-sm-4 col-12 text-center">
-              <p class="mb-0 my-2">
-                {{ "TotalRecordsCount" | localize: totalItems }}
-              </p>
-            </div>
-            <div class="col-sm-4 col-12">
+            <div class="col-sm-8 col-12">
               <div class="float-sm-right m-auto">
-                <abp-pagination-controls id="server"
-                  (pageChange)="getDataPage($event)">
-                </abp-pagination-controls>
+                <div class="primeng-paging-container">
+                  <p-paginator
+                    [rows]="primengTableHelper.defaultRecordsCountPerPage"
+                    #paginator
+                    (onPageChange)="list($event)"
+                    [totalRecords]="primengTableHelper.totalRecordsCount"
+                    [rowsPerPageOptions]="
+                      primengTableHelper.predefinedRecordsCountPerPage
+                    "
+                    [showCurrentPageReport]="true"
+                    [currentPageReportTemplate]="
+                      'TotalRecordsCount'
+                        | localize : primengTableHelper.totalRecordsCount
+                    "
+                  ></p-paginator>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>
-</div>
+</div>

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

@@ -1,72 +1,94 @@
-import { Component, Injector, ChangeDetectorRef } from '@angular/core';
-import { finalize } from 'rxjs/operators';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { appModuleAnimation } from '@shared/animations/routerTransition';
+import {
+  Component,
+  Injector,
+  ChangeDetectorRef,
+  ViewChild,
+} from "@angular/core";
+import { finalize } from "rxjs/operators";
+import { BsModalRef, BsModalService } from "ngx-bootstrap/modal";
+import { appModuleAnimation } from "@shared/animations/routerTransition";
 import {
   PagedListingComponentBase,
-  PagedRequestDto
-} from '@shared/paged-listing-component-base';
+} from "@shared/paged-listing-component-base";
 import {
   RoleServiceProxy,
   RoleDto,
-  RoleDtoPagedResultDto
-} from '@shared/service-proxies/service-proxies';
-import { CreateRoleDialogComponent } from './create-role/create-role-dialog.component';
-import { EditRoleDialogComponent } from './edit-role/edit-role-dialog.component';
-
-class PagedRolesRequestDto extends PagedRequestDto {
-  keyword: string;
-}
+  RoleDtoPagedResultDto,
+} from "@shared/service-proxies/service-proxies";
+import { CreateRoleDialogComponent } from "./create-role/create-role-dialog.component";
+import { EditRoleDialogComponent } from "./edit-role/edit-role-dialog.component";
+import { Table } from "primeng/table";
+import { LazyLoadEvent } from "primeng/api";
+import { ActivatedRoute } from "@angular/router";
+import { Paginator } from 'primeng/paginator';
 
 @Component({
-  templateUrl: './roles.component.html',
-  animations: [appModuleAnimation()]
+  templateUrl: "./roles.component.html",
+  animations: [appModuleAnimation()],
 })
 export class RolesComponent extends PagedListingComponentBase<RoleDto> {
   roles: RoleDto[] = [];
-  keyword = '';
+  keyword = "";
+  @ViewChild("dataTable", { static: true }) dataTable: Table;
+  @ViewChild('paginator', { static: true }) paginator: Paginator;
 
   constructor(
     injector: Injector,
     private _rolesService: RoleServiceProxy,
     private _modalService: BsModalService,
+    private _activatedRoute: ActivatedRoute,
     cd: ChangeDetectorRef
   ) {
     super(injector, cd);
+    this.keyword = this._activatedRoute.snapshot.queryParams["keyword"] || "";
   }
 
-  list(
-    request: PagedRolesRequestDto,
-    pageNumber: number,
-    finishedCallback: Function
-  ): void {
-    request.keyword = this.keyword;
+  list(event?: LazyLoadEvent): void {
+    if (this.primengTableHelper.shouldResetPaging(event)) {
+      this.paginator.changePage(0);
+
+      if (
+        this.primengTableHelper.records &&
+        this.primengTableHelper.records.length > 0
+      ) {
+        return;
+      }
+    }
+
+
+    this.primengTableHelper.showLoadingIndicator();
 
     this._rolesService
-      .getAll(request.keyword, request.skipCount, request.maxResultCount)
+      .getAll(
+        this.keyword,
+        this.primengTableHelper.getSorting(this.dataTable),
+        this.primengTableHelper.getSkipCount(this.paginator, event),
+        this.primengTableHelper.getMaxResultCount(this.paginator, event)
+      )
       .pipe(
         finalize(() => {
-          finishedCallback();
+          this.primengTableHelper.hideLoadingIndicator();
         })
       )
       .subscribe((result: RoleDtoPagedResultDto) => {
-        this.roles = result.items;
-        this.showPaging(result, pageNumber);
+        this.primengTableHelper.records = result.items;
+        this.primengTableHelper.totalRecordsCount = result.totalCount;
+        this.primengTableHelper.hideLoadingIndicator();
         this.cd.detectChanges();
       });
   }
 
   delete(role: RoleDto): void {
     abp.message.confirm(
-      this.l('RoleDeleteWarningMessage', role.displayName),
+      this.l("RoleDeleteWarningMessage", role.displayName),
       undefined,
       (result: boolean) => {
         if (result) {
           this._rolesService
             .delete(role.id)
             .pipe(
               finalize(() => {
-                abp.notify.success(this.l('SuccessfullyDeleted'));
+                abp.notify.success(this.l("SuccessfullyDeleted"));
                 this.refresh();
               })
             )
@@ -90,14 +112,14 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
       createOrEditRoleDialog = this._modalService.show(
         CreateRoleDialogComponent,
         {
-          class: 'modal-lg',
+          class: "modal-lg",
         }
       );
     } else {
       createOrEditRoleDialog = this._modalService.show(
         EditRoleDialogComponent,
         {
-          class: 'modal-lg',
+          class: "modal-lg",
           initialState: {
             id: id,
           },

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

@@ -4,9 +4,10 @@ import { RolesRoutingModule } from './roles-routing.module';
 import { RolesComponent } from './roles.component';
 import { CreateRoleDialogComponent } from './create-role/create-role-dialog.component';
 import { EditRoleDialogComponent } from './edit-role/edit-role-dialog.component';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
     declarations: [RolesComponent, CreateRoleDialogComponent, EditRoleDialogComponent],
-    imports: [SharedModule, RolesRoutingModule],
+    imports: [SharedModule, RolesRoutingModule, CommonModule],
 })
 export class RolesModule {}