From 4922fd107668680425a5c4614c23ec2bb64f82af Mon Sep 17 00:00:00 2001
From: Abu Sadaf <116058905+sadaf895@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:46:31 +0530
Subject: [PATCH] fix(dashboard): improve layout of entity-count widget (#2643)

closes #2638
---
 .../dashboard-list-widget.component.html       |  7 +++++--
 .../dashboard-list-widget.component.ts         |  1 +
 .../entity-count-dashboard.component.html      | 18 +++++++++++++++---
 .../entity-count-dashboard.component.scss      |  7 ++++++-
 .../entity-count-dashboard.stories.ts          |  6 +++++-
 5 files changed, 32 insertions(+), 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
index ddb721d21f..569c099f3f 100644
--- 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
index 708d6fef2d..754f391e01 100644
--- 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/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.html b/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.html
index fd7a67f9ef..81b163166e 100644
--- a/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.html
+++ b/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.html
@@ -4,8 +4,17 @@
   [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"
@@ -13,7 +22,7 @@
       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/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.scss b/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.scss
index ccbc0683f2..8f21a1d9c0 100644
--- a/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.scss
+++ b/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.scss
@@ -5,4 +5,9 @@
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
-}
\ No newline at end of file
+}
+
+.label-separator {
+  border-top: 1px solid #ccc;
+  margin: 8px 0 0 0;
+}
diff --git a/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.stories.ts b/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.stories.ts
index 072a3e7a3a..92ec77b99b 100644
--- a/src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.stories.ts
+++ b/src/app/features/dashboard-widgets/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"],
   },
 };