58 lines
1.9 KiB
HTML

<h1 mat-dialog-title>Create new group</h1>
<form [formGroup]="groupNameForm" class="file-name-form">
<mat-form-field class="file-name-form-field">
<input
matInput
(keydown)="onKeyDown($event)"
type="text"
formControlName="groupName"
[ngClass]="{ 'is-invalid': form.groupName?.errors }"
placeholder="Please enter group name"
/>
<mat-error *ngIf="form.groupName?.touched && form.groupName?.errors && form.groupName?.errors.required"
>Group name is required</mat-error
>
<mat-error *ngIf="form.groupName?.errors && form.groupName?.errors.invalidName"
>Group name is incorrect</mat-error
>
<mat-error *ngIf="form.groupName?.errors && form.groupName?.errors.projectExist"
>Group with this name exists</mat-error
>
</mat-form-field>
</form>
<h5>Add users to group: </h5>
<mat-form-field class="input-field">
<mat-label>Users</mat-label>
<input type="text"
matInput
[matAutocomplete]="auto"
[formControl]="autocompleteControl">
<mat-autocomplete #auto="matAutocomplete"[displayWith]="displayFn" (optionSelected)='selectedUser($event.option.value)'>
<mat-option *ngFor="let user of filteredUsers | async" [value]="user" >
{{user.username}} - {{user.email}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div class="users">
<div *ngFor="let user of usersToAdd">
<div class="userList">
<div>{{user.username}}</div>
<div>{{user.email}}</div>
<mat-icon (click)="delUser(user)">delete</mat-icon>
</div>
</div>
</div>
<div mat-dialog-actions class="button-div">
<button mat-button (click)="onNoClick()" color="accent">Cancel</button>
<button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">
Add group
</button>
</div>