fix: added pagination to shortcut widget (#1738)

closes #1692

src/app/child-dev-project/children/dashboard-widgets/entity-count-dashboard/entity-count-dashboard.component.html

@@ -1,46 +1,43 @@
-<app-dashboard-widget
+<app-dashboard-list-widget
   [icon]="entityIcon"
   theme="child"
   [title]="totalEntities"
   [subtitle]="label"
-  [loading]="loading"
+  [entries]="entityGroupCounts"
 >
-  <app-widget-content>
-    <div class="table-wrapper">
-      <table
-        mat-table
-        [dataSource]="entityGroupCounts"
-        i18n-aria-label="Label for children count dashboard"
-        aria-label="Table showing disaggregation of the beneficiaries"
-      >
-        <ng-container matColumnDef="label">
-          <td *matCellDef="let group">{{ group.label }}</td>
-        </ng-container>
-        <ng-container matColumnDef="value">
-          <td *matCellDef="let group" class="text-align-end">{{ group.value }}</td>
-        </ng-container>
-        <ng-container matColumnDef="link">
-          <td *matCellDef class="text-align-end">
-            <fa-icon icon="external-link-square-alt"></fa-icon>
-          </td>
-        </ng-container>
+  <div class="table-wrapper">
+    <table
+      mat-table
+      i18n-aria-label="Label for children count dashboard"
+      aria-label="Table showing disaggregation of the beneficiaries"
+    >
+      <ng-container matColumnDef="label">
+        <td *matCellDef="let group">{{ group.label }}</td>
+      </ng-container>
+      <ng-container matColumnDef="value">
+        <td *matCellDef="let group" class="text-align-end">{{ group.value }}</td>
+      </ng-container>
+      <ng-container matColumnDef="link">
+        <td *matCellDef class="text-align-end">
+          <fa-icon icon="external-link-square-alt"></fa-icon>
+        </td>
+      </ng-container>
 
-        <tr hidden>
-          <th scope="col" i18n="The center that a partiipant belongs to, e.g. a city">Center</th>
-          <th scope="col" i18n="The amount of children that study at one school">Count of children</th>
-          <th scope="col" i18n="A link that takes a user to a center">Link</th>
-        </tr>
-        <tr
-          mat-row
-          *matRowDef="let row; let i=index; columns: ['label', 'value', 'link'];"
-          (click)="goToChildrenList(row.id)"
-          class="pointer"
-          angulartics2On="click"
-          angularticsCategory="Navigation"
-          angularticsAction="dashboard_children_count_school_link"
-          [angularticsLabel]="'list-entry-' + i"
-        ></tr>
-      </table>
-    </div>
-  </app-widget-content>
-</app-dashboard-widget>
+      <tr hidden>
+        <th scope="col" i18n="The center that a partiipant belongs to, e.g. a city">Center</th>
+        <th scope="col" i18n="The amount of children that study at one school">Count of children</th>
+        <th scope="col" i18n="A link that takes a user to a center">Link</th>
+      </tr>
+      <tr
+        mat-row
+        *matRowDef="let row; let i=index; columns: ['label', 'value', 'link'];"
+        (click)="goToChildrenList(row.id)"
+        class="pointer"
+        angulartics2On="click"
+        angularticsCategory="Navigation"
+        angularticsAction="dashboard_children_count_school_link"
+        [angularticsLabel]="'list-entry-' + i"
+      ></tr>
+    </table>
+  </div>
+</app-dashboard-list-widget>

src/app/child-dev-project/children/dashboard-widgets/entity-count-dashboard/entity-count-dashboard.component.ts

@@ -11,9 +11,8 @@ import { IconName } from "@fortawesome/fontawesome-svg-core";
 import { MatTableModule } from "@angular/material/table";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { Angulartics2Module } from "angulartics2";
-import { DashboardWidgetComponent } from "../../../../core/dashboard/dashboard-widget/dashboard-widget.component";
-import { WidgetContentComponent } from "../../../../core/dashboard/dashboard-widget/widget-content/widget-content.component";
 import { groupBy } from "../../../../utils/utils";
+import { DashboardListWidgetComponent } from "../../../../core/dashboard/dashboard-list-widget/dashboard-list-widget.component";
 
 @DynamicComponent("ChildrenCountDashboard")
 @DynamicComponent("EntityCountDashboard")
@@ -25,8 +24,7 @@ import { groupBy } from "../../../../utils/utils";
     MatTableModule,
     FontAwesomeModule,
     Angulartics2Module,
-    DashboardWidgetComponent,
-    WidgetContentComponent,
+    DashboardListWidgetComponent,
   ],
   standalone: true,
 })
@@ -43,7 +41,6 @@ export class EntityCountDashboardComponent
 
   totalEntities: number;
   entityGroupCounts: { label: string; value: number; id: string }[] = [];
-  loading = true;
   label = Child.labelPlural;
   entityIcon: IconName = Child.icon;
 
@@ -85,7 +82,6 @@ export class EntityCountDashboardComponent
         id: group?.["id"] || label,
       };
     });
-    this.loading = false;
   }
 }
 

src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.html

@@ -1,15 +1,12 @@
-<app-dashboard-widget
+<app-dashboard-list-widget
   icon="external-link-alt"
   theme="general"
   subtitle="Quick actions"
   i18n-subtitle="Title of dashboard widget that shows a list of certain actions a user can click on"
+  [entries]="shortcuts"
 >
-  <app-widget-content class="table-wrapper">
-    <table
-      mat-table
-      [dataSource]="tableDataSource"
-      aria-label="Quick actions"
-    >
+  <div class="table-container">
+    <table mat-table aria-label="Quick actions">
       <!-- Table header only for assistive technologies like screen readers -->
       <tr hidden>
         <th scope="col">Icon</th>
@@ -32,5 +29,5 @@
         [routerLink]="row.link"
       ></tr>
     </table>
-  </app-widget-content>
-</app-dashboard-widget>
+  </div>
+</app-dashboard-list-widget>

src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.scss

@@ -1 +1,6 @@
 @use "../../dashboard/dashboard-widget-base";
+
+.table-container {
+  margin-left: 10px;
+  margin-right: 10px;
+}

src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { DashboardShortcutWidgetComponent } from "./dashboard-shortcut-widget.component";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
+import { EntityMapperService } from "../../entity/entity-mapper.service";
 
 describe("ShortcutDashboardWidgetComponent", () => {
   let component: DashboardShortcutWidgetComponent;
@@ -9,6 +10,7 @@ describe("ShortcutDashboardWidgetComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [DashboardShortcutWidgetComponent, FontAwesomeTestingModule],
+      providers: [{ provide: EntityMapperService, useValue: undefined }],
     }).compileComponents();
   });
 

src/app/core/dashboard-shortcut-widget/dashboard-shortcut-widget/dashboard-shortcut-widget.component.ts

@@ -1,12 +1,11 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { MenuItem } from "../../navigation/menu-item";
 import { OnInitDynamicComponent } from "../../view/dynamic-components/on-init-dynamic-component.interface";
-import { MatTableDataSource, MatTableModule } from "@angular/material/table";
+import { MatTableModule } from "@angular/material/table";
 import { DynamicComponent } from "../../view/dynamic-components/dynamic-component.decorator";
 import { FaDynamicIconComponent } from "../../view/fa-dynamic-icon/fa-dynamic-icon.component";
 import { RouterLink } from "@angular/router";
-import { DashboardWidgetComponent } from "../../dashboard/dashboard-widget/dashboard-widget.component";
-import { WidgetContentComponent } from "../../dashboard/dashboard-widget/widget-content/widget-content.component";
+import { DashboardListWidgetComponent } from "../../dashboard/dashboard-list-widget/dashboard-list-widget.component";
 
 /**
  * A simple list of shortcuts displayed as a dashboard widget for easy access to important navigation.
@@ -17,28 +16,20 @@ import { WidgetContentComponent } from "../../dashboard/dashboard-widget/widget-
   templateUrl: "./dashboard-shortcut-widget.component.html",
   styleUrls: ["./dashboard-shortcut-widget.component.scss"],
   imports: [
+    DashboardListWidgetComponent,
     MatTableModule,
     FaDynamicIconComponent,
     RouterLink,
-    DashboardWidgetComponent,
-    WidgetContentComponent,
   ],
   standalone: true,
 })
 export class DashboardShortcutWidgetComponent
-  implements OnInitDynamicComponent, OnInit
+  implements OnInitDynamicComponent
 {
   /** displayed entries, each representing one line displayed as a shortcut */
   @Input() shortcuts: MenuItem[] = [];
 
-  tableDataSource = new MatTableDataSource<MenuItem>();
-
   onInitFromDynamicConfig(config: any) {
     this.shortcuts = config.shortcuts;
-    this.tableDataSource.data = config.shortcuts;
-  }
-
-  ngOnInit(): void {
-    this.tableDataSource.data = this.shortcuts;
   }
 }

src/app/core/dashboard/dashboard-list-widget/dashboard-list-widget.component.html

@@ -9,7 +9,7 @@
 >
   <app-widget-content>
     <ng-container *ngIf="dataSource.data.length > 0">
-      <ng-content> </ng-content>
+      <ng-content></ng-content>
     </ng-container>
 
     <div *ngIf="dataSource.data.length === 0" class="headline">
@@ -22,7 +22,7 @@
 
     <mat-paginator
       #paginator
-      [style.display]="paginator.getNumberOfPages() === 0 ? 'none' : ''"
+      [style.display]="dataSource.data.length <= 5 ? 'none' : ''"
       [pageSizeOptions]="[5]"
       [hidePageSize]="true"
     >