refs #1858. Added description and change in repository component

ogWebconsole/src/app/app.module.ts

@@ -118,7 +118,6 @@ import { CreateMultipleClientComponent } from './components/groups/shared/client
 import { ExportImageComponent } from './components/images/export-image/export-image.component';
 import { ImportImageComponent } from "./components/repositories/import-image/import-image.component";
 import { LoadingComponent } from './shared/loading/loading.component';
-import { RepositoryImagesComponent } from './components/repositories/repository-images/repository-images.component';
 import { InputDialogComponent } from './components/commands/commands-task/task-logs/input-dialog/input-dialog.component';
 import { ManageOrganizationalUnitComponent } from './components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component';
 import { BackupImageComponent } from './components/repositories/backup-image/backup-image.component';
@@ -141,6 +140,7 @@ import { RunScriptAssistantComponent } from './components/groups/components/clie
 import {
   SaveScriptComponent
 } 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';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
@@ -227,7 +227,6 @@ registerLocaleData(localeEs, 'es-ES');
     ExportImageComponent,
     ImportImageComponent,
     LoadingComponent,
-    RepositoryImagesComponent,
     InputDialogComponent,
     ManageOrganizationalUnitComponent,
     BackupImageComponent,
@@ -239,7 +238,8 @@ registerLocaleData(localeEs, 'es-ES');
     StatusTabComponent,
     ConvertImageToVirtualComponent,
     RunScriptAssistantComponent,
-    SaveScriptComponent
+    SaveScriptComponent,
+    EditImageComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/repositories/edit-image/edit-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/edit-image/edit-image.component.html

@@ -0,0 +1,16 @@
+<h2 mat-dialog-title>Editar imagen </h2>
+
+<mat-dialog-content>
+  <form [formGroup]="imageForm">
+    <mat-form-field appearance="fill" class="full-width">
+      <mat-label>Descripción</mat-label>
+      <input matInput formControlName="description" placeholder="Introduzca la descripción de la imagen."
+      />
+    </mat-form-field>
+  </form>
+</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/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/repositories/edit-image/edit-image.component.ts

@@ -0,0 +1,70 @@
+import {Component, Inject, OnInit} 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";
+import {FormBuilder, FormGroup} from "@angular/forms";
+
+@Component({
+  selector: 'app-edit-image',
+  templateUrl: './edit-image.component.html',
+  styleUrl: './edit-image.component.css'
+})
+export class EditImageComponent implements OnInit{
+  baseUrl: string;
+  loading: boolean = true;
+  imageForm: FormGroup;
+
+  constructor(
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<EditImageComponent>,
+    private fb: FormBuilder,
+    private toastService: ToastrService,
+    private router: Router,
+    private configService: ConfigService,
+    @Inject(MAT_DIALOG_DATA) public data: { image: any }
+  ) {
+    this.baseUrl = this.configService.apiUrl;
+    this.imageForm = this.fb.group({
+      description: ['']
+    })
+  }
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.load()
+  }
+
+  load() {
+    this.http.get<any>(`${this.baseUrl}${this.data.image['@id']}`).subscribe({
+      next: (response) => {
+        this.imageForm.patchValue({
+          description: response.description
+        });
+        this.loading = false;
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  save() {
+    const payload = this.imageForm.value;
+
+    this.http.put<any>(`${this.baseUrl}${this.data.image['@id']}`, payload).subscribe({
+      next: (response) => {
+        this.toastService.success('Image updated successfully');
+        this.dialogRef.close(true);
+      },
+      error: error => {
+        this.toastService.error(error.error['hydra:description']);
+      }
+    });
+  }
+
+  close() {
+    this.dialogRef.close();
+  }
+}

ogWebconsole/src/app/components/repositories/show-images/show-images.component.html

@@ -78,6 +78,9 @@
       <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
       <td mat-cell *matCellDef="let image" style="text-align: center;">
         <button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
+        <button mat-icon-button color="primary" (click)="toggleAction(image, 'edit')">
+          <mat-icon i18n="@@deleteElementTooltip">edit</mat-icon>
+        </button>
         <button mat-icon-button color="warn" (click)="toggleAction(image, 'delete-trash')">
           <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
         </button>

ogWebconsole/src/app/components/repositories/show-images/show-images.component.ts

@@ -15,6 +15,7 @@ import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/de
 import {ExportImageComponent} from "../../images/export-image/export-image.component";
 import {BackupImageComponent} from "../backup-image/backup-image.component";
 import {ConvertImageToVirtualComponent} from "../convert-image-to-virtual/convert-image-to-virtual.component";
+import {EditImageComponent} from "../edit-image/edit-image.component";
 
 @Component({
   selector: 'app-show-images',
@@ -45,9 +46,9 @@ export class ShowImagesComponent implements OnInit {
       cell: (image: any) => `${image.image.name}`
     },
     {
-      columnDef: 'remotePc',
-      header: 'Remote Pc',
-      cell: (image: any) => `${image.image?.remotePc}`
+      columnDef: 'version',
+      header: 'Version',
+      cell: (image: any) => `${image.version ? image.version : '0'}`
     },
     {
       columnDef: 'isGlobal',
@@ -60,14 +61,9 @@ export class ShowImagesComponent implements OnInit {
       cell: (image: any) => `${image.status}`
     },
     {
-      columnDef: 'version',
-      header: 'Version',
-      cell: (image: any) => `${image.version ? image.version : '0'}`
-    },
-    {
-      columnDef: 'imageFullsum',
-      header: 'Fullsum',
-      cell: (image: any) => `${image.imageFullsum}`
+      columnDef: 'description',
+      header: 'Descripción',
+      cell: (image: any) => `${image.description ? image.description : 'Sin descripción'}`
     },
     {
       columnDef: 'createdAt',
@@ -259,6 +255,18 @@ export class ShowImagesComponent implements OnInit {
           }
         });
         break;
+      case 'edit':
+        this.dialog.open(EditImageComponent, {
+          width: '600px',
+          data: {
+            image: image,
+          }
+        }).afterClosed().subscribe((result) => {
+          if (result) {
+            this.loadData();
+          }
+        });
+        break;
       case 'recover':
         this.http.post(`${this.baseUrl}/image-image-repositories/server/${image.uuid}/recover`, {}).subscribe({
           next: () => {
@@ -337,6 +345,7 @@ export class ShowImagesComponent implements OnInit {
                 imageImageRepository: image
               }
             });
+            this.router.navigate(['/commands-logs']);
           },
           error: (error) => {
             this.toastService.error(error.error['hydra:description']);