64 lines
2.4 KiB
HTML
64 lines
2.4 KiB
HTML
<h2 mat-dialog-title>{{ editing ? 'Editar' : 'Crear' }} grupo de comando</h2>
|
|
<mat-dialog-content class="form-container">
|
|
<div *ngIf="loading" class="loading-container">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|
|
|
|
<form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
|
|
<mat-form-field>
|
|
<mat-label>Nombre del Grupo</mat-label>
|
|
<input matInput [(ngModel)]="groupName" name="groupName" required />
|
|
</mat-form-field>
|
|
|
|
<mat-slide-toggle [(ngModel)]="enabled" name="enabled">Habilitado</mat-slide-toggle>
|
|
|
|
<div class="command-selection">
|
|
<div class="available-commands">
|
|
<h3>Comandos Disponibles</h3>
|
|
<div class="table-wrapper">
|
|
<table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef> Nombre </th>
|
|
<td mat-cell *matCellDef="let command"> {{ command.name }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef> Acciones </th>
|
|
<td mat-cell *matCellDef="let command">
|
|
<button mat-icon-button type="button" (click)="addCommand(command)">
|
|
<mat-icon>add</mat-icon>
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="['name', 'actions']"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: ['name', 'actions'];"></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selected-commands">
|
|
<h3>Comandos Seleccionados</h3>
|
|
<div class="selected-commands-list">
|
|
<div class="commands-container">
|
|
<ng-container *ngFor="let command of selectedCommands; let last = last">
|
|
<div class="command-item">
|
|
{{ command.name }}
|
|
<mat-icon class="remove-icon" (click)="removeCommand(command)">close</mat-icon>
|
|
</div>
|
|
<ng-container *ngIf="!last">
|
|
<mat-icon class="chevron-icon">chevron_right</mat-icon>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions align="end">
|
|
<button mat-button (click)="close()">Cancelar</button>
|
|
<button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
|
|
</mat-dialog-actions>
|