Homogenize number of lines for table multiselect position (#7761)

Signed-off-by: vlo-rte <[email protected]>
opfab · Dec 27, 2024 · ddf3f5e · ddf3f5e
1 parent 1d5a522
commit ddf3f5e
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 69 deletions.
diff --git a/ui/main/src/app/modules/admin/admin.component.html b/ui/main/src/app/modules/admin/admin.component.html
@@ -87,17 +87,4 @@
 
     <br />
     <br />
-    <div>
-        <select (change)="onPageSizeChanged()" id="opfab-page-size-select">
-            <option
-                *ngFor="let option of paginationPageSizeOptions"
-                [value]="option"
-                [attr.selected]="option === paginationDefaultPageSize ? true : null">
-                {{ option }}
-            </option>
-        </select>
-        <label for="opfab-page-size-select" translate>&nbsp;shared.pageSize</label>
-        <br />
-        <br />
-    </div>
 </div>
diff --git a/ui/main/src/app/modules/admin/admin.component.ts b/ui/main/src/app/modules/admin/admin.component.ts
@@ -8,10 +8,9 @@
  * This file is part of the OperatorFabric project.
  */
 
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router';
 import {TranslateService, TranslateModule} from '@ngx-translate/core';
-import {SharingService} from './services/sharing.service';
 import {NgFor} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 
@@ -23,22 +22,6 @@ import {FormsModule} from '@angular/forms';
     standalone: true,
     imports: [RouterLink, RouterLinkActive, TranslateModule, RouterOutlet, NgFor, FormsModule]
 })
-export class AdminComponent implements OnInit {
-    public paginationDefaultPageSize = 10;
-    public paginationPageSizeOptions = [5, 10, 25, 50, 100];
-
-    constructor(
-        protected translate: TranslateService,
-        private readonly dataHandlingService: SharingService
-    ) {}
-
-    ngOnInit() {
-        this.dataHandlingService.changePaginationPageSize(this.paginationDefaultPageSize);
-    }
-
-    onPageSizeChanged() {
-        // Cast to get rid of "Property 'value' does not exist on type 'HTMLElement'."
-        const value = (<HTMLInputElement>document.getElementById('opfab-page-size-select')).value;
-        this.dataHandlingService.changePaginationPageSize(Number(value));
-    }
+export class AdminComponent {
+    constructor(protected translate: TranslateService) {}
 }
diff --git a/ui/main/src/app/modules/admin/components/table/admin-table.directive.html b/ui/main/src/app/modules/admin/components/table/admin-table.directive.html
@@ -37,6 +37,20 @@
         </ag-grid-angular>
 
         <div *ngIf="gridApi" class="opfab-pagination">
+            <div style="width: 12%; margin-top: 14px">
+                <select (change)="onPageSizeChanged()" id="opfab-page-size-select">
+                    <option
+                        *ngFor="let option of paginationPageSizeOptions"
+                        [value]="option"
+                        [attr.selected]="option === paginationDefaultPageSize ? true : null">
+                        {{ option }}
+                    </option>
+                </select>
+                <label for="opfab-page-size-select" translate>&nbsp;shared.pageSize</label>
+                <br />
+                <br />
+            </div>
+
             <div style="white-space: nowrap; margin-top: 17px">
                 <span translate> shared.resultsNumber </span> : {{gridApi.paginationGetRowCount()}}
             </div>

diff --git a/ui/main/src/app/modules/admin/components/table/admin-table.directive.ts b/ui/main/src/app/modules/admin/components/table/admin-table.directive.ts
@@ -101,6 +101,9 @@ export abstract class AdminTableDirective implements OnDestroy {
     protected crudService: CrudService;
     private readonly currentUserLogin;
 
+    public paginationPageSizeOptions = [5, 10, 25, 50, 100];
+    public paginationDefaultPageSize = 10;
+
     constructor(
         protected translateService: TranslateService,
         protected modalService: NgbModal,
@@ -161,6 +164,7 @@ export abstract class AdminTableDirective implements OnDestroy {
     }
 
     initCrudService() {
+        this.dataHandlingService.changePaginationPageSize(this.paginationDefaultPageSize);
         this.crudService = this.dataHandlingService.resolveCrudServiceDependingOnType(this.tableType);
     }
 
@@ -459,6 +463,12 @@ export abstract class AdminTableDirective implements OnDestroy {
     hasAnyPermission(permissions: PermissionEnum[]) {
         return UsersService.hasCurrentUserAnyPermission(permissions);
     }
+
+    onPageSizeChanged() {
+        // Cast to get rid of "Property 'value' does not exist on type 'HTMLElement'."
+        const value = (<HTMLInputElement>document.getElementById('opfab-page-size-select')).value;
+        this.dataHandlingService.changePaginationPageSize(Number(value));
+    }
 }
 
 export class Field {

diff --git a/ui/main/src/app/modules/admin/components/table/businessData-table.component.ts b/ui/main/src/app/modules/admin/components/table/businessData-table.component.ts
@@ -12,7 +12,7 @@ import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {AdminTableDirective, Field} from './admin-table.directive';
 import {AdminItemType} from '../../services/sharing.service';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -24,7 +24,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class BusinessDataTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.BUSINESSDATA;

diff --git a/ui/main/src/app/modules/admin/components/table/entities-table.component.ts b/ui/main/src/app/modules/admin/components/table/entities-table.component.ts
@@ -13,7 +13,7 @@ import {AdminTableDirective, Field} from './admin-table.directive';
 import {EditEntityModalComponent} from '../editmodal/entities/edit-entity-modal.component';
 import {AdminItemType} from '../../services/sharing.service';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -25,7 +25,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class EntitiesTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.ENTITY;

diff --git a/ui/main/src/app/modules/admin/components/table/groups-table.component.ts b/ui/main/src/app/modules/admin/components/table/groups-table.component.ts
@@ -13,7 +13,7 @@ import {AdminTableDirective, Field} from './admin-table.directive';
 import {AdminItemType} from '../../services/sharing.service';
 import {EditGroupModalComponent} from '../editmodal/groups/edit-group-modal.component';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -25,7 +25,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class GroupsTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.GROUP;

diff --git a/ui/main/src/app/modules/admin/components/table/perimeters-table.component.ts b/ui/main/src/app/modules/admin/components/table/perimeters-table.component.ts
@@ -14,7 +14,7 @@ import {AdminItemType} from '../../services/sharing.service';
 import {EditPerimeterModalComponent} from '../editmodal/perimeters/edit-perimeter-modal.component';
 import {Utilities} from 'app/business/common/utilities';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -26,7 +26,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class PerimetersTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.PERIMETER;

diff --git a/ui/main/src/app/modules/admin/components/table/processes-table.component.ts b/ui/main/src/app/modules/admin/components/table/processes-table.component.ts
@@ -12,7 +12,7 @@ import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {AdminTableDirective, Field} from './admin-table.directive';
 import {AdminItemType} from '../../services/sharing.service';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -24,7 +24,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class ProcessesTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.PROCESS;

diff --git a/ui/main/src/app/modules/admin/components/table/supervised-entities-table.component.ts b/ui/main/src/app/modules/admin/components/table/supervised-entities-table.component.ts
@@ -14,7 +14,7 @@ import {AdminItemType} from '../../services/sharing.service';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
 import {EditSupervisedEntityModalComponent} from '../editmodal/supervised-entities/edit-supervised-entity-modal.component';
 import {SupervisedEntitiesService} from '@ofServices/admin/SupervisedEntitiesService';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -26,7 +26,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class SupervisedEntitiesTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.SUPERVISED_ENTITY;

diff --git a/ui/main/src/app/modules/admin/components/table/users-table.component.ts b/ui/main/src/app/modules/admin/components/table/users-table.component.ts
@@ -13,7 +13,7 @@ import {EditUserModalComponent} from '../editmodal/users/edit-user-modal.compone
 import {AdminTableDirective, Field} from './admin-table.directive';
 import {AdminItemType} from '../../services/sharing.service';
 import {ActionButton} from '../cell-renderers/action-cell-renderer.component';
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
 import {AgGridAngular} from 'ag-grid-angular';
@@ -25,7 +25,7 @@ import {NgbPagination} from '@ng-bootstrap/ng-bootstrap';
     styleUrls: ['admin-table.directive.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination]
+    imports: [NgIf, TranslateModule, FormsModule, AgGridAngular, NgbPagination, NgForOf]
 })
 export class UsersTableComponent extends AdminTableDirective implements OnInit {
     tableType = AdminItemType.USER;

diff --git a/ui/main/src/app/modules/archives/archives.component.html b/ui/main/src/app/modules/archives/archives.component.html
@@ -34,17 +34,6 @@
                 <span class="opfab-checkbox-checkmark"></span>
             </label>
         </div>
-        <div style="float: right; margin-top: -35px">
-            <select (change)="onPageSizeChanged($event.target)" #pageSizeSelect>
-                <option
-                    *ngFor="let option of paginationPageSizeOptions"
-                    [value]="option"
-                    [attr.selected]="option === pageSize ? true : null">
-                    {{ option }}
-                </option>
-            </select>
-            <label for="opfab-page-size-select" style="font-weight: bold" translate>&nbsp;shared.pageSize</label>
-        </div>
     </div>
     <div class="opfab-table">
         <div style="overflow-y: auto; max-height: calc(100vh - 450px)">
@@ -198,6 +187,18 @@
         </div>
 
         <div class="opfab-pagination">
+            <div style="width: 12%; margin-top: 14px">
+                <select (change)="onPageSizeChanged($event.target)" id="opfab-page-size-select">
+                    <option
+                        *ngFor="let option of paginationPageSizeOptions"
+                        [value]="option"
+                        [attr.selected]="option === pageSize ? true : null">
+                        {{ option }}
+                    </option>
+                </select>
+                <label for="opfab-page-size-select" translate>&nbsp;shared.pageSize</label>
+            </div>
+
             <div style="white-space: nowrap; margin-top: 17px" id="opfab-archive-results-number">
                 <span translate> shared.resultsNumber </span> : {{ resultsNumber }}
             </div>

diff --git a/ui/main/src/app/modules/logging/components/logging-table/logging-table.component.html b/ui/main/src/app/modules/logging/components/logging-table/logging-table.component.html
@@ -6,17 +6,6 @@
 <!-- SPDX-License-Identifier: MPL-2.0                                      -->
 <!-- This file is part of the OperatorFabric project.                      -->
 
-<div style="float: right; margin-top: -30px">
-    <select (change)="onPageSizeChanged($event.target)" #pageSizeSelect>
-        <option
-            *ngFor="let option of paginationPageSizeOptions"
-            [value]="option"
-            [attr.selected]="option === pageSize ? true : null">
-            {{ option }}
-        </option>
-    </select>
-    <label for="opfab-page-size-select" style="font-weight: bold" translate>&nbsp;shared.pageSize</label>
-</div>
 <div
     id="opfab-logging-table"
     style="background-color: var(--opfab-bgcolor-darker); border: solid 0px var(--opfab-bgcolor-darker)">
@@ -31,6 +20,18 @@
     </ag-grid-angular>
 
     <div *ngIf="gridApi" class="opfab-pagination" style="padding-bottom: 5px">
+        <div style="width: 12%; margin-top: 14px">
+            <select (change)="onPageSizeChanged($event.target)" id="opfab-page-size-select">
+                <option
+                    *ngFor="let option of paginationPageSizeOptions"
+                    [value]="option"
+                    [attr.selected]="option === pageSize ? true : null">
+                    {{ option }}
+                </option>
+            </select>
+            <label for="opfab-page-size-select" translate>&nbsp;shared.pageSize</label>
+        </div>
+
         <div style="white-space: nowrap; margin-top: 17px" id="opfab-logging-results-number">
             <span translate> shared.resultsNumber </span> : {{ totalElements }}
         </div>

diff --git a/ui/main/src/app/modules/logging/logging.component.html b/ui/main/src/app/modules/logging/logging.component.html
@@ -43,6 +43,7 @@
         (pageChange)="onPageChange($event)"
         (export)="exportToExcel()">
     </of-logging-table>
+    <br />
 </div>
 
 <div
-Original file line number
+Diff line change
@@ Expand Up / @@ -43,6 +43,7 @@ @@
             (pageChange)="onPageChange($event)"
             (export)="exportToExcel()">
         </of-logging-table>
+        <br />
     </div>
     <div
@@ Expand Down @@