actualización de sintaxis en archivos faltantes - workflow y zipfile. solo para ngfor y ngif

src/app/components/initial-data-upload/preview-Equipmentexcel-document/preview-excel-document.component.html

@@ -50,19 +50,23 @@
         </h2>
       </div>
 
-      <div class="sheet-selector" *ngIf="sheetNames.length > 1">
+      @if (sheetNames.length > 1) {
+      <div class="sheet-selector">
         <mat-form-field appearance="outline" style="width: 200px">
           <mat-label>Hoja</mat-label>
           <mat-select
             [(value)]="selectedSheet"
             (selectionChange)="onSheetChange($event.value)"
           >
-            <mat-option *ngFor="let sheet of sheetNames" [value]="sheet">
+            @for (sheet of sheetNames; track $index) {
+            <mat-option [value]="sheet">
               {{ sheet }}
             </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
+      }
 
       <div
         class="edit-controls"
@@ -85,7 +89,8 @@
           <mat-icon>{{ editMode ? "visibility" : "edit" }}</mat-icon>
         </button>
 
-        <ng-container *ngIf="editMode" style="margin-bottom: 20px !important">
+        @if (editMode) {
+        <ng-container style="margin-bottom: 20px !important">
           <button
             mat-icon-button
             (click)="addRow()"
@@ -104,8 +109,10 @@
             <mat-icon>view_column</mat-icon>
           </button> -->
         </ng-container>
+        }
 
-        <ng-container *ngIf="hasUnsavedChanges">
+        @if (hasUnsavedChanges) {
+        <ng-container>
           <button
             mat-button
             class="raised-button-background"
@@ -127,6 +134,7 @@
             Descartar
           </button>
         </ng-container>
+        }
       </div>
     </div>
   </div>
@@ -135,9 +143,9 @@
     class="table-container"
     style="overflow: auto; background: #fafafa; position: relative"
   >
+    @if (currentSheetData.length > 0) {
     <table
       class="excel-table"
-      *ngIf="currentSheetData.length > 0"
       style="
         width: 100%;
         border-collapse: separate;
@@ -172,13 +180,8 @@
             #
           </th>
 
+          @for (header of getTableHeaders(); track $index; let colIndex = $index, isLast = $last) {
           <th
-            *ngFor="
-              let header of getTableHeaders();
-              let colIndex = index;
-              let isLast = last;
-              trackBy: trackByIndex
-            "
             class="column-header"
             [class.id-column-header]="isIdColumn(colIndex, selectedSheet)"
             [style.border-radius]="isLast ? '0 8px 0 0' : '0'"
@@ -213,12 +216,8 @@
               <span style="display: flex; align-items: center; gap: 4px">
                 {{ header }}
               </span>
+              @if (editMode && getTableHeaders().length > 1 && !isIdColumn(colIndex, selectedSheet)) {
               <button
-                *ngIf="
-                  editMode &&
-                  getTableHeaders().length > 1 &&
-                  !isIdColumn(colIndex, selectedSheet)
-                "
                 mat-icon-button
                 (click)="deleteColumn(colIndex)"
                 style="width: 24px; height: 24px; color: #dc3545; opacity: 0.7"
@@ -226,19 +225,16 @@
               >
                 <mat-icon style="font-size: 16px">close</mat-icon>
               </button>
+              }
             </div>
           </th>
+          }
         </tr>
       </thead>
 
       <tbody>
+        @for (row of currentSheetData; track trackByRowData($index, row); let rowIndex = $index, isLast = $last) {
         <tr
-          *ngFor="
-            let row of currentSheetData;
-            let rowIndex = index;
-            let isLast = last;
-            trackBy: trackByRowData
-          "
           [style.background]="rowIndex % 2 === 0 ? '#ffffff' : '#f8f9fa'"
           [style.border-radius]="isLast ? '0 0 8px 8px' : '0'"
           style="transition: all 0.2s ease; border-bottom: 1px solid #e9ecef"
@@ -266,8 +262,8 @@
               "
             >
               <span>{{ getRowNumber(rowIndex) }}</span>
+              @if (editMode && currentSheetData.length > 1) {
               <button
-                *ngIf="editMode && currentSheetData.length > 1"
                 mat-icon-button
                 (click)="deleteRow(rowIndex)"
                 style="width: 20px; height: 20px; color: #dc3545"
@@ -275,16 +271,12 @@
               >
                 <mat-icon style="font-size: 14px">close</mat-icon>
               </button>
+              }
             </div>
           </td>
 
+          @for (cell of row; track $index; let colIndex = $index, isLastCol = $last) {
           <td
-            *ngFor="
-              let cell of row;
-              let colIndex = index;
-              let isLastCol = last;
-              trackBy: trackByIndex
-            "
             class="data-cell"
             [style.border-radius]="isLast && isLastCol ? '0 0 8px 0' : '0'"
             style="
@@ -296,8 +288,8 @@
               position: relative;
             "
           >
+            @if (!isCellBeingEdited(rowIndex, colIndex)) {
             <div
-              *ngIf="!isCellBeingEdited(rowIndex, colIndex)"
               class="cell-content"
               (click)="startEdit(rowIndex, colIndex)"
               style="
@@ -313,9 +305,10 @@
             >
               {{ getDisplayCellValue(row, colIndex) }}
             </div>
+            }
 
+            @if (isCellBeingEdited(rowIndex, colIndex)) {
             <input
-              *ngIf="isCellBeingEdited(rowIndex, colIndex)"
               s
               type="text"
               class="cell-input"
@@ -341,10 +334,14 @@
               (keyup.enter)="saveCellValue(rowIndex, colIndex, $event)"
               autofocus
             />
+            }
           </td>
+          }
         </tr>
+        }
       </tbody>
     </table>
+    }
 
     @if (currentSheetData.length === 0) {
     <div
@@ -451,9 +448,11 @@
         >{{ selectedSheet }} •
         {{ editMode ? "Modo edición" : "Solo lectura" }}</span
       >
-      <span *ngIf="hasUnsavedChanges" style="color: #ff9800; margin-left: 8px"
+      @if (hasUnsavedChanges) {
+      <span style="color: #ff9800; margin-left: 8px"
         >• Cambios pendientes</span
       >
+      }
     </div>
 
     <div class="action-buttons" style="display: flex; gap: 12px">
@@ -469,12 +468,15 @@
         (click)="ValidateExcel()"
         [disabled]="isLoading"
       >
-        <mat-icon *ngIf="!isLoading">check</mat-icon>
+        @if (!isLoading) {
+        <mat-icon>check</mat-icon>
+        }
+        @if (isLoading) {
         <mat-spinner
-          *ngIf="isLoading"
           diameter="20"
           style="margin-right: 8px"
         ></mat-spinner>
+        }
         {{ isLoading ? "Procesando..." : "Procesar equipamientos" }}
       </button>
     </div>

src/app/components/initial-data-upload/preview-documents/preview-documents.component.html

@@ -136,7 +136,8 @@
               </td>
               
 
-              <td *ngFor="let cell of row; let colIndex = index; let isLastCol = last; trackBy: trackByIndex" 
+              @for (cell of row; track $index; let colIndex = $index, isLastCol = $last) {
+              <td 
                   class="data-cell" 
                   [style.border-radius]="isLast && isLastCol ? '0 0 8px 0' : '0'"
                   style="min-width: 140px; max-width: 250px; padding: 12px 16px; border-right: 1px solid #dee2e6; vertical-align: top; position: relative;">
@@ -163,6 +164,7 @@
                         onblur="this.style.borderColor='#ced4da'; this.style.boxShadow='none'">
                 }
               </td>
+              }
             </tr>
           }
         </tbody>

src/app/components/initial-data-upload/zipfile-upload/zipfile-upload.component.html

@@ -7,7 +7,8 @@
 </h1>
 
 <!-- Contenedor principal que se ocultará durante la validación -->
-<div *ngIf="!isValidating">
+@if (!isValidating) {
+<div>
   <div class="uploader">
     <h2
       mat-dialog-title
@@ -39,8 +40,8 @@
       (dragleave)="onDragLeave($event)"
       (drop)="onDrop($event)"
       (click)="openFileUploader()"
-      *ngIf="!isUploading"
     >
+      @if (!isUploading) {
       <div class="drag-drop-content">
         <mat-icon
           class="upload-icon"
@@ -51,14 +52,9 @@
           {{ hasZipFile && hasExcelFile ? "refresh" : "folder_copy" }}
         </mat-icon>
 
-        <p
-          class="drag-drop-text"
-          *ngIf="
-            (!hasExcelFile || !hasZipFile) &&
-            !isOperationInProgress &&
-            !hasValidationResults
-          "
-        >
+        @if ((!hasExcelFile || !hasZipFile) && !isOperationInProgress &&
+        !hasValidationResults) {
+        <p class="drag-drop-text">
           <strong>Haga clic aquí o arrastre aquí los archivos requeridos</strong
           ><br />
           <span
@@ -66,63 +62,55 @@
             (máximo {{ MAX_ZIP_SIZE_MB }}MB)</span
           >
         </p>
-
-        <p
-          class="drag-drop-text"
-          *ngIf="
-            hasExcelFile &&
-            hasZipFile &&
-            !isOperationInProgress &&
-            !hasValidationResults
-          "
-        >
+        } @if (hasExcelFile && hasZipFile && !isOperationInProgress &&
+        !hasValidationResults) {
+        <p class="drag-drop-text">
           <strong>Haga clic aquí o arrastre nuevos archivos</strong><br />
           <span>Para reemplazar los archivos actuales</span>
         </p>
+        }
 
         <!-- Mensaje cuando está deshabilitado por validación -->
-        <p
-          class="drag-drop-text"
-          *ngIf="hasValidationResults"
-          style="opacity: 0.7"
-        >
+        @if (hasValidationResults) {
+        <p class="drag-drop-text" style="opacity: 0.7">
           <strong>Área de carga deshabilitada</strong><br />
           <span>Los archivos ya han sido validados. </span>
         </p>
+        }
 
         <!-- Mensaje cuando está en progreso -->
-        <p
-          class="drag-drop-text"
-          *ngIf="isOperationInProgress && !hasValidationResults"
-          style="opacity: 0.7"
-        >
+        @if (isOperationInProgress && !hasValidationResults) {
+        <p class="drag-drop-text" style="opacity: 0.7">
           <strong>Operación en progreso...</strong><br />
           <span>Espere a que termine la operación actual</span>
         </p>
+        }
       </div>
+      }
     </div>
 
-    <div *ngIf="isUploading" class="upload-progress drag-drop-area uploading">
+    @if (isUploading) {
+    <div class="upload-progress drag-drop-area uploading">
       <mat-spinner diameter="30"></mat-spinner>
       <p style="margin-top: 10px">
         Subiendo archivo {{ currentFileType === "excel" ? "Excel" : "ZIP" }}...
       </p>
     </div>
+    }
   </div>
 
   <div mat-dialog-content class="prevent-select">
+    @if (isLoading) {
     <div
       class="is-loading animated fadeIn fast"
-      *ngIf="isLoading"
       style="text-align: center; padding: 20px"
     >
       <mat-spinner></mat-spinner>
       <h3 style="margin-top: 10px">Procesando archivos...</h3>
     </div>
-
+    } @if (hasError) {
     <div
       class="has-error animated fadeIn fast"
-      *ngIf="hasError"
       style="text-align: center; padding: 20px"
     >
       <mat-icon
@@ -132,8 +120,8 @@
       >
       <h3 style="font-weight: bold; font-style: italic">{{ errorMessage }}</h3>
     </div>
-
-    <div *ngIf="hasAnyFile && !isLoading" class="files-container">
+    } @if (hasAnyFile && !isLoading) {
+    <div class="files-container">
       <h3 style="margin: 20px 0; display: flex; align-items: center">
         <mat-icon style="margin-right: 8px; color: #2e7d32"
           >description</mat-icon
@@ -245,9 +233,8 @@
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
-
+    } @if (!hasAnyFile && !isLoading && !isUploading) {
     <div
-      *ngIf="!hasAnyFile && !isLoading && !isUploading"
       class="no-files-message"
       style="height: 120px; text-align: center; padding: 20px"
     >
@@ -261,9 +248,8 @@
         Use el área de arriba para cargar su archivo Excel (.xlsx o .xls) y ZIP
       </p>
     </div>
-
+    } @if (hasValidationResults) {
     <div
-      *ngIf="hasValidationResults"
       class="validation-results"
       style="margin-top: 20px; padding: 15px; border-radius: 8px"
       [ngClass]="validationClass"
@@ -276,7 +262,8 @@
         {{ validationSummary }}
       </p>
 
-      <div *ngIf="!validationResult?.valid" style="margin-top: 10px">
+      @if (!validationResult?.valid) {
+      <div style="margin-top: 10px">
         <button
           mat-button
           color="primary"
@@ -289,9 +276,8 @@
           Ver detalles completos
         </button>
       </div>
-
+      } @if (validationResult?.valid) {
       <div
-        *ngIf="validationResult?.valid"
         style="
           margin-top: 10px;
           padding: 10px;
@@ -308,70 +294,78 @@
           archivos.
         </p>
       </div>
+      }
     </div>
+    }
   </div>
 </div>
+}
 
 <!-- Gif de validación (solo se muestra durante la validación) -->
-<div class="validation-overlay" *ngIf="isValidating" [@fadeInOut]>
-  <img
-    src="/assets/img/validating.gif"
-    alt="Validando..."
-    (load)="onGifLoad()"
-    (error)="onGifError()"
-  />
+@if (isValidating) {
+  <div class="validation-overlay" [@fadeInOut]>
+    <img
+      src="/assets/img/validating.gif"
+      alt="Validando..."
+      (load)="onGifLoad()"
+      (error)="onGifError()"
+    />
 
-  <div class="validation-content">
-    <div mat-dialog-title class="validation-text">
-      {{ validationStep || "Validando archivos..." }}
-    </div>
+    <div class="validation-content">
+      <div mat-dialog-title class="validation-text">
+        {{ validationStep || "Validando archivos..." }}
+      </div>
 
-    <mat-spinner diameter="40" color="primary" *ngIf="!gifLoaded">
-    </mat-spinner>
+      @if (!gifLoaded) {
+      <mat-spinner diameter="40" color="primary"> </mat-spinner>
+      }
+    </div>
   </div>
-</div>
+}
 
 <!-- Dialog actions -->
 <mat-dialog-actions
-  align="end"
-  style="padding: 16px; border-top: 1px solid #eee"
->
-  <button
-    mat-button
-    (click)="cancelar()"
-    style="margin-right: 8px"
-    [disabled]="
-      isLoading || isUploading || isValidating || hasValidationResults
-    "
+    align="end"
+    style="padding: 16px; border-top: 1px solid #eee"
   >
-    <mat-icon>close</mat-icon>
-    Cancelar
-  </button>
+    <button
+      mat-button
+      (click)="cancelar()"
+      style="margin-right: 8px"
+      [disabled]="
+        isLoading || isUploading || isValidating || hasValidationResults
+      "
+    >
+      <mat-icon>close</mat-icon>
+      Cancelar
+    </button>
 
-  <!-- Botón de validar (solo si no hay resultados de validación) -->
-  <button
-    mat-raised-button
-    color="primary"
-    class="blue_send_background white_font"
-    (click)="validateAndProcessDocuments()"
-    style="margin-right: 8px"
-    *ngIf="!hasValidationResults"
-    [disabled]="!canValidate || isLoading || isUploading"
-  >
-    <mat-icon>{{ isValidating ? "hourglass_empty" : "verified" }}</mat-icon>
-    {{ isValidating ? "Validando..." : "Validar archivos" }}
-  </button>
+    <!-- Botón de validar (solo si no hay resultados de validación) -->
+    @if (!hasValidationResults) {
+    <button
+      mat-raised-button
+      color="primary"
+      class="blue_send_background white_font"
+      (click)="validateAndProcessDocuments()"
+      style="margin-right: 8px"
+      [disabled]="!canValidate || isLoading || isUploading"
+    >
+      <mat-icon>{{ isValidating ? "hourglass_empty" : "verified" }}</mat-icon>
+      {{ isValidating ? "Validando..." : "Validar archivos" }}
+    </button>
+    }
 
-  <!-- Botón de Aceptar (solo si ya se validaron los documentos) -->
-  <button
-    mat-raised-button
-    color="primary"
-    class="blue_send_background white_font"
-    (click)="dialogRef.close({ success: true })"
-    *ngIf="hasValidationResults"
-    [disabled]="isLoading || isUploading || isValidating"
-  >
-    <mat-icon>check_circle</mat-icon>
-    Aceptar
-  </button>
+    <!-- Botón de Aceptar (solo si ya se validaron los documentos) -->
+    @if (hasValidationResults) {
+    <button
+      mat-raised-button
+      color="primary"
+      class="blue_send_background white_font"
+      (click)="dialogRef.close({ success: true })"
+      [disabled]="isLoading || isUploading || isValidating"
+    >
+      <mat-icon>check_circle</mat-icon>
+      Aceptar
+    </button>
+    }
 </mat-dialog-actions>

src/app/components/process-management/multicriteria-searches/multicriteria-searches.component.html

@@ -250,7 +250,8 @@
           [txtLoading]="interService.get('cargando_informacion')"
         />
 
-        <div class="tab_item_search" *ngIf="!isLoadingWorkflow">
+        @if (!isLoadingWorkflow) {
+        <div class="tab_item_search">
           <section class="override-section">
             <div class="override-actions mt-16">
               <app-search-card
@@ -398,6 +399,7 @@
             #paginatorWorkflow="matPaginator"
           ></mat-paginator>
         </div>
+        }
       </mat-tab>
     </mat-tab-group>
   </mat-card>

src/app/components/process-management/workflow-management/workflow-execution-history/workflow-execution-history.component.html

@@ -1,8 +1,10 @@
 <div mat-dialog-content class="execution-history-container">
   <h2 mat-dialog-title>Historial de Ejecución - {{ workflowName }}</h2>
   
-  <div class="executions-list" *ngIf="groupedExecutions.length > 0; else noData">
-    <div class="execution-card" *ngFor="let execution of groupedExecutions">
+  @if (groupedExecutions.length > 0) {
+  <div class="executions-list">
+    @for (execution of groupedExecutions; track execution.ID_EJECUCION_WORKFLOW) {
+    <div class="execution-card">
       <div class="execution-header">
         <div class="execution-info">
           <h3>Ejecución #{{ execution.ID_EJECUCION_WORKFLOW }}</h3>
@@ -17,9 +19,11 @@
           <div class="date-info">
             <strong>Inicio:</strong> {{ execution.FECHA_INICIO | date:'dd/MM/yyyy HH:mm' }}
           </div>
-          <div class="date-info" *ngIf="execution.FECHA_COMPLETADO">
+          @if (execution.FECHA_COMPLETADO) {
+          <div class="date-info">
             <strong>Fin:</strong> {{ execution.FECHA_COMPLETADO | date:'dd/MM/yyyy HH:mm' }}
           </div>
+          }
           <div class="duration">
             <strong>Duración:</strong> {{ getDuration(execution.FECHA_INICIO, execution.FECHA_COMPLETADO) }}
           </div>
@@ -27,7 +31,8 @@
       </div>
       
       <div class="tasks-timeline">
-        <div class="task-item" *ngFor="let tarea of execution.TAREAS">
+        @for (tarea of execution.TAREAS; track tarea.SECUENCIA) {
+        <div class="task-item">
           <div class="task-sequence">{{ tarea.SECUENCIA }}</div>
           <div class="task-content">
             <div class="task-name">{{ tarea.NOMBRE_TAREA }}</div>
@@ -40,15 +45,16 @@
             </div>
           </div>
         </div>
+        }
       </div>
     </div>
+    }
   </div>
-
-  <ng-template #noData>
-    <div class="no-data">
-      <p>No hay historial de ejecución disponible</p>
-    </div>
-  </ng-template>
+  } @else {
+  <div class="no-data">
+    <p>No hay historial de ejecución disponible</p>
+  </div>
+  }
 </div>
 
 <div mat-dialog-actions align="end">