refs #1857. Rename image.

ogWebconsole/src/app/app.module.ts

@@ -142,6 +142,7 @@ import {
 } from "./components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component";
 import { EditImageComponent } from './components/repositories/edit-image/edit-image.component';
 import { ShowGitImagesComponent } from './components/repositories/show-git-images/show-git-images.component';
+import { RenameImageComponent } from './components/repositories/rename-image/rename-image.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
@@ -241,7 +242,8 @@ registerLocaleData(localeEs, 'es-ES');
     RunScriptAssistantComponent,
     SaveScriptComponent,
     EditImageComponent,
-    ShowGitImagesComponent
+    ShowGitImagesComponent,
+    RenameImageComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.css

@@ -0,0 +1,39 @@
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.selected-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #ccc;
+}
+
+.selected-item button {
+  margin-left: 10px;
+}

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.html

@@ -0,0 +1,13 @@
+<h2 mat-dialog-title>Renombrar imagen {{ data.imageImageRepository?.name }}</h2>
+
+<mat-dialog-content>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Nuevo nombre</mat-label>
+    <input matInput [(ngModel)]="name" placeholder="Introduzca el nuevo nombre" required />
+  </mat-form-field>
+</mat-dialog-content>
+
+<div class="action-container">
+  <button class="ordinary-button" (click)="close()">Cancelar</button>
+  <button class="submit-button" (click)="save()">Continuar</button>
+</div>

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.spec.ts

@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RenameImageComponent } from './rename-image.component';
+import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
+import {ToastrModule} from "ngx-toastr";
+import {provideHttpClient} from "@angular/common/http";
+import {provideHttpClientTesting} from "@angular/common/http/testing";
+import {ConfigService} from "@services/config.service";
+import {NO_ERRORS_SCHEMA} from "@angular/core";
+
+describe('RenameImageComponent', () => {
+  let component: RenameImageComponent;
+  let fixture: ComponentFixture<RenameImageComponent>;
+
+  beforeEach(async () => {
+    const mockConfigService = {
+      apiUrl: 'http://mock-api-url'
+    };
+    await TestBed.configureTestingModule({
+      declarations: [RenameImageComponent],
+      imports: [
+        MatDialogModule,
+        ToastrModule.forRoot()
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        {
+          provide: MatDialogRef,
+          useValue: {}
+        },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+        },
+        {
+          provide: ConfigService,
+          useValue: mockConfigService
+        }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(RenameImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/repositories/rename-image/rename-image.component.ts

@@ -0,0 +1,51 @@
+import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ToastrService} from "ngx-toastr";
+import {Router} from "@angular/router";
+import {ConfigService} from "@services/config.service";
+
+@Component({
+  selector: 'app-rename-image',
+  templateUrl: './rename-image.component.html',
+  styleUrl: './rename-image.component.css'
+})
+export class RenameImageComponent implements OnInit{
+  baseUrl: string;
+  loading: boolean = true;
+  name: string = '';
+  @Output() eventEmitter = new EventEmitter();
+
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<RenameImageComponent>,
+    private toastService: ToastrService,
+    private router: Router,
+    private configService: ConfigService,
+    @Inject(MAT_DIALOG_DATA) public data: { imageImageRepository: any }
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+  }
+
+  ngOnInit(): void {
+    this.loading = true;
+  }
+
+  save() {
+    this.http.post<any>(`${this.baseUrl}${this.data.imageImageRepository['@id']}/rename-image`, {
+      newName: this.name
+    }).subscribe({
+      next: (response) => {
+        this.toastService.success('Imagen renombrada correctamente');
+        this.dialogRef.close(true);
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

ogWebconsole/src/locale/en.json

@@ -480,5 +480,6 @@
   "CpuUsage": "CPU Usage",
   "processes": "Processes",
   "usedPercentageLabel": "Used",
-  "errorLoadingData": "Error fetching data. Service not available"
+  "errorLoadingData": "Error fetching data. Service not available",
+  "repositoryTitleStep": "On this screen you can manage image repositories."
 }

ogWebconsole/src/locale/es.json

@@ -482,6 +482,6 @@
   "CpuUsage": "Uso de CPU",
   "processes": "Procesos",
   "usedPercentageLabel": "Usado",
-  "errorLoadingData": "Error al cargar los datos. Servicio inactivo"
-
+  "errorLoadingData": "Error al cargar los datos. Servicio inactivo",
+  "repositoryTitleStep": "En esta pantalla se pueden gestionar los repositorios de imágenes."
 }