Edit client added oglive select

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts

@@ -15,7 +15,7 @@ export class CreateClientComponent implements OnInit {
   clientForm!: FormGroup;
   parentUnits: any[] = [];
   hardwareProfiles: any[] = [];
-  ogLives: any[] = []; // Array para almacenar los oglives
+  ogLives: any[] = []; 
   private errorForm: boolean = false;
   protected netifaceTypes = [
     { "name": 'Eth0', "value": "eth0" },
@@ -41,7 +41,7 @@ export class CreateClientComponent implements OnInit {
     console.log(this.data);
     this.loadParentUnits();
     this.loadHardwareProfiles();
-    this.loadOgLives(); // Cargar los oglives
+    this.loadOgLives(); 
     this.clientForm = this.fb.group({
       organizationalUnit: [this.data.organizationalUnit ? this.data.organizationalUnit['@id'] : null, Validators.required],
       name: ['', Validators.required],
@@ -52,7 +52,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] // Nuevo campo para ogLive
+      ogLive: [null, Validators.required] 
     });
   }
 
@@ -86,7 +86,7 @@ export class CreateClientComponent implements OnInit {
   }
 
   loadOgLives() {
-    // Lógica para cargar ogLives desde la API
+    
     const url = 'http://127.0.0.1:8080/og-lives?page=1&itemsPerPage=30';
     this.http.get<any>(url).subscribe(
       response => {
@@ -102,7 +102,7 @@ export class CreateClientComponent implements OnInit {
     if (this.clientForm.valid) {
       this.errorForm = false;
       const formData = this.clientForm.value;
-      formData.ogLive = formData.ogLive; // Asegurar que se envía el UUID de ogLive
+      formData.ogLive = formData.ogLive; 
       console.log('Form data:', formData  );
       this.http.post('http://127.0.0.1:8080/clients', formData).subscribe(
         response => {

ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html

@@ -14,6 +14,14 @@
       <mat-label i18n="@@name-label">Nombre</mat-label>
       <input matInput formControlName="name">
     </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label i18n="@@oglive-label">OgLive</mat-label>
+      <mat-select formControlName="ogLive">
+        <mat-option *ngFor="let ogLive of ogLives" [value]="ogLive['@id']">
+          {{ ogLive.uuid }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label i18n="@@serial-number-label">Número de Serie</mat-label>
       <input matInput formControlName="serialNumber">

ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts

@@ -1,30 +1,31 @@
-import {HttpClient, HttpHeaders} from '@angular/common/http';
-import {Component, Inject} from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, Inject } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { CreateClientComponent } from '../create-client/create-client.component';
-import {DataService} from "../../data.service";
-import {ToastrService} from "ngx-toastr";
+import { DataService } from '../../data.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-edit-client',
   templateUrl: './edit-client.component.html',
-  styleUrl: './edit-client.component.css'
+  styleUrls: ['./edit-client.component.css']
 })
 export class EditClientComponent {
   clientForm!: FormGroup;
-  parentUnits: any[] = []; // Array to store parent units fetched from API
-  hardwareProfiles: any[] = []; // Array to store hardware profiles fetched from API
-  isEditMode: boolean; // Flag to check if it's edit mode
+  parentUnits: any[] = []; 
+  hardwareProfiles: any[] = []; 
+  ogLives: any[] = []; 
+  isEditMode: boolean; 
   protected netifaceTypes = [
-    {"name": 'Eth0', "value": "eth0"},
-    {"name": 'Eth1', "value": "eth1"},
-    {"name": 'Eth2', "value": "eth2"},
+    { "name": 'Eth0', "value": "eth0" },
+    { "name": 'Eth1', "value": "eth1" },
+    { "name": 'Eth2', "value": "eth2" },
   ];
   protected netDriverTypes = [
-    {"name": 'Generic', "value": "generic"},
+    { "name": 'Generic', "value": "generic" },
   ];
-  loading:boolean = false
+  loading: boolean = false;
 
   constructor(
     private fb: FormBuilder,
@@ -32,19 +33,20 @@ export class EditClientComponent {
     private http: HttpClient,
     private dataService: DataService,
     private toastService: ToastrService,
-    @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
+    @Inject(MAT_DIALOG_DATA) public data: any 
   ) {
-    this.isEditMode = !!data?.uuid; // Check if uuid is passed to determine edit mode
+    this.isEditMode = !!data?.uuid; 
     if (this.isEditMode) {
       this.loadData(data.uuid);
     }
   }
 
   ngOnInit(): void {
-    this.loadParentUnits(); // Load parent units when component initializes
-    this.loadHardwareProfiles(); // Load hardware profiles when component initializes
+    this.loadParentUnits(); 
+    this.loadHardwareProfiles(); 
+    this.loadOgLives(); 
     this.clientForm = this.fb.group({
-      organizationalUnit: [null,Validators.required],
+      organizationalUnit: [null, Validators.required],
       name: ['', Validators.required],
       serialNumber: null,
       netiface: null,
@@ -53,6 +55,7 @@ export class EditClientComponent {
       ip: null,
       menu: null,
       hardwareProfile: null,
+      ogLive: null, 
     });
   }
 
@@ -80,8 +83,21 @@ export class EditClientComponent {
     );
   }
 
+  loadOgLives(): void {
+    const url = 'http://127.0.0.1:8080/og-lives?page=1&itemsPerPage=10000';
+
+    this.http.get<any>(url).subscribe(
+      response => {
+        this.ogLives = response['hydra:member'];
+      },
+      error => {
+        console.error('Error fetching ogLives:', error);
+      }
+    );
+  }
+
   loadData(uuid: string) {
-    this.loading = true
+    this.loading = true;
     const url = `http://127.0.0.1:8080/clients/${uuid}`;
 
     this.http.get<any>(url).subscribe(
@@ -94,9 +110,14 @@ export class EditClientComponent {
           netDriver: data.netDriver,
           serialNumber: data.serialNumber,
           hardwareProfile: data.hardwareProfile ? data.hardwareProfile['@id'] : null,
-          organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : null
+          organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : null,
+          ogLive: data.ogLive ? data.ogLive['@id'] : null, 
         });
-        this.loading = false
+        this.loading = false;
+      },
+      error => {
+        console.error('Error al cargar datos del cliente:', error);
+        this.loading = false;
       }
     );
   }