From 5197c8b7b3cf7576f1198e4b59a7d6484e793107 Mon Sep 17 00:00:00 2001 From: Idan Amit Date: Mon, 15 Jan 2018 14:31:42 +0200 Subject: Designer-view component for top-nav Create a designer-view component for opening a designer view from the top-nav Updated the API to return the designers as a list and not as an object Created a designer-frame component that will get a designer url to open in the dedicated position Change-Id: Ic42f7695277e88aacdeaa74d4d0f95b49ce44999 Issue-ID: SDC-884 Signed-off-by: Idan Amit --- .../components/layout/top-nav/top-nav.component.ts | 23 ++++++++++++++++---- .../ui/designer/designer-frame.component.html | 5 +++++ .../ui/designer/designer-frame.component.less | 8 +++++++ .../ui/designer/designer-frame.component.ts | 25 ++++++++++++++++++++++ .../ui/designer/designer-frame.module.ts | 25 ++++++++++++++++++++++ 5 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts (limited to 'catalog-ui/src/app/ng2/components') diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts index f48aa4801f..846b84c69f 100644 --- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts @@ -24,6 +24,7 @@ import {MenuItemGroup, MenuItem} from "app/utils"; import {UserService} from "../../../services/user.service"; import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config"; import {TranslateService} from "../../../shared/translator/translate.service"; +import {DesignersConfiguration, Designer} from "app/models"; declare const window:any; @@ -62,10 +63,20 @@ export class TopNavComponent { let result = -1; //set result to current state - this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + this.topLvlMenu.menuItems.every((item:MenuItem, index:number)=> { if (item.state === this.$state.current.name) { - result = index; + if (this.$state.current.name === 'designers') { + const designerIdx = _.findIndex(DesignersConfiguration.designers, (designer: Designer) => designer.designerStateUrl === this.$state.params.path); + if (designerIdx !== -1) { + result = index + designerIdx; + return false; + } + } else { + result = index; + return false; + } } + return true; }); //if it's a different state , checking previous state param @@ -109,6 +120,10 @@ export class TopNavComponent { tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); } }); + + _.each(DesignersConfiguration.designers, (designer: Designer) => { + tmpArray.push(new MenuItem(designer.displayName, null, "designers", "goToState", {path: designer.designerStateUrl}, null)); + }) } this.topLvlMenu = new MenuItemGroup(0, tmpArray, true); @@ -124,9 +139,9 @@ export class TopNavComponent { } } - goToState(state:string, params:Array):Promise { + goToState(state:string, params:any):Promise { return new Promise((resolve, reject) => { - this.$state.go(state, params && params.length > 0 ? [0] : undefined); + this.$state.go(state, params || undefined); resolve(true); }); } diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html new file mode 100644 index 0000000000..752e49e218 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html @@ -0,0 +1,5 @@ +
+
+ +
+
diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less new file mode 100644 index 0000000000..4b9456b5b1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less @@ -0,0 +1,8 @@ +.designer-frame { + + .designer-iframe { + width: 100%; + height: 100%; + border: none; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts new file mode 100644 index 0000000000..b66008f022 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts @@ -0,0 +1,25 @@ +import {Component, OnInit, Input} from "@angular/core"; +import {Designer} from "app/models"; + +@Component({ + selector: 'designer-frame', + templateUrl: './designer-frame.component.html', + styleUrls:['designer-frame.component.less'] +}) + +export class DesignerFrameComponent implements OnInit { + + @Input() designer: Designer; + designerUrl: string; + + constructor() { + } + + ngOnInit(): void { + + this.designerUrl = this.designer.designerProtocol + "://" + + this.designer.designerHost + ":" + + this.designer.designerPort + + this.designer.designerPath; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts new file mode 100644 index 0000000000..1edf195230 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts @@ -0,0 +1,25 @@ +import {NgModule} from "@angular/core"; +import { CommonModule } from '@angular/common'; +import {DesignerFrameComponent} from "./designer-frame.component"; +import {LayoutModule} from "../../layout/layout.module"; +import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; + + +@NgModule({ + declarations: [ + DesignerFrameComponent + ], + imports: [ + CommonModule, + LayoutModule, + GlobalPipesModule + ], + entryComponents: [DesignerFrameComponent], + exports: [ + DesignerFrameComponent + ], + providers: [] +}) +export class DesignerFrameModule { + +} -- cgit 1.2.3-korg