Skip to content

Latest commit

 

History

History
95 lines (78 loc) · 3.58 KB

aspect-list-dialog.component.md

File metadata and controls

95 lines (78 loc) · 3.58 KB
Title Added Status Last reviewed
Aspect List Dialog component
v2.0.0
Active
2021-01-20

Aspect List Dialog component

Allows a user to choose aspects for a node.

Details

The Aspect List Dialog component works as a dialog showing the list of aspects available. It is possible to filter the aspect showed via the app.config.json.

Showing the dialog

Unlike most components, the Aspect List Dialog component is typically shown in a dialog box rather than the main page and you are responsible for opening the dialog yourself. You can use the Angular Material Dialog for this, as shown in the usage example. ADF provides the AspectListDialogComponentData interface to work with the Dialog's data option:

export interface AspectListDialogComponentData {
    title: string;
    description: string;
    overTableMessage: string;
    select: Subject<string[]>;
    nodeId?: string;
    excludedAspects?: string[];
}

The properties are described in the table below:

Name Type Default value Description
title string "" Dialog title
description string "" Text to appear as description under the dialog title
overTableMessage string "" Text that will be showed on the top of the aspect list table
select Subject<string[]> Event emitted with the current node selection when the dialog closes
nodeId string "" Identifier of a node to apply aspects to.
excludedAspects string[] undefined List of aspects' ids which should not be displayed.

If you don't want to manage the dialog yourself then it is easier to use the Aspect List component, or the methods of the Aspect List service, which create the dialog for you.

Usage example

import { MatDialog } from '@angular/material/dialog';
import { AspectListDialogComponentData, AspectListDialogComponent} from '@adf/content-services'
import { Subject } from 'rxjs/Subject';
 ...

constructor(dialog: MatDialog ... ) {}

openSelectorDialog() {
    data: AspectListDialogComponentData = {
        title: "Choose an item",
        description: "Choose",
        overTableMessage: "Over Table Message",
        nodeId: currentNodeID,
        select: new Subject<Node[]>()
    };

    this.dialog.open(
        AspectListDialogComponent,
        {
            data, panelClass: 'adf-aspect-list-dialog',
            width: '630px'
        }
    );

    data.select.subscribe((selections: Node[]) => {
        // Use or store selection...
    }, 
    (error)=>{
        //your error handling
    }, 
    ()=>{
        //action called when an action or cancel is clicked on the dialog
        this.dialog.closeAll();
    });
}

All the results will be streamed to the select subject present in the AspectListDialogComponentData object passed to the dialog. When the dialog action is selected by clicking, the data.select stream will be completed.

See also