File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-core-lib/src/lib/components/tibco-cloud-configuration/tibco-cloud-configuration.component.ts
Description
TIBCO Cloud Configuration Component
Implements
Example
<tc-tibco-cloud-configuration></tc-tibco-cloud-configuration>Metadata
| selector | tc-tibco-cloud-configuration |
| styleUrls | ./tibco-cloud-configuration.component.css |
| templateUrl | ./tibco-cloud-configuration.component.html |
Index
Properties |
|
Methods |
Inputs |
Outputs |
Constructor
constructor(router: Router, route: ActivatedRoute, buttonsHelper: TcButtonsHelperService, location: Location)
|
|||||||||||||||
|
Parameters :
|
Inputs
| baseRoute | |
Type : string
|
|
| configMenuPages | |
Type : ConfigurationMenuConfig[]
|
|
Outputs
| routeAction | |
Type : EventEmitter<RouteAction>
|
|
|
~event routeAction : Component requests route to another page ~payload RouteAction : RouteAction object to tell caller to navigate somewhere |
|
Methods
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
Properties
| configName |
Type : string
|
| Private createToolbarButtons |
Default value : () => {...}
|
| Public handleSelectionEvent |
Default value : () => {...}
|
| Public handleToolbarButtonEvent |
Default value : () => {...}
|
| showConfig |
Default value : () => {...}
|
| toolbarButtons |
Type : ToolbarButton[]
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Router, Route, ActivatedRoute} from '@angular/router';
import { Location } from '@angular/common';
import { ToolbarButton } from '../../models/tc-widget-header';
import { TcButtonsHelperService } from '../../services/tc-buttons-helper.service';
import {RouteAction} from '../../models/tc-routing-actions';
import {ConfigurationMenuConfig} from '../../models/tc-configuration-menu-config';
/**
* TIBCO Cloud Configuration Component
*
* 
*
* @example <tc-tibco-cloud-configuration></tc-tibco-cloud-configuration>
*/
@Component({
selector: 'tc-tibco-cloud-configuration',
templateUrl: './tibco-cloud-configuration.component.html',
styleUrls: ['./tibco-cloud-configuration.component.css']
})
export class TibcoCloudConfigurationComponent implements OnInit {
@Input() baseRoute: string;
@Input() configMenuPages: ConfigurationMenuConfig[];
/**
* ~event routeAction : Component requests route to another page
* ~payload RouteAction : RouteAction object to tell caller to navigate somewhere
*/
@Output() routeAction: EventEmitter<RouteAction> = new EventEmitter<RouteAction>();
configName: string;
toolbarButtons: ToolbarButton[];
constructor(protected router: Router, protected route: ActivatedRoute, protected buttonsHelper: TcButtonsHelperService, protected location: Location) { }
private createToolbarButtons = (): ToolbarButton[] => {
const homeButton = this.buttonsHelper.createButton('close', 'tcs-close-icon', true, 'Close', true, true);
const buttons = [ homeButton ];
return buttons;
}
public handleSelectionEvent = (id: string) => {
this.configName = id;
const url = this.baseRoute + id.toLowerCase().split(' ').join('-');
this.router.navigate([url]);
}
public handleToolbarButtonEvent = (buttonId: string) => {
if (buttonId === 'close') {
this.routeAction.emit(new RouteAction('backClicked', null));
}
}
showConfig = (option: string) => {
this.configName = option;
console.log('Setting selected: ' + option);
}
ngOnInit() {
this.toolbarButtons = this.createToolbarButtons();
// this.configName = this.route.component;
}
}
<div fxFill fxLayout="column">
<div>
<tc-tibco-cloud-menu-bar [toolbarButtons]="toolbarButtons" [headerText]="'Administration'"
(toolbarButtonEvent)="handleToolbarButtonEvent($event)">
<ng-content select="[customToolbarContent]" fxFlex></ng-content>
</tc-tibco-cloud-menu-bar>
</div>
<div fxFlex fxLayout="row" fxLayoutGap="20px" style="margin: 20px;">
<div fxLayout="column" fxLayoutAlign="start start" style="min-width: 220px;" fxLayoutGap>
<tc-tibco-cloud-setting-menu-entry style="padding-bottom: 20px" *ngFor="let menu of configMenuPages"
[icon]="menu.icon" [title]="menu.entry" [options]="menu.options"
(configureOption)="handleSelectionEvent($event)"></tc-tibco-cloud-setting-menu-entry>
</div>
<!-- configure Box -->
<div fxFlex class="tcs-configuration-outer-pane" fxLayout="column" fxFlex>
<div class="tcs-configuration-router-pane" fxFlex>
<router-outlet></router-outlet>
</div>
</div>
<div fxShow.lt-lg="false" style="min-width: 100px;" fxLayout="column" fxLayoutAlign="start center">
<a href="https://tibcosoftware.github.io/TIBCO-LABS/" target="_blank">
<mat-icon style="height: 64px; width: 64px;" [svgIcon]="'tibco-labs'"></mat-icon>
</a>
</div>
</div>
</div>
./tibco-cloud-configuration.component.css
.starters-custom-layout-panel-text {
line-height: 1.5;
letter-spacing: 0.3px;
text-align: left;
color: #212121;
font-weight: 600;
font-size: 18px;
box-shadow: 0 0 0px black;
}
.starters-custom-layout-box-header {
/* width: 100%; */
height: 40px;
min-height: 40px;
border-radius: 3px;
background-color: #ffffff;
box-shadow: 0 2px 0px 0 #dedede;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.starters-custom-layout-panel-icon {
max-width: 24px;
max-height: 24px;
margin-left: 8px;
margin-right: 8px;
}
.starters-custom-layout-panel-icon {
padding: 4px;
}
.tcs-configuration-router-pane {
overflow: hidden;
}
.tcs-configuration-outer-pane {
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: #ffffff;
border: solid 1px #dedede;
overflow: hidden;
}
Legend
Html element
Component
Html element with directive