refs #1045 Refactor create task stepper

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;
 }

ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html

@@ -2,14 +2,16 @@
 
 <form [formGroup]="taskForm" class="task-form">
   <mat-dialog-content>
-    <mat-horizontal-stepper linear>
+
-      <!-- Paso 1: Información y Selecciona Comandos -->
+    <h3 class="section-title">Información</h3>
-      <mat-step label="Información y Selecciona Comandos">
+    <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>
 
+    <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()">
@@ -20,13 +22,6 @@
       <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
     </mat-form-field>
 
-        <div class="button-container">
-          <button mat-raised-button color="primary" matStepperNext [disabled]="taskForm.get('commandGroup')?.invalid">Continuar</button>
-        </div>
-      </mat-step>
-
-      <!-- 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>
@@ -36,14 +31,8 @@
       </mat-select>
     </mat-form-field>
 
-        <div class="button-container">
+    <h3 class="section-title">Fecha y hora de ejecución</h3>
-          <button mat-button matStepperPrevious>Atrás</button>
+    <mat-divider></mat-divider>
-          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
-        </div>
-      </mat-step>
-
-      <!-- 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">
@@ -58,14 +47,8 @@
       <mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
     </mat-form-field>
 
-        <div class="button-container">
+    <h3 class="section-title">Selecciona destino</h3>
-          <button mat-button matStepperPrevious>Atrás</button>
+    <mat-divider></mat-divider>
-          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
-        </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()">
@@ -77,7 +60,7 @@
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
-    <mat-label>Selecciona aula</mat-label>
+      <mat-label>Selecciona Aula</mat-label>
       <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
         <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
           {{ child.name }}
@@ -98,11 +81,8 @@
     </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>

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,29 +99,53 @@ export class CreateTaskComponent implements OnInit {
     }
   }
 
-  onCommandGroupChange(): void {
+  private collectClassrooms(unit: any): any[] {
-    const selectedGroupId = this.taskForm.get('commandGroup')?.value;
+    let classrooms = [];
-    this.http.get<any>(`${this.baseUrl}/command-groups/${selectedGroupId}`).subscribe(
+    if (unit.type === 'classroom') {
-      (data) => {
+      classrooms.push(unit);
-        this.selectedGroupCommands = data.commands;
-      },
-      (error) => {
-        this.toastr.error('Error al cargar los comandos del grupo seleccionado');
     }
-    );
+    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);
-    this.selectedUnitChildren = selectedUnit ? selectedUnit.children : [];
+
+    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;
-    this.http.get<any>(`${this.baseUrl}${selectedChildId}`).subscribe(
+
+    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();
       },
@@ -147,6 +169,18 @@ export class CreateTaskComponent implements OnInit {
     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(
+      (data) => {
+        this.selectedGroupCommands = data.commands;
+      },
+      (error) => {
+        this.toastr.error('Error al cargar los comandos del grupo seleccionado');
+      }
+    );
+  }
+
   saveTask(): void {
     if (this.taskForm.invalid) {
       this.toastr.error('Por favor, rellene todos los campos obligatorios');