From 0b0ca83ac231c217dea0d9144852fef63e396594 Mon Sep 17 00:00:00 2001 From: apuente Date: Thu, 19 Sep 2024 15:18:28 +0200 Subject: [PATCH] Refactor create-command component and commands component --- ogWebconsole/src/app/app.module.ts | 10 +- .../command-detail.component.css | 97 +++++++--------- .../command-detail.component.html | 36 +++++- .../command-detail.component.ts | 66 +++++++++-- .../components/commands/commands.component.ts | 23 ++-- .../create-command.component.css | 105 +++++++----------- .../create-command.component.html | 22 ++-- .../create-command.component.ts | 2 +- 8 files changed, 202 insertions(+), 159 deletions(-) diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 35abf16..7f82a24 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -54,7 +54,7 @@ import { MatExpansionModule } from '@angular/material/expansion'; import { DragDropModule } from '@angular/cdk/drag-drop'; import { ToastrModule } from 'ngx-toastr'; import { ShowOrganizationalUnitComponent } from './components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component'; -import {MatGridList, MatGridTile} from "@angular/material/grid-list"; +import { MatGridList, MatGridTile } from "@angular/material/grid-list"; import { TreeViewComponent } from './components/groups/tree-view/tree-view.component'; import { MatNestedTreeNode, @@ -66,7 +66,7 @@ import { } from "@angular/material/tree"; import { LegendComponent } from './components/groups/legend/legend.component'; import { ClassroomViewDialogComponent } from './components/groups/classroom-view/classroom-view-modal'; -import {MatPaginator} from "@angular/material/paginator"; +import { MatPaginator } from "@angular/material/paginator"; import { SaveFiltersDialogComponent } from './components/groups/save-filters-dialog/save-filters-dialog.component'; import { AcctionsModalComponent } from './components/groups/acctions-modal/acctions-modal.component'; import { ImagesComponent } from './components/ogboot/images/images.component'; @@ -75,7 +75,7 @@ import { InfoImageComponent } from './components/ogboot/images/info-image/info-i import { PxeComponent } from './components/ogboot/pxe/pxe.component'; import { CreatePxeTemplateComponent } from './components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component'; import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-boot-files.component'; -import {MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelTitle} from "@angular/material/expansion"; +import { MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelTitle } from "@angular/material/expansion"; import { OgbootStatusComponent } from './components/ogboot/ogboot-status/ogboot-status.component'; import { CreatePxeBootFileComponent } from './components/ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component'; import { NgxChartsModule } from '@swimlane/ngx-charts'; @@ -86,6 +86,8 @@ import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets import { CommandsComponent } from './components/commands/commands.component'; import { CommandDetailComponent } from './components/commands/command-detail/command-detail/command-detail.component'; import { CreateCommandComponent } from './components/commands/create-command/create-command.component'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatNativeDateModule } from '@angular/material/core'; @NgModule({ declarations: [ AppComponent, @@ -156,6 +158,8 @@ import { CreateCommandComponent } from './components/commands/create-command/cre MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip, MatExpansionModule, NgxChartsModule, + MatDatepickerModule, + MatNativeDateModule, ToastrModule.forRoot( { timeOut: 5000, diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css index 145e390..d444716 100644 --- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css +++ b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.css @@ -1,81 +1,64 @@ -.modal-container { - background-color: #fff; +.header-container { + background-color: #f8f9fa; padding: 20px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: calc(100% - 20px); /* Ajusta el ancho para dejar un margen */ - height: calc(100% - 20px); /* Ajusta la altura para dejar un margen */ - margin: 10px; /* Añade el margen para que no esté pegado a los bordes */ + border-bottom: 1px solid #dee2e6; display: flex; - flex-direction: column; justify-content: space-between; - font-family: 'Roboto', sans-serif; - box-sizing: border-box; /* Asegura que los bordes y el padding se incluyan en el tamaño */ + align-items: center; } -.modal-title { +.title { font-size: 1.5em; - margin-bottom: 15px; - color: #333; - border-bottom: 2px solid #eee; - padding-bottom: 10px; -} - -.modal-content { - flex-grow: 1; - overflow-y: auto; - padding: 10px; /* Añade espacio entre el contenido y los bordes del modal */ - box-sizing: border-box; /* Asegura que el padding esté dentro del ancho del modal */ -} - -.modal-content p { - margin: 10px 0; - font-size: 1em; - color: #555; -} - -.script-display { - margin-top: 20px; - background-color: #282c34; - color: #ffffff; - padding: 15px; - border-radius: 8px; - font-size: 0.9em; - overflow: auto; + color: #343a40; + margin: 0; } .button-row { display: flex; - justify-content: flex-end; - margin-top: 20px; - padding: 10px; /* Añade espacio en el borde inferior */ + align-items: center; } .button-row button { - margin-left: 10px; -} - -.primary-button { background-color: #007bff; color: #fff; + border-radius: 4px; + padding: 8px 16px; + font-size: 1em; + font-weight: 500; } -.accent-button { - background-color: #17a2b8; - color: #fff; +.button-row button:hover { + background-color: #0056b3; } -.cancel-button { - background-color: #dc3545; - color: #fff; +.table-container { + padding: 20px; + background-color: #fff; } -.primary-button:hover, -.accent-button:hover, -.cancel-button:hover { - opacity: 0.9; +.mat-elevation-z8 { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } -pre { - margin: 0; - font-family: 'Courier New', Courier, monospace; +.mat-header-cell { + background-color: #e9ecef; + color: #495057; + font-weight: bold; + text-align: left; + padding: 16px; +} + +.mat-cell { + padding: 16px; + color: #495057; + border-bottom: 1px solid #dee2e6; +} + +.mat-row:hover { + background-color: #f1f1f1; + cursor: pointer; +} + +.mat-header-row { + border-bottom: 2px solid #007bff; } diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.html b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.html index 676eedc..34a38fe 100644 --- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.html +++ b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.html @@ -12,8 +12,42 @@ +
+
+

Selecciona los clientes:

+ + Clientes + + + {{ client.name }} + + + + Debes seleccionar al menos un cliente. + + + + Programar ejecución + +
+ + Fecha + + + + + + Hora + + +
+
+
+
- +
diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts index 288ad9c..8c3c3c3 100644 --- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts +++ b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts @@ -1,24 +1,70 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; import { CreateCommandComponent } from '../../create-command/create-command.component'; +import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-command-detail', templateUrl: './command-detail.component.html', styleUrls: ['./command-detail.component.css'] }) -export class CommandDetailComponent { +export class CommandDetailComponent implements OnInit { + form!: FormGroup; + clients: any[] = []; + showClientSelect = false; + showDatePicker = false; + canExecute = false; constructor( + private fb: FormBuilder, + private http: HttpClient, public dialogRef: MatDialogRef, private dialog: MatDialog, - @Inject(MAT_DIALOG_DATA) public data: any // Recibe el comando desde el componente padre + @Inject(MAT_DIALOG_DATA) public data: any ) {} - - // Funciones para los botones + + ngOnInit(): void { + this.form = this.fb.group({ + selectedClients: [[], Validators.required], + scheduleExecution: [false], + scheduleDate: [''], + scheduleTime: [''] + }); + + this.http.get('http://127.0.0.1:8001/clients?page=1&itemsPerPage=30').subscribe(response => { + this.clients = response['hydra:member']; + }); + } + execute(): void { - console.log('Ejecutar comando:', this.data); - this.dialogRef.close(); // Cierra el modal después de ejecutar + if (!this.showClientSelect) { + this.showClientSelect = true; + } else { + if (this.form.get('selectedClients')?.value.length > 0) { + console.log('Ejecutar comando con los siguientes clientes:', this.form.value.selectedClients); + this.dialogRef.close(); + } else { + this.form.get('selectedClients')?.markAsTouched(); + } + } + } + + onClientSelectionChange(event: any): void { + this.canExecute = this.form.get('selectedClients')?.value.length > 0; + } + + onScheduleChange(event: any): void { + this.showDatePicker = event.checked; + if (event.checked) { + this.form.get('scheduleDate')?.setValidators(Validators.required); + this.form.get('scheduleTime')?.setValidators(Validators.required); + } else { + this.form.get('scheduleDate')?.clearValidators(); + this.form.get('scheduleTime')?.clearValidators(); + } + this.form.get('scheduleDate')?.updateValueAndValidity(); + this.form.get('scheduleTime')?.updateValueAndValidity(); } edit(): void { @@ -29,12 +75,14 @@ export class CommandDetailComponent { dialogRef.afterClosed().subscribe(result => { if (result) { + console.log('Comando editado:', result); + this.data = result; } }); } cancel(): void { - console.log('Comando recibido:', this.data); // Muestra el comando en la consola - this.dialogRef.close(); // Cierra el modal sin hacer nada + console.log('Comando cancelado'); + this.dialogRef.close(); } } diff --git a/ogWebconsole/src/app/components/commands/commands.component.ts b/ogWebconsole/src/app/components/commands/commands.component.ts index 0c8ba79..cff663e 100644 --- a/ogWebconsole/src/app/components/commands/commands.component.ts +++ b/ogWebconsole/src/app/components/commands/commands.component.ts @@ -32,10 +32,14 @@ export class CommandsComponent implements OnInit { } openCommandDetailModal(command: any): void { - this.dialog.open(CommandDetailComponent, { + const dialogRef = this.dialog.open(CommandDetailComponent, { width: '800px', data: command }); + + dialogRef.afterClosed().subscribe(result => { + this.loadCommands(); + }); } openCreateCommandModal(): void { @@ -44,22 +48,9 @@ export class CommandsComponent implements OnInit { }); dialogRef.afterClosed().subscribe(result => { - if (result) { - this.loadCommands(); - } + this.loadCommands(); }); } - openEditCommandModal(command: any): void { - const dialogRef = this.dialog.open(CreateCommandComponent, { - width: '600px', - data: { command } // Pasar el comando para editar - }); - - dialogRef.afterClosed().subscribe(result => { - if (result) { - this.loadCommands(); - } - }); - } + } diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.css b/ogWebconsole/src/app/components/commands/create-command/create-command.component.css index 93eb0fc..96352a5 100644 --- a/ogWebconsole/src/app/components/commands/create-command/create-command.component.css +++ b/ogWebconsole/src/app/components/commands/create-command/create-command.component.css @@ -1,62 +1,43 @@ -/* Estilo general para el modal */ -.mat-dialog-container { - padding: 24px; - background: #fff; - border-radius: 8px; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); - } - - /* Título del modal */ - .mat-dialog-title { - font-size: 1.5rem; - font-weight: 500; - color: #333; - margin-bottom: 16px; - } - - /* Contenedor del formulario */ - form { - display: flex; - flex-direction: column; - } - - /* Espaciado entre campos */ - mat-form-field { - margin-bottom: 16px; - } - - /* Estilos para los botones */ - button { - margin: 8px; - } - - /* Botón de añadir (primario) */ - button[mat-flat-button] { - font-weight: 600; - } - - /* Botón de cancelar (secundario) */ - button[mat-button] { - color: #666; - border: 1px solid #ddd; - border-radius: 4px; - background: #f5f5f5; - padding: 8px 16px; - } - - /* Botón de añadir (primario) */ - button[mat-flat-button][color="primary"] { - background-color: #3f51b5; - color: #fff; - border-radius: 4px; - padding: 8px 16px; - } - - mat-checkbox { - margin-bottom: 16px; - } - - textarea { - resize: vertical; - } - \ No newline at end of file +.dialog-title { + font-size: 1.5em; + color: #343a40; + margin: 0; + border-bottom: 2px solid #007bff; + padding-bottom: 10px; +} + +.command-form { + padding: 20px; + background-color: #fff; +} + +.form-field { + width: 100%; + margin-bottom: 20px; +} + +.checkbox-group { + display: flex; + flex-direction: column; + margin-bottom: 20px; +} + +.action-buttons { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +.cancel-button { + margin-right: 10px; + color: #dc3545; +} + +.submit-button { + background-color: #007bff; + color: #fff; +} + +.submit-button:hover { + background-color: #0056b3; +} diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.html b/ogWebconsole/src/app/components/commands/create-command/create-command.component.html index 57a2fa9..c228b15 100644 --- a/ogWebconsole/src/app/components/commands/create-command/create-command.component.html +++ b/ogWebconsole/src/app/components/commands/create-command/create-command.component.html @@ -1,26 +1,28 @@ -

{{ isEditMode ? 'Editar Comando' : 'Añadir Comando' }}

+

{{ isEditMode ? 'Editar Comando' : 'Añadir Comando' }}

-
- + + Nombre - + Script - Solo lectura - Habilitado +
+ Solo lectura + Habilitado +
- + Comentarios -
- - +
+ +
diff --git a/ogWebconsole/src/app/components/commands/create-command/create-command.component.ts b/ogWebconsole/src/app/components/commands/create-command/create-command.component.ts index 7419308..7a07a8f 100644 --- a/ogWebconsole/src/app/components/commands/create-command/create-command.component.ts +++ b/ogWebconsole/src/app/components/commands/create-command/create-command.component.ts @@ -42,7 +42,7 @@ export class CreateCommandComponent { if (this.isEditMode) { this.http.patch(`${this.apiUrl}/${this.data.command.uuid}`, commandData).subscribe( response => { - this.dialogRef.close(true); + this.dialogRef.close(commandData); }, error => { console.error('Error editing command', error);