opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #1045 Refactor create task stepper
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

oggui/translations
Alvaro Puente Mella 2024-11-04 12:45:42 +01:00
parent e20ec14f5b
commit fd64a0be84
3 changed files with 153 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
View File

@ -12,10 +12,16 @@
.button-container { .button-container {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
margin-top: 20px; margin-top: 20px;
} }
mat-form-field { mat-form-field {
margin-bottom: 16px; /* Espaciado entre campos */ margin-bottom: 16px;
}
.section-title {
margin-top: 24px;
margin-bottom: 8px;
font-weight: 500;
} }

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

@ -2,107 +2,87 @@
<form [formGroup]="taskForm" class="task-form"> <form [formGroup]="taskForm" class="task-form">
<mat-dialog-content> <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"> <h3 class="section-title">Información</h3>
<mat-label>Selecciona Comandos</mat-label> <mat-divider></mat-divider>
<mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()"> <mat-form-field appearance="fill" class="full-width">
<mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid"> <mat-label>Información</mat-label>
{{ group.name }} <textarea matInput formControlName="notes" placeholder="Ingresa tus notas aquí"></textarea>
</mat-option> </mat-form-field>
</mat-select>
<mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
</mat-form-field>
<div class="button-container"> <h3 class="section-title">Seleccón de comandos</h3>
<button mat-raised-button color="primary" matStepperNext [disabled]="taskForm.get('commandGroup')?.invalid">Continuar</button> <mat-divider></mat-divider>
</div> <mat-form-field appearance="fill" class="full-width">
</mat-step> <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-form-field appearance="fill" class="full-width">
<mat-step label="Selecciona Comandos Individuales"> <mat-label>Selecciona Comandos Individuales (Opcional)</mat-label>
<mat-form-field appearance="fill" class="full-width"> <mat-select formControlName="extraCommands" multiple>
<mat-label>Selecciona Comandos Individuales (Opcional)</mat-label> <mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid">
<mat-select formControlName="extraCommands" multiple> {{ command.name }}
<mat-option *ngFor="let command of availableIndividualCommands" [value]="command.uuid"> </mat-option>
{{ command.name }} </mat-select>
</mat-option> </mat-form-field>
</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> <mat-form-field appearance="fill" class="full-width">
</div> <mat-label>Fecha de Ejecución</mat-label>
</mat-step> <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-form-field appearance="fill" class="full-width">
<mat-step label="Fecha de Ejecución y Hora"> <mat-label>Hora de Ejecución</mat-label>
<mat-form-field appearance="fill" class="full-width"> <input matInput type="time" formControlName="time" placeholder="Selecciona una hora">
<mat-label>Fecha de Ejecución</mat-label> <mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
<input matInput [matDatepicker]="picker" formControlName="date" placeholder="Selecciona una fecha"> </mat-form-field>
<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"> <h3 class="section-title">Selecciona destino</h3>
<mat-label>Hora de Ejecución</mat-label> <mat-divider></mat-divider>
<input matInput type="time" formControlName="time" placeholder="Selecciona una hora"> <mat-form-field appearance="fill" class="full-width">
<mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error> <mat-label>Selecciona Unidad Organizacional</mat-label>
</mat-form-field> <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"> <mat-form-field appearance="fill" class="full-width">
<button mat-button matStepperPrevious>Atrás</button> <mat-label>Selecciona Aula</mat-label>
<button mat-raised-button color="primary" matStepperNext>Continuar</button> <mat-select formControlName="selectedChild" (selectionChange)="onChildChange()">
</div> <mat-option *ngFor="let child of selectedUnitChildren" [value]="child['@id']">
</mat-step> {{ child.name }}
</mat-option>
</mat-select>
</mat-form-field>
<!-- Paso 4: Selecciona Unidad Organizacional, Aula y Clientes --> <mat-form-field appearance="fill" class="full-width">
<mat-step label="Selecciona Unidad Organizacional, Aula y Clientes"> <mat-label>Selecciona Clientes</mat-label>
<mat-form-field appearance="fill" class="full-width"> <mat-select formControlName="selectedClients" multiple>
<mat-label>Selecciona Unidad Organizacional</mat-label> <mat-option (click)="toggleSelectAll()" [selected]="areAllSelected()">
<mat-select formControlName="organizationalUnit" (selectionChange)="onOrganizationalUnitChange()"> Seleccionar todos
<mat-option *ngFor="let unit of availableOrganizationalUnits" [value]="unit['@id']"> </mat-option>
{{ unit.name }} <mat-option *ngFor="let client of selectedClients" [value]="client.uuid">
</mat-option> {{ client.name }} ({{ client.ip }})
</mat-select> </mat-option>
<mat-error *ngIf="taskForm.get('organizationalUnit')?.invalid">Este campo es obligatorio</mat-error> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill" class="full-width"> <div class="button-container">
<mat-label>Selecciona aula</mat-label> <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
<mat-select formControlName="selectedChild" (selectionChange)="onChildChange()"> </div>
<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 (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> </mat-dialog-content>
</form> </form>

66
ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
View File

@ -49,8 +49,6 @@ export class CreateTaskComponent implements OnInit {
this.editing = true; this.editing = true;
this.loadTaskData(this.data.task); this.loadTaskData(this.data.task);
} }
console.log(this.data);
} }
loadCommandGroups(): void { 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; }
}, if (unit.children && unit.children.length > 0) {
(error) => { for (let child of unit.children) {
this.toastr.error('Error al cargar los comandos del grupo seleccionado'); classrooms = classrooms.concat(this.collectClassrooms(child));
} }
); }
return classrooms;
} }
onOrganizationalUnitChange(): void { onOrganizationalUnitChange(): void {
const selectedUnitId = this.taskForm.get('organizationalUnit')?.value; const selectedUnitId = this.taskForm.get('organizationalUnit')?.value;
const selectedUnit = this.availableOrganizationalUnits.find(unit => unit['@id'] === selectedUnitId); 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 { onChildChange(): void {
const selectedChildId = this.taskForm.get('selectedChild')?.value; 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) => { (data) => {
this.selectedClients = data.clients; 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.taskForm.patchValue({ selectedClients: [] });
this.selectedClientIds.clear(); 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)); 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 { saveTask(): void {
if (this.taskForm.invalid) { if (this.taskForm.invalid) {
this.toastr.error('Por favor, rellene todos los campos obligatorios'); this.toastr.error('Por favor, rellene todos los campos obligatorios');
@ -156,8 +190,8 @@ export class CreateTaskComponent implements OnInit {
const formData = this.taskForm.value; const formData = this.taskForm.value;
const dateTime = this.combineDateAndTime(formData.date, formData.time); const dateTime = this.combineDateAndTime(formData.date, formData.time);
const selectedCommands = formData.extraCommands && formData.extraCommands.length > 0 const selectedCommands = formData.extraCommands && formData.extraCommands.length > 0
? formData.extraCommands.map((id: any) => `/commands/${id}`) ? formData.extraCommands.map((id: any) => `/commands/${id}`)
: null; : null;
const payload: any = { const payload: any = {
commandGroups: formData.commandGroup ? [`/command-groups/${formData.commandGroup}`] : null, commandGroups: formData.commandGroup ? [`/command-groups/${formData.commandGroup}`] : null,