113 lines
4.5 KiB
HTML
113 lines
4.5 KiB
HTML
<h2 mat-dialog-title class="dialog-title">
|
|
{{ data.schedule ? 'Editar' : 'Crear' }} Programación de Tarea
|
|
</h2>
|
|
|
|
<mat-dialog-content class="dialog-content">
|
|
<form [formGroup]="form" (ngSubmit)="onSubmit()" class="task-form">
|
|
|
|
<mat-form-field appearance="fill" class="w-full">
|
|
<mat-label>Repetición</mat-label>
|
|
<mat-select formControlName="recurrenceType">
|
|
<mat-option *ngFor="let type of recurrenceTypes" [value]="type">{{ type | titlecase }}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="w-full" *ngIf="form.get('recurrenceType')?.value === 'none'">
|
|
<mat-label>Fecha de ejecución</mat-label>
|
|
<input matInput [matDatepicker]="oneTimePicker" formControlName="executionDate">
|
|
<mat-datepicker-toggle matSuffix [for]="oneTimePicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #oneTimePicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="w-full">
|
|
<mat-label>Hora de ejecución</mat-label>
|
|
<input matInput formControlName="executionTime" placeholder="08:00" type="time">
|
|
<mat-hint>Hora en formato 24h (ej: 14:30)</mat-hint>
|
|
</mat-form-field>
|
|
|
|
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="mb-4">
|
|
<label class="section-label">Días de la semana:</label>
|
|
<div class="weekday-toggle-group">
|
|
<button
|
|
*ngFor="let day of weekDays"
|
|
type="button"
|
|
class="weekday-toggle"
|
|
[class.selected]="selectedDays[day]"
|
|
(click)="toggleDay(day)">
|
|
{{ day.slice(0, 3) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" >
|
|
<label class="section-label">Meses:</label>
|
|
<div class="month-toggle-row" *ngFor="let row of monthRows">
|
|
<button
|
|
*ngFor="let month of row"
|
|
type="button"
|
|
class="month-toggle"
|
|
[class.selected]="selectedMonths[month]"
|
|
(click)="toggleMonth(month)">
|
|
{{ month.slice(0, 3) }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="form.get('recurrenceType')?.value !== 'none'" class="custom-time" formGroupName="recurrenceDetails">
|
|
<mat-form-field appearance="fill" class="w-half">
|
|
<mat-label>Fecha de inicio</mat-label>
|
|
<input matInput [matDatepicker]="fromPicker" formControlName="initDate">
|
|
<mat-datepicker-toggle matSuffix [for]="fromPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #fromPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="w-half">
|
|
<mat-label>Fecha de fin</mat-label>
|
|
<input matInput [matDatepicker]="toPicker" formControlName="endDate">
|
|
<mat-datepicker-toggle matSuffix [for]="toPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #toPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-checkbox formControlName="enabled" class="enabled-checkbox">
|
|
<mat-icon class="checkbox-icon">power_settings_new</mat-icon>
|
|
Activar programación
|
|
</mat-checkbox>
|
|
|
|
<!-- Resumen mejorado de la programación -->
|
|
<mat-card *ngIf="summaryText" class="summary-card">
|
|
<mat-card-header>
|
|
<mat-card-title class="summary-title">
|
|
<mat-icon color="primary">info</mat-icon>
|
|
Resumen de la Programación
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="schedule-summary">
|
|
<div class="summary-item">
|
|
<mat-icon class="summary-icon">schedule</mat-icon>
|
|
<span class="summary-text">{{ summaryText }}</span>
|
|
</div>
|
|
<div class="summary-item" *ngIf="nextExecutionDate">
|
|
<mat-icon class="summary-icon">next_plan</mat-icon>
|
|
<span class="summary-text">Próxima ejecución: {{ nextExecutionDate | date:'full' }}</span>
|
|
</div>
|
|
<div class="summary-item" *ngIf="executionCount">
|
|
<mat-icon class="summary-icon">repeat</mat-icon>
|
|
<span class="summary-text">Se ejecutará {{ executionCount }} veces</span>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</form>
|
|
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="onCancel()">{{ 'buttonCancel' | translate }}</button>
|
|
<button class="submit-button" [disabled]="!form.valid" (click)="onSubmit()">
|
|
<mat-icon>save</mat-icon>
|
|
{{ 'buttonSave' | translate }}
|
|
</button>
|
|
</mat-dialog-actions>
|