refs #1654. Refactor create image component for improved UX and loading state management

ogWebconsole/src/app/components/images/create-image/create-image.component.css

@@ -1,8 +1,25 @@
-.dialog-content {
+.create-image-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  padding: 1rem;
-  /* Espacio entre los elementos del formulario */
+}
+
+.loading-spinner {
+  display: block;
+  margin: 0 auto;
+}
+
+.mat-dialog-content.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+}
+
+.mat-dialog-content {
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  padding-top: 1em;
 }
 
 .image-form {

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

@@ -1,13 +1,13 @@
-<app-loading [isLoading]="loading"></app-loading>
+<div class="create-image-container">
-
+  <h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} imagen</h2>
-<h2 mat-dialog-title>{{ imageId ? 'Editar' : 'Crear' }} imagen</h2>
+  <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
-
+    <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
-<mat-dialog-content class="dialog-content">
+    <form *ngIf="!loading" [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
-  <form [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
       <mat-card *ngIf="showWarning" class="warning-card">
         <mat-card-content>
           <mat-icon color="warn">warning</mat-icon>
-        Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en el
+          Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en
+          el
           caso de que no exista previamente.
         </mat-card-content>
       </mat-card>
@@ -63,10 +63,10 @@
         <p>Código de partición: {{ partitionInfo['partitionCode'] }}</p>
       </div>
     </form>
+  </div>
 
-</mat-dialog-content>
+  <mat-dialog-actions class="action-container">
-
-<mat-dialog-actions class="action-container">
     <button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
-  <button class="submit-button" (click)="saveImage()">{{ 'saveButton' | translate }}</button>
+    <button class="submit-button" (click)="saveImage()" [disabled]="loading">{{ 'saveButton' | translate }}</button>
-</mat-dialog-actions>
+  </mat-dialog-actions>
+</div>

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

@@ -17,6 +17,7 @@ export class CreateImageComponent implements OnInit {
   softwareProfiles: any[] = [];
   repositories: any[] = [];
   loading: boolean = false;
+  isEditMode: boolean = false;
   partitionInfo: { [key: string]: string } = {};
   showWarning: boolean = false;
 
@@ -42,30 +43,34 @@ export class CreateImageComponent implements OnInit {
   ngOnInit() {
     this.loading = true;
     if (this.data) {
-      this.load()
+      this.isEditMode = true;
+      this.load();
+    } else {
+      this.loading = false;
     }
     this.fetchSoftwareProfiles();
     this.fetchRepositories();
-    this.loading = false;
   }
 
   load(): void {
     this.dataService.getImage(this.data).subscribe({
       next: (response) => {
-        this.imageForm = this.fb.group({
+        this.imageForm.patchValue({
-          name: [response.name, Validators.required],
+          name: response.name,
-          description: [response.description],
+          description: response.description,
-          comments: [response.comments],
+          comments: response.comments,
-          remotePc: [response.remotePc],
+          remotePc: response.remotePc,
-          isGlobal: [response.isGlobal],
+          isGlobal: response.isGlobal,
-          softwareProfile: [response.softwareProfile ? response.softwareProfile['@id'] : null, Validators.required],
+          softwareProfile: response.softwareProfile ? response.softwareProfile['@id'] : null,
-          imageRepositories: [response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [], Validators.required],
+          imageRepositories: response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [],
         });
         this.imageId = response['@id'];
         this.partitionInfo = response.partitionInfo;
+        this.loading = false;
       },
       error: (err) => {
         console.error('Error fetching remote calendar:', err);
+        this.loading = false;
       }
     });
   }