125 lines
5.5 KiB
HTML
125 lines
5.5 KiB
HTML
<app-loading [isLoading]="loading"></app-loading>
|
|
|
|
<h2 mat-dialog-title>{{ 'manageTaskSchedules' | translate }} {{ data.commandTask?.name }}</h2>
|
|
|
|
<mat-dialog-content>
|
|
<div class="header-actions">
|
|
<button (click)="createNewSchedule()" class="action-button">
|
|
<mat-icon>add</mat-icon>
|
|
{{ 'newSchedule' | translate }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="search-container">
|
|
<mat-form-field appearance="fill" class="search-string">
|
|
<mat-label>{{ 'labelSearchSchedule' | translate }}</mat-label>
|
|
<input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']"
|
|
(keyup.enter)="loadData()">
|
|
<mat-icon matSuffix>search</mat-icon>
|
|
<button *ngIf="filters['name']" mat-icon-button matSuffix (click)="filters['name'] = ''; loadData()">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<app-loading [isLoading]="loading"></app-loading>
|
|
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
|
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
|
|
<th mat-header-cell *matHeaderCellDef> {{ column.header | translate }} </th>
|
|
<td mat-cell *matCellDef="let schedule">
|
|
|
|
<ng-container *ngIf="column.columnDef === 'recurrenceType'">
|
|
<div class="recurrence-type-container">
|
|
<div class="recurrence-chip" [ngClass]="'recurrence-' + column.cell(schedule).type">
|
|
<mat-icon class="recurrence-icon">{{ column.cell(schedule).icon }}</mat-icon>
|
|
<div class="recurrence-content">
|
|
<div class="recurrence-label">{{ column.cell(schedule).label }}</div>
|
|
<div class="recurrence-details">{{ column.cell(schedule).details }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="column.columnDef === 'executionTime'">
|
|
<div class="time-display">
|
|
<mat-icon class="time-icon">schedule</mat-icon>
|
|
<span class="time-value">{{ column.cell(schedule) }}</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="column.columnDef === 'nextExecution'">
|
|
<div class="next-execution">
|
|
<mat-icon class="execution-icon">schedule</mat-icon>
|
|
<span>{{ column.cell(schedule) || ('notCalculated' | translate) }}</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="column.columnDef === 'daysOfWeek'">
|
|
<div class="days-display" *ngIf="column.cell(schedule)">
|
|
<div class="days-chips">
|
|
<span *ngFor="let day of column.cell(schedule).days"
|
|
class="day-chip">{{ day }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="no-data" *ngIf="!column.cell(schedule)">
|
|
<span class="no-data-text">{{ 'notDefined' | translate }}</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="column.columnDef === 'months'">
|
|
<div class="months-display" *ngIf="column.cell(schedule)">
|
|
<div class="months-chips">
|
|
<span *ngFor="let month of column.cell(schedule).months"
|
|
class="month-chip">{{ month }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="no-data" *ngIf="!column.cell(schedule)">
|
|
<span class="no-data-text">{{ 'notDefined' | translate }}</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="column.columnDef !== 'recurrenceType' && column.columnDef !== 'executionTime' &&
|
|
column.columnDef !== 'daysOfWeek' && column.columnDef !== 'months' &&
|
|
column.columnDef !== 'nextExecution' && column.columnDef !== 'enabled'">
|
|
{{ column.cell(schedule) }}
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="column.columnDef === 'enabled'">
|
|
<div class="status-container">
|
|
<div class="status-indicator" [ngClass]="schedule.enabled ? 'status-active' : 'status-inactive'">
|
|
<mat-icon class="status-icon">{{ schedule.enabled ? 'check_circle' : 'cancel' }}</mat-icon>
|
|
<span class="status-text">{{ (schedule.enabled ? 'active' : 'inactive') | translate }}</span>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'actions' | translate }}</th>
|
|
<td mat-cell *matCellDef="let schedule" style="text-align: center;">
|
|
<button mat-icon-button color="primary" (click)="editSchedule(schedule)" [matTooltip]="'editScheduleTooltip' | translate">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="warn" (click)="deleteSchedule(schedule)" [matTooltip]="'deleteScheduleTooltip' | translate">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
|
</table>
|
|
|
|
<div class="paginator-container">
|
|
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
|
|
(page)="onPageChange($event)">
|
|
</mat-paginator>
|
|
</div>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="onNoClick()">{{ 'buttonClose' | translate }}</button>
|
|
</mat-dialog-actions>
|