From 6385f4b2676610eb1bc587b63c94bd254f7d53ba Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Mon, 7 Oct 2024 15:21:15 +0200
Subject: [PATCH] refs #901 Refactor create-task to select all clients

---
 .../create-task/create-task.component.html    | 68 ++++++++++---------
 .../create-task/create-task.component.ts      | 34 +++++++---
 2 files changed, 61 insertions(+), 41 deletions(-)

diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
index fc2838a..8b88d6b 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
@@ -64,41 +64,45 @@
         </div>
       </mat-step>
 
-      <!-- Paso 4: Selecciona Unidad Organizacional, Aula y Clientes -->
-      <mat-step label="Selecciona Unidad Organizacional, Aula y Clientes">
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Selecciona Unidad Organizacional</mat-label>
-          <mat-select formControlName="organizationalUnit" (selectionChange)="onOrganizationalUnitChange()">
-            <mat-option *ngFor="let unit of availableOrganizationalUnits" [value]="unit['@id']">
-              {{ unit.name }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="taskForm.get('organizationalUnit')?.invalid">Este campo es obligatorio</mat-error>
-        </mat-form-field>
+     <!-- Paso 4: Selecciona Unidad Organizacional, Aula y Clientes -->
+<mat-step label="Selecciona Unidad Organizacional, Aula y Clientes">
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Selecciona Unidad Organizacional</mat-label>
+    <mat-select formControlName="organizationalUnit" (selectionChange)="onOrganizationalUnitChange()">
+      <mat-option *ngFor="let unit of availableOrganizationalUnits" [value]="unit['@id']">
+        {{ unit.name }}
+      </mat-option>
+    </mat-select>
+    <mat-error *ngIf="taskForm.get('organizationalUnit')?.invalid">Este campo es obligatorio</mat-error>
+  </mat-form-field>
 
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Selecciona aula</mat-label>
-          <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
-            <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
-              {{ child.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Selecciona aula</mat-label>
+    <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
+      <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
+        {{ child.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
 
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Selecciona Clientes</mat-label>
-          <mat-select formControlName="selectedClients" multiple>
-            <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
-              {{ client.name }} ({{ client.ip }})
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Selecciona Clientes</mat-label>
+    <mat-select formControlName="selectedClients" multiple>
+      <mat-option (click)="toggleSelectAll()" [selected]="areAllSelected()">
+        Seleccionar todos
+      </mat-option>
+      <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
+        {{ client.name }} ({{ client.ip }})
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div class="button-container">
+    <button mat-button matStepperPrevious>Atrás</button>
+    <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
+  </div>
+</mat-step>
 
-        <div class="button-container">
-          <button mat-button matStepperPrevious>Atrás</button>
-          <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
-        </div>
-      </mat-step>
     </mat-horizontal-stepper>
   </mat-dialog-content>
 </form>
diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
index d4b0307..4b06e85 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
@@ -20,6 +20,7 @@ export class CreateTaskComponent implements OnInit {
   availableOrganizationalUnits: any[] = [];
   selectedUnitChildren: any[] = [];
   selectedClients: any[] = [];
+  selectedClientIds: Set<string> = new Set();
 
   constructor(
     private fb: FormBuilder,
@@ -124,6 +125,7 @@ export class CreateTaskComponent implements OnInit {
       (data) => {
         this.selectedClients = data.clients;
         this.taskForm.patchValue({ selectedClients: [] });
+        this.selectedClientIds.clear(); 
       },
       (error) => {
         this.toastr.error('Error al cargar los detalles del aula seleccionada');
@@ -131,6 +133,20 @@ export class CreateTaskComponent implements OnInit {
     );
   }
 
+  toggleSelectAll() {
+    const allSelected = this.areAllSelected();
+    if (allSelected) {
+      this.selectedClientIds.clear(); 
+    } else {
+      this.selectedClients.forEach(client => this.selectedClientIds.add(client.uuid)); 
+    }
+    this.taskForm.get('selectedClients')!.setValue(Array.from(this.selectedClientIds));
+  }
+
+  areAllSelected(): boolean {
+    return this.selectedClients.length > 0 && this.selectedClients.every(client => this.selectedClientIds.has(client.uuid));
+  }
+
   saveTask(): void {
     if (this.taskForm.invalid) {
       this.toastr.error('Por favor, rellene todos los campos obligatorios');
@@ -143,16 +159,16 @@ export class CreateTaskComponent implements OnInit {
     ? formData.extraCommands.map((id: any) => `/commands/${id}`)
     : null;
 
-  const payload: any = {
-    commandGroups: formData.commandGroup ? [`/command-groups/${formData.commandGroup}`] : null,
-    dateTime: dateTime,
-    notes: formData.notes || '',
-    clients: this.selectedClients.map((client: any) => client['@id']),
-  };
+    const payload: any = {
+      commandGroups: formData.commandGroup ? [`/command-groups/${formData.commandGroup}`] : null,
+      dateTime: dateTime,
+      notes: formData.notes || '',
+      clients: Array.from(this.selectedClientIds).map((uuid: string) => `/clients/${uuid}`), 
+    };
 
-  if (selectedCommands) {
-    payload.commands = selectedCommands;
-  }
+    if (selectedCommands) {
+      payload.commands = selectedCommands;
+    }
 
     if (this.editing) {
       const taskId = this.data.task.uuid;