Update main layout and sidebar styles

ogWebconsole/src/app/app-routing.module.ts

@@ -15,7 +15,9 @@ import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-bo
 import {OgbootStatusComponent} from "./components/ogboot/ogboot-status/ogboot-status.component";
 import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
 import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
-import { CommandsComponent } from './components/commands/commands.component';
+import { CommandsComponent } from './components/commands/main-commands/commands.component';
+import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
+import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
 {
@@ -34,6 +36,8 @@ const routes: Routes = [
     { path: 'dhcp', component: OgdhcpComponent },
     { path: 'dhcp-subnets', component: OgDhcpSubnetsComponent },
     { path: 'commands', component: CommandsComponent },
+    { path: 'commands-groups', component: CommandsGroupsComponent },
+    { path: 'commands-task', component: CommandsTaskComponent },
   ],
 },
 {

ogWebconsole/src/app/app.module.ts

@@ -83,11 +83,13 @@ import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
 import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
 import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
 import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
-import { CommandsComponent } from './components/commands/commands.component';
-import { CommandDetailComponent } from './components/commands/detail-command/command-detail.component';
-import { CreateCommandComponent } from './components/commands/create-command/create-command.component';
+import { CommandsComponent } from './components/commands/main-commands/commands.component';
+import { CommandDetailComponent } from './components/commands/main-commands/detail-command/command-detail.component';
+import { CreateCommandComponent } from './components/commands/main-commands/create-command/create-command.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
+import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
+import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -132,7 +134,9 @@ import { MatNativeDateModule } from '@angular/material/core';
     AddClientsToSubnetComponent,
     CommandsComponent,
     CommandDetailComponent,
-    CreateCommandComponent
+    CreateCommandComponent,
+    CommandsGroupsComponent,
+    CommandsTaskComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html

@@ -0,0 +1 @@
+<p>commands-groups works!</p>

ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandsGroupsComponent } from './commands-groups.component';
+
+describe('CommandsGroupsComponent', () => {
+  let component: CommandsGroupsComponent;
+  let fixture: ComponentFixture<CommandsGroupsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CommandsGroupsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommandsGroupsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commands-groups',
+  templateUrl: './commands-groups.component.html',
+  styleUrl: './commands-groups.component.css'
+})
+export class CommandsGroupsComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>commands-task works!</p>

ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandsTaskComponent } from './commands-task.component';
+
+describe('CommandsTaskComponent', () => {
+  let component: CommandsTaskComponent;
+  let fixture: ComponentFixture<CommandsTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CommandsTaskComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CommandsTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commands-task',
+  templateUrl: './commands-task.component.html',
+  styleUrl: './commands-task.component.css'
+})
+export class CommandsTaskComponent {
+
+}

ogWebconsole/src/app/components/commands/main-commands/commands.component.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
 import { CommandDetailComponent } from './detail-command/command-detail.component';
 import { CreateCommandComponent } from './create-command/create-command.component';
-import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
+import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { ToastrService } from 'ngx-toastr';
 
 @Component({

ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts

@@ -3,6 +3,7 @@ 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';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-command-detail',
@@ -10,6 +11,7 @@ import { HttpClient } from '@angular/common/http';
   styleUrls: ['./command-detail.component.css']
 })
 export class CommandDetailComponent implements OnInit {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   form!: FormGroup;
   clients: any[] = [];
   showClientSelect = false;
@@ -21,8 +23,9 @@ export class CommandDetailComponent implements OnInit {
     private http: HttpClient,
     public dialogRef: MatDialogRef<CommandDetailComponent>,
     private dialog: MatDialog,
+    private toastService: ToastrService,
     @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.form = this.fb.group({
@@ -42,8 +45,24 @@ export class CommandDetailComponent implements OnInit {
       this.showClientSelect = true;
     } else {
       if (this.form.get('selectedClients')?.value.length > 0) {
-        console.log('Ejecutar comando con los siguientes clientes:', this.form.value.selectedClients);
-        console.log('Comando ejecutado', this.data.command);
+
+        const payload = {
+          clients: this.form.value.selectedClients.map((uuid: any) => `/clients/${uuid}`)
+        };
+
+        const apiUrl = `${this.baseUrl}/commands/${this.data.command.uuid}/execute`;
+
+        this.http.post(apiUrl, payload).subscribe({
+          next: () => {
+            console.log('Command executed successfully');
+            this.dialogRef.close();
+            this.toastService.success('Command executed successfully');
+          },
+          error: (error) => {
+            console.error('Error executing command:', error);
+          }
+        });
+
         this.dialogRef.close();
       } else {
         this.form.get('selectedClients')?.markAsTouched();

ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts

@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dial
 import { ToastrService } from 'ngx-toastr';
 import { CreatePxeBootFileComponent } from '../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
 import { HttpClient } from '@angular/common/http';
-import { CommandDetailComponent } from '../../commands/detail-command/command-detail.component';
+import { CommandDetailComponent } from '../../commands/main-commands/detail-command/command-detail.component';
 @Component({
   selector: 'app-acctions-modal',
   templateUrl: './acctions-modal.component.html',

ogWebconsole/src/app/layout/main-layout/main-layout.component.css

@@ -3,12 +3,16 @@
 }
 
 .container {
-  width: auto;
-  height: calc(100vh - 60px);
+  width: 100vw;
+  height: calc(100vh - 10vh); 
+}
+
+.sidebar {
+  width: 250px; 
 }
 
 .content {
   margin: 10px;
   padding: 10px;
-}
-
+  box-sizing: border-box; 
+}

ogWebconsole/src/app/layout/main-layout/main-layout.component.html

@@ -1,11 +1,11 @@
 <app-header class="header" (toggleSidebar)="toggleSidebar()"></app-header>
 
-<mat-drawer-container class="container" >
+<mat-drawer-container class="container" autosize>
   <mat-drawer class="sidebar" mode="side" opened>
     <app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
   </mat-drawer>
 
   <mat-drawer-content class="content">
-    <router-outlet />
+    <router-outlet></router-outlet>
   </mat-drawer-content>
 </mat-drawer-container>

ogWebconsole/src/app/layout/sidebar/sidebar.component.css

@@ -1,5 +1,7 @@
 mat-nav-list {
-  width: 250px;
+  width: auto; 
+  margin-right: 3px; 
+  overflow-x: hidden; 
 }
 
 mat-list-item {
@@ -8,22 +10,22 @@ mat-list-item {
   align-items: center;
 }
 
-.entry{
+.entry {
   display: flex;
   align-items: center;
   gap: 1rem;
-  padding:0.75rem;
+  padding: 0.75rem;
 }
 
 mat-icon {
   margin-right: 8px;
 }
 
-.user-logged{
+.user-logged {
   align-items: center;
   height: 70px;
   gap: 2rem;
-  padding:1rem;
+  padding: 1rem;
   font-size: medium;
 }
 
@@ -39,7 +41,7 @@ mat-icon {
 
 @media (max-width: 680px) {
   mat-nav-list {
-    width: 0px;
+    width: auto;
   }
 }
 

ogWebconsole/src/app/layout/sidebar/sidebar.component.html

@@ -15,12 +15,36 @@
   </mat-list-item>
 
   <mat-list-item>
-    <span class="entry" routerLink="/commands">
-      <mat-icon class="icon">chevron_right</mat-icon>
-      <span i18n="@@actions">Comandos</span>
+    <span class="entry" (click)="toggleCommandSub()">
+      <mat-icon class="icon">playlist_play </mat-icon>
+      <span i18n="@@actions">Acciones</span>
     </span>
   </mat-list-item>
 
+  <!-- Submenu items for commands -->
+  <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
+    <mat-list-item routerLink="/commands">
+      <span class="entry">
+        <mat-icon class="icon">chevron_right</mat-icon>
+        <span i18n="@@gallery">Comandos</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item routerLink="/commands-groups">
+      <span class="entry">
+        <mat-icon class="icon">splitscreen_add </mat-icon>
+        <span i18n="@@gallery">Grupo de comandos</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item routerLink="/commands-task">
+      <span class="entry">
+        <mat-icon class="icon">task</mat-icon>
+        <span i18n="@@gallery">Tareas</span>
+      </span>
+    </mat-list-item>
+  </mat-nav-list>
+  <!-- End commands sub -->
+
+
   <mat-list-item (click)="toggleOgBootSub()">
     <span class="entry">
       <mat-icon class="icon">desktop_windows</mat-icon>

ogWebconsole/src/app/layout/sidebar/sidebar.component.ts

@@ -13,6 +13,7 @@ export class SidebarComponent {
   decodedToken: any = "";
   showOgBootSub: boolean = false;
   showOgDhcpSub: boolean = false;
+  showCommandSub: boolean = false;
 
   toggleOgBootSub() {
     this.showOgBootSub = !this.showOgBootSub;
@@ -20,6 +21,9 @@ export class SidebarComponent {
   toggleOgDhcpSub() {
     this.showOgDhcpSub = !this.showOgDhcpSub;
   }
+  toggleCommandSub() {
+    this.showCommandSub = !this.showCommandSub;
+  }
 
 
   constructor(public dialog: MatDialog) {}