From 858db45e0da84e05a09792fa0170f5415e62043f Mon Sep 17 00:00:00 2001
From: llara <llara@localhost>
Date: Mon, 3 Mar 2025 11:53:20 +0100
Subject: [PATCH] refs #1619. Style: enhance cards view layout and paginator
 integration in groups component

---
 .../components/groups/groups.component.css    |  30 ++++-
 .../components/groups/groups.component.html   | 106 +++++++++---------
 2 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index e9499bd..9858f90 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -59,10 +59,20 @@
 }
 
 .cards-view {
+  max-height: calc(100vh - 330px);
+  overflow: auto;
   display: flex;
+  flex-direction: row;
   flex-grow: 1;
-  overflow-y: auto;
-  width: 100%;
+  overflow: auto;
+}
+
+.cards-select-all {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-top: 0.5rem;
+  padding-left: 1rem;
 }
 
 .clients-table {
@@ -83,6 +93,17 @@
   margin-top: auto;
 }
 
+.cards-paginator {
+  width: 100%;
+  margin-left: 1rem;
+  background-color: #fafafa;
+}
+
+.list-paginator {
+  width: 100%;
+  background-color: #f3f3f3;
+}
+
 .actions mat-icon {
   color: #757575;
   cursor: pointer;
@@ -293,7 +314,6 @@ mat-tree mat-tree-node.disabled:hover {
   position: relative;
 }
 
-
 .client-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
@@ -348,6 +368,8 @@ mat-tree mat-tree-node.disabled:hover {
   .clients-view-header {
     display: flex;
     flex-direction: column;
+    margin-bottom: 1rem;
+    margin-top: 0;
   }
 }
 
@@ -422,7 +444,7 @@ mat-button-toggle-group {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 16px;
-  padding: 8px 20px 20px 20px;
+  padding: 0.5rem 1rem 1rem 1rem;
   width: 100%;
   box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 6be6dc2..694f3fd 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -202,62 +202,68 @@
           <div *ngIf="hasClients; else noClientsTemplate">
 
             <!-- Cards view -->
-            <div *ngIf="currentView === 'card'" class="cards-view">
-              <mat-checkbox class="cards-select-all" (change)="toggleAllCards()"
-                [checked]="selection.hasValue() && isAllSelected()"
-                [indeterminate]="selection.hasValue() && !isAllSelected()"
-                style="margin-left: 1em; margin-top: 0.5rem;">
-              </mat-checkbox>
-              <div class="clients-grid">
-                <div *ngFor="let client of arrayClients" class="client-item">
-                  <div class="client-card">
-                    <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
-                      [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
-                    </mat-checkbox>
-                    <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
-                      class="client-image" />
+            <div *ngIf="currentView === 'card'">
+              <section class="cards-view">
+                <mat-checkbox class="cards-select-all" (change)="toggleAllCards()"
+                  [checked]="selection.hasValue() && isAllSelected()"
+                  [indeterminate]="selection.hasValue() && !isAllSelected()">
+                </mat-checkbox>
+                <div class="clients-grid">
+                  <div *ngFor="let client of arrayClients" class="client-item">
+                    <div class="client-card">
+                      <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
+                        [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
+                      </mat-checkbox>
+                      <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                        class="client-image" />
 
-                    <div class="client-details">
-                      <span class="client-name">{{ client.name }}</span>
-                      <span class="client-ip">{{ client.ip }}</span>
-                      <span class="client-ip">{{ client.mac }}</span>
-                      <div class="action-icons">
-                        <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button color="primary"
-                          (click)="getStatus(client, selectedNode)">
-                          <mat-icon>sync</mat-icon>
-                        </button>
-
-                        <button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
-                          <mat-spinner diameter="24"></mat-spinner>
-                        </button>
-
-                        <app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
-                          [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
-
-                        <button
-                          [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                          mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary">
-                          <mat-icon>more_vert</mat-icon>
-                        </button>
-
-                        <mat-menu #clientMenu="matMenu">
-                          <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
-                            <mat-icon>edit</mat-icon>
-                            <span>{{ 'edit' | translate }}</span>
+                      <div class="client-details">
+                        <span class="client-name">{{ client.name }}</span>
+                        <span class="client-ip">{{ client.ip }}</span>
+                        <span class="client-ip">{{ client.mac }}</span>
+                        <div class="action-icons">
+                          <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button
+                            color="primary" (click)="getStatus(client, selectedNode)">
+                            <mat-icon>sync</mat-icon>
                           </button>
-                          <button mat-menu-item (click)="onShowClientDetail($event, client)">
-                            <mat-icon>visibility</mat-icon>
-                            <span>{{ 'viewDetails' | translate }}</span>
+
+                          <button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
+                            <mat-spinner diameter="24"></mat-spinner>
                           </button>
-                          <button mat-menu-item (click)="onDeleteClick($event, client)">
-                            <mat-icon>delete</mat-icon>
-                            <span>{{ 'delete' | translate }}</span>
+
+                          <app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
+                            [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
+
+                          <button
+                            [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                            mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary">
+                            <mat-icon>more_vert</mat-icon>
                           </button>
-                        </mat-menu>
+
+                          <mat-menu #clientMenu="matMenu">
+                            <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
+                              <mat-icon>edit</mat-icon>
+                              <span>{{ 'edit' | translate }}</span>
+                            </button>
+                            <button mat-menu-item (click)="onShowClientDetail($event, client)">
+                              <mat-icon>visibility</mat-icon>
+                              <span>{{ 'viewDetails' | translate }}</span>
+                            </button>
+                            <button mat-menu-item (click)="onDeleteClick($event, client)">
+                              <mat-icon>delete</mat-icon>
+                              <span>{{ 'delete' | translate }}</span>
+                            </button>
+                          </mat-menu>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
+              </section>
+              <div class="paginator-container">
+                <mat-paginator class="cards-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
+                  [pageSizeOptions]="[5, 10, 20, 50, 100]" (page)="onPageChange($event)">
+                </mat-paginator>
               </div>
             </div>
 
@@ -354,11 +360,11 @@
                       </mat-menu>
                     </td>
                   </ng-container>
-                  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                  <tr mat-header-row style="background-color: #f3f3f3;" *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table>
               </section>
-              <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
+              <mat-paginator class="list-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
                 [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
               </mat-paginator>
             </div>