fix(dashboard): improve layout of entity-count widget (#2643)

closes #2638
Aam-Digital · Oct 31, 2024 · 4922fd1 · 4922fd1
1 parent 4132351
commit 4922fd1
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 7 deletions.
diff --git a/src/app/core/dashboard/dashboard-list-widget/dashboard-list-widget.component.html b/src/app/core/dashboard/dashboard-list-widget/dashboard-list-widget.component.html
@@ -22,9 +22,12 @@
 
     <mat-paginator
       #paginator
-      [style.display]="dataSource.data.length <= 5 ? 'none' : ''"
-      [pageSizeOptions]="[5]"
+      [style.display]="
+        dataSource.data.length <= paginationPageSize ? 'none' : ''
+      "
+      [pageSizeOptions]="[paginationPageSize]"
       [hidePageSize]="true"
+      [pageSize]="paginationPageSize"
     >
     </mat-paginator>
   </app-widget-content>

diff --git a/src/app/core/dashboard/dashboard-list-widget/dashboard-list-widget.component.ts b/src/app/core/dashboard/dashboard-list-widget/dashboard-list-widget.component.ts
@@ -63,6 +63,7 @@ export class DashboardListWidgetComponent<E>
   /** optional tooltip to explain detailed meaning of this widget / statistic */
   @Input() explanation: string;
   @Input() headline: string;
+  @Input() paginationPageSize: number = 5; // Default to 5 entries per page
 
   /**
    * array of items to be displayed in paginated widget table.

diff --git a/...ntity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.html b/...ntity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.html
@@ -4,16 +4,25 @@
   [title]="totalEntities"
   [subtitle]="label"
   [entries]="entityGroupCounts[groupBy[currentGroupIndex]]"
+  [paginationPageSize]="4"
 >
-  <div class="flex-row">
+  <div
+    class="flex-row"
+    style="
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+    "
+  >
     <button
       mat-icon-button
       matTooltip="Previous Grouping"
       i18n-matTooltip
       caption="Previous"
       aria-label="Previous grouping"
       (click)="getPrev()"
-      *ngIf="groupBy?.length > 1"
+      [style.visibility]="groupBy?.length > 1 ? 'visible' : 'hidden'"
       [style.transform]="'scale(0.75)'"
     >
       <fa-icon icon="circle-chevron-left" size="xs"></fa-icon>
@@ -26,6 +35,7 @@
         [field]="groupBy[currentGroupIndex]"
       >
       </app-entity-field-label>
+      :
     </span>
 
     <button
@@ -35,13 +45,15 @@
       caption="Next"
       aria-label="Next grouping"
       (click)="getNext()"
-      *ngIf="groupBy?.length > 1"
+      [style.visibility]="groupBy?.length > 1 ? 'visible' : 'hidden'"
       [style.transform]="'scale(0.75)'"
     >
       <fa-icon icon="circle-chevron-right"></fa-icon>
     </button>
   </div>
 
+  <div class="label-separator"></div>
+
   <div class="table-wrapper">
     <table
       mat-table

diff --git a/...ntity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.scss b/...ntity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.scss
@@ -5,4 +5,9 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+
+.label-separator {
+  border-top: 1px solid #ccc;
+  margin: 8px 0 0 0;
+}
diff --git a/...ts/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.stories.ts b/...ts/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.stories.ts
@@ -18,6 +18,10 @@ export default {
             TestEntity.create({ category: genders[1], other: "otherC" }),
             TestEntity.create({ category: genders[1], other: "otherD" }),
             TestEntity.create({ category: genders[2], other: "otherE" }),
+            TestEntity.create({ category: genders[2], other: "otherF" }),
+            TestEntity.create({ category: genders[2], other: "otherG" }),
+            TestEntity.create({ category: genders[2], other: "otherH" }),
+            TestEntity.create({ category: genders[2], other: "otherI" }),
           ]),
         ),
       ],
@@ -35,6 +39,6 @@ const Template: StoryFn<EntityCountDashboardComponent> = (
 export const Primary = {
   args: {
     entityType: "TestEntity",
-    groupBy: ["category", "other"],
+    groupBy: ["other"],
   },
 };