feat: support simple page option

src/portal/src/app/base/left-side-nav/group/group.component.html

@@ -75,9 +75,18 @@
                         [clrDgPageSize]="pageSize"
                         [(clrDgPage)]="currentPage"
                         [clrDgTotalItems]="totalCount">
-                        <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
-                            'PAGINATION.PAGE_SIZE' | translate
-                        }}</clr-dg-page-size>
+                        <clr-dg-page-size
+                            [clrPageSizeOptions]="pageSizeOptions"
+                            >{{
+                                'PAGINATION.PAGE_SIZE' | translate
+                            }}</clr-dg-page-size
+                        >
+                        <input
+                            type="number"
+                            min="1"
+                            [(ngModel)]="newPageSize"
+                            placeholder="Enter custom page size" />
+                        <button (click)="addPageSize()">Add</button>
                         <span *ngIf="totalCount">
                             {{ pagination.firstItem + 1 }} -
                             {{ pagination.lastItem + 1 }}

src/portal/src/app/base/left-side-nav/group/group.component.ts

@@ -49,6 +49,9 @@ export class GroupComponent implements OnInit, OnDestroy {
     groups: UserGroup[] = [];
     currentPage: number = 1;
     totalCount: number = 0;
+    pageSizeOptions: number[] = [15, 25, 50];
+    // user input
+    newPageSize: number;
     pageSize: number = getPageSizeFromLocalStorage(
         PageSizeMapKeys.SYSTEM_GROUP_COMPONENT
     );
@@ -125,6 +128,7 @@ export class GroupComponent implements OnInit, OnDestroy {
                     }
                 );
         }
+        this.loadPageSizeOptions();
     }
     ngOnDestroy(): void {
         this.delSub.unsubscribe();
@@ -293,6 +297,36 @@ export class GroupComponent implements OnInit, OnDestroy {
             this.loadData();
         }
     }
+
+    // load page size options from the local storage if set
+    loadPageSizeOptions() {
+        const additionalSizes = JSON.parse(
+            localStorage.getItem('pageSizeOptions')
+        );
+        if (additionalSizes) {
+            this.pageSizeOptions = [
+                ...this.pageSizeOptions,
+                ...additionalSizes,
+            ];
+        }
+    }
+
+    addPageSize() {
+        if (
+            this.newPageSize &&
+            !this.pageSizeOptions.includes(this.newPageSize)
+        ) {
+            this.pageSizeOptions.push(this.newPageSize);
+            // sort the page size options array
+            this.pageSizeOptions.sort((a, b) => a - b);
+            // save new options into local storage
+            localStorage.setItem(
+                'pageSizeOptions',
+                JSON.stringify(this.pageSizeOptions)
+            );
+        }
+    }
+
     get canAddGroup(): boolean {
         return this.session.currentUser.has_admin_role;
     }

src/portal/src/app/base/left-side-nav/group/group.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../../shared/shared.module';
 import { GroupComponent } from './group.component';
 import { AddGroupModalComponent } from './add-group-modal/add-group-modal.component';
@@ -11,7 +12,7 @@ const routes: Routes = [
     },
 ];
 @NgModule({
-    imports: [SharedModule, RouterModule.forChild(routes)],
+    imports: [SharedModule, RouterModule.forChild(routes), FormsModule],
     declarations: [GroupComponent, AddGroupModalComponent],
 })
 export class GroupModule {}