Skip to content

Latest commit

 

History

History
86 lines (73 loc) · 3.6 KB

content-type-dialog.component.md

File metadata and controls

86 lines (73 loc) · 3.6 KB
Raw
Title Added Status Last reviewed
Content Type Dialog component
v2.0.0
Active
2021-01-20

Content Type Dialog component

Confirm dialog when user changes content type of a node.

Details

The Content Type Dialog component works as a dialog showing a confirm message when the user changes the content type of a node. It is showing the properties of the new content type selected.

Showing the dialog

Unlike most components, the Content Type 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 ContentTypeDialogComponentData interface to work with the Dialog's data option:

export interface ContentTypeDialogComponentData {
    title: string;
    description: string;
    confirmMessage: string;
    select: Subject<boolean>;
    nodeType?: 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
confirmMessage string "" Text that will be showed on the top of properties list accordion
select Subject<Node> Event emitted when apply button is clicked
nodeType string "" current prefixed name of the content type selected

If you don't want to manage the dialog yourself then it is easier to use the methods of the Content Type Property 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() {
    const data: ContentTypeDialogComponentData = {
        title: 'CORE.METADATA.CONTENT_TYPE.DIALOG.TITLE',
        description: 'CORE.METADATA.CONTENT_TYPE.DIALOG.DESCRIPTION',
        confirmMessage: 'CORE.METADATA.CONTENT_TYPE.DIALOG.CONFIRM',
        select: select,
        nodeType
    };
    this.dialog.open(
        ContentTypeDialogComponent,
        {
            data, panelClass: 'adf-content-type-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 ContentTypeDialogData object passed to the dialog. When the dialog action is selected by clicking, the data.select stream will be completed.