File

projects/web-mev/src/app/features/workspace-detail/components/metadata/dialogs/view-set-dialog/view-set-dialog.component.ts

Description

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

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector mev-view-set-dialog
styleUrls ./view-set-dialog.component.scss
templateUrl ./view-set-dialog.component.html

Index

Properties
Methods

Constructor

constructor(dialogRef: MatDialogRef, data: any)
Parameters :
Name Type Optional
dialogRef MatDialogRef<ViewSetDialogComponent> No
data any No

Methods

ngOnInit
ngOnInit()
Returns : void
onNoClick
onNoClick()

Function is triggered when user clicks the Close button

Returns : void

Properties

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;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""