File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
mev-add-sample-set |
| styleUrls |
./add-sample-set.component.scss |
| templateUrl |
./add-sample-set.component.html |
|
Public
data
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
|
|
|
isObservationSet
|
Default value : true
|
|
|
import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CustomSetType } from '@app/_models/metadata';
@Component({
selector: 'mev-add-sample-set',
templateUrl: './add-sample-set.component.html',
styleUrls: ['./add-sample-set.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AddSampleSetComponent {
setForm: FormGroup;
isObservationSet = true;
customSetType: string;
constructor(
private formBuilder: FormBuilder,
public dialogRef: MatDialogRef<AddSampleSetComponent>,
@Inject(MAT_DIALOG_DATA) public data
) {}
ngOnInit(): void {
// if no custom set type is passed, assume Observation set by default
this.customSetType = this.data?.type || CustomSetType.ObservationSet;
if (this.customSetType === CustomSetType.FeatureSet) {
this.isObservationSet = false;
}
this.setForm = this.formBuilder.group({
customSetName: [this.data.name, [Validators.required]],
customSetColor: [
'#000000',
[...(this.isObservationSet ? [Validators.required] : [])]
]
});
}
submit() {
// empty stuff
}
onNoClick(): void {
this.dialogRef.close();
}
confirmAdd() {
const name = this.setForm.value.customSetName;
const color = this.setForm.value.customSetColor;
const customSet = {
name: name,
color: color
};
this.dialogRef.close(customSet);
}
}
<div class="container">
<h3 mat-dialog-title>Add a new custom {{ customSetType | lowercase}}</h3>
<form class="mat-dialog-content" [formGroup]="setForm" (ngSubmit)="submit">
<div class="form">
<mat-form-field class="form-control" color="accent">
<mat-label>{{ customSetType }} name:</mat-label>
<input matInput formControlName=customSetName>
</mat-form-field>
<mat-form-field *ngIf="isObservationSet" class="form-control" color="accent">
<mat-label>Select your color for the observation set:</mat-label>
<input type="color" class="color-picker-input" matInput formControlName=customSetColor>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button mat-raised-button color="accent" (click)="confirmAdd()"
[type]="submit" [disabled]="!setForm.valid" [mat-dialog-close]="1">Save</button>
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>
<p></p>
</form>
</div>
.container {
display: flex;
flex-direction: column;
min-width: 450px;
}
.container > * {
width: 100%;
}
.form {
display: flex;
flex-direction: column;
padding-top: 6px;
}
.mat-form-field {
font-size: 16px;
flex-grow: 1;
}
.mat-dialog-content {
max-height: none;
overflow: visible;
position: relative;
}
.form-control {
width: 100%;
}
.mat-dialog-actions {
position: absolute;
bottom: 0;
}
.color-picker-input {
width: 40px;
height: 40px;
margin: 0;
padding: 0;
}
Legend
Html element with directive