develop #69

Merged
maranda merged 2 commits from develop into main 2026-04-20 11:46:59 +02:00
4 changed files with 152 additions and 29 deletions

View File

@ -107,12 +107,16 @@
/* Layout horizontal: imagen + partición */
.deploy-config-row {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 4px;
}
.image-config-section {
flex: 0 0 340px;
min-width: 0;
max-width: 340px;
overflow: hidden;
}
.image-config-section .filters-row {
@ -125,11 +129,26 @@
width: 100% !important;
}
.partition-column {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 8px;
}
.partition-select-section {
flex: 1;
min-width: 0;
}
.deploy-mode-row {
background: #ffffff;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 8px 12px;
}
.form-section-title mat-icon {
color: #667eea;
font-size: 24px;
@ -343,27 +362,60 @@ table {
/* Resumen de configuración avanzada */
.method-config-summary {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
padding: 8px 12px;
background: #f0f4ff;
border: 1px solid #d0d9ff;
border-radius: 8px;
margin-top: 8px;
gap: 4px;
min-width: 0;
overflow: hidden;
}
.summary-top-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.summary-header {
display: flex;
align-items: center;
gap: 4px;
}
.summary-header-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: #667eea;
flex-shrink: 0;
}
.summary-header-label {
font-size: 12px;
font-weight: 600;
color: #667eea;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.summary-content {
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
min-width: 0;
overflow: hidden;
}
.summary-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #667eea;
font-size: 16px;
width: 16px;
height: 16px;
color: #28a745;
flex-shrink: 0;
}
@ -374,6 +426,39 @@ table {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Estado pendiente de configurar método */
.method-config-pending {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: #fff8e1;
border: 1px solid #ffe082;
border-radius: 8px;
margin-top: 8px;
}
.pending-message {
display: flex;
align-items: center;
gap: 6px;
}
.pending-icon {
font-size: 18px;
width: 18px;
height: 18px;
color: #f9a825;
flex-shrink: 0;
}
.pending-text {
font-size: 12px;
color: #795548;
}
/* Mensajes de error */
@ -764,9 +849,9 @@ table {
flex-wrap: wrap;
margin-bottom: 20px;
padding: 16px 20px;
background: #f7faff;
background: #ffffff;
border-radius: 10px;
border: 1px solid #e2e8ff;
border: 1px solid #e9ecef;
}
.deploy-mode-label {

View File

@ -157,9 +157,51 @@
</mat-form-field>
</div>
<!-- Configuración avanzada del método (Multicast / P2P) -->
@if (imageType === 'monolithic' && selectedMethod && needsAdvancedConfig(selectedMethod)) {
@if (methodConfigured) {
<div class="method-config-summary">
<div class="summary-top-row">
<div class="summary-header">
<mat-icon class="summary-header-icon">tune</mat-icon>
<span class="summary-header-label">Parámetros de {{ getMethodLabel() }}</span>
</div>
<button mat-icon-button matTooltip="Editar parámetros de {{ getMethodLabel() }}" (click)="openMethodConfigDialog()">
<mat-icon>edit</mat-icon>
</button>
</div>
<div class="summary-content">
<mat-icon class="summary-icon">check_circle</mat-icon>
<span class="summary-text">{{ getMethodConfigSummary() }}</span>
</div>
</div>
} @else {
<div class="method-config-pending">
<div class="pending-message">
<mat-icon class="pending-icon">warning</mat-icon>
<span class="pending-text">Se requiere configurar los parámetros de {{ getMethodLabel() }}</span>
</div>
<button mat-stroked-button color="primary" (click)="openMethodConfigDialog()">
<mat-icon>settings</mat-icon>
Configurar {{ getMethodLabel() }}
</button>
</div>
}
}
<div *ngIf="errorMessage" class="error-message">
{{ errorMessage }}
</div>
</div>
<!-- Columna derecha: modo de operación + partición -->
<div class="partition-column">
<!-- Modo de despliegue: solo visible para métodos no-direct -->
@if (imageType === 'monolithic' && selectedMethod && !isDirectMethod()) {
<div class="form-section-row">
<div class="form-section-row deploy-mode-row">
<div class="deploy-mode-label">
<mat-icon>cached</mat-icon>
<span>Modo de operación</span>
@ -187,21 +229,6 @@
</div>
}
<div *ngIf="errorMessage" class="error-message">
{{ errorMessage }}
</div>
<div *ngIf="methodConfigured && selectedMethod && needsAdvancedConfig(selectedMethod)" class="method-config-summary">
<div class="summary-content">
<mat-icon class="summary-icon">tune</mat-icon>
<span class="summary-text">{{ getMethodConfigSummary() }}</span>
</div>
<button mat-icon-button matTooltip="Editar configuración" (click)="openMethodConfigDialog()">
<mat-icon>edit</mat-icon>
</button>
</div>
</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">
@ -253,6 +280,8 @@
</div>
</div>
}
</div><!-- /partition-column -->
</div>
<!-- Tabla de commits Git (solo cuando hay commits cargados) -->

View File

@ -274,11 +274,10 @@ export class DeployImageComponent implements OnInit {
}
}
this.errorMessage = "";
this.methodConfigured = false;
if (this.selectedMethod && this.needsAdvancedConfig(this.selectedMethod)) {
this.openMethodConfigDialog();
} else {
this.methodConfigured = false;
}
return true;
@ -288,6 +287,16 @@ export class DeployImageComponent implements OnInit {
return ['udpcast', 'uftp', 'udpcast-direct', 'p2p'].includes(method);
}
getMethodLabel(): string {
const labels: Record<string, string> = {
'udpcast': 'Multicast',
'uftp': 'UFTP',
'udpcast-direct': 'Multicast (directo)',
'p2p': 'Torrent (P2P)',
};
return this.selectedMethod ? (labels[this.selectedMethod] || this.selectedMethod) : '';
}
openMethodConfigDialog(): void {
const dialogRef = this.dialog.open(DeployMethodConfigDialogComponent, {
width: '540px',

View File

@ -73,7 +73,7 @@ export class ManageRepositoryComponent implements OnInit {
this.http.put(`${this.baseUrl}${this.repositoryId}`, payload).subscribe(
(response) => {
this.toastService.success('Repositorio editada correctamente');
this.dialogRef.close();
this.dialogRef.close(true);
},
(error) => {
this.toastService.error(error['error']['hydra:description']);
@ -83,7 +83,7 @@ export class ManageRepositoryComponent implements OnInit {
this.http.post(`${this.baseUrl}/image-repositories`, payload).subscribe(
(response) => {
this.toastService.success('Repositorio añadido correctamente');
this.dialogRef.close();
this.dialogRef.close(true);
},
(error) => {
this.toastService.error(error['error']['hydra:description']);