refs #1456. Added checkbox in card view

Reviewed-on: #12

ogWebconsole/src/app/components/groups/groups.component.css

@@ -343,7 +343,6 @@ mat-tree mat-tree-node.disabled:hover {
 
 .clients-container {
   width: 75%;
-  padding: 0px 16px 16px 16px;
   box-sizing: border-box;
   overflow-y: auto;
 }
@@ -364,7 +363,6 @@ mat-tree mat-tree-node.disabled:hover {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 2px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -400,13 +398,13 @@ button[mat-raised-button] {
 .clients-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 8px; /* Espaciado reducido entre cards */
+  gap: 4px; /* Espaciado reducido entre cards */
 }
 
 .clients-list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 4px;
 }
 
 .client-item-list {
@@ -424,9 +422,10 @@ button[mat-raised-button] {
 }
 
 .clients-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr); /* 6 columnas por fila */
+  gap: 16px; /* Espaciado entre tarjetas */
+  padding: 20px;
 }
 
 .clients-list .list-item-content {
@@ -436,9 +435,15 @@ button[mat-raised-button] {
   align-items: center;
 }
 
+.action-icons {
+  display: flex;
+  justify-content: center;
+  gap: 1px;
+  margin-top: 10px;
+}
+
 .client-card, .list-item-content {
   border: 1px solid #ccc;
-  padding: 1rem;
   border-radius: 5px;
 }
 
@@ -484,7 +489,6 @@ button[mat-raised-button] {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   position: relative;
-  padding: 8px;
   text-align: center;
 }
 
@@ -518,4 +522,4 @@ button[mat-raised-button] {
   gap: 10px;
   margin-top: 1.5rem;
   margin-left: 16px;
-}
+}

ogWebconsole/src/app/components/groups/groups.component.html

@@ -10,7 +10,7 @@
   </div>
   <div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
     <button mat-flat-button color="primary" (click)="addOU($event)"
-      matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
+            matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
       {{ 'newOrganizationalUnitButton' | translate }}
     </button>
     <button mat-flat-button color="primary" [matMenuTriggerFor]="menuClients">{{ 'newClientButton' | translate
@@ -21,7 +21,7 @@
     </mat-menu>
 
     <button mat-flat-button (click)="openBottomSheet()" joyrideStep="keyStep" text="{{ 'keyStepText' | translate }}"
-      matTooltipShowDelay="1000">
+            matTooltipShowDelay="1000">
       {{ 'legendButton' | translate }}
     </button>
   </div>
@@ -39,16 +39,16 @@
         <mat-label>{{ 'searchTree' | translate }}</mat-label>
         <input matInput #treeSearchInput (input)="onTreeFilterInput($event)" placeholder="Centro, aula, grupos ..." />
         <button *ngIf="treeSearchInput.value" mat-icon-button matSuffix aria-label="Clear tree search"
-          (click)="clearTreeSearch(treeSearchInput)">
+                (click)="clearTreeSearch(treeSearchInput)">
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
       <mat-form-field appearance="outline">
         <mat-label>{{ 'searchClient' | translate }}</mat-label>
         <input matInput #clientSearchInput (input)="onClientFilterInput($event)"
-          placeholder="Nombre, IP, estado o MAC" />
+               placeholder="Nombre, IP, estado o MAC" />
         <button *ngIf="clientSearchInput.value" mat-icon-button matSuffix aria-label="Clear client search"
-          (click)="clearClientSearch(clientSearchInput)">
+                (click)="clearClientSearch(clientSearchInput)">
           <mat-icon>close</mat-icon>
         </button>
       </mat-form-field>
@@ -79,19 +79,19 @@
     <div class="tree-container">
       <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
         <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
-          *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick(node)">
+                       *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick(node)">
           <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
-            [ngClass]="{'disabled-toggle': !node.expandable}">
+                  [ngClass]="{'disabled-toggle': !node.expandable}">
             <mat-icon>{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
           </button>
           <mat-icon class="node-icon {{ node.type }}">
             {{
-            node.type === 'organizational-unit' ? 'apartment'
-            : node.type === 'classrooms-group' ? 'meeting_room'
-            : node.type === 'classroom' ? 'school'
-            : node.type === 'clients-group' ? 'lan'
-            : node.type === 'client' ? 'computer'
-            : 'group'
+              node.type === 'organizational-unit' ? 'apartment'
+                : node.type === 'classrooms-group' ? 'meeting_room'
+                  : node.type === 'classroom' ? 'school'
+                    : node.type === 'clients-group' ? 'lan'
+                      : node.type === 'client' ? 'computer'
+                        : 'group'
             }}
           </mat-icon>
           <span>{{ node.name }}</span>
@@ -100,16 +100,16 @@
           </button>
         </mat-tree-node>
         <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
-          *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick(node)">
+                       *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick(node)">
           <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle"></button>
           <mat-icon style="color: green;">
             {{
-            node.type === 'organizational-unit' ? 'apartment'
-            : node.type === 'classrooms-group' ? 'meeting_room'
-            : node.type === 'classroom' ? 'school'
-            : node.type === 'clients-group' ? 'lan'
-            : node.type === 'client' ? 'computer'
-            : 'group'
+              node.type === 'organizational-unit' ? 'apartment'
+                : node.type === 'classrooms-group' ? 'meeting_room'
+                  : node.type === 'classroom' ? 'school'
+                    : node.type === 'clients-group' ? 'lan'
+                      : node.type === 'client' ? 'computer'
+                        : 'group'
             }}
           </mat-icon>
           <span>{{ node.name }}</span>
@@ -171,7 +171,7 @@
         </span>
         <div class="view-type-container">
           <app-execute-command [clientData]="arrayClients" [buttonType]="'text'"
-            [buttonText]="'Ejecutar comandos'"></app-execute-command>
+                               [buttonText]="'Ejecutar comandos'"></app-execute-command>
           <button mat-button color="primary" (click)="toggleView('card')" [disabled]="currentView === 'card'">
             <mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
           </button>
@@ -191,29 +191,43 @@
           <div class="clients-grid" *ngIf="currentView === 'card'">
             <div *ngFor="let client of selectedClients.data" class="client-item">
               <div class="client-card">
-                <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                <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"
+                    <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">
+                    <button
+                      *ngIf="syncStatus && syncingClientId === client.uuid"
+                      mat-icon-button color="primary">
                       <mat-spinner diameter="24"></mat-spinner>
                     </button>
 
                     <button mat-icon-button color="primary" (click)="onShowClientDetail($event, client)">
                       <mat-icon>visibility</mat-icon>
                     </button>
-                    <app-execute-command [clientData]="[client]" [buttonType]="'icon'"
-                      [icon]="'terminal'"></app-execute-command>
+                    <app-execute-command
+                      [clientData]="[client]"
+                      [buttonType]="'icon'"
+                      [icon]="'terminal'"
+                    ></app-execute-command>
                   </div>
                 </div>
               </div>
@@ -225,22 +239,22 @@
               <ng-container matColumnDef="select">
                 <th mat-header-cell *matHeaderCellDef>
                   <mat-checkbox (change)="$event ? toggleAllRows() : null"
-                    [checked]="selection.hasValue() && isAllSelected()"
-                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+                                [checked]="selection.hasValue() && isAllSelected()"
+                                [indeterminate]="selection.hasValue() && !isAllSelected()">
                   </mat-checkbox>
                 </th>
                 <td mat-cell *matCellDef="let row">
                   <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(row)"
-                    [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy'">
+                                [checked]="selection.isSelected(row)" [disabled]="row.status === 'busy'">
                   </mat-checkbox>
                 </td>
               </ng-container>
               <ng-container matColumnDef="status">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
                 <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}" matTooltipPosition="left"
-                  matTooltipShowDelay="500">
+                    matTooltipShowDelay="500">
                   <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
-                    class="client-image" />
+                       class="client-image" />
                 </td>
               </ng-container>
 
@@ -248,7 +262,7 @@
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'sync' | translate }} </th>
                 <td mat-cell *matCellDef="let client">
                   <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button color="primary"
-                    (click)="getStatus(client, selectedNode)">
+                          (click)="getStatus(client, selectedNode)">
                     <mat-icon>sync</mat-icon>
                   </button>
 
@@ -260,7 +274,7 @@
               <ng-container matColumnDef="name">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
                 <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}" matTooltipPosition="left"
-                  matTooltipShowDelay="500">
+                    matTooltipShowDelay="500">
                   <div class="client-info">
                     <div class="client-name">{{ client.name }}</div>
                     <div class="client-ip">{{ client.ip }}</div>
@@ -271,7 +285,7 @@
               <ng-container matColumnDef="oglive">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header> OG Live </th>
                 <td mat-cell *matCellDef="let client"> {{ (client.ogLive?.filename || '').slice(0, 15) }}{{
-                  (client.ogLive?.filename?.length > 15) ? '...' : '' }} </td>
+                    (client.ogLive?.filename?.length > 15) ? '...' : '' }} </td>
               </ng-container>
 
               <ng-container matColumnDef="maintenace">
@@ -299,7 +313,7 @@
                     <mat-icon>more_vert</mat-icon>
                   </button>
                   <app-execute-command [clientData]="[client]" [buttonType]="'icon'"
-                    [icon]="'terminal'"></app-execute-command>
+                                       [icon]="'terminal'"></app-execute-command>
                   <mat-menu #clientMenu="matMenu">
                     <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                       <mat-icon>edit</mat-icon>
@@ -332,4 +346,4 @@
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>