fix(deploy-image): show instructions in cache mode and refactor to @if/@for syntax

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

@@ -52,7 +52,8 @@
     </div>
 
     <div class="clients-grid">
-      <div *ngFor="let client of clientData" class="client-item">
+      @for (client of clientData; track client) {
+      <div class="client-item">
         <div class="client-card" (click)="toggleClientSelection(client)"
           [ngClass]="{'selected-client': client.selected}" [matTooltip]="getPartitionsTooltip(client)"
           matTooltipPosition="above" matTooltipClass="custom-tooltip">
@@ -73,6 +74,7 @@
           </mat-radio-group>
         </div>
       </div>
+      }
     </div>
 
   </mat-expansion-panel>
@@ -99,46 +101,61 @@
       </div>
 
       <!-- Campos monolítica -->
-      <div class="monolithic-row" *ngIf="imageType === 'monolithic'">
+      @if (imageType === 'monolithic') {
+      <div class="monolithic-row">
         <mat-form-field appearance="fill" class="half-width">
           <mat-label>{{ 'selectDeployMethod' | translate }}</mat-label>
           <mat-select [(ngModel)]="selectedMethod" name="selectedMethod" (selectionChange)="validateImageSize()">
-            <mat-option *ngFor="let method of allMethods" [value]="method.value">{{ method.name }}</mat-option>
+            @for (method of allMethods; track method.value) {
+            <mat-option [value]="method.value">{{ method.name }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field appearance="fill" class="full-width">
           <mat-label>{{ 'selectImagePrompt' | translate }}</mat-label>
           <mat-select [(ngModel)]="selectedImage" name="selectedImage" [disabled]="!imageType">
-            <mat-option *ngFor="let image of images" [value]="image">
+            @for (image of images; track image.uuid || $index) {
+            <mat-option [value]="image">
               <div class="unit-name"> {{ image.name }}</div>
               <div style="font-size: smaller; color: gray;">{{ image.description }}</div>
             </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
+      }
 
       <!-- Campos Git -->
-      <div *ngIf="imageType === 'git'" class="filters-row git-gap">
+      @if (imageType === 'git') {
+      <div class="filters-row git-gap">
         <mat-form-field appearance="fill" style="width: 300px;">
           <mat-label>{{ 'buttonSelectRepository' | translate }}</mat-label>
           <mat-select [(ngModel)]="selectedGitRepository" (selectionChange)="onGitRepositoryChange($event.value)"
             [disabled]="loadingRepositories">
-            <mat-option *ngFor="let repo of repositories" [value]="repo">
+            @for (repo of repositories; track repo) {
+            <mat-option [value]="repo">
               {{ repo }}
             </mat-option>
+            }
           </mat-select>
-          <mat-icon matSuffix *ngIf="loadingRepositories">hourglass_empty</mat-icon>
+          @if (loadingRepositories) {
+          <mat-icon matSuffix>hourglass_empty</mat-icon>
+          }
         </mat-form-field>
 
         <mat-form-field appearance="fill" style="width: 300px;">
           <mat-label>{{ 'buttonSelectBranch' | translate }}</mat-label>
           <mat-select [(ngModel)]="selectedBranch" (selectionChange)="onGitBranchChange()"
             [disabled]="loadingBranches || !selectedRepository">
-            <mat-option *ngFor="let branch of branches" [value]="branch">
+            @for (branch of branches; track branch) {
+            <mat-option [value]="branch">
               {{ branch }}
             </mat-option>
+            }
           </mat-select>
-          <mat-icon matSuffix *ngIf="loadingBranches">hourglass_empty</mat-icon>
+          @if (loadingBranches) {
+          <mat-icon matSuffix>hourglass_empty</mat-icon>
+          }
         </mat-form-field>
 
         <mat-form-field appearance="fill" style="width: 200px;">
@@ -149,6 +166,7 @@
           </mat-select>
         </mat-form-field>
       </div>
+      }
 
       <!-- Configuración avanzada del método (Multicast / P2P) -->
       @if (imageType === 'monolithic' && selectedMethod && needsAdvancedConfig(selectedMethod)) {
@@ -182,9 +200,11 @@
       }
 
 
-      <div *ngIf="errorMessage" class="error-message">
+      @if (errorMessage) {
+      <div class="error-message">
         {{ errorMessage }}
       </div>
+      }
 
     </div>
 
@@ -221,6 +241,22 @@
         </div>
       }
 
+    <!-- Contenedor para mostrar las instrucciones en cualquier modo -->
+    @if (showInstructions) {
+    <div class="instructions-box" style="margin-bottom: 20px;">
+      <mat-card class="instructions-card">
+        <mat-card-title>
+          {{ 'generatedInstructions' | translate }}<button mat-icon-button (click)="showInstructions = false" style="float: right;">
+            <mat-icon>close</mat-icon>
+          </button>
+        </mat-card-title>
+        <mat-card-content>
+          <pre>{{ ogInstructions }}</pre>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    }
+
     <!-- Sección: Selección de partición (oculta en modo solo-caché) -->
     @if (deployMode !== 'update-cache') {
       <div class="form-section compact-section partition-select-section" id="partition-selection">
@@ -229,18 +265,6 @@
           {{ 'partitionSelection' | translate }}</div>
 
         <div class="partition-table-container">
-          <div *ngIf="showInstructions" class="instructions-box">
-            <mat-card class="instructions-card">
-              <mat-card-title>
-                {{ 'generatedInstructions' | translate }}<button mat-icon-button (click)="showInstructions = false" style="float: right;">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </mat-card-title>
-              <mat-card-content>
-                <pre>{{ ogInstructions }}</pre>
-              </mat-card-content>
-            </mat-card>
-          </div>
 
           <app-disk-partition-selector
             [(selectedPartition)]="selectedPartition"
@@ -274,7 +298,8 @@
   </div>
 
   <!-- Tabla de commits Git (solo cuando hay commits cargados) -->
-  <div *ngIf="imageType === 'git' && filteredCommits.length > 0" class="form-section compact-section">
+  @if (imageType === 'git' && filteredCommits.length > 0) {
+  <div class="form-section compact-section">
     <div class="form-section-title">
       <mat-icon>history</mat-icon>
       {{ 'commitSelection' | translate }}</div>
@@ -309,11 +334,15 @@
           <th mat-header-cell *matHeaderCellDef>{{ 'labelTags' | translate }}</th>
           <td mat-cell *matCellDef="let commit">
             <mat-chip-list>
-              <mat-chip *ngFor="let tag of commit.tags" color="primary" selected class="custom-tag-chip"
+              @for (tag of commit.tags; track tag) {
+              <mat-chip color="primary" selected class="custom-tag-chip"
                 style="background: rgba(102, 126, 234, 0.1) !important; color: #667eea !important; border: 1px solid rgba(102, 126, 234, 0.3) !important; border-radius: 8px !important; font-weight: 500 !important; font-size: 10px !important; padding: 2px 6px !important; margin: 1px !important; box-shadow: none !important;">
                 {{ tag }}
               </mat-chip>
-              <span *ngIf="!commit.tags || commit.tags.length === 0" class="no-tags-text">{{ 'noTags' | translate }}</span>
+              }
+              @if (!commit.tags || commit.tags.length === 0) {
+              <span class="no-tags-text">{{ 'noTags' | translate }}</span>
+              }
             </mat-chip-list>
           </td>
         </ng-container>
@@ -322,6 +351,7 @@
       </table>
     </div>
   </div>
+  }
 
 </div>