refs #1797. Rename image. Crete image

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.css

@@ -24,6 +24,7 @@
 table {
   width: 100%;
   margin-top: 50px;
+  background-color: #eaeff6;
 }
 
 .search-container  {
@@ -36,18 +37,26 @@ table {
 }
 
 .select-container {
-  margin-top: 20px;
+  gap: 16px;
-  align-items: center;
   width: 100%;
-  padding: 0 5px;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.selector {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+  margin-top: 30px;
   box-sizing: border-box;
 }
 
-.custom-width {
+.half-width {
-  width: 50%;
+  flex: 1;
-  margin-bottom: 16px;
+  max-width: 50%;
 }
 
+
 .search-string {
   flex: 2;
   padding: 5px;
@@ -87,3 +96,10 @@ table {
   padding-right: 1em;
 }
 
+.partition-table-container {
+  background-color: #eaeff6;
+  padding: 20px;
+  border-radius: 12px;
+  margin-top: 20px;
+}
+

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html

@@ -7,39 +7,53 @@
     </h2>
   </div>
   <div class="button-row">
-    <button class="action-button" (click)="save()">Ejecutar</button>
+    <button class="action-button" [disabled]="!selectedPartition"  (click)="save()">Ejecutar</button>
   </div>
 </div>
 <mat-divider></mat-divider>
 
 <div class="select-container">
-  <mat-form-field appearance="fill" class="custom-width">
+  <div class="selector">
-    <mat-label>Nombre canónico</mat-label>
+    <mat-form-field appearance="fill" class="half-width">
-    <input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
+      <mat-label>Nombre canónico</mat-label>
-  </mat-form-field>
+      <input matInput [disabled]="selectedImage" [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" class="half-width">
+      <mat-label>Seleccione imagen</mat-label>
+      <mat-select [(ngModel)]="selectedImage" name="selectedImage" (selectionChange)="resetCanonicalName()" required>
+        <mat-option *ngFor="let image of images" [value]="image">{{ image?.name }}</mat-option>
+      </mat-select>
+      <mat-hint>Seleccione la imagen para sobreescribir si se requiere. </mat-hint>
+    </mat-form-field>
+  </div>
+
+
+  <div class="partition-table-container">
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
+        <td mat-cell *matCellDef="let row">
+          <mat-radio-group
+            [(ngModel)]="selectedPartition"
+            [disabled]="!row.operativeSystem"
+          >
+            <mat-radio-button [value]="row">
+            </mat-radio-button>
+          </mat-radio-group>
+        </td>
+      </ng-container>
+
+      <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+        <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+        <td mat-cell *matCellDef="let image">
+          {{ column.cell(image) }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+
 </div>
-
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-  <ng-container matColumnDef="select">
-    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
-    <td mat-cell *matCellDef="let row">
-      <mat-radio-group
-        [(ngModel)]="selectedPartition"
-        [disabled]="!row.operativeSystem"
-      >
-        <mat-radio-button [value]="row">
-        </mat-radio-button>
-      </mat-radio-group>
-    </td>
-  </ng-container>
-
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-    <td mat-cell *matCellDef="let image">
-      {{ column.cell(image) }}
-    </td>
-  </ng-container>
-
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import { HttpClient } from "@angular/common/http";
 import { ToastrService } from "ngx-toastr";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -11,7 +11,7 @@ import { ConfigService } from '@services/config.service';
   templateUrl: './create-image.component.html',
   styleUrl: './create-image.component.css'
 })
-export class CreateClientImageComponent {
+export class CreateClientImageComponent implements OnInit{
   baseUrl: string;
   @Output() dataChange = new EventEmitter<any>();
 
@@ -24,6 +24,7 @@ export class CreateClientImageComponent {
   name: string = '';
   client: any = null;
   loading: boolean = false;
+  selectedImage: any = null;
   dataSource = new MatTableDataSource<any>();
   columns = [
     {
@@ -103,14 +104,29 @@ export class CreateClientImageComponent {
     );
   }
 
+  resetCanonicalName() {
+    this.name = '';
+  }
+
   save(): void {
     this.loading = true;
 
+    if (!this.selectedPartition) {
+      this.toastService.error('Debes seleccionar una partición');
+      this.loading = false;
+      return;
+    }
+
+    if (this.selectedImage) {
+      this.toastService.warning('Aviso: Está seleccionando una imagen previamente creada. Se procede a crear un backup de la misma. ');
+    }
+
     const payload = {
       client: `/clients/${this.clientId}`,
       name: this.name,
       partition: this.selectedPartition['@id'],
-      source: 'assistant'
+      source: 'assistant',
+      selectedImage: this.selectedImage?.['@id']
     };