refs #1654. Refactor create image component for improved UX and loading state management
testing/ogGui-multibranch/pipeline/head This commit looks good
Details
testing/ogGui-multibranch/pipeline/head This commit looks good
Details
parent
83c3b3caed
commit
9ab68cc6e2
|
|
@ -1,8 +1,25 @@
|
|||
.dialog-content {
|
||||
.create-image-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
/* Espacio entre los elementos del formulario */
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -1,72 +1,72 @@
|
|||
<app-loading [isLoading]="loading"></app-loading>
|
||||
<div class="create-image-container">
|
||||
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} imagen</h2>
|
||||
<div class="mat-dialog-content" [ngClass]="{'loading': loading}">
|
||||
<mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
|
||||
<form *ngIf="!loading" [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
|
||||
caso de que no exista previamente.
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>{{ 'imageNameLabel' | translate }}</mat-label>
|
||||
<input matInput formControlName="name" required>
|
||||
</mat-form-field>
|
||||
|
||||
<h2 mat-dialog-title>{{ imageId ? 'Editar' : 'Crear' }} imagen</h2>
|
||||
<mat-form-field appearance="fill" class="form-field" *ngIf="!imageId">
|
||||
<mat-label>{{ 'repositoryLabel' | translate }}</mat-label>
|
||||
<mat-select formControlName="imageRepositories" required multiple>
|
||||
<mat-option *ngFor="let imageRepository of repositories" [value]="imageRepository['@id']">
|
||||
{{ imageRepository.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-dialog-content class="dialog-content">
|
||||
<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
|
||||
caso de que no exista previamente.
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>{{ 'imageNameLabel' | translate }}</mat-label>
|
||||
<input matInput formControlName="name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
|
||||
<input matInput formControlName="description" name="description">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" class="form-field" *ngIf="!imageId">
|
||||
<mat-label>{{ 'repositoryLabel' | translate }}</mat-label>
|
||||
<mat-select formControlName="imageRepositories" required multiple>
|
||||
<mat-option *ngFor="let imageRepository of repositories" [value]="imageRepository['@id']">
|
||||
{{ imageRepository.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>{{ 'commentsLabel' | translate }}</mat-label>
|
||||
<input matInput formControlName="comments" name="comments">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
|
||||
<input matInput formControlName="description" name="description">
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>Perfil de software</mat-label>
|
||||
<mat-select formControlName="softwareProfile">
|
||||
<mat-option *ngFor="let profile of softwareProfiles" [value]="profile['@id']">
|
||||
{{ profile.description }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>{{ 'commentsLabel' | translate }}</mat-label>
|
||||
<input matInput formControlName="comments" name="comments">
|
||||
</mat-form-field>
|
||||
<mat-checkbox formControlName="remotePc">
|
||||
{{ 'remotePcLabel' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-form-field appearance="fill" class="form-field">
|
||||
<mat-label>Perfil de software</mat-label>
|
||||
<mat-select formControlName="softwareProfile">
|
||||
<mat-option *ngFor="let profile of softwareProfiles" [value]="profile['@id']">
|
||||
{{ profile.description }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-checkbox formControlName="isGlobal" (click)="changeIsGlobal()">
|
||||
{{ 'globalImageLabel' | translate }}
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-checkbox formControlName="remotePc">
|
||||
{{ 'remotePcLabel' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-divider *ngIf="imageId && partitionInfo"></mat-divider>
|
||||
|
||||
<mat-checkbox formControlName="isGlobal" (click)="changeIsGlobal()">
|
||||
{{ 'globalImageLabel' | translate }}
|
||||
</mat-checkbox>
|
||||
<div *ngIf="imageId && partitionInfo" class="partition-info-container">
|
||||
<h3>Información de Partición de origen</h3>
|
||||
<p>Sistema de archivos: {{ partitionInfo['filesystem'] }}</p>
|
||||
<p>Disco: {{ partitionInfo['numDisk'] }}</p>
|
||||
<p>Particion: {{ partitionInfo['numPartition'] }}</p>
|
||||
<p>Nombre del SO: {{ partitionInfo['osName'] }}</p>
|
||||
<p>Código de partición: {{ partitionInfo['partitionCode'] }}</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<mat-divider *ngIf="imageId && partitionInfo"></mat-divider>
|
||||
|
||||
<div *ngIf="imageId && partitionInfo" class="partition-info-container">
|
||||
<h3>Información de Partición de origen</h3>
|
||||
<p>Sistema de archivos: {{ partitionInfo['filesystem'] }}</p>
|
||||
<p>Disco: {{ partitionInfo['numDisk'] }}</p>
|
||||
<p>Particion: {{ partitionInfo['numPartition'] }}</p>
|
||||
<p>Nombre del SO: {{ partitionInfo['osName'] }}</p>
|
||||
<p>Código de partición: {{ partitionInfo['partitionCode'] }}</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions class="action-container">
|
||||
<button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
|
||||
<button class="submit-button" (click)="saveImage()">{{ 'saveButton' | translate }}</button>
|
||||
</mat-dialog-actions>
|
||||
<mat-dialog-actions class="action-container">
|
||||
<button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
|
||||
<button class="submit-button" (click)="saveImage()" [disabled]="loading">{{ 'saveButton' | translate }}</button>
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
|
|
@ -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({
|
||||
name: [response.name, Validators.required],
|
||||
description: [response.description],
|
||||
comments: [response.comments],
|
||||
remotePc: [response.remotePc],
|
||||
isGlobal: [response.isGlobal],
|
||||
softwareProfile: [response.softwareProfile ? response.softwareProfile['@id'] : null, Validators.required],
|
||||
imageRepositories: [response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [], Validators.required],
|
||||
this.imageForm.patchValue({
|
||||
name: response.name,
|
||||
description: response.description,
|
||||
comments: response.comments,
|
||||
remotePc: response.remotePc,
|
||||
isGlobal: response.isGlobal,
|
||||
softwareProfile: response.softwareProfile ? response.softwareProfile['@id'] : null,
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -135,4 +140,4 @@ export class CreateImageComponent implements OnInit {
|
|||
close(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue