59 lines
2.6 KiB
HTML
59 lines
2.6 KiB
HTML
<h2 mat-dialog-title>{{ editing ? ('editCommandGroup' | translate) : ('createCommandGroup' | translate) }}</h2>
|
|
<mat-dialog-content class="form-container">
|
|
<app-loading [isLoading]="loading"></app-loading>
|
|
|
|
<form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
|
|
<mat-form-field>
|
|
<mat-label>{{ 'groupNameLabel' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="groupName" name="groupName" required />
|
|
</mat-form-field>
|
|
|
|
<mat-slide-toggle [(ngModel)]="enabled" name="enabled">{{ 'enabledToggle' | translate }}</mat-slide-toggle>
|
|
|
|
<div class="command-selection">
|
|
<div class="available-commands">
|
|
<h3>{{ 'availableCommandsTitle' | translate }}</h3>
|
|
<div class="table-wrapper">
|
|
<table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef> {{ 'nameColumn' | translate }} </th>
|
|
<td mat-cell *matCellDef="let command"> {{ command.name }} </td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef> {{ 'actionsColumn' | translate }} </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>{{ 'selectedCommandsTitle' | translate }}</h3>
|
|
<div class="selected-commands-list" cdkDropList (cdkDropListDropped)="drop($event)">
|
|
<div class="commands-container">
|
|
<div *ngFor="let command of selectedCommands" cdkDrag>
|
|
<div class="command-item">
|
|
<mat-icon class="drag-handle" cdkDragHandle>drag_indicator</mat-icon>
|
|
{{ command.name }}
|
|
<mat-icon class="remove-icon" (click)="removeCommand(command)">close</mat-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
|
|
<button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
|
|
</mat-dialog-actions> |