Merge pull request #563 from ncats/customEditPagingSettings

Custom edit paging for all tables - for Egor
ncats · Dec 10, 2024 · c68b5ef · c68b5ef
2 parents 48e7923 + df09227
commit c68b5ef
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 15 deletions.
diff --git a/src/app/core/config/config.model.ts b/src/app/core/config/config.model.ts
@@ -85,6 +85,7 @@ export interface Config {
     enableStructureFeatures?: boolean;
     StructureFeaturePriority?: Array<string>;
     structureEditSearch?: boolean;
+    editPagingOptionSettings?: PagingOptionSettings;
 }
 
 export interface StagingAreaSettings {
@@ -159,3 +160,15 @@ export interface ExternalSiteWarning {
     dialogTitle: string;
     dialogMessage: string;
 }
+
+export interface PagingOptionSettings {
+    names?: PagingOptions;
+    codes?: PagingOptions;
+    relationships?: PagingOptions;
+    references?: PagingOptions;
+}
+
+export interface PagingOptions {
+    pageSizeOptions?: Array<number>;
+    pageSizeDefault?: number;
+}
diff --git a/src/app/core/substance-form/codes/substance-form-codes-card.component.html b/src/app/core/substance-form/codes/substance-form-codes-card.component.html
@@ -9,16 +9,16 @@
     Add code <mat-icon svgIcon="add_circle_outline"></mat-icon>
   </button> -->
 </div>
-<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true"
-    (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="pageSize" showFirstLastButtons="true"
+    (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="pageSizeOptions">
   </mat-paginator>
 <div class="code" *ngFor="let code of paged; last as isLast; index as index" appScrollToTarget
   [id]="'substance-code-' + index">
   <app-code-form [code]="code" (codeDeleted)="deleteCode($event)" [show] = "expanded"></app-code-form>
   <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
 </div>
-<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true"
-  (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="pageSize" showFirstLastButtons="true"
+  (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="pageSizeOptions">
 </mat-paginator>
 
 <div *ngIf = "codes && codes.length > 0" style = "display: flex;">

diff --git a/src/app/core/substance-form/codes/substance-form-codes-card.component.ts b/src/app/core/substance-form/codes/substance-form-codes-card.component.ts
@@ -6,6 +6,7 @@ import { ScrollToService } from '../../scroll-to/scroll-to.service';
 import { GoogleAnalyticsService } from '../../google-analytics/google-analytics.service';
 import { Subscription } from 'rxjs';
 import { SubstanceFormCodesService } from './substance-form-codes.service';
+import { ConfigService } from '@gsrs-core/config';
 
 @Component({
   selector: 'app-substance-form-codes-card',
@@ -20,19 +21,33 @@ export class SubstanceFormCodesCardComponent extends SubstanceCardBaseFilteredLi
   pageSize = 10;
   expanded = true;
   validate = false;
+  pageSizeOptions = [5, 10, 25, 100];
+
 
   constructor(
     private substanceFormCodesService: SubstanceFormCodesService,
     private substanceFormService: SubstanceFormService,
     private scrollToService: ScrollToService,
-    public gaService: GoogleAnalyticsService
+    public gaService: GoogleAnalyticsService,
+    private configService: ConfigService,
+
   ) {
     super(gaService);
     this.analyticsEventCategory = 'substance form codes';
   }
 
   ngOnInit() {
     this.menuLabelUpdate.emit('Codes');
+
+    if (this.configService && this.configService.configData && this.configService.configData.editPagingOptionSettings && this.configService.configData.editPagingOptionSettings.codes ){
+          let pagingSettings = this.configService.configData.editPagingOptionSettings.codes;
+          if(pagingSettings.pageSizeDefault) {
+            this.pageSize = pagingSettings.pageSizeDefault
+          }
+          if(pagingSettings.pageSizeOptions) {
+            this.pageSizeOptions = pagingSettings.pageSizeOptions;
+          }
+    }
   }
 
   collapse() {

diff --git a/src/app/core/substance-form/names/substance-form-names-card.component.ts b/src/app/core/substance-form/names/substance-form-names-card.component.ts
@@ -42,12 +42,25 @@ export class SubstanceFormNamesCardComponent
     this.menuLabelUpdate.emit('Names');
     this.appId = this.configService.environment.appId;
     this.standardizeButton = this.configService.configData.showNameStandardizeButton || false;
+    //temp while switching to newer config system
     if (this.configService && this.configService.configData && this.configService.configData.nameFormPageSizeOptions) {
         this.pageSizeOptions = this.configService.configData.nameFormPageSizeOptions;
     }
     if (this.configService && this.configService.configData && this.configService.configData.nameFormPageSizeDefault) {
       this.pageSize = this.configService.configData.nameFormPageSizeDefault;
     }
+
+
+    if (this.configService && this.configService.configData && this.configService.configData.editPagingOptionSettings && this.configService.configData.editPagingOptionSettings.names ){
+          let pagingSettings = this.configService.configData.editPagingOptionSettings.names;
+          if(pagingSettings.pageSizeDefault) {
+            this.pageSize = pagingSettings.pageSizeDefault
+          }
+          if(pagingSettings.pageSizeOptions) {
+            this.pageSizeOptions = pagingSettings.pageSizeOptions;
+          }
+    }
+
     const definitionSubscription = this.substanceFormService.definition.subscribe( level => {
       if (level.definitionType && level.definitionType === 'ALTERNATIVE') {
       //  this.canAddItemUpdate.emit(false);

diff --git a/src/app/core/substance-form/references/substance-form-references-card.component.html b/src/app/core/substance-form/references/substance-form-references-card.component.html
@@ -7,15 +7,15 @@
     Add reference <mat-icon svgIcon="add_circle_outline"></mat-icon>
   </button> -->
 </div>
-<mat-paginator *ngIf="references && references.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="5" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
-    [pageSizeOptions]="[5, 10, 25, 100]">
+<mat-paginator *ngIf="references && references.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="pageSize" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
+    [pageSizeOptions]="pageSizeOptions">
   </mat-paginator>
 <div class="reference" *ngFor="let reference of paged; last as isLast" [id]="reference.uuid" appScrollToTarget>
   <app-reference-form [reference]="reference" (referenceDeleted)="deleteReference($event)"></app-reference-form>
   <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
 </div>
-<mat-paginator *ngIf="references && references.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="5" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
-  [pageSizeOptions]="[5, 10, 25, 100]">
+<mat-paginator *ngIf="references && references.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="pageSize" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
+  [pageSizeOptions]="pageSizeOptions">
 </mat-paginator>
 
 <div *ngIf = "references && references.length > 0" style = "display: flex;">

diff --git a/src/app/core/substance-form/references/substance-form-references-card.component.ts b/src/app/core/substance-form/references/substance-form-references-card.component.ts
@@ -9,6 +9,7 @@ import { GoogleAnalyticsService } from '../../google-analytics/google-analytics.
 import { Subscription } from 'rxjs';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { SubstanceFormReferencesService } from './substance-form-references.service';
+import { ConfigService } from '@gsrs-core/config';
 
 @Component({
   selector: 'app-substance-form-references-card',
@@ -20,13 +21,17 @@ export class SubstanceFormReferencesCardComponent extends SubstanceCardBaseFilte
   references: Array<SubstanceReference>;
   private subscriptions: Array<Subscription> = [];
   private overlayContainer: HTMLElement;
+  pageSizeOptions = [5, 10, 25, 100];
+  pageSize = 10;
+
 
   constructor(
     private substanceFormReferencesService: SubstanceFormReferencesService,
     private dialog: MatDialog,
     private scrollToService: ScrollToService,
     public gaService: GoogleAnalyticsService,
-    private overlayContainerService: OverlayContainer
+    private overlayContainerService: OverlayContainer,
+    private configService: ConfigService,
   ) {
     super(gaService);
     this.analyticsEventCategory = 'substance form references';
@@ -36,6 +41,15 @@ export class SubstanceFormReferencesCardComponent extends SubstanceCardBaseFilte
     this.canAddItemUpdate.emit(true);
     this.menuLabelUpdate.emit('References');
     this.overlayContainer = this.overlayContainerService.getContainerElement();
+    if (this.configService && this.configService.configData && this.configService.configData.editPagingOptionSettings && this.configService.configData.editPagingOptionSettings.references ){
+      let pagingSettings = this.configService.configData.editPagingOptionSettings.references;
+      if(pagingSettings.pageSizeDefault) {
+        this.pageSize = pagingSettings.pageSizeDefault
+      }
+      if(pagingSettings.pageSizeOptions) {
+        this.pageSizeOptions = pagingSettings.pageSizeOptions;
+      }
+}
   }
 
   ngAfterViewInit() {

diff --git a/src/app/core/substance-form/relationships/substance-form-relationships-card.component.html b/src/app/core/substance-form/relationships/substance-form-relationships-card.component.html
@@ -9,17 +9,17 @@
     Add relationship <mat-icon svgIcon="add_circle_outline"></mat-icon>
   </button> -->
 </div>
-<mat-paginator *ngIf="relationships && relationships.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="5" showFirstLastButtons="true"
-    (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+<mat-paginator *ngIf="relationships && relationships.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="pageSize" showFirstLastButtons="true"
+    (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="pageSizeOptions">
   </mat-paginator>
 <div class="relationship" *ngFor="let relationship of paged; last as isLast; index as index" appScrollToTarget
   [id]="'substance-relationship-' + index">
   <app-relationship-form [relationship]="relationship" (relationshipDeleted)="deleteRelationship($event)"  [show] = "expanded">
   </app-relationship-form>
   <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
 </div>
-<mat-paginator *ngIf="relationships && relationships.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="5" showFirstLastButtons="true"
-  (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+<mat-paginator *ngIf="relationships && relationships.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="pageSize" showFirstLastButtons="true"
+  (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="pageSizeOptions">
 </mat-paginator>
 
 

diff --git a/src/app/core/substance-form/relationships/substance-form-relationships-card.component.ts b/src/app/core/substance-form/relationships/substance-form-relationships-card.component.ts
@@ -5,6 +5,7 @@ import { ScrollToService } from '../../scroll-to/scroll-to.service';
 import { GoogleAnalyticsService } from '../../google-analytics/google-analytics.service';
 import { Subscription } from 'rxjs';
 import { SubstanceFormRelationshipsService } from './substance-form-relationships.service';
+import { ConfigService } from '@gsrs-core/config';
 
 @Component({
   selector: 'app-substance-form-relationships-card',
@@ -16,11 +17,16 @@ export class SubstanceFormRelationshipsCardComponent extends SubstanceCardBaseFi
   relationships: Array<SubstanceRelationship>;
   private subscriptions: Array<Subscription> = [];
   expanded = true;
+  pageSize = 10;
+  pageSizeOptions = [5, 10, 25, 100];
+
 
   constructor(
     private substanceFormRelationshipsService: SubstanceFormRelationshipsService,
     private scrollToService: ScrollToService,
-    public gaService: GoogleAnalyticsService
+    public gaService: GoogleAnalyticsService,
+    private configService: ConfigService,
+
   ) {
     super(gaService);
   }
@@ -29,6 +35,16 @@ export class SubstanceFormRelationshipsCardComponent extends SubstanceCardBaseFi
     this.canAddItemUpdate.emit(true);
     this.menuLabelUpdate.emit('Relationships');
     this.analyticsEventCategory = 'substance form relationships';
+
+    if (this.configService && this.configService.configData && this.configService.configData.editPagingOptionSettings && this.configService.configData.editPagingOptionSettings.relationships ){
+          let pagingSettings = this.configService.configData.editPagingOptionSettings.relationships;
+          if(pagingSettings.pageSizeDefault) {
+            this.pageSize = pagingSettings.pageSizeDefault
+          }
+          if(pagingSettings.pageSizeOptions) {
+            this.pageSizeOptions = pagingSettings.pageSizeOptions;
+          }
+    }
   }
 
   ngAfterViewInit() {