feat: support simple page option

This commit is contained in:
Zedd 2024-05-18 17:41:59 -07:00
parent 840d4085f0
commit 88a2e37389
3 changed files with 48 additions and 4 deletions

View File

@ -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 }}

View File

@ -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;
}

View File

@ -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 {}