From 7927addaab7bfe6091f1511926b9e6edb3a5e0c8 Mon Sep 17 00:00:00 2001 From: apuente Date: Fri, 27 Sep 2024 14:21:54 +0200 Subject: [PATCH] refs #781 command task create modal added stepper --- .../commands-task.component.html | 114 ++++++------- .../commands-task/commands-task.component.ts | 6 +- .../create-task/create-task.component.css | 63 ++++++- .../create-task/create-task.component.html | 156 +++++++++++------- .../create-task/create-task.component.ts | 54 ++++-- .../client-tab-view.component.css | 4 + .../client-tab-view.component.html | 2 +- .../create-client/create-client.component.ts | 2 +- 8 files changed, 266 insertions(+), 135 deletions(-) diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html index 0efdd5e..a53db86 100644 --- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html +++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html @@ -1,60 +1,60 @@
-

Administrar Tareas

-
- -
+

Administrar Tareas

+
+
- - - - - - - - - - - - - - - - - - - - - - - - + + + + +
Creado por {{ task.createdBy }} Fecha de Ejecución {{ task.dateTime | date:'short' }} Estado {{ task.enabled ? 'Habilitado' : 'Deshabilitado' }} Acciones - + + +
+ + + diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts index d4e7fd6..2cc8269 100644 --- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts +++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts @@ -19,7 +19,7 @@ export class CommandsTaskComponent implements OnInit { itemsPerPage: number = 10; page: number = 1; pageSizeOptions: number[] = [5, 10, 20, 40, 100]; - displayedColumns: string[] = ['name', 'scheduledDate', 'enabled', 'actions']; // Actualizado con las nuevas columnas + displayedColumns: string[] = ['notes','name', 'scheduledDate', 'enabled', 'actions']; private apiUrl = `${this.baseUrl}/command-tasks`; constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {} @@ -64,7 +64,7 @@ export class CommandsTaskComponent implements OnInit { deleteTask(task: any): void { this.dialog.open(DeleteModalComponent, { width: '300px', - data: { name: task.createdBy }, // Usamos 'createdBy' en lugar de 'name' ya que cambiaste la columna + data: { name: task.createdBy }, }).afterClosed().subscribe((result) => { if (result) { this.http.delete(`${this.apiUrl}/${task.uuid}`).subscribe({ @@ -81,7 +81,7 @@ export class CommandsTaskComponent implements OnInit { } onPageChange(event: any): void { - this.page = event.pageIndex + 1; // pageIndex es cero basado, así que sumamos 1 + this.page = event.pageIndex + 1; this.itemsPerPage = event.pageSize; this.loadTasks(); } 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 c1ecdce..2d6006f 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 @@ -22,4 +22,65 @@ .command-item:hover { background-color: #e9e9e9; } - \ No newline at end of file + + /* Estilos generales para el dialogo */ +.mat-dialog-content { + padding: 20px; + max-width: 600px; /* Ancho máximo del dialogo */ +} + +/* Estilos para el stepper */ +.mat-horizontal-stepper { + margin: 20px 0; +} + +/* Estilos para cada paso */ +.mat-step { + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + background-color: #ffffff; /* Fondo blanco para los pasos */ +} + +/* Estilos para el encabezado de los pasos */ +.mat-step-header { + background-color: #f5f5f5; /* Fondo gris claro para el encabezado */ + padding: 10px; + border-radius: 4px; + font-weight: 600; /* Negrita para el texto del encabezado */ +} + +/* Estilos para los botones */ +button.mat-button { + margin-right: 10px; +} + +/* Estilos para los campos de formulario */ +.mat-form-field { + margin-bottom: 20px; /* Espaciado entre campos */ +} + +/* Estilos para errores */ +.mat-error { + font-size: 0.875em; /* Tamaño de fuente más pequeño para mensajes de error */ + color: #d32f2f; /* Color rojo para errores */ +} + +/* Estilos para listas de comandos */ +.commands-list { + margin: 20px 0; + border: 1px solid #e0e0e0; /* Borde gris claro */ + border-radius: 4px; + padding: 10px; + background-color: #fafafa; /* Fondo gris muy claro */ +} + +/* Estilos para elementos de comando */ +.command-item { + padding: 5px 0; + border-bottom: 1px solid #e0e0e0; /* Separación entre comandos */ +} + +.command-item:last-child { + border-bottom: none; /* Quitar borde del último elemento */ +} 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 3562d2b..136f66c 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 @@ -1,68 +1,104 @@

Crear Tarea

- - - - Selecciona Comandos - - - {{ group.name }} - - - Este campo es obligatorio - - - Selecciona Grupo de Comandoss - - - {{ group.name }} - - - Este campo es obligatorio - +
+ + + + + + Información + + - -
-

Comandos del Grupo Seleccionado

-
- {{ command.name }} -
-
+ + Selecciona Comandos + + + {{ group.name }} + + + Este campo es obligatorio + - - - Selecciona Comandos Individuales (Opcional) - - - {{ command.name }} - - - +
+ +
+ - - - Fecha de Ejecución - - - - Este campo es obligatorio - + + + + Selecciona Comandos Individuales (Opcional) + + + {{ command.name }} + + + - - - Hora de Ejecución - - Este campo es obligatorio - +
+ + +
+ - - - Notas - - - + + + + Fecha de Ejecución + + + + Este campo es obligatorio + - - - - + + Hora de Ejecución + + Este campo es obligatorio + + +
+ + +
+ + + + + + Selecciona Unidad Organizacional + + + {{ unit.name }} + + + Este campo es obligatorio + + + + Selecciona aula + + + {{ child.name }} + + + + + + Selecciona Clientes + + + {{ client.name }} ({{ client.ip }}) + + + + +
+ + +
+ + + +
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 c6a636d..88a8813 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 @@ -16,29 +16,34 @@ export class CreateTaskComponent implements OnInit { selectedGroupCommands: any[] = []; availableIndividualCommands: any[] = []; apiUrl = `${this.baseUrl}/command-tasks`; - editing: boolean = false; // Flag to check if in edit mode + editing: boolean = false; + availableOrganizationalUnits: any[] = []; + selectedUnitChildren: any[] = []; + selectedClients: any[] = []; constructor( private fb: FormBuilder, private http: HttpClient, private toastr: ToastrService, public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any // Inject the task data if editing + @Inject(MAT_DIALOG_DATA) public data: any ) { this.taskForm = this.fb.group({ commandGroup: [''], extraCommands: [[]], date: ['', Validators.required], time: ['', Validators.required], - notes: [''] + notes: [''], + organizationalUnit: ['', Validators.required], + selectedChild: [''], + selectedClients: [[]] }); } ngOnInit(): void { this.loadCommandGroups(); this.loadIndividualCommands(); - - // If task data is provided, load it into the form (edit mode) + this.loadOrganizationalUnits(); if (this.data && this.data.task) { this.editing = true; this.loadTaskData(this.data.task); @@ -67,17 +72,27 @@ export class CreateTaskComponent implements OnInit { ); } + loadOrganizationalUnits(): void { + this.http.get('http://127.0.0.1:8001/organizational-units?page=1&itemsPerPage=30').subscribe( + (data) => { + this.availableOrganizationalUnits = data['hydra:member'].filter((unit: any) => unit['type'] === 'organizational-unit'); + }, + (error) => { + this.toastr.error('Error al cargar las unidades organizacionales'); + } + ); + } + loadTaskData(task: any): void { - // Populate form fields with task data when editing this.taskForm.patchValue({ commandGroup: task.commandGroup ? task.commandGroup['@id'] : '', extraCommands: task.commands ? task.commands.map((cmd: any) => cmd['@id']) : [], date: task.dateTime ? task.dateTime.split('T')[0] : '', time: task.dateTime ? task.dateTime.split('T')[1].slice(0, 5) : '', - notes: task.notes || '' + notes: task.notes || '', + organizationalUnit: task.organizationalUnit ? task.organizationalUnit['@id'] : '' }); - // If a command group is selected, load its commands if (task.commandGroup) { this.selectedGroupCommands = task.commandGroup.commands; } @@ -95,6 +110,25 @@ 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(`${this.baseUrl}${selectedChildId}`).subscribe( + (data) => { + this.selectedClients = data.clients; + this.taskForm.patchValue({ selectedClients: [] }); + }, + (error) => { + this.toastr.error('Error al cargar los detalles del aula seleccionada'); + } + ); + } + saveTask(): void { if (this.taskForm.invalid) { this.toastr.error('Por favor, rellene todos los campos obligatorios'); @@ -103,7 +137,6 @@ export class CreateTaskComponent implements OnInit { const formData = this.taskForm.value; const dateTime = this.combineDateAndTime(formData.date, formData.time); - const selectedCommands = formData.extraCommands.length > 0 ? formData.extraCommands.map((id: any) => `/commands/${id}`) : [""]; @@ -116,7 +149,6 @@ export class CreateTaskComponent implements OnInit { }; if (this.editing) { - // Perform a PATCH request if editing an existing task const taskId = this.data.task.uuid; this.http.patch(`${this.apiUrl}/${taskId}`, payload).subscribe({ next: () => { @@ -128,7 +160,6 @@ export class CreateTaskComponent implements OnInit { } }); } else { - // Perform a POST request if creating a new task this.http.post(this.apiUrl, payload).subscribe({ next: () => { this.toastr.success('Tarea creada con éxito'); @@ -144,7 +175,6 @@ export class CreateTaskComponent implements OnInit { combineDateAndTime(date: string, time: string): string { const dateObj = new Date(date); const [hours, minutes] = time.split(':').map(Number); - dateObj.setHours(hours, minutes, 0); return dateObj.toISOString(); } diff --git a/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.css b/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.css index 594f4e0..27cd5b5 100644 --- a/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.css +++ b/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.css @@ -30,3 +30,7 @@ flex: 2; padding: 5px; } + +button{ + margin-left: 10px; +} diff --git a/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.html b/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.html index 45c040a..b5dcd06 100644 --- a/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.html +++ b/ogWebconsole/src/app/components/groups/client-tab-view/client-tab-view.component.html @@ -2,7 +2,7 @@

Administrar clientes

- +
diff --git a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts index 08e2647..9393784 100644 --- a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts +++ b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts @@ -53,7 +53,7 @@ export class CreateClientComponent implements OnInit { ip: ['', Validators.required], menu: [this.data.organizationalUnit && this.data.organizationalUnit.networkSettings && this.data.organizationalUnit.networkSettings.menu ? this.data.organizationalUnit.networkSettings.menu['@id'] : null], hardwareProfile: [this.data.organizationalUnit && this.data.organizationalUnit.networkSettings && this.data.organizationalUnit.networkSettings.hardwareProfile ? this.data.organizationalUnit.networkSettings.hardwareProfile['@id'] : null], - ogLive: [null, Validators.required] + ogLive: [null] }); }