diff options
54 files changed, 1343 insertions, 84 deletions
diff --git a/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts index cf870b7b9..078e5578b 100644 --- a/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts +++ b/vid-webpack-master/cypress/integration/iFrames/drawingBoard.e2e.ts @@ -350,7 +350,7 @@ describe('Drawing board', function () { cy.drawingBoardTreeClickOnContextMenuOptionByName('Remove'); cy.get('.title').contains('Remove VNF'); - cy.get('.sdc-button').contains('Remove VNF').click(); + cy.get('.custom-button').contains('Remove VNF').click(); // assert vfModules are disabled after remove parent vnf cy.get('.tree-node-disabled div[data-tests-id="node-2017488_pasqualevpe0..2017488PasqualeVpe..PASQUALE_vRE_BV..module-1"]') .should('be.visible'); diff --git a/vid-webpack-master/package.json b/vid-webpack-master/package.json index ee04de10d..1843de030 100644..100755 --- a/vid-webpack-master/package.json +++ b/vid-webpack-master/package.json @@ -30,24 +30,23 @@ "private": true, "dependencies": { "@angular-redux/store": "9.0.0", - "@angular/animations": "7.1.4", + "@angular/animations": "8.2.14", "@angular/cdk": "7.2.2", - "@angular/common": "7.1.4", - "@angular/compiler": "7.1.4", - "@angular/core": "7.1.4", - "@angular/forms": "7.1.4", - "@angular/http": "7.1.4", + "@angular/common": "8.2.14", + "@angular/compiler": "8.2.14", + "@angular/core": "8.2.14", + "@angular/forms": "8.2.14", "@angular/material": "7.2.2", - "@angular/platform-browser": "7.1.4", - "@angular/platform-browser-dynamic": "7.1.4", - "@angular/platform-server": "7.1.4", - "@angular/router": "7.1.4", + "@angular/platform-browser": "8.2.14", + "@angular/platform-browser-dynamic": "8.2.14", + "@angular/platform-server": "8.2.14", + "@angular/router": "8.2.14", "@harmowatch/ngx-redux-core": "0.2.2", - "@nicky-lenaers/ngx-scroll-to": "^0.6.1", + "@nicky-lenaers/ngx-scroll-to": "3.0.1", "@turf/turf": "5.1.6", "@types/lodash": "4.14.121", "angular-svg-icon": "5.0.0", - "angular-tree-component": "8.4.0", + "angular-tree-component": "8.5.2", "angular2-datatable": "0.6.0", "angular2-multiselect-dropdown": "2.5.0", "angular5-csv": "^0.2.10", @@ -65,6 +64,7 @@ "ngx-datatable": "1.0.3", "ngx-moment": "^2.0.0-rc.0", "ngx-tooltip": "0.0.9", + "node-sass": "^4.13.0", "npm": "^6.4.1", "redux": "4.0.1", "redux-observable": "^1.0.0", @@ -72,14 +72,14 @@ "rxjs-compat": "^6.3.3", "slnodejs": "^2.1.124", "tslib": "1.9.x", - "zone.js": "^0.8.26" + "zone.js": "~0.9.1" }, "devDependencies": { "@angular-builders/jest": "7.3.1", - "@angular-devkit/build-angular": "0.13.1", - "@angular/cli": "7.3.1", - "@angular/compiler-cli": "7.2.5", - "@angular/language-service": "7.2.5", + "@angular-devkit/build-angular": "~0.803.21", + "@angular/cli": "8.3.21", + "@angular/compiler-cli": "8.2.14", + "@angular/language-service": "8.2.14", "@babel/preset-env": "7.3.1", "@bahmutov/add-typescript-to-cypress": "2.0.0", "@types/chai": "4.1.7", @@ -88,7 +88,7 @@ "@types/node": "^10.12.18", "angular2-template-loader": "0.6.2", "babel-jest": "24.1.0", - "codelyzer": "4.5.0", + "codelyzer": "^5.0.1", "cypress": "3.6.1", "hammerjs": "2.0.8", "husky": "^1.3.1", @@ -99,14 +99,15 @@ "jest-sonar-reporter": "2.0.0", "ngx-wallaby-jest": "0.0.1", "npm-run-all": "^4.1.5", - "onap-ui-angular": "5.2.4", + "onap-ui-angular": "5.2.7", "onap-ui-common": "1.0.105", "prettier": "1.16.4", "pretty-quick": "^1.10.0", + "redux-observable-es6-compat": "^1.2.1", "ts-mockito": "2.3.1", "ts-node": "~5.0.1", "tslint": "^5.12.0", - "typescript": "3.1.6", + "typescript": "3.5.3", "wallaby-webpack": "^3.9.11", "webpack": "^4.28.2" }, diff --git a/vid-webpack-master/pom.xml b/vid-webpack-master/pom.xml index 84c2e57d9..59802d2d4 100644 --- a/vid-webpack-master/pom.xml +++ b/vid-webpack-master/pom.xml @@ -135,8 +135,8 @@ </goals> <configuration> <!-- See https://nodejs.org/en/download/ for latest node and npm (lts) versions --> - <nodeVersion>v8.9.4</nodeVersion> - <npmVersion>5.6.0</npmVersion> + <nodeVersion>v10.15.3</nodeVersion> + <npmVersion>6.9.0</npmVersion> </configuration> </execution> diff --git a/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts b/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts index 25d170320..7e59f1741 100644 --- a/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts +++ b/vid-webpack-master/src/app/drawingBoard/drawingBoard.module.ts @@ -36,6 +36,8 @@ import {ComponentInfoComponent} from './service-planning/component-info/componen import {ComponentInfoService} from "./service-planning/component-info/component-info.service"; import {NetworkStepService} from "./service-planning/objectsToTree/models/vrf/vrfModal/networkStep/network.step.service"; import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfModal/vpnStep/vpn.step.service"; +import {ModalModule} from "onap-ui-angular/dist/modals/modal.module"; +import {ModalService} from "../shared/components/customModal/services/modal.service"; @NgModule({ @@ -48,7 +50,8 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod CommonModule, SdcUiComponentsModule, SharedModule.forRoot(), - FeatureFlagModule.forRoot()], + FeatureFlagModule.forRoot(), + ModalModule], providers: [ AaiService, ObjectToTreeService, @@ -64,7 +67,7 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod DynamicInputsService, InstanceTreeGenerator, SharedTreeService, - SdcUiServices.ModalService, + ModalService, SdcUiServices.LoaderService, CreateDynamicComponentService, ComponentInfoService, @@ -83,7 +86,7 @@ import {VpnStepService} from "./service-planning/objectsToTree/models/vrf/vrfMod SearchComponent, ComponentInfoComponent], entryComponents: [DuplicateVnfComponent], - exports: [AvailableModelsTreeComponent, DrawingBoardTreeComponent, DrawingBoardHeader, TreeNodeHeaderPropertiesComponent, SearchComponent] + exports: [AvailableModelsTreeComponent, DrawingBoardTreeComponent, DrawingBoardHeader, TreeNodeHeaderPropertiesComponent, SearchComponent, DuplicateVnfComponent] }) export class DrawingBoardModule { diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts index 13147b7e5..7475c77c7 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/available-models-tree/available-models-tree.component.ts @@ -88,7 +88,7 @@ export class AvailableModelsTreeComponent { @Output() highlightInstances: EventEmitter<number> = new EventEmitter<number>(); - @ViewChild('tree') tree: TreeComponent; + @ViewChild('tree', {static: false}) tree: TreeComponent; nodes = []; service = {name: ''}; diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts index 8228f9531..395b5f3bf 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.component.ts @@ -80,7 +80,7 @@ export class DrawingBoardHeader { } - @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent; + @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent; editViewEdit(): void { window.parent.location.assign(this._drawingBoardHeaderService.generateOldViewEditPath()); diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts index 7e28b2a65..8ecb3963a 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-header/drawing-board-header.service.spec.ts @@ -26,6 +26,7 @@ class MockAppStore<T>{ } } +class MockDragAndDropService<T> {} describe('Generate path to old View/Edit ', () => { let injector; let service: DrawingBoardHeaderService; diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts index 96e50178b..2daaaaf71 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.ts @@ -1,9 +1,7 @@ import {Injectable} from "@angular/core"; import {NgRedux} from "@angular-redux/store"; import {AppState} from "../../../../shared/store/reducers"; -import {DragAndDropModel} from "./dragAndDrop.model"; import {FeatureFlagsService, Features} from "../../../../shared/services/featureFlag/feature-flags.service"; -import * as _ from 'lodash'; @Injectable() export class DragAndDropService { diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts index 4ad1b06cf..a195cf019 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts @@ -13,7 +13,6 @@ import {DrawingBoardTreeService, TreeNodeContextMenuModel} from "./drawing-board import {NetworkPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/network/network.popup.service"; import {VfModulePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service"; import {VnfPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service"; -import {SdcUiServices} from "onap-ui-angular"; import {HighlightPipe} from "../../../shared/pipes/highlight/highlight-filter.pipe"; import {VnfGroupPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service"; import {ObjectToInstanceTreeService} from "../objectsToTree/objectToInstanceTree/objectToInstanceTree.service"; @@ -29,6 +28,7 @@ import {ComponentInfoModel} from "../component-info/component-info-model"; import {ObjectToModelTreeService} from "../objectsToTree/objectToModelTree/objectToModelTree.service"; import {DrawingBoardModes} from "../drawing-board.modes"; import {ServiceInstanceActions} from "../../../shared/models/serviceInstanceActions"; +import {ModalService} from "../../../shared/components/customModal/services/modal.service"; @Component({ selector: 'drawing-board-tree', @@ -52,7 +52,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit { static triggerDeleteActionService: Subject<string> = new Subject<string>(); static triggerUndoDeleteActionService: Subject<string> = new Subject<string>(); static triggerreCalculateIsDirty: Subject<string> = new Subject<string>(); - @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent; + @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent; constructor(private _contextMenuService: ContextMenuService, private _iframeService: IframeService, @@ -60,7 +60,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit { private store: NgRedux<AppState>, private route: ActivatedRoute, private _duplicateService: DuplicateService, - private modalService: SdcUiServices.ModalService, + private modalService: ModalService, private _drawingBoardTreeService: DrawingBoardTreeService, private _networkPopupService: NetworkPopupService, private _vfModulePopuopService: VfModulePopupService, @@ -120,7 +120,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit { @Output() highlightNode: EventEmitter<number> = new EventEmitter<number>(); - @ViewChild('tree') tree: TreeComponent; + @ViewChild('tree', {static: false}) tree: TreeComponent; missingDataTooltip: string = Constants.Error.MISSING_VNF_DETAILS; currentNode: ITreeNode = null; flags: any; diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts index 6423e8ad1..2f8ece283 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.spec.ts @@ -2,12 +2,12 @@ import {DuplicateService} from './duplicate.service'; import {LogService} from '../../../shared/utils/log/log.service'; import {NgRedux} from '@angular-redux/store'; import {ITreeNode} from "angular-tree-component/dist/defs/api"; -import {SdcUiServices} from "onap-ui-angular"; -import {IModalConfig} from 'onap-ui-angular/dist/components/common'; import {AppState} from "../../../shared/store/reducers"; import {getTestBed, TestBed} from "@angular/core/testing"; import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service"; import {SharedTreeService} from "../objectsToTree/shared.tree.service"; +import {IModalConfig} from "../../../shared/components/customModal/models/modal.model"; +import {ModalService} from "../../../shared/components/customModal/services/modal.service"; class MockAppStore<T> { getState(){ @@ -73,7 +73,7 @@ describe('Drawing board tree service', () => { LogService, {provide: FeatureFlagsService, useClass: MockFeatureFlagsService}, {provide: NgRedux, useClass: MockAppStore}, - {provide: SdcUiServices.ModalService, useClass: MockModalService} + {provide: ModalService, useClass: MockModalService} ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts index c8338cbfc..c3a5a28c0 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/duplicate/duplicate.service.ts @@ -8,19 +8,20 @@ import {VfModuleMap} from "../../../shared/models/vfModulesMap"; import * as _ from "lodash"; import {DefaultDataGeneratorService} from "../../../shared/services/defaultDataServiceGenerator/default.data.generator.service"; import {TypeNodeInformation} from "../typeNodeInformation.model"; -import {SdcUiCommon, SdcUiServices} from "onap-ui-angular"; +import {SdcUiCommon} from "onap-ui-angular"; import {changeInstanceCounter, duplicateBulkInstances} from "../../../shared/storeUtil/utils/general/general.actions"; import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config"; import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service"; import {Utils} from "../../../shared/utils/utils"; import {SharedTreeService} from "../objectsToTree/shared.tree.service"; +import {ModalService} from "../../../shared/components/customModal/services/modal.service"; @Injectable() export class DuplicateService { constructor(private _logService: LogService, private sharedTreeService : SharedTreeService, - private _store: NgRedux<AppState>, modalService: SdcUiServices.ModalService) { + private _store: NgRedux<AppState>, modalService: ModalService) { this.modalService = modalService; } @@ -35,7 +36,7 @@ export class DuplicateService { maxNumberOfDuplicate: number = 0; storeKey: string = null; padding = '0000'; - modalService: SdcUiServices.ModalService; + modalService: ModalService; store: NgRedux<AppState>; existingNames: { [key: string]: any }; currentNode: ITreeNode = null; diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts index 486ac93c0..b03d37f50 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/network/network.model.info.ts @@ -16,7 +16,6 @@ import {AvailableNodeIcons} from "../../../available-models-tree/available-model import {DuplicateVnfComponent} from "../../../duplicate/duplicate-vnf.component"; import {changeInstanceCounter, removeInstance} from "../../../../../shared/storeUtil/utils/general/general.actions"; import {IframeService} from "../../../../../shared/utils/iframe.service"; -import {SdcUiServices} from "onap-ui-angular"; import {DuplicateService} from "../../../duplicate/duplicate.service"; import {ServiceInstanceActions} from "../../../../../shared/models/serviceInstanceActions"; import {deleteActionNetworkInstance, undoDeleteActionNetworkInstance, updateNetworkPosition} from "../../../../../shared/storeUtil/utils/network/network.actions"; @@ -24,6 +23,7 @@ import {IModalConfig} from "onap-ui-angular/dist/modals/models/modal-config"; import {ComponentInfoType} from "../../../component-info/component-info-model"; import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component"; import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service"; +import {ModalService} from "../../../../../shared/components/customModal/services/modal.service"; export class NetworkModelInfo implements ILevelNodeInfo { constructor(private _dynamicInputsService: DynamicInputsService, @@ -31,7 +31,7 @@ export class NetworkModelInfo implements ILevelNodeInfo { private _dialogService: DialogService, private _networkPopupService: NetworkPopupService, private _duplicateService: DuplicateService, - private modalService: SdcUiServices.ModalService, + private modalService: ModalService, private _iframeService: IframeService, private _featureFlagsService: FeatureFlagsService, private _store: NgRedux<AppState>) { diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts index 355b5c597..c3c33a1be 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/models/vnf/vnf.model.info.ts @@ -31,6 +31,7 @@ import {ComponentInfoService} from "../../../component-info/component-info.servi import {ModelInformationItem} from "../../../../../shared/components/model-information/model-information.component"; import {VfModuleUpgradePopupService} from "../../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service"; import {FeatureFlagsService} from "../../../../../shared/services/featureFlag/feature-flags.service"; +import {ModalService} from "../../../../../shared/components/customModal/services/modal.service"; export class VnfModelInfo implements ILevelNodeInfo { constructor(private _dynamicInputsService: DynamicInputsService, @@ -41,7 +42,7 @@ export class VnfModelInfo implements ILevelNodeInfo { private _vfModulePopupService: VfModulePopupService, private _vfModuleUpgradePopupService: VfModuleUpgradePopupService, private _duplicateService: DuplicateService, - private modalService: SdcUiServices.ModalService, + private modalService: ModalService, private _iframeService: IframeService, private _componentInfoService: ComponentInfoService, private _featureFlagsService: FeatureFlagsService, diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts index 1cec62b2c..1ba9a239c 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToInstanceTree/objectToInstanceTree.service.spec.ts @@ -27,13 +27,15 @@ import {VfModuleControlGenerator} from "../../../../shared/components/genericFor import {VnfGroupPopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service"; import {VnfGroupControlGenerator} from "../../../../shared/components/genericForm/formControlsServices/vnfGroupGenerator/vnfGroup.control.generator"; import {DuplicateService} from "../../duplicate/duplicate.service"; -import {SdcUiComponentsModule, SdcUiServices} from "onap-ui-angular"; +import {SdcUiComponentsModule} from "onap-ui-angular"; import {ErrorMsgService} from "../../../../shared/components/error-msg/error-msg.service"; import {ComponentInfoService} from "../../component-info/component-info.service"; import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service"; import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service"; import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service"; import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../../shared/components/customModal/services/modal.service"; +import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service"; class MockAppStore<T> { getState() { @@ -86,9 +88,11 @@ describe('Model Tree Generator service', () => { DialogService, ErrorMsgService, ComponentInfoService, - SdcUiServices.ModalService, + ModalService, NetworkStepService, VpnStepService, + ModalService, + CreateDynamicComponentService, { provide: NgRedux, useClass: MockAppStore }, MockNgRedux] }); diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts index 0f7bf9a61..ec6f2a4c5 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToModelTree/objectToModelTree.service.spec.ts @@ -37,6 +37,8 @@ import {VpnStepService} from "../models/vrf/vrfModal/vpnStep/vpn.step.service"; import {NetworkStepService} from "../models/vrf/vrfModal/networkStep/network.step.service"; import {VfModuleUpgradePopupService} from "../../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service"; import {SharedControllersService} from "../../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../../shared/components/customModal/services/modal.service"; +import {CreateDynamicComponentService} from "../../../../shared/components/customModal/services/create-dynamic-component.service"; class MockAppStore<T> { getState() { @@ -112,6 +114,8 @@ describe('Model Tree Generator service', () => { ComponentInfoService, NetworkStepService, VpnStepService, + ModalService, + CreateDynamicComponentService, SharedControllersService, {provide: NgRedux, useClass: MockAppStore}, MockNgRedux ] diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts index 9b68627e2..8eef4a08d 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/objectToTree.service.ts @@ -15,7 +15,6 @@ import {VfModulePopupService} from "../../../shared/components/genericFormPopup/ import {VnfGroupingModelInfo} from "./models/vnfGrouping/vnfGrouping.model.info"; import {VnfGroupPopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vnfGroup/vnfGroup.popup.service"; import {DuplicateService} from "../duplicate/duplicate.service"; -import {SdcUiServices} from "onap-ui-angular"; import {IframeService} from "../../../shared/utils/iframe.service"; import {ComponentInfoService} from "../component-info/component-info.service"; import {PnfModelInfo} from "./models/pnf/pnf.model.info"; @@ -26,6 +25,7 @@ import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service"; import { VfModuleUpgradePopupService } from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service"; import {FeatureFlagsService} from "../../../shared/services/featureFlag/feature-flags.service"; +import {ModalService} from "../../../shared/components/customModal/services/modal.service"; @Injectable() export class ObjectToTreeService { @@ -39,7 +39,7 @@ export class ObjectToTreeService { private _vfModuleUpgradePopupService : VfModuleUpgradePopupService, private _vnfGroupPopupService : VnfGroupPopupService, private _duplicateService : DuplicateService, - private _modalService: SdcUiServices.ModalService, + private _modalService: ModalService, private _iframeService : IframeService, private _componentInfoService : ComponentInfoService, private _networkStepService : NetworkStepService, @@ -50,8 +50,6 @@ export class ObjectToTreeService { } - - /*********************************************************** * return all first optional first level of the model tree ************************************************************/ diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts index 3a65b93ef..f89950c61 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/objectsToTree/shared.tree.service.spec.ts @@ -42,6 +42,8 @@ import {VpnStepService} from "./models/vrf/vrfModal/vpnStep/vpn.step.service"; import {NetworkStepService} from "./models/vrf/vrfModal/networkStep/network.step.service"; import {VfModuleUpgradePopupService} from "../../../shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popuop.service"; import {SharedControllersService} from "../../../shared/components/genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../shared/components/customModal/services/modal.service"; +import {CreateDynamicComponentService} from "../../../shared/components/customModal/services/create-dynamic-component.service"; class MockAppStore<T> { getState() { @@ -114,6 +116,8 @@ describe('Shared Tree Service', () => { ComponentInfoService, NetworkStepService, VpnStepService, + ModalService, + CreateDynamicComponentService, {provide: NgRedux, useClass: MockAppStore} ] }); diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts index cbe8445ca..59988f7c3 100644 --- a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts +++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts @@ -26,8 +26,8 @@ export class ServicePlanningComponent implements OnInit { } pageMode: DrawingBoardModes = DrawingBoardModes.CREATE; - @ViewChild(DrawingBoardTreeComponent) drawingModelTree; - @ViewChild(AvailableModelsTreeComponent) availableModelTree; + @ViewChild(DrawingBoardTreeComponent, {static: false}) drawingModelTree; + @ViewChild(AvailableModelsTreeComponent, {static: false}) availableModelTree; isShowTree(): boolean { return true; diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts index 4f84b7125..f27faac60 100644 --- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts +++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts @@ -39,7 +39,7 @@ export class InstantiationStatusComponent implements OnInit { instantiationStatusComponentService: InstantiationStatusComponentService; configurationService : ConfigurationService; serviceInfoData: ServiceInfoModel[] = null; - @ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent; + @ViewChild(ContextMenuComponent, {static: false}) public contextMenu: ContextMenuComponent; public contextMenuActions: Array<MenuAction> = [ { diff --git a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts index 95e9825da..665b8d13f 100644 --- a/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts +++ b/vid-webpack-master/src/app/shared/components/auditInfoModal/auditInfoModal.component.ts @@ -19,7 +19,7 @@ import {AuditInfoModalComponentService} from "./auditInfoModal.component.service export class AuditInfoModalComponent { static openModal: Subject<ServiceInfoModel> = new Subject<ServiceInfoModel>(); static openInstanceAuditInfoModal: Subject<{instanceId , type, model, instance}> = new Subject<{instanceId , type, model, instance}>(); - @ViewChild('auditInfoModal') public auditInfoModal: ModalDirective; + @ViewChild('auditInfoModal', {static: false}) public auditInfoModal: ModalDirective; title: string = 'Service Instantiation Information'; modelInfoItems: ModelInformationItem[] = []; serviceModel: ServiceModel; diff --git a/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.html b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.html new file mode 100644 index 000000000..753a3923b --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.html @@ -0,0 +1,16 @@ +<div> + <button class="custom-button sdc-button__{{ type }} btn-{{ size }} {{ iconPositionClass }}" + [disabled]="disabled || show_spinner" + [attr.data-tests-id]="testId"> + <svg-icon + *ngIf="icon_name" + [name]="icon_name" + [mode]="icon_mode" + [size]="'medium'" + > + </svg-icon> + {{text}} + </button> + <svg-icon *ngIf="show_spinner" name="spinner" [size]="'medium'" class="sdc-button__spinner" + [ngClass]="{left: spinner_position === placement.right}"></svg-icon> +</div> diff --git a/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.scss b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.scss new file mode 100644 index 000000000..89f90d44d --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.scss @@ -0,0 +1,273 @@ +.custom-button { + order: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: row; + outline: none; + border-radius: 2px; + padding: 0 12px; + height: 36px; + line-height: 36px; + width: 120px; + min-width: 90px; + cursor: pointer; + text-align: center; + text-transform: uppercase; + font-family: OpenSans-Regular, Arial, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + /*** Sizes ***/ + /*** Sizes ***/ + /*** Buttons with icons ***/ +} + +.custom-button:disabled { + cursor: default; +} + +.custom-button.sdc-button__primary { + border: 1px solid transparent; + background-color: #009fdb; + color: #ffffff; +} + +.custom-button.sdc-button__primary:not(:disabled):hover, .custom-button.sdc-button__primary:not(:disabled):active { + background-color: #1eb9f3; +} + +.custom-button.sdc-button__primary:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #1eb9f3; + box-shadow: 0px 0px 0px 1px #1eb9f3; +} + +.custom-button.sdc-button__primary:disabled { + background: #9dd9ef; +} + +.custom-button.sdc-button__secondary { + border: 1px solid #009fdb; + background-color: transparent; + color: #009fdb; +} + +.custom-button.sdc-button__secondary:not(:disabled):hover, .custom-button.sdc-button__secondary:not(:disabled):active { + background-color: #1eb9f3; + color: #ffffff; +} + +.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active) { + color: #1eb9f3; + box-shadow: inset 0px 0px 0px 0px #0568ae, 0px 0px 0px 1px #009fdb; +} + +.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active):hover { + color: #ffffff; +} + +.custom-button.sdc-button__secondary:disabled { + color: #9dd9ef; + border-color: #9dd9ef; +} + +.custom-button.sdc-button__link { + background-color: transparent; + color: #009fdb; + fill: #009fdb; + border: none; +} + +.custom-button.sdc-button__link:not(:disabled):hover, .custom-button.sdc-button__link:not(:disabled):active { + color: #1eb9f3; +} + +.custom-button.sdc-button__link:not(:disabled):focus:not(:active) { + border: 1px solid #0568ae; + color: #1eb9f3; +} + +.custom-button.sdc-button__link:disabled { + color: #9dd9ef; +} + +.custom-button.sdc-button__success { + border: 1px solid transparent; + background-color: #4ca90c; + color: #ffffff; +} + +.custom-button.sdc-button__success:not(:disabled):hover, .custom-button.sdc-button__success:not(:disabled):active { + background-color: #57c00e; +} + +.custom-button.sdc-button__success:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #57c00e; + box-shadow: 0px 0px 0px 1px #57c00e; +} + +.custom-button.sdc-button__success:disabled { + background: #a5d485; +} + +.custom-button.sdc-button__error, .custom-button.sdc-button__alert { + border: 1px solid transparent; + background-color: #cf2a2a; + color: #ffffff; +} + +.custom-button.sdc-button__error:not(:disabled):hover, .custom-button.sdc-button__error:not(:disabled):active, .custom-button.sdc-button__alert:not(:disabled):hover, .custom-button.sdc-button__alert:not(:disabled):active { + background-color: #ed4141; +} + +.custom-button.sdc-button__error:not(:disabled):focus:not(:active), .custom-button.sdc-button__alert:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #ed4141; + box-shadow: 0px 0px 0px 1px #ed4141; +} + +.custom-button.sdc-button__error:disabled, .custom-button.sdc-button__alert:disabled { + background: #f4adad; +} + +.custom-button.sdc-button__warning { + border: 1px solid transparent; + background-color: #ffb81c; + color: #ffffff; +} + +.custom-button.sdc-button__warning:not(:disabled):hover, .custom-button.sdc-button__warning:not(:disabled):active { + background-color: #f6c632; +} + +.custom-button.sdc-button__warning:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #f6c632; + box-shadow: 0px 0px 0px 1px #f6c632; +} + +.custom-button.sdc-button__warning:disabled { + background: #ffdb8d; +} + +.custom-button.sdc-button__info { + border: 1px solid transparent; + background-color: #009fdb; + color: #ffffff; +} + +.custom-button.sdc-button__info:not(:disabled):hover, .custom-button.sdc-button__info:not(:disabled):active { + background-color: #1eb9f3; +} + +.custom-button.sdc-button__info:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #1eb9f3; + box-shadow: 0px 0px 0px 1px #1eb9f3; +} + +.custom-button.sdc-button__info:disabled { + background: #9dd9ef; +} + +.custom-button.sdc-button__file-opener input[type=file] { + height: 36px; + opacity: 0; + position: absolute; + cursor: pointer; +} + +.custom-button.btn-xx-large { + width: 350px; +} + +.custom-button.btn-xx-large input[type=file] { + width: 350px; +} + +.custom-button.btn-x-large { + width: 250px; +} + +.custom-button.btn-x-large input[type=file] { + width: 250px; +} + +.custom-button.btn-large { + width: 180px; +} + +.custom-button.btn-large input[type=file] { + width: 180px; +} + +.custom-button.btn-medium { + width: 140px; +} + +.custom-button.btn-medium input[type=file] { + width: 140px; +} + +.custom-button.btn-small { + width: 110px; +} + +.custom-button.btn-small input[type=file] { + width: 110px; +} + +.custom-button.btn-x-small { + width: 90px; +} + +.custom-button.btn-x-small input[type=file] { + width: 90px; +} + +.custom-button.btn-default { + width: auto; +} + +.custom-button.btn-default input[type=file] { + width: auto; +} + +.custom-button.sdc-icon-right { + flex-direction: row-reverse; +} + +.custom-button.sdc-icon-right .svg-icon { + margin-left: 15px; +} + +.custom-button.sdc-icon-left { + flex-direction: row; +} + +.custom-button.sdc-icon-left .svg-icon { + margin-right: 15px; +} + +.custom-button svg { + display: inline-block; + vertical-align: middle; +} + +.sdc-button__wrapper { + display: inline-flex; +} + +.sdc-button__spinner { + padding-top: 6px; + margin: 0 2px; +} + +.sdc-button__spinner.left { + order: 2; +} diff --git a/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.ts b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.ts new file mode 100644 index 000000000..61fa02832 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customButton/custom-button.component.ts @@ -0,0 +1,65 @@ +import {Component, HostBinding, Input, OnInit} from "@angular/core"; +import {IButtonComponent} from "../customModal/models/modal-button.model"; +import {ButtonType} from "../customModal/models/button.type"; +import {Mode} from "./models/mode.model"; +import {Placement} from "../customModal/models/modal.placement"; + + +@Component({ + selector: "sdc-button", + templateUrl: './custom-button.component.html', + styleUrls: ['./custom-button.component.scss'] + +}) + +export class CustomButtonComponent implements OnInit, IButtonComponent { + @Input() public text: string; + @Input() public disabled: boolean; + @Input() public type: ButtonType; + @Input() public icon_mode: Mode; + @Input() public size: string; + @Input() public preventDoubleClick: boolean; + @Input() public icon_name: string; + @Input() public icon_position: string; + @Input() public show_spinner: boolean; + @Input() public spinner_position: Placement; + @Input() public testId: string; + + public placement = Placement; + private lastClick: Date; + public iconPositionClass: string; + + @HostBinding('class.sdc-button__wrapper') true; + + constructor() { + this.type = ButtonType.primary; + this.size = "default"; + this.disabled = false; + } + + public ngOnInit(): void { + this.iconPositionClass = this.icon_position ? 'sdc-icon-' + this.icon_position : ''; + } + + public onClick = (e): void => { + const now: Date = new Date(); + if (this.preventDoubleClick && this.lastClick && (now.getTime() - this.lastClick.getTime()) <= 500) { + e.preventDefault(); + e.stopPropagation(); + } + this.lastClick = now; + } + + public disableButton = () => { + if (!this.disabled) { + this.disabled = true; + } + } + + public enableButton = () => { + if (this.disabled) { + this.disabled = false; + } + } + +} diff --git a/vid-webpack-master/src/app/shared/components/customButton/models/mode.model.ts b/vid-webpack-master/src/app/shared/components/customButton/models/mode.model.ts new file mode 100644 index 000000000..c8a7ddef3 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customButton/models/mode.model.ts @@ -0,0 +1,10 @@ +export enum Mode { + primary = 'primary', + primary2 = 'primary2', + secondary = 'secondary', + success = 'success', + error = 'error', + warning = 'warning', + info = 'info', + white = 'white' +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.html b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.html new file mode 100644 index 000000000..753a3923b --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.html @@ -0,0 +1,16 @@ +<div> + <button class="custom-button sdc-button__{{ type }} btn-{{ size }} {{ iconPositionClass }}" + [disabled]="disabled || show_spinner" + [attr.data-tests-id]="testId"> + <svg-icon + *ngIf="icon_name" + [name]="icon_name" + [mode]="icon_mode" + [size]="'medium'" + > + </svg-icon> + {{text}} + </button> + <svg-icon *ngIf="show_spinner" name="spinner" [size]="'medium'" class="sdc-button__spinner" + [ngClass]="{left: spinner_position === placement.right}"></svg-icon> +</div> diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.scss b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.scss new file mode 100644 index 000000000..89f90d44d --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.scss @@ -0,0 +1,273 @@ +.custom-button { + order: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: row; + outline: none; + border-radius: 2px; + padding: 0 12px; + height: 36px; + line-height: 36px; + width: 120px; + min-width: 90px; + cursor: pointer; + text-align: center; + text-transform: uppercase; + font-family: OpenSans-Regular, Arial, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + /*** Sizes ***/ + /*** Sizes ***/ + /*** Buttons with icons ***/ +} + +.custom-button:disabled { + cursor: default; +} + +.custom-button.sdc-button__primary { + border: 1px solid transparent; + background-color: #009fdb; + color: #ffffff; +} + +.custom-button.sdc-button__primary:not(:disabled):hover, .custom-button.sdc-button__primary:not(:disabled):active { + background-color: #1eb9f3; +} + +.custom-button.sdc-button__primary:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #1eb9f3; + box-shadow: 0px 0px 0px 1px #1eb9f3; +} + +.custom-button.sdc-button__primary:disabled { + background: #9dd9ef; +} + +.custom-button.sdc-button__secondary { + border: 1px solid #009fdb; + background-color: transparent; + color: #009fdb; +} + +.custom-button.sdc-button__secondary:not(:disabled):hover, .custom-button.sdc-button__secondary:not(:disabled):active { + background-color: #1eb9f3; + color: #ffffff; +} + +.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active) { + color: #1eb9f3; + box-shadow: inset 0px 0px 0px 0px #0568ae, 0px 0px 0px 1px #009fdb; +} + +.custom-button.sdc-button__secondary:not(:disabled):focus:not(:active):hover { + color: #ffffff; +} + +.custom-button.sdc-button__secondary:disabled { + color: #9dd9ef; + border-color: #9dd9ef; +} + +.custom-button.sdc-button__link { + background-color: transparent; + color: #009fdb; + fill: #009fdb; + border: none; +} + +.custom-button.sdc-button__link:not(:disabled):hover, .custom-button.sdc-button__link:not(:disabled):active { + color: #1eb9f3; +} + +.custom-button.sdc-button__link:not(:disabled):focus:not(:active) { + border: 1px solid #0568ae; + color: #1eb9f3; +} + +.custom-button.sdc-button__link:disabled { + color: #9dd9ef; +} + +.custom-button.sdc-button__success { + border: 1px solid transparent; + background-color: #4ca90c; + color: #ffffff; +} + +.custom-button.sdc-button__success:not(:disabled):hover, .custom-button.sdc-button__success:not(:disabled):active { + background-color: #57c00e; +} + +.custom-button.sdc-button__success:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #57c00e; + box-shadow: 0px 0px 0px 1px #57c00e; +} + +.custom-button.sdc-button__success:disabled { + background: #a5d485; +} + +.custom-button.sdc-button__error, .custom-button.sdc-button__alert { + border: 1px solid transparent; + background-color: #cf2a2a; + color: #ffffff; +} + +.custom-button.sdc-button__error:not(:disabled):hover, .custom-button.sdc-button__error:not(:disabled):active, .custom-button.sdc-button__alert:not(:disabled):hover, .custom-button.sdc-button__alert:not(:disabled):active { + background-color: #ed4141; +} + +.custom-button.sdc-button__error:not(:disabled):focus:not(:active), .custom-button.sdc-button__alert:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #ed4141; + box-shadow: 0px 0px 0px 1px #ed4141; +} + +.custom-button.sdc-button__error:disabled, .custom-button.sdc-button__alert:disabled { + background: #f4adad; +} + +.custom-button.sdc-button__warning { + border: 1px solid transparent; + background-color: #ffb81c; + color: #ffffff; +} + +.custom-button.sdc-button__warning:not(:disabled):hover, .custom-button.sdc-button__warning:not(:disabled):active { + background-color: #f6c632; +} + +.custom-button.sdc-button__warning:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #f6c632; + box-shadow: 0px 0px 0px 1px #f6c632; +} + +.custom-button.sdc-button__warning:disabled { + background: #ffdb8d; +} + +.custom-button.sdc-button__info { + border: 1px solid transparent; + background-color: #009fdb; + color: #ffffff; +} + +.custom-button.sdc-button__info:not(:disabled):hover, .custom-button.sdc-button__info:not(:disabled):active { + background-color: #1eb9f3; +} + +.custom-button.sdc-button__info:not(:disabled):focus:not(:active) { + border: 1px solid #ffffff; + background-color: #1eb9f3; + box-shadow: 0px 0px 0px 1px #1eb9f3; +} + +.custom-button.sdc-button__info:disabled { + background: #9dd9ef; +} + +.custom-button.sdc-button__file-opener input[type=file] { + height: 36px; + opacity: 0; + position: absolute; + cursor: pointer; +} + +.custom-button.btn-xx-large { + width: 350px; +} + +.custom-button.btn-xx-large input[type=file] { + width: 350px; +} + +.custom-button.btn-x-large { + width: 250px; +} + +.custom-button.btn-x-large input[type=file] { + width: 250px; +} + +.custom-button.btn-large { + width: 180px; +} + +.custom-button.btn-large input[type=file] { + width: 180px; +} + +.custom-button.btn-medium { + width: 140px; +} + +.custom-button.btn-medium input[type=file] { + width: 140px; +} + +.custom-button.btn-small { + width: 110px; +} + +.custom-button.btn-small input[type=file] { + width: 110px; +} + +.custom-button.btn-x-small { + width: 90px; +} + +.custom-button.btn-x-small input[type=file] { + width: 90px; +} + +.custom-button.btn-default { + width: auto; +} + +.custom-button.btn-default input[type=file] { + width: auto; +} + +.custom-button.sdc-icon-right { + flex-direction: row-reverse; +} + +.custom-button.sdc-icon-right .svg-icon { + margin-left: 15px; +} + +.custom-button.sdc-icon-left { + flex-direction: row; +} + +.custom-button.sdc-icon-left .svg-icon { + margin-right: 15px; +} + +.custom-button svg { + display: inline-block; + vertical-align: middle; +} + +.sdc-button__wrapper { + display: inline-flex; +} + +.sdc-button__spinner { + padding-top: 6px; + margin: 0 2px; +} + +.sdc-button__spinner.left { + order: 2; +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.ts b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.ts new file mode 100644 index 000000000..d93c67851 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalButton/modal-button.component.ts @@ -0,0 +1,28 @@ +import {Component, EventEmitter, HostListener, Input, Output} from "@angular/core"; +import {CustomButtonComponent} from "../../../customButton/custom-button.component"; + +@Component({ + selector: "custom-modal-button", + templateUrl: './modal-button.component.html', + styleUrls: ['./modal-button.component.scss'] +}) +export class CustomModalButtonComponent extends CustomButtonComponent { + + @Input() public id?: string; + @Input() public callback: Function; + @Input() public closeModal: boolean; + @Output() closeModalEvent: EventEmitter<any> = new EventEmitter<any>(); + @HostListener('click') invokeCallback = (): void => { + if (this.callback) { + this.callback(); + } + if (this.closeModal) { + this.closeModalEvent.emit(); + } + } + + constructor() { + super(); + this.closeModal = false; + } +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/components/modalCloseButton/modal-close-button.component.ts b/vid-webpack-master/src/app/shared/components/customModal/components/modalCloseButton/modal-close-button.component.ts new file mode 100644 index 000000000..a3e741a32 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/components/modalCloseButton/modal-close-button.component.ts @@ -0,0 +1,36 @@ +import {Component, ComponentRef, Input} from "@angular/core"; +import {ModalComponent} from "../../modal.component"; +import {CustomButtonComponent} from "../../../customButton/custom-button.component"; +import {RippleAnimationAction} from "../../directives/ripple-click.animation.directive"; + + +@Component({ + selector: "sdc-modal-close-button", + template: ` + <div class="sdc-modal__close-button" + customRippleClickAnimation + [ngClass]="disabled ? 'disabled' : ''" + [rippleOnAction]="!disabled && rippleAnimationAction" + [attr.data-tests-id]="testId" + (click)="!disabled && closeModal('close')" + > + <svg-icon name="close" [mode]="disabled? 'secondary' : 'info'" size="small"></svg-icon> + </div> + ` +}) +export class ModalCloseButtonComponent extends CustomButtonComponent { + + @Input() testId: string; + @Input() disabled: boolean; + @Input() modalInstanceRef: ComponentRef<ModalComponent>; + + public rippleAnimationAction: RippleAnimationAction = RippleAnimationAction.MOUSE_ENTER; + + constructor() { + super(); + } + + public closeModal = (btnName: string): void => { + this.modalInstanceRef.instance.closeModal(btnName); + } +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts b/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts new file mode 100644 index 000000000..d343d5dc2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/directives/ripple-click.animation.directive.ts @@ -0,0 +1,47 @@ +import { Directive, Input, HostBinding, HostListener } from "@angular/core"; + +export enum RippleAnimationAction { + CLICK = 0, + MOUSE_ENTER = 1 +} + +@Directive({ + selector: `[customRippleClickAnimation]` +}) +export class CustomRippleClickAnimationDirective { + private animated: boolean; + + @Input() rippleClickDisabled: boolean; + @Input() rippleOnAction:RippleAnimationAction = RippleAnimationAction.CLICK; + + @HostBinding('class.sdc-ripple-click__animated') animationClass: string; + + @HostListener('click') onClick() { + if(this.rippleOnAction === RippleAnimationAction.CLICK){ + this.animateStart(); + } + } + + @HostListener('mouseenter') onMouseEnter() { + //console.log("Mouseenter!", this.rippleOnAction); + if(this.rippleOnAction === RippleAnimationAction.MOUSE_ENTER){ + this.animateStart(); + } + } + + private animateStart():void{ + if (!this.rippleClickDisabled) { + this.animated = true; + this.animationClass = 'sdc-ripple-click__animated'; + } + } + @HostListener('animationend') onAnimationComplete() { + this.animated = false; + this.animationClass = ''; + } + + constructor() { + this.rippleClickDisabled = false; + this.animated = false; + } +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/modal.component.html b/vid-webpack-master/src/app/shared/components/customModal/modal.component.html new file mode 100644 index 000000000..11455bc32 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/modal.component.html @@ -0,0 +1,46 @@ +<div> + <div class="modal-background" [@toggleBackground]="modalVisible" ></div> + <div class="sdc-modal {{size}}"> + <div class="sdc-modal__wrapper sdc-modal-type-{{type}}" [@toggleModal]="modalVisible" (@toggleModal.done)="modalToggled($event)"> + + <div class="sdc-modal__header sdc-{{type}}__header"> + <div class="sdc-modal__icon" *ngIf="type!='custom'" [innerHtml]="svgIconContentSafeHtml"></div> + + <div *ngIf="title" class="title" > + {{ title }} + <svg-icon + *ngIf="titleIcon" + [name]="titleIcon.iconName" + [mode]="titleIcon.iconMode" + [size]="titleIcon.iconSize"> + </svg-icon> + </div> + <sdc-modal-close-button #modalCloseButton [testId]="'close' | calculateTestId : testId" [modalInstanceRef]="instanceRef"></sdc-modal-close-button> + </div> + + <div class="sdc-modal__content"> + <div *ngIf="message" [innerHtml]="message"></div> + <div #dynamicContentContainer></div> + <div class="disabled-modal" *ngIf="isDisabled"></div> + </div> + + <div class="sdc-modal__footer"> + <custom-modal-button *ngFor="let button of buttons" + [text]="button.text" + [type]="button.type || 'primary'" + [disabled]="button.disabled" + [size] = "button.size ? button.size : 'default'" + [closeModal]="button.closeModal" + [spinner_position]="button.spinner_position" + [show_spinner]="button.show_spinner" + [callback]="button.callback" + [testId]="'button-' + button.text | calculateTestId : testId" + (closeModalEvent)="closeModal(button.text)" + > + </custom-modal-button> + </div> + + </div> + </div> +</div> + diff --git a/vid-webpack-master/src/app/shared/components/customModal/modal.component.ts b/vid-webpack-master/src/app/shared/components/customModal/modal.component.ts new file mode 100644 index 000000000..eb001c068 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/modal.component.ts @@ -0,0 +1,166 @@ +import { + Component, + ComponentRef, + EventEmitter, + Input, + OnInit, + Output, + Renderer, + ViewChild, + ViewContainerRef +} from "@angular/core"; +import {animate, style, transition, trigger} from "@angular/animations"; +import {TitleIconDetails} from "./models/modal.model"; +import {ModalType} from "./models/modal.type"; +import {DomSanitizer, SafeHtml} from "@angular/platform-browser"; +import {ModalCloseButtonComponent} from "./components/modalCloseButton/modal-close-button.component"; +import {CustomModalButtonComponent} from "./components/modalButton/modal-button.component"; + +@Component({ + selector: 'sdc-modal', + templateUrl: './modal.component.html', + animations: [ + trigger('toggleBackground', [ + transition('* => 1', [style({ opacity: 0 }), animate('.45s cubic-bezier(0.23, 1, 0.32, 1)')]), + transition('1 => *', [animate('.35s cubic-bezier(0.23, 1, 0.32, 1)', style({ opacity: 0 }))]) + ]), + trigger('toggleModal', [ + transition('* => 1', [style({ opacity: 0, transform: 'translateY(-80px)' }), animate('.45s cubic-bezier(0.23, 1, 0.32, 1)')]), + transition('1 => *', [style({ opacity: 1, transform: 'translateY(0px)' }), animate('.35s ease-in-out', style({ opacity: 0, transform: 'translateY(-80px)' }))]) + ]) + ] +}) + +export class ModalComponent implements OnInit { + + @Input() size: string; 'xl|l|md|sm|xsm'; + @Input() title: string; + @Input() titleIcon: TitleIconDetails; + @Input() message: string; + @Input() buttons: CustomModalButtonComponent[]; + @Input() type: ModalType; + @Input() testId: string; + @Input() isDisabled: boolean; + @Input() instanceRef: ComponentRef<ModalComponent>; // the component ref is injected to the component in order to destroy the componet from itself + + @Output() onClose : EventEmitter<string> = new EventEmitter<string>(); + + @ViewChild('modalCloseButton', {static: false}) + set refCloseButton(_modalCloseButton: ModalCloseButtonComponent) { + this.modalCloseButton = _modalCloseButton; + } + + modalVisible: boolean; + // Allows for custom component as body instead of simple message. + @ViewChild('dynamicContentContainer', { read: ViewContainerRef, static: true }) dynamicContentContainer: ViewContainerRef; + innerModalContent: ComponentRef<any>; + + public calculatedTestId: string; + public modalCloseButton: ModalCloseButtonComponent; + public svgIconContentSafeHtml: SafeHtml; + + + private infoSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"> + <defs><path fill="#000" id="info-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11,2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.101 4.9,22 11,22 C17.1,22 22,17.101 22,11 C22,4.9 17.1,0 11,0 M11,10 C10.4, + 10 10,10.4 10,11 L10,15 C10,15.601 10.4,16 11,16 C11.6,16 12,15.601 12,15 L12,11 C12,10.4 11.6,10 11,10 M10.2998,6.2998 C10.0998,6.4998 9.9998,6.6998 9.9998,6.9998 C9.9998,7.2998 10.0998,7.4998 10.2998,7.6998 C10.4998, + 7.9008 10.6998,7.9998 10.9998,7.9998 C11.2998,7.9998 11.4998,7.9008 11.6998,7.6998 C11.9008,7.4998 11.9998,7.2998 11.9998,6.9998 C11.9998,6.6998 11.9008,6.4998 11.6998,6.2998 C11.2998,5.9008 10.6998,5.9008 10.2998,6.2998"/> + </defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#info-a"/></g></svg>`; + private warningSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="alert-a" d="M20.5815,18.7997 C20.3815, + 18.9997 20.0815,19.0997 19.8815,19.0997 L2.8815,19.0997 C2.6815,19.0997 2.5815,19.0997 2.3815,18.9997 C1.8815,18.6997 1.7815,18.0997 1.9815,17.5997 L10.4815,3.4997 C10.5815,3.4007 10.6815,3.1997 10.7815,3.1997 C11.2815, + 2.9007 11.8815,3.0997 12.1815,3.4997 L20.6825,17.5997 C20.7815,17.6997 20.7815,17.9007 20.7815,18.0997 C20.8815,18.4007 20.6825,18.5997 20.5815,18.7997 M22.3815,16.5997 L13.9815,2.4007 C13.5815,1.6997 12.8815,1.1997 12.0815, + 0.9997 C11.2815,0.7997 10.4815,0.9007 9.7815,1.2997 C9.3815,1.4997 8.9815,1.9007 8.7815,2.2997 L0.3815,16.5997 C-0.4185,17.9997 0.0815,19.9007 1.4815,20.6997 C1.8815,20.9997 2.3815,21.0997 2.8815,21.0997 L19.8815, + 21.0997 C20.6825,21.0997 21.4815,20.7997 21.9815,20.1997 C22.5815,19.5997 22.8815,18.9007 22.8815,18.0997 C22.7815,17.5997 22.6825,16.9997 22.3815,16.5997 M11,7 C10.4,7 10,7.4 10,8 L10,12 C10,12.601 10.4,13 11,13 C11.6,13 12, + 12.601 12,12 L12,8 C12,7.4 11.6,7 11,7 M10.3,15.3 C10.1,15.499 10,15.699 10,15.999 C10,16.3 10.1,16.499 10.3,16.699 C10.5,16.9 10.7,16.999 11,16.999 C11.3,16.999 11.5,16.9 11.7,16.699 C11.9,16.499 12,16.199 12,15.999 C12, + 15.8 11.9,15.499 11.7,15.3 C11.3,14.9 10.7,14.9 10.3,15.3"/></defs><g fill="#ffb81c" fill-rule="evenodd" transform="translate(1 1)"><use class="sdc-modal__svg-use" xlink:href="#alert-a"/></g></svg>`; + private errorSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24"><defs><path fill="#000" id="x-a" d="M11,20 C6,20 2,16 2,11 C2,6 6,2 11, + 2 C16,2 20,6 20,11 C20,16 16,20 11,20 M11,0 C4.9,0 0,4.9 0,11 C0,17.1 4.9,22 11,22 C17.1,22 22,17.1 22,11 C22,4.9 17.1,0 11,0 M14.2591,7.29935 C13.8591,6.90035 13.2591,6.90035 12.8591,7.29935 L10.5591,9.59935 L8.2591, + 7.29935 C7.8591,6.90035 7.2591,6.90035 6.8591,7.29935 C6.4591,7.69935 6.4591,8.29935 6.8591,8.69935 L9.1581,10.99935 L6.8591,13.29935 C6.4591,13.69935 6.4591,14.29935 6.8591,14.69935 C7.0591,14.90035 7.2591,14.99935 7.5591, + 14.99935 C7.8591,14.99935 8.0591,14.90035 8.2591,14.69935 L10.5591,12.40035 L12.8591,14.69935 C13.0591,14.90035 13.3591,14.99935 13.5591,14.99935 C13.7591,14.99935 14.0591,14.90035 14.2591,14.69935 C14.6581,14.29935 14.6581, + 13.69935 14.2591,13.29935 L11.9591,10.99935 L14.2591,8.69935 C14.6581,8.29935 14.6581,7.69935 14.2591,7.29935"/></defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)"> + <use class="sdc-modal__svg-use" xlink:href="#x-a"/></g></svg>`; + private successSvg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30" viewBox="0 0 24 24" fill="#4ca90c"><path id="success+20-a" d="M20.1825992,10.445793 C20.6735306, + 10.445793 21.0008182,10.7730806 21.0008182,11.264012 L21.0008182,12.0004091 C21.0008182,16.9915451 16.9915451,21 12.0004091,21 C7.00927315,21 3,16.9915451 3,12.0004091 C3,7.00927315 7.00927315,3 12.0004091,3 C13.3095595,3 14.536888, + 3.3272876 15.6823947,3.81821901 C16.0915042,3.98186281 16.255148,4.47279422 16.0915042,4.88190372 C15.9278604,5.29101323 15.436929,5.45465703 15.0278194,5.29101323 C14.0459566,4.88190372 13.0640938,4.63643802 12.0004091, + 4.63643802 C7.90931406,4.63643802 4.63643802,7.90931406 4.63643802,12.0004091 C4.63643802,16.0906859 7.90931406,19.363562 12.0004091,19.363562 C16.0915042,19.363562 19.3643802,16.0906859 19.3643802,12.0004091 L19.3643802, + 11.264012 C19.3643802,10.7730806 19.6916678,10.445793 20.1825992,10.445793 Z M21.5737352,4.06343925 C21.9002046,4.39072685 21.9002046,4.88165826 21.5737352,5.20894586 L12.5733261,14.209355 C12.4096823,14.3729988 12.1642166, + 14.4548207 12.0005728,14.4548207 C11.836929,14.4548207 11.5914632,14.3729988 11.4278194,14.209355 L8.97316242,11.7546979 C8.64587481,11.4274103 8.64587481,10.9364789 8.97316242,10.6091913 C9.30045002,10.2819037 9.79138143, + 10.2819037 10.118669,10.6091913 L12.0005728,12.491095 L20.4282286,4.06343925 C20.7555162,3.73615164 21.2464476,3.73615164 21.5737352,4.06343925 Z"></path></svg>`; + private noSvg = ``; + + constructor(private renderer: Renderer, + private domSanitizer: DomSanitizer) { + this.modalVisible = true; + } + + ngOnInit() { + + switch (this.type) { + case ModalType.info: + this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.infoSvg); + break; + case ModalType.warning: + this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.warningSvg); + break; + case ModalType.error: + this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.errorSvg); + break; + case ModalType.success: + this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.successSvg); + break; + default: + this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.noSvg); + } + } + + public modalToggled = (toggleEvent: any) => { + if (!toggleEvent.toState) { + this.instanceRef.destroy(); + } + } + + public getCloseButton = (): ModalCloseButtonComponent => { + return this.modalCloseButton; + } + + public getButtonById = (id: string): CustomModalButtonComponent => { + // Support ES5 + // return this.buttons.find((button) => { + return this.buttons.filter((button) => { + return button.id && button.id === id; + })[0]; + } + + public getButtons = (): CustomModalButtonComponent[] => { + return this.buttons; + } + + public setButtons = (_buttons: CustomModalButtonComponent[]): void => { + this.buttons = _buttons; + } + + public getTitle = (): string => { + return this.title; + } + + public setTitle = (_title: string): void => { + this.title = _title; + } + + public hoverAnimation(evn: MouseEvent) { + this.renderer.setElementClass(evn.target as HTMLElement, 'sdc-ripple-click__animated', true); + // evn.taregt.classList.add('sdc-ripple-click__animated'); + } + + public closeModal = (btnName : string): void => { + this.onClose.emit(btnName); + this.modalVisible = false; + } + + public disabledModal = (isDisabled: boolean): void => { + this.isDisabled = isDisabled; + this.buttons.forEach((button: CustomModalButtonComponent) => { + button.disabled = isDisabled; + }); + this.modalCloseButton.disabled = false; + } +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/button.type.ts b/vid-webpack-master/src/app/shared/components/customModal/models/button.type.ts new file mode 100644 index 000000000..a0673013d --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/models/button.type.ts @@ -0,0 +1,8 @@ +export enum ButtonType { + primary = 'primary', + secondary = 'secondary', + success = 'success', + error = 'error', + warning = 'warning', + info = 'info' +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal-button.model.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal-button.model.ts new file mode 100644 index 000000000..5e1f4a4a8 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal-button.model.ts @@ -0,0 +1,15 @@ +import {ButtonType} from "onap-ui-angular/dist/dist/common"; +import {Placement} from "./modal.placement"; + +export interface IButtonComponent { + text: string; + disabled?: boolean; + type?: ButtonType; + testId?: string; + preventDoubleClick?: boolean; + icon_name?: string; + icon_position?: string; + show_spinner?: boolean; + spinner_position?: Placement; + size?: string; +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.model.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.model.ts new file mode 100644 index 000000000..4b814f0aa --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.model.ts @@ -0,0 +1,26 @@ +import {ModalType} from "./modal.type"; +import {IButtonComponent} from "./modal-button.model"; + +export interface IModalConfig { + size?: string; // xl|l|md|sm|xsm + title?: string; + titleIcon?: TitleIconDetails; + message?: string; + buttons?: IModalButtonComponent[]; + testId?: string; + type?: ModalType; +} + +export interface IModalButtonComponent extends IButtonComponent { + id?: string; + callback?: () => void; + closeModal?: boolean; +} + +export interface TitleIconDetails { + iconName?: string; + iconMode?: string; + iconSize?: string; +} + + diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.placement.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.placement.ts new file mode 100644 index 000000000..f7f229cd4 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.placement.ts @@ -0,0 +1,6 @@ +export enum Placement { + left = 'left', + right = 'right', + top = 'top', + bottom = 'bottom' +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.size.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.size.ts new file mode 100644 index 000000000..0a96810c7 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.size.ts @@ -0,0 +1,7 @@ +export enum ModalSize { + xlarge = "xl", + large = "l", + medium = "md", + small = "sm", + xsmall = "xsm" +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/models/modal.type.ts b/vid-webpack-master/src/app/shared/components/customModal/models/modal.type.ts new file mode 100644 index 000000000..ca987ebba --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/models/modal.type.ts @@ -0,0 +1,10 @@ +export enum ModalType { + info = 'info', + warning = 'warning', + error = 'error', + success = 'success', + action = 'action', + custom = 'custom' +} + + diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts new file mode 100644 index 000000000..64fe66ce6 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/services/create-dynamic-component.service.ts @@ -0,0 +1,107 @@ +import { + ApplicationRef, + ComponentFactoryResolver, + ComponentRef, + EmbeddedViewRef, + Injectable, + Injector, Type, ViewContainerRef +} from "@angular/core"; + +@Injectable() +export class CreateDynamicComponentService { + + constructor(private componentFactoryResolver: ComponentFactoryResolver, + private applicationRef: ApplicationRef, + private injector: Injector) { + } + + /** + * Gets the root view container to inject the component to. + * + * @returns {ComponentRef<any>} + * + * @memberOf InjectionService + */ + private getRootViewContainer(): ComponentRef<any> { + const rootComponents = this.applicationRef['components']; + if (rootComponents.length) { + return rootComponents[0]; + } + throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.'); + } + + /** + * Gets the html element for a component ref. + * + * @param {ComponentRef<any>} componentRef + * @returns {HTMLElement} + * + * @memberOf InjectionService + */ + private getComponentRootNode(componentRef: ComponentRef<any>): HTMLElement { + return (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement; + } + + /** + * Gets the root component container html element. + * + * @returns {HTMLElement} + * + * @memberOf InjectionService + */ + private getRootViewContainerNode(): HTMLElement { + return this.getComponentRootNode(this.getRootViewContainer()); + } + + /** + * Projects the inputs onto the component + * + * @param {ComponentRef<any>} component + * @param {*} options + * @returns {ComponentRef<any>} + * + * @memberOf InjectionService + */ + private projectComponentInputs(component: ComponentRef<any>, options: any): ComponentRef<any> { + if (options) { + const props = Object.getOwnPropertyNames(options); + for (const prop of props) { + component.instance[prop] = options[prop]; + } + } + + return component; + } + + public createComponentDynamically<T>(componentClass: Type<T>, options: any = {}, location: Element = this.getRootViewContainerNode()): ComponentRef<any> { + const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass); + const componentRef = componentFactory.create(this.injector); + const componentRootNode = this.getComponentRootNode(componentRef); + + // project the options passed to the component instance + this.projectComponentInputs(componentRef, options); + this.applicationRef.attachView(componentRef.hostView); + + componentRef.onDestroy(() => { + this.applicationRef.detachView(componentRef.hostView); + }); + + location.appendChild(componentRootNode); + return componentRef; + } + + /** + * Inserts a component into an existing viewContainer + * @param componentType - type of component to create + * @param options - Inputs to project on new component + * @param vcRef - viewContainerRef in which to insert the newly created component + */ + public insertComponentDynamically<T>(componentType: Type<T>, options: any = {}, vcRef: ViewContainerRef): ComponentRef<any> { + const factory = this.componentFactoryResolver.resolveComponentFactory(componentType); + const dynamicComponent = factory.create(vcRef.parentInjector); + this.projectComponentInputs(dynamicComponent, options); + vcRef.insert(dynamicComponent.hostView); + return dynamicComponent; + } + +} diff --git a/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts b/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts new file mode 100644 index 000000000..f46ee4896 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/customModal/services/modal.service.ts @@ -0,0 +1,64 @@ +import {ComponentRef, Injectable, Type} from "@angular/core"; +import {CreateDynamicComponentService} from "./create-dynamic-component.service"; +import {ModalType} from "../models/modal.type"; +import {ButtonType} from "../models/button.type"; +import {ModalButtonComponent} from "onap-ui-angular/dist/modals/modal-button.component"; +import {ModalSize} from "../models/modal.size"; +import {IModalConfig} from "../models/modal.model"; +import {ModalComponent} from "../modal.component"; + + +@Injectable() +export class ModalService { + + constructor(private createDynamicComponentService: CreateDynamicComponentService) { + } + + private getBaseModal = (type: ModalType | ButtonType, title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => { + const modalConfig = { + size: ModalSize.small, + title: title, + message: message, + testId: testId, + buttons: buttons ? buttons : [{text: 'OK', type: type, closeModal: true}], + type: type + } as IModalConfig; + const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig); + return modalInstance.instance; + }; + + /* Shortcut method to open basic modals with title, message, and OK button that simply closes the modal. */ + public openInfoModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => { + + return this.getBaseModal(ModalType.info, title, message, testId, buttons); + }; + + public openWarningModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => { + return this.getBaseModal(ModalType.warning, title, message, testId, buttons); + }; + + public openErrorModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => { + return this.getBaseModal(ModalType.error, title, message, testId, buttons); + }; + + public openSuccessModal = (title: string, message: string, testId: string, buttons?: ModalButtonComponent[]): ModalComponent => { + return this.getBaseModal(ModalType.success, title, message, testId, buttons); + }; + + public openCustomModal = (modalConfig: IModalConfig, dynamicComponentType: Type<any>, dynamicComponentInput?: any) => { + const modalInstance: ComponentRef<ModalComponent> = this.openModal(modalConfig); + this.createInnnerComponent(modalInstance, dynamicComponentType, dynamicComponentInput); + return modalInstance.instance; + }; + + public createInnnerComponent = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput?: any): void => { + modalInstance.instance.innerModalContent = this.createDynamicComponentService.insertComponentDynamically(dynamicComponentType, dynamicComponentInput, modalInstance.instance.dynamicContentContainer); + }; + + public openModal = (customModalData: IModalConfig): ComponentRef<ModalComponent> => { + let modalInstance: ComponentRef<ModalComponent> = this.createDynamicComponentService.createComponentDynamically(ModalComponent, customModalData); + modalInstance.instance.instanceRef = modalInstance; + return modalInstance; + } + +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts index 2c2172005..aadf13ebe 100644 --- a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts @@ -11,7 +11,7 @@ import {FileFormControl} from "../../../../models/formControlModels/fileFormCont export class FileFormControlComponent { @Input() data: FileFormControl = null; @Input() form: FormGroup; - @ViewChild('fileUploader') + @ViewChild('fileUploader', {static: false}) fileUploader:ElementRef ; onDelete(event, data, form) { diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts index 1e8c28104..7a7ab72d0 100644 --- a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts @@ -9,7 +9,7 @@ import {FormGroup} from "@angular/forms"; }) export class InputFormControlComponent{ - @ViewChild('customInput') element:ElementRef; + @ViewChild('customInput', {static: false}) element:ElementRef; @Input() data: InputFormControl = null; @Input() form: FormGroup; diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts index 9bcc02d73..13438929b 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts @@ -11,9 +11,9 @@ import {IframeService} from "../../../utils/iframe.service"; import {DefaultDataGeneratorService} from "../../../services/defaultDataServiceGenerator/default.data.generator.service"; import {FormControlModel} from "../../../models/formControlModels/formControl.model"; import {BasicPopupService} from "./basic.popup.service"; -import {SdcUiServices} from "onap-ui-angular"; import {FeatureFlagsService} from "../../../services/featureFlag/feature-flags.service"; import {getTestBed, TestBed} from "@angular/core/testing"; +import {ModalService} from "../../customModal/services/modal.service"; class MockAppStore<T> {} @@ -1996,7 +1996,7 @@ describe('Basic popup service', () => { {provide:FeatureFlagsService, useClass: MockFeatureFlagsService}, {provide: NgRedux, useClass: MockReduxStore}, {provide: HttpClient, useClass: MockAppStore}, - {provide: SdcUiServices.ModalService, useClass: MockModalService} + {provide: ModalService, useClass: MockModalService} ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts index 34d6850eb..a32320ea4 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts @@ -14,6 +14,7 @@ import {BasicPopupService} from "../basic.popup.service"; import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service"; import {getTestBed, TestBed} from "@angular/core/testing"; import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../customModal/services/modal.service"; class MockAppStore<T> {} @@ -2001,7 +2002,7 @@ describe('Network popup service', () => { {provide:FeatureFlagsService, useClass: MockFeatureFlagsService}, {provide: NgRedux, useClass: MockReduxStore}, {provide: HttpClient, useClass: MockAppStore}, - {provide: SdcUiServices.ModalService, useClass: MockModalService} + {provide: ModalService, useClass: MockModalService} ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts index 3a106ec93..6d996930a 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts @@ -11,10 +11,10 @@ import {BasicPopupService} from "../basic.popup.service"; import {ServicePopupService} from "./service.popup.service"; import {ServiceControlGenerator} from "../../../genericForm/formControlsServices/service.control.generator"; import {FormControlModel} from "../../../../models/formControlModels/formControl.model"; -import {SdcUiServices} from "onap-ui-angular"; import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service"; import {getTestBed, TestBed} from "@angular/core/testing"; import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../customModal/services/modal.service"; class MockModalService<T> {} @@ -2067,7 +2067,7 @@ describe('Service popup service', () => { {provide:FeatureFlagsService, useClass: MockFeatureFlagsService}, {provide: NgRedux, useClass: MockReduxStore}, {provide: HttpClient, useClass: MockAppStore}, - {provide: SdcUiServices.ModalService, useClass: MockModalService} + {provide: ModalService, useClass: MockModalService} ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts index b16c5bdc0..85626528b 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModule/vfModule.popup.service.spec.ts @@ -10,10 +10,10 @@ import {DefaultDataGeneratorService} from "../../../../services/defaultDataServi import {BasicPopupService} from "../basic.popup.service"; import {VfModulePopupService} from "./vfModule.popup.service"; import {VfModuleControlGenerator} from "../../../genericForm/formControlsServices/vfModuleGenerator/vfModule.control.generator"; -import {SdcUiServices} from "onap-ui-angular"; import {FeatureFlagsService} from "../../../../services/featureFlag/feature-flags.service"; import {getTestBed, TestBed} from "@angular/core/testing"; import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../customModal/services/modal.service"; class MockModalService<T> {} @@ -1996,7 +1996,7 @@ describe('VFModule popup service', () => { {provide:FeatureFlagsService, useClass: MockFeatureFlagsService}, {provide: NgRedux, useClass: MockReduxStore}, {provide: HttpClient, useClass: MockAppStore}, - {provide: SdcUiServices.ModalService, useClass: MockModalService} + {provide: ModalService, useClass: MockModalService} ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts index 2ca992f08..94def926a 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vfModuleUpgrade/vfModule.upgrade.popup.service.spec.ts @@ -26,6 +26,7 @@ import {ServiceActions} from "../../../../storeUtil/utils/service/service.action import {FormControlModel} from "../../../../models/formControlModels/formControl.model"; import * as _ from "lodash"; import {SharedControllersService} from "../../../genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {ModalService} from "../../../customModal/services/modal.service"; class MockModalService<T> {} @@ -87,7 +88,7 @@ describe('VFModule popup service', () => { {provide: FeatureFlagsService, useClass: MockFeatureFlagsService}, {provide: NgRedux, useClass: MockReduxStore}, {provide: HttpClient, useClass: MockAppStore}, - {provide: SdcUiServices.ModalService, useClass: MockModalService} + {provide: ModalService, useClass: MockModalService} ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts index c610110fd..5251a0aae 100644 --- a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts +++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts @@ -30,7 +30,7 @@ import { Component } from '@angular/core'; import { MessageBoxData} from './messageBox.data'; import { MessageBoxService } from './messageBox.service'; -import { SdcUiServices} from "onap-ui-angular"; +import {ModalService} from "../customModal/services/modal.service"; @Component({ selector: 'message-box', @@ -38,9 +38,9 @@ import { SdcUiServices} from "onap-ui-angular"; }) export class MessageBoxComponent { - modalService: SdcUiServices.ModalService; + modalService: ModalService; isOpened : boolean = false; - constructor(modalService: SdcUiServices.ModalService, private _messageBoxService : MessageBoxService) { + constructor(modalService: ModalService, private _messageBoxService : MessageBoxService) { this.modalService = modalService; MessageBoxService.openModal.subscribe((messageBoxData: MessageBoxData) => { diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts index 47f849059..7d9561c9a 100644 --- a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts +++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts @@ -44,7 +44,7 @@ export class SearchElementsModalComponent extends DialogComponent<{ modalInforma }) } - @ViewChild('ElementsTableComponent') membersTable; + @ViewChild('ElementsTableComponent', {static: false}) membersTable; ngOnInit(selectedRowsIds?: string[]): void { const genericModalHelper = this._store.getState().global.genericModalHelper; diff --git a/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts b/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts index a850d55da..3a05157ae 100644..100755 --- a/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts +++ b/vid-webpack-master/src/app/shared/services/aaiService/aai.epics.ts @@ -22,7 +22,6 @@ import { updateProductFamilies, updateUserId } from "../../storeUtil/utils/general/general.actions"; import {createServiceInstance} from "../../storeUtil/utils/service/service.actions"; -import {delay, mapTo} from "rxjs/operators"; const notFetchedAlready = (state: AppState): boolean => state.service.productFamilies !== null; @@ -30,7 +29,6 @@ const notFetchedAlready = (state: AppState): boolean => state.service.productFam export class AAIEpics { constructor(private aaiService: AaiService) { } - public createEpic() { return combineEpics( this.loadProductFamiliesEpic @@ -49,7 +47,11 @@ export class AAIEpics { private loadProductFamiliesEpic = (action$, store) => action$ .ofType(LOAD_PRODUCT_FAMILIES) - .switchMap(() => this.aaiService.getProductFamilies().map(data => updateProductFamilies(data))); + .switchMap(() => + this.aaiService.getProductFamilies() + .map(data => + updateProductFamilies(data) + )); private loadCategoryParameters = (action$, store) => action$ .ofType(LOAD_CATEGORY_PARAMETERS) @@ -64,7 +66,9 @@ export class AAIEpics { private loadServiceAccordingToUuid = (action$, store) => action$ .ofType(LOAD_SERVICE_MDOEL_BY_UUID) .switchMap((action) => this.aaiService.getServiceModelById(action.modelId) - .map(data => createServiceInstance(action.uuid, data))); + .map(data => + createServiceInstance(action.uuid, data)) + ); private loadUserId = (action$, store) => action$ .ofType(LOAD_USER_ID) diff --git a/vid-webpack-master/src/app/shared/shared.module.ts b/vid-webpack-master/src/app/shared/shared.module.ts index f95f86149..98db41d41 100644 --- a/vid-webpack-master/src/app/shared/shared.module.ts +++ b/vid-webpack-master/src/app/shared/shared.module.ts @@ -80,6 +80,15 @@ import {SearchFilterPipe} from "./pipes/searchFilter/search-filter.pipe"; import {RecreateResolver} from "./resolvers/recreate/recreate.resolver"; import {InstantiationTemplatesService} from "./services/templateService/instantiationTemplates.service"; import {SharedControllersService} from "./components/genericForm/formControlsServices/sharedControlles/shared.controllers.service"; +import {DuplicateVnfComponent} from "../drawingBoard/service-planning/duplicate/duplicate-vnf.component"; +import {ModalService} from "./components/customModal/services/modal.service"; +import {CreateDynamicComponentService} from "./components/customModal/services/create-dynamic-component.service"; +import {ModalComponent} from "./components/customModal/modal.component"; +import {ModalCloseButtonComponent} from './components/customModal/components/modalCloseButton/modal-close-button.component'; +import {CustomButtonComponent} from "./components/customButton/custom-button.component"; +import {CustomModalButtonComponent} from "./components/customModal/components/modalButton/modal-button.component"; +import {CustomRippleClickAnimationDirective} from "./components/customModal/directives/ripple-click.animation.directive"; + @NgModule({ @@ -110,6 +119,7 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer NumberFormControlComponent, InputPreventionPatternDirective, ClickOutsideDirective, + CustomRippleClickAnimationDirective, FormGeneralErrorsComponent, SpinnerComponent, NoContentMessageAndIconComponent, @@ -133,7 +143,11 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer ErrorMsgComponent, DynamicInputsComponent, DynamicInputLabelPipe, - InstantiationTemplatesModalComponent + InstantiationTemplatesModalComponent, + ModalComponent, + ModalCloseButtonComponent, + CustomButtonComponent, + CustomModalButtonComponent ], exports: [ PopoverComponent, @@ -142,6 +156,7 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer FormControlErrorComponent, DropdownFormControlComponent, InputPreventionPatternDirective, + CustomRippleClickAnimationDirective, ClickOutsideDirective, FormGeneralErrorsComponent, SpinnerComponent, @@ -165,17 +180,24 @@ import {SharedControllersService} from "./components/genericForm/formControlsSer ErrorMsgComponent, SvgComponent, DynamicInputsComponent, - DynamicInputLabelPipe + DynamicInputLabelPipe, + ModalComponent, + ModalCloseButtonComponent, + CustomButtonComponent, + CustomModalButtonComponent ], entryComponents : [ GenericFormPopupComponent, SearchElementsModalComponent, - InstantiationTemplatesModalComponent + InstantiationTemplatesModalComponent, + DuplicateVnfComponent, + ModalComponent ], providers: [ ServiceInfoService, MessageBoxService, - SdcUiServices.ModalService, + CreateDynamicComponentService, + ModalService, SdcUiServices.LoaderService, HttpInterceptorService, IframeService, diff --git a/vid-webpack-master/src/app/shared/store/module.ts b/vid-webpack-master/src/app/shared/store/module.ts index 5a81f36ec..5a81f36ec 100644..100755 --- a/vid-webpack-master/src/app/shared/store/module.ts +++ b/vid-webpack-master/src/app/shared/store/module.ts diff --git a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts index 623a4f42f..aa381684c 100644 --- a/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts +++ b/vid-webpack-master/src/app/vlanTagging/form-async/form-async.component.ts @@ -27,7 +27,7 @@ export class Formasync implements OnInit { constructor(private store: NgRedux<AppState>, private _formAsyncService: FormAsyncService) { } - @ViewChild('form') form: NgForm; + @ViewChild('form', {static: false}) form: NgForm; @Input() set params(params: any) { if (params) { diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts index c0aeb0b51..b7961ea38 100644 --- a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts +++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts @@ -21,7 +21,7 @@ export class NetworkSelectorComponent implements OnInit { @select(['service', 'networkFunctions']) readonly networkFunctions: Observable<any>; - @ViewChild('form') form: NgForm; + @ViewChild('form', {static: false}) form: NgForm; constructor(store: NgRedux<AppState>) { this.localStore = store; diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts index 87f117202..43e14e922 100644 --- a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts +++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts @@ -71,11 +71,8 @@ export class VlanTaggingComponent implements OnInit { readonly userIdObs: Observable<any>; - @ViewChild(NetworkSelectorComponent) - public networkSelectorComponent: NetworkSelectorComponent; - @ViewChild(Formasync) - public formAsync: Formasync; - + @ViewChild(NetworkSelectorComponent, {static: false}) networkSelectorComponent: NetworkSelectorComponent; + @ViewChild(Formasync, {static: false}) formAsync: Formasync; deploySubInterface() { @@ -186,9 +183,9 @@ export class VlanTaggingComponent implements OnInit { isNextButtonDisabled() { switch (this.currentStep) { case WizardSteps.one: - return !this.formAsync.form.valid; + return this.formAsync ? !this.formAsync.form.valid : false; case WizardSteps.two: - return !this.networkSelectorComponent.form.valid; + return this.networkSelectorComponent ? !this.networkSelectorComponent.form.valid : false; } } |