Delete and edit image

ogWebconsole/src/app/app.module.ts

@@ -73,6 +73,7 @@ import { SaveFiltersDialogComponent } from './components/groups/save-filters-dia
 import { AcctionsModalComponent } from './components/groups/acctions-modal/acctions-modal.component';
 import { ImagesComponent } from './components/images/images/images.component';
 import { CreateImageComponent } from './components/images/images/create-image/create-image/create-image.component';
+import { EditImageComponent } from './components/images/images/edit-image/edit-image/edit-image.component';
 
 @NgModule({
   declarations: [
@@ -108,7 +109,8 @@ import { CreateImageComponent } from './components/images/images/create-image/cr
     SaveFiltersDialogComponent,
     AcctionsModalComponent,
     ImagesComponent,
-    CreateImageComponent
+    CreateImageComponent,
+    EditImageComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

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

@@ -31,7 +31,7 @@
                 <mat-icon>apartment</mat-icon>
                 {{ unidad.name }}
                 <span class="actions">
-                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">menu</mat-icon>
+                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                   <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="onTreeClick($event, unidad)">
                       <mat-icon
@@ -121,7 +121,7 @@
                 </mat-icon>
                 {{child.name}}
                 <span class="actions">
-                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">menu</mat-icon>
+                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                   <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
                       <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar elemento" matTooltipHideDelay="0" i18n="@@editElementTooltip">edit</mat-icon>

ogWebconsole/src/app/components/images/images/edit-image/edit-image/edit-image.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>Editar Imagen</h1>
+<div mat-dialog-content>
+  <mat-form-field appearance="fill">
+    <mat-label>Nombre</mat-label>
+    <input matInput [(ngModel)]="name" />
+  </mat-form-field>
+  <mat-form-field appearance="fill">
+    <mat-label>URL de descarga</mat-label>
+    <input matInput [(ngModel)]="downloadUrl" />
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button color="primary" (click)="editOgLive()">Guardar</button>
+</div>

ogWebconsole/src/app/components/images/images/edit-image/edit-image/edit-image.component.spec.ts

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

ogWebconsole/src/app/components/images/images/edit-image/edit-image/edit-image.component.ts

@@ -0,0 +1,52 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-edit-image',
+  templateUrl: './edit-image.component.html',
+  styleUrls: ['./edit-image.component.css']
+})
+export class EditImageComponent {
+  name: string = '';
+  downloadUrl: string = '';
+
+  constructor(
+    private toastService: ToastrService,
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<EditImageComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    // Rellenar los campos con los datos recibidos
+    if (data) {
+      this.name = data.name;
+      this.downloadUrl = data.downloadUrl;
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  editOgLive(): void {
+    const payload = {
+      name: this.name,
+      downloadUrl: this.downloadUrl
+    };
+
+    // Realizar PATCH para editar la imagen
+    this.http.patch(`http://127.0.0.1:8080/og-lives/${this.data.uuid}`, payload)
+      .subscribe({
+        next: (response) => {
+          console.log('Success:', response);
+          this.toastService.success('Image updated successfully');
+          this.dialogRef.close();
+        },
+        error: (error) => {
+          console.error('Error:', error);
+          this.toastService.error('Error updating image');
+        }
+      });
+  }
+}

ogWebconsole/src/app/components/images/images/images.component.css

@@ -58,3 +58,9 @@ button {
 .mat-menu {
     min-width: 160px;
 }
+
+.cd-icon {
+    color: #888888;
+    margin-right: 20px;
+    transform: scale(1.5);
+ }

ogWebconsole/src/app/components/images/images/images.component.html

@@ -13,13 +13,13 @@
       <mat-card-content>
         <div *ngIf="images.length === 0">No hay imágenes disponibles.</div>
         <div *ngFor="let image of images">
-          <div class="image-container">
+          <div class="image-container" (click)="showInfo(image)">
+            <mat-icon class="cd-icon">album</mat-icon>
             <h4 matLine>{{ image.name }}</h4>
           <button mat-icon-button [matMenuTriggerFor]="menu">
-            <mat-icon>menu</mat-icon>
+            <mat-icon>more_vert</mat-icon>
           </button>
           <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="showInfo(image)">Info</button>
             <button mat-menu-item (click)="toggleStatus(image)">Montar/Desmontar</button>
             <button mat-menu-item (click)="deleteImage(image.uuid)">Eliminar</button>
             <button mat-menu-item (click)="editImage(image)">Editar</button>

ogWebconsole/src/app/components/images/images/images.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
 import { CreateImageComponent } from './create-image/create-image/create-image.component';
+import { EditImageComponent } from './edit-image/edit-image/edit-image.component';
 
 @Component({
   selector: 'app-images',
@@ -68,7 +69,17 @@ export class ImagesComponent implements OnInit {
   }
 
   editImage(image: any): void {
-    // Implementar lógica para editar imagen
-    console.log('Editar:', image);
+    const dialogRef = this.dialog.open(EditImageComponent, {
+      width: '300px',
+      data: image // Pasa los datos de la imagen a editar
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        // Opcional: Actualiza la lista de imágenes o realiza otras acciones necesarias
+        this.loadImages();
+      }
+    });
   }
+  
 }