From ecd3d712aad4ac37f399c90f4bf9258bfe483b9a Mon Sep 17 00:00:00 2001 From: Idan Amit Date: Mon, 7 May 2018 15:55:00 +0300 Subject: Developed disable navigation mechanism Added a mechanism to disable and enable the navigation when waiting for a response from a plugin Change-Id: I11cba9a7fc2a32e3d3d32fb9cf9f0590900fe73b Issue-ID: SDC-1277 Signed-off-by: Idan Amit --- catalog-ui/src/app/models/base-pubsub.ts | 6 +++ .../ui/plugin/plugin-frame.component.less | 4 ++ .../components/ui/plugin/plugin-frame.component.ts | 3 +- .../src/app/ng2/services/event-bus.service.ts | 44 ++++++++++++++++++++++ catalog-ui/src/app/ng2/services/plugins.service.ts | 2 +- .../view-models/workspace/workspace-view-model.ts | 7 ++-- .../src/app/view-models/workspace/workspace.less | 2 +- 7 files changed, 61 insertions(+), 7 deletions(-) (limited to 'catalog-ui') diff --git a/catalog-ui/src/app/models/base-pubsub.ts b/catalog-ui/src/app/models/base-pubsub.ts index b9ff788a57..c4b109f1d5 100644 --- a/catalog-ui/src/app/models/base-pubsub.ts +++ b/catalog-ui/src/app/models/base-pubsub.ts @@ -97,6 +97,12 @@ export class BasePubSub { } } + public isWaitingForEvent(eventName: string) : boolean { + return Array.from(this.eventsToWait.values()).some((eventsList: Array) => + eventsList.indexOf(eventName) !== -1 + ); + } + protected onMessage(event: any) { if (this.subscribers.has(event.data.originId)) { this.eventsCallbacks.forEach((callback: Function) => { diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less index 4234987072..d2d4c98cb4 100644 --- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less +++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less @@ -4,5 +4,9 @@ width: 100%; height: 100%; border: none; + top: 3px; + left: 2px; + position: relative; + z-index: 1030 } } diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts index 4759721034..83d302b2a8 100644 --- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts @@ -1,4 +1,4 @@ -import {Component, Inject, Input, Output, OnInit, EventEmitter, ViewChild, ElementRef} from "@angular/core"; +import {Component, Inject, Input, Output, OnInit, EventEmitter} from "@angular/core"; import {URLSearchParams} from '@angular/http'; import {Plugin} from "app/models"; import {EventBusService} from "../../../services/event-bus.service"; @@ -63,7 +63,6 @@ export class PluginFrameComponent implements OnInit { this.eventBusService.notify("WINDOW_OUT").subscribe(() => { this.isClosed = true; - this.eventBusService.unregister(this.plugin.pluginId); this.$state.go(toState.name, toParams); diff --git a/catalog-ui/src/app/ng2/services/event-bus.service.ts b/catalog-ui/src/app/ng2/services/event-bus.service.ts index 438437d193..cff18e1db3 100644 --- a/catalog-ui/src/app/ng2/services/event-bus.service.ts +++ b/catalog-ui/src/app/ng2/services/event-bus.service.ts @@ -49,4 +49,48 @@ export class EventBusService extends BasePubSub { this.handlePluginRegistration(event.data, event); } } + + public disableNavigation(isDisable: boolean) { + if (isDisable) { + let disableDiv = document.createElement('div'); + disableDiv.style.cssText = "position: fixed;\n" + + "z-index: 1029;\n" + + "background: rgba(0,0,0,0.5);\n" + + "width: 100%;\n" + + "height: 100%;\n" + + "top: 0;\n" + + "left: 0;"; + disableDiv.setAttribute("class", "disable-navigation-div"); + document.body.appendChild(disableDiv); + } + else { + document.getElementsByClassName("disable-navigation-div")[0].remove(); + } + } + + public notify(eventType:string, eventData?:any, disableOnWaiting:boolean=true) { + let doDisable = false; + + if (disableOnWaiting) { + doDisable = this.isWaitingForEvent(eventType); + + if (doDisable) { + this.disableNavigation(true); + } + } + + const origSubscribe = super.notify(eventType, eventData).subscribe; + + return { + subscribe: function (callbackFn) { + origSubscribe(() => { + if (doDisable) { + this.disableNavigation(false); + } + + callbackFn(); + }); + }.bind(this) + }; + } } diff --git a/catalog-ui/src/app/ng2/services/plugins.service.ts b/catalog-ui/src/app/ng2/services/plugins.service.ts index 4ec90d1ac4..7a85b6e1b6 100644 --- a/catalog-ui/src/app/ng2/services/plugins.service.ts +++ b/catalog-ui/src/app/ng2/services/plugins.service.ts @@ -19,5 +19,5 @@ export class PluginsService { return plugin.pluginDisplayOptions["context"] && plugin.pluginDisplayOptions["context"].displayRoles.includes(userRole) && plugin.pluginDisplayOptions["context"].displayContext.indexOf(contextType) !== -1 - } + }; } diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts index 3797707046..9abd7139b7 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts @@ -276,7 +276,6 @@ export class WorkspaceViewModel { return versionObj.versionId === this.$scope.component.uniqueId; }); } - this.$scope.isLoading = true; let eventData = { uuid: this.$scope.component.uuid, @@ -284,6 +283,8 @@ export class WorkspaceViewModel { }; this.eventBusService.notify("VERSION_CHANGED", eventData).subscribe(() => { + this.$scope.isLoading = true; + this.$state.go(this.$state.current.name, { id: selectedId, type: this.$scope.componentType.toLowerCase(), @@ -461,7 +462,7 @@ export class WorkspaceViewModel { switch (url) { case 'lifecycleState/CHECKOUT': - this.eventBusService.notify("CHECK_OUT", eventData).subscribe(() => { + this.eventBusService.notify("CHECK_OUT", eventData, false).subscribe(() => { // only checkOut get the full component from server // this.$scope.component = component; // Work around to change the csar version @@ -503,7 +504,7 @@ export class WorkspaceViewModel { }); break; case 'lifecycleState/UNDOCHECKOUT': - this.eventBusService.notify("UNDO_CHECK_OUT", eventData).subscribe(() => { + this.eventBusService.notify("UNDO_CHECK_OUT", eventData, false).subscribe(() => { defaultActionAfterChangeLifecycleState(); this.Notification.success({ message: this.$filter('translate')("DELETE_SUCCESS_MESSAGE_TEXT"), diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less index 84a3599d47..cee146aa12 100644 --- a/catalog-ui/src/app/view-models/workspace/workspace.less +++ b/catalog-ui/src/app/view-models/workspace/workspace.less @@ -79,7 +79,7 @@ padding: 0px 0px 0px 0px; background-color: @main_color_p; - z-index: 1; + //z-index: 1; .sdc-workspace-top-bar { height: @action_nav_height; -- cgit 1.2.3-korg