ThingsPro Window

Features

Usages

1. Create a tp-window state config or write a config in template directly.

Example: create a config

const tpStateConfig: TpWindowStateConfig = new TpWindowStateConfig('stateId', 'stateName', 'STATE', 'settings');

Example: write config in template files.

<tp-window-state stateId="demoState" name="{{Demo State}}" type="CONTENT" icon="settings">  
</tp-window-state>

2. Setup tp-window

Notice: tp-window id and tp-window-state config is required.

<tp-window [name]="name" maxStateNumber="3" id="tpDemoId" [optionPortal]="portal" (stateChange)="onStateChange($event)">
  <tp-window-state [config]="tpStateConfig">
    <!-- Your DOM template -->
  <tp-window-state>
</tp-window>

3. Inject TpWindowService to manipulate your states.

constructor(public tpWindow: TpWindowService) {}
// Navigate a window to a state
this.tpWindow.navigateTo('windowId.stateId'); // windowId + '.' + stateId

// Show or hide progress bar
this.tpWindow.progressStart('tpDemoId');
this.tpWindow.progressComplete('tpDemoId');

// Show or hide state icon
this.tpWindow.setIcons([{stateUrl: 'tpDemoId.stateId',isShow: false}, {stateUrl: 'tpDemoId.stateId',isShow: false}]);

API Document

tp-window (TpWindowComponent)

| Property | Type | Description | | -------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | *windowId | @Input string | The identification for window | | name | @Input string | The name will be showed on the title of component. | | maxStateNumber | @Input number | Limit the total number of icons on the tool bar. The rest of icons will be sorted to menu list as the number of icons exceeds it. This setting could be used to RWD. | | loading | @Input Observable<any> | It Will show a loading bar before observable completed. | | optionPortal | @Input Portal<any> | Add customized actions or information by using CdkPortal | | stateChange | @Output EventEmitter<WindowStateComponent> | emit clicked state component. |

tp-window-state (TpWindowStateComponent)

| Property | Type | Description | | -------- | ---------------------------- | ------------- | | *config | @input TpWindowStateConfig | State config. |

TpWindowStateConfig

| Property | Type | Description | | -------- | ------------------- | ---------------------------------------------------------------------------------------- | | stateId | string | The identification for state. | | name | string | The name will be showed on the menu item or tooltip. | | type | TpWindowStateType | 'ACTION' 'STATE' 'CONTENT' | | icon | string | The name of Angular Material Icon ，please see Icons |

TpWindowService

| Methods | Description | | --------------------------------------------------------------- | ---------------------------- | | navigateTo(stateUrl: string) | Navigate a state of a window | | progress(windowId: string, progress: Observable<any>) | Show progress bar | | progressStart(windowId: string) | Show progress bar | | progressComplete(windowId: string) | Hide progress bar | | setIcons(options: Array<{stateUrl: string, isShow: boolean}>) | Hide a icon of a state |