File
Description
This component provides a view to add a member to a project
The view is just mocked, so no interaction with the backend or database is provided yet
Implements
Metadata
| selector |
app-add-project-member-dialog |
| styleUrls |
./add-project-member-dialog.component.scss |
| templateUrl |
./add-project-member-dialog.component.html |
|
Public
data
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
|
|
loading
|
Default value : false
|
|
|
|
selectedUsers
|
Type : []
|
Default value : []
|
|
|
|
validation
|
Default value : new FormControl('', [Validators.required])
|
|
|
|
validationRole
|
Default value : new FormControl('', [Validators.required])
|
|
|
import {Component, Inject, OnInit} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
/**
* This component provides a view to add a member to a project
* The view is just mocked, so no interaction with the backend or database is provided yet
*/
@Component({
selector: 'app-add-project-member-dialog',
templateUrl: './add-project-member-dialog.component.html',
styleUrls: ['./add-project-member-dialog.component.scss']
})
export class AddProjectMemberDialogComponent implements OnInit {
loading = false;
selectedUsers = [];
constructor(public dialogRef: MatDialogRef<AddProjectMemberDialogComponent>, @Inject(MAT_DIALOG_DATA) public data) {}
validation = new FormControl('', [Validators.required]);
validationRole = new FormControl('', [Validators.required]);
ngOnInit(): void {
this.validationRole.setValue('administrator');
}
//cancel button
onNoClick(): void {
this.dialogRef.close();
}
//add member button
onOkClick(): void {
const data = {usersToAdd: this.selectedUsers};
this.dialogRef.close(data);
}
}
<h1 mat-dialog-title>Add Project Member</h1>
<div class="dialog-content" mat-dialog-content>
<!-- select a user to add -->
<ng-select
[formControl]="validation"
class="ng-select-label"
[dropdownPosition]="'bottom'"
[multiple]="true"
[(ngModel)]="this.selectedUsers"
[ngModelOptions]="{ standalone: true }"
placeholder="Select User(s)"
>
<ng-option *ngFor="let user of this.data.addableMembers" [value]="user.id"> {{ user.displayName }} </ng-option>
</ng-select>
<!-- select the role of the user to be added -->
<mat-form-field class="stretch" appearance="outline">
<mat-label>Role</mat-label>
<mat-select [formControl]="validationRole" #role>
<mat-option value="administrator">Administrator</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- close window or add user and close window -->
<div mat-dialog-actions class="actions">
<button mat-raised-button color="warn" (click)="onNoClick()">Cancel</button>
<button mat-raised-button color="success" [class.spinner]="loading" [disabled]="loading || validation.invalid" (click)="onOkClick()">
Add
</button>
</div>
.dialog-content {
min-height: 400px;
min-width: 400px;
max-width: 600px;
}
.actions {
float: right;
}
.stretch {
width: 100%;
}
.mat-success {
background-color: green;
color: #fff;
}
Legend
Html element with directive