projects/web-mev/src/app/features/workspace-detail/components/metadata/dialogs/view-set-dialog/view-set-dialog.component.ts
View Custom Feature/Observation Dialog Component
Modal dialog component which is used to view a custom feature or observation set User can view set name and the list of features/samples
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | mev-view-set-dialog |
| styleUrls | ./view-set-dialog.component.scss |
| templateUrl | ./view-set-dialog.component.html |
Properties |
|
Methods |
constructor(dialogRef: MatDialogRef
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onNoClick |
onNoClick()
|
|
Function is triggered when user clicks the Close button
Returns :
void
|
| Public data |
Type : any
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
| Public dialogRef |
Type : MatDialogRef<ViewSetDialogComponent>
|
| isObservationSet |
Type : boolean
|
import {
Component,
OnInit,
ChangeDetectionStrategy,
Inject
} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { CustomSetType } from '@app/_models/metadata';
/**
* View Custom Feature/Observation Dialog Component
*
* Modal dialog component which is used to view a custom feature or observation set
* User can view set name and the list of features/samples
*/
@Component({
selector: 'mev-view-set-dialog',
templateUrl: './view-set-dialog.component.html',
styleUrls: ['./view-set-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ViewSetDialogComponent implements OnInit {
isObservationSet: boolean;
constructor(
public dialogRef: MatDialogRef<ViewSetDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {}
/*
* Initialization of the isObservationSet property
* If no set type, use Observation Set type by default
*/
ngOnInit(): void {
this.isObservationSet =
this.data.type === CustomSetType.FeatureSet ? false : true;
}
/**
* Function is triggered when user clicks the Close button
*
*/
onNoClick(): void {
this.dialogRef.close();
}
}
<div class="container">
<p mat-dialog-title>{{ data.name }}</p>
<div mat-dialog-content>
<p>Type: {{ data.type }}</p>
{{ isObservationSet ? 'Observations' : 'Features' }}:
<ul>
<li *ngFor="let elem of data.elements">{{ elem.id }}</li>
</ul>
</div>
<div mat-dialog-actions>
<button mat-button mat-raised-button (click)="onNoClick()" color="accent" tabindex="-1">Close</button>
</div>
</div>
./view-set-dialog.component.scss
.container {
font-size: 14px;
display: flex;
flex-direction: column;
min-width: 450px;
}
.container > * {
width: 100%;
}
.mat-dialog-title {
font-weight: bold;
font-size: 15px;
}
.mat-dialog-content {
overflow-y: auto;
max-height: 400px;
}