feat(admin): jump onto specific page

Added input for inserting a wanted page number.

Author: sarkapalkovicova

libs/perun/utils/src/lib/table-wrapper/table-wrapper.component.css

@@ -6,6 +6,22 @@
       [pageSizeOptions]="pageSizeOptions"
       [pageSize]="pageSize">
     </mat-paginator>
+
+    <div class="page-index-padding">
+      <mat-form-field class="table-index-form d-flex">
+        <input
+          class="overflow-ellipsis text-muted"
+          type="number"
+          matInput
+          [min]="1"
+          [max]="paginator.getNumberOfPages()"
+          [value]="paginator.pageIndex + 1"
+          (keydown)="onlyValidKeys($event)"
+          (keyup.enter)="changePage($event)"
+          (focusout)="changePage($event)" />
+      </mat-form-field>
+    </div>
+
     <perun-web-apps-table-options
       (exportDisplayedData)="exportDisplayedData.emit($event)"
       (exportAllData)="exportAllData.emit($event)"

libs/perun/utils/src/lib/table-wrapper/table-wrapper.component.html

@@ -0,0 +1,15 @@
+.table-height {
+  max-height: 70vh;
+}
+
+.table-index-form {
+  max-width: 110px;
+  max-height: 75px;
+  @media (max-width: 420px) {
+    max-width: 70px;
+  }
+}
+
+.page-index-padding {
+  padding-top: 1em;
+}

libs/perun/utils/src/lib/table-wrapper/table-wrapper.component.scss

@@ -18,7 +18,7 @@ import { TableConfigService } from '@perun-web-apps/config/table-config';
 @Component({
   selector: 'perun-web-apps-table-wrapper',
   templateUrl: './table-wrapper.component.html',
-  styleUrls: ['./table-wrapper.component.css'],
+  styleUrls: ['./table-wrapper.component.scss'],
   providers: [
     { provide: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'fill' } },
   ],
@@ -62,4 +62,33 @@ export class TableWrapperComponent implements OnInit {
       }); // scroll to top of table on page changes
     }
   }
+
+  changePage(event: FocusEvent): void {
+    const input = event.target as HTMLInputElement;
+    let selectedPage = parseInt(input.value);
+
+    if (!selectedPage || selectedPage < 1) {
+      selectedPage = this.paginator.pageIndex + 1; // stay at current page
+    }
+    if (selectedPage > this.paginator.getNumberOfPages()) {
+      selectedPage = this.paginator.getNumberOfPages();
+    }
+
+    this.paginator.pageIndex = selectedPage - 1;
+    const changePageEvent: PageEvent = {
+      length: this.paginator.length,
+      pageSize: this.paginator.pageSize,
+      pageIndex: this.paginator.pageIndex,
+    };
+    this.paginator.page.next(changePageEvent);
+
+    input.value = selectedPage.toString();
+  }
+
+  onlyValidKeys(event: KeyboardEvent): boolean {
+    const charCode = event.key.charCodeAt(0);
+    return (
+      charCode === 65 || charCode === 66 || charCode === 68 || (charCode >= 48 && charCode <= 57)
+    ); // Accept only digits 0-9, arrows, backspace or delete
+  }
 }