From fd64a0be841212156de4f561e65840e5acf56b1e Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Mon, 4 Nov 2024 12:45:42 +0100
Subject: [PATCH] refs #1045 Refactor create task stepper

---
 .../create-task/create-task.component.css     |  10 +-
 .../create-task/create-task.component.html    | 164 ++++++++----------
 .../create-task/create-task.component.ts      | 112 +++++++-----
 3 files changed, 153 insertions(+), 133 deletions(-)

diff --git a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
index d5dad12..3c41e87 100644
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
@@ -12,10 +12,16 @@
 
 .button-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   margin-top: 20px;
 }
 
 mat-form-field {
-  margin-bottom: 16px; /* Espaciado entre campos */
+  margin-bottom: 16px;
+}
+
+.section-title {
+  margin-top: 24px;
+  margin-bottom: 8px;
+  font-weight: 500;
 }
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 8b88d6b..fc2ed1e 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
@@ -2,107 +2,87 @@
 
 <form [formGroup]="taskForm" class="task-form">
   <mat-dialog-content>
-    <mat-horizontal-stepper linear>
-      <!-- Paso 1: Información y Selecciona Comandos -->
-      <mat-step label="Información y Selecciona Comandos">
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Información</mat-label>
-          <textarea matInput formControlName="notes" placeholder="Ingresa tus notas aquí"></textarea>
-        </mat-form-field>
 
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Selecciona Comandos</mat-label>
-          <mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
-            <mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
-              {{ group.name }}
-            </mat-option>
-          </mat-select>
-          <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
-        </mat-form-field>
+    <h3 class="section-title">Información</h3>
+    <mat-divider></mat-divider>
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Información</mat-label>
+      <textarea matInput formControlName="notes" placeholder="Ingresa tus notas aquí"></textarea>
+    </mat-form-field>
 
-        <div class="button-container">
-          <button mat-raised-button color="primary" matStepperNext [disabled]="taskForm.get('commandGroup')?.invalid">Continuar</button>
-        </div>
-      </mat-step>
+    <h3 class="section-title">Seleccón de comandos</h3>
+    <mat-divider></mat-divider>
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Selecciona Comandos</mat-label>
+      <mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
+        <mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
+          {{ group.name }}
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
+    </mat-form-field>
 
-      <!-- Paso 2: Selecciona Comandos Individuales -->
-      <mat-step label="Selecciona Comandos Individuales">
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Selecciona Comandos Individuales (Opcional)</mat-label>
-          <mat-select formControlName="extraCommands" multiple>
-            <mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid">
-              {{ command.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Selecciona Comandos Individuales (Opcional)</mat-label>
+      <mat-select formControlName="extraCommands" multiple>
+        <mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid">
+          {{ command.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
 
-        <div class="button-container">
-          <button mat-button matStepperPrevious>Atrás</button>
-          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
-        </div>
-      </mat-step>
+    <h3 class="section-title">Fecha y hora de ejecución</h3>
+    <mat-divider></mat-divider>
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Fecha de Ejecución</mat-label>
+      <input matInput [matDatepicker]="picker" formControlName="date" placeholder="Selecciona una fecha">
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+      <mat-error *ngIf="taskForm.get('date')?.invalid">Este campo es obligatorio</mat-error>
+    </mat-form-field>
 
-      <!-- Paso 3: Fecha de Ejecución y Hora -->
-      <mat-step label="Fecha de Ejecución y Hora">
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Fecha de Ejecución</mat-label>
-          <input matInput [matDatepicker]="picker" formControlName="date" placeholder="Selecciona una fecha">
-          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-          <mat-datepicker #picker></mat-datepicker>
-          <mat-error *ngIf="taskForm.get('date')?.invalid">Este campo es obligatorio</mat-error>
-        </mat-form-field>
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Hora de Ejecución</mat-label>
+      <input matInput type="time" formControlName="time" placeholder="Selecciona una hora">
+      <mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
+    </mat-form-field>
 
-        <mat-form-field appearance="fill" class="full-width">
-          <mat-label>Hora de Ejecución</mat-label>
-          <input matInput type="time" formControlName="time" placeholder="Selecciona una hora">
-          <mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
-        </mat-form-field>
+    <h3 class="section-title">Selecciona destino</h3>
+    <mat-divider></mat-divider>
+    <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>
 
-        <div class="button-container">
-          <button mat-button matStepperPrevious>Atrás</button>
-          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
-        </div>
-      </mat-step>
+    <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>
 
-     <!-- 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 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>
 
-  <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>
+    <div class="button-container">
+      <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
+    </div>
 
-  <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>
-
-    </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 4b06e85..8a90f7e 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
@@ -49,8 +49,6 @@ export class CreateTaskComponent implements OnInit {
       this.editing = true;
       this.loadTaskData(this.data.task);
     }
-
-    console.log(this.data);
   }
 
   loadCommandGroups(): void {
@@ -101,6 +99,76 @@ export class CreateTaskComponent implements OnInit {
     }
   }
 
+  private collectClassrooms(unit: any): any[] {
+    let classrooms = [];
+    if (unit.type === 'classroom') {
+      classrooms.push(unit);
+    }
+    if (unit.children && unit.children.length > 0) {
+      for (let child of unit.children) {
+        classrooms = classrooms.concat(this.collectClassrooms(child));
+      }
+    }
+    return classrooms;
+  }
+
+  onOrganizationalUnitChange(): void {
+    const selectedUnitId = this.taskForm.get('organizationalUnit')?.value;
+    const selectedUnit = this.availableOrganizationalUnits.find(unit => unit['@id'] === selectedUnitId);
+
+    if (selectedUnit) {
+      this.selectedUnitChildren = this.collectClassrooms(selectedUnit);
+    } else {
+      this.selectedUnitChildren = [];
+    }
+
+    this.taskForm.patchValue({ selectedChild: '', selectedClients: [] });
+    this.selectedClients = [];
+    this.selectedClientIds.clear();
+  }
+
+  onChildChange(): void {
+    const selectedChildId = this.taskForm.get('selectedChild')?.value;
+
+    if (!selectedChildId) {
+      this.selectedClients = [];
+      return;
+    }
+
+    const url = `${this.baseUrl}${selectedChildId}`.replace(/([^:]\/)\/+/g, '$1');
+
+    this.http.get<any>(url).subscribe(
+      (data) => {
+        if (Array.isArray(data.clients) && data.clients.length > 0) {
+          this.selectedClients = data.clients;
+        } else {
+          this.selectedClients = [];
+          this.toastr.warning('El aula seleccionada no tiene clientes.');
+        }
+
+        this.taskForm.patchValue({ selectedClients: [] });
+        this.selectedClientIds.clear();
+      },
+      (error) => {
+        this.toastr.error('Error al cargar los detalles del aula seleccionada');
+      }
+    );
+  }
+
+  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));
+  }
+
   onCommandGroupChange(): void {
     const selectedGroupId = this.taskForm.get('commandGroup')?.value;
     this.http.get<any>(`${this.baseUrl}/command-groups/${selectedGroupId}`).subscribe(
@@ -113,40 +181,6 @@ export class CreateTaskComponent implements OnInit {
     );
   }
 
-  onOrganizationalUnitChange(): void {
-    const selectedUnitId = this.taskForm.get('organizationalUnit')?.value;
-    const selectedUnit = this.availableOrganizationalUnits.find(unit => unit['@id'] === selectedUnitId);
-    this.selectedUnitChildren = selectedUnit ? selectedUnit.children : [];
-  }
-
-  onChildChange(): void {
-    const selectedChildId = this.taskForm.get('selectedChild')?.value;
-    this.http.get<any>(`${this.baseUrl}${selectedChildId}`).subscribe(
-      (data) => {
-        this.selectedClients = data.clients;
-        this.taskForm.patchValue({ selectedClients: [] });
-        this.selectedClientIds.clear(); 
-      },
-      (error) => {
-        this.toastr.error('Error al cargar los detalles del aula seleccionada');
-      }
-    );
-  }
-
-  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');
@@ -156,14 +190,14 @@ export class CreateTaskComponent implements OnInit {
     const formData = this.taskForm.value;
     const dateTime = this.combineDateAndTime(formData.date, formData.time);
     const selectedCommands = formData.extraCommands && formData.extraCommands.length > 0
-    ? formData.extraCommands.map((id: any) => `/commands/${id}`)
-    : null;
+      ? 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: Array.from(this.selectedClientIds).map((uuid: string) => `/clients/${uuid}`), 
+      clients: Array.from(this.selectedClientIds).map((uuid: string) => `/clients/${uuid}`),
     };
 
     if (selectedCommands) {