diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/service-path')
4 files changed, 195 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html new file mode 100644 index 0000000000..ff7902e2b9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html @@ -0,0 +1,22 @@ +<div class='service-path'> + <button class='zoom-icons create-path-button' data-tests-id="pathsMenuBtn" (click)="showServicePathMenu = !showServicePathMenu">...</button> + <div class="service-path-menu" + *ngIf="showServicePathMenu" > + <div > + <ul> + <li><div class="hand" (click)="onCreateServicePath()" data-tests-id="createPathMenuItem"> + Create Service Path + </div></li> + <li><div class="hand" (click)="onListServicePath()" data-tests-id="pathsListMenuItem"> + Service Paths List + </div></li> + </ul> + </div> + </div> + <!-- TODO - ask Orit about positioning issues and styling issues --> + <!-- + <menu-list [open]="showServicePathMenu" [position]="menuPos" > + <menu-item [action]="onCreateServicePath">Create Path</menu-item> + <menu-item [action]="onListServicePath">Paths' List</menu-item> + </menu-list> --> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less new file mode 100644 index 0000000000..777b206714 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less @@ -0,0 +1,51 @@ +//@import 'src/assets/styles/variables.less'; +@import './../../../../../assets/styles/variables.less'; +.service-path { + position: relative; + .create-path-button{ + &:extend(.search-bar-button); + width: 30px; + height: 30px; + &:hover { + color: @main_color_a; + } + &:active { + background: @main_color_a; + color: @main_color_p; + } + &:focus { + outline: none; + } + } + .service-path-menu { + border: 1px solid @main_color_o; + border-radius: 0 0 2px 2px; + border-top-color: @main_color_a; + border-top-width: 3px; + + box-sizing: border-box; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30); + + background-color: @main_color_p; + + padding: 5px 0; + right: 34px; + position: absolute; + top: 10px; + width: 150px; + font-size: 13px; + font-family: @font-opensans-regular; + + li { + color: @main_color_m; + padding: 0 10px; + line-height: 20px; + &:hover { + cursor: pointer; + color: @main_color_a; + background-color: fade(@main_color_a, 5%); + } + } + + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts new file mode 100644 index 0000000000..4a6209fb6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts @@ -0,0 +1,83 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, ComponentRef} from '@angular/core'; +import {ModalService} from 'app/ng2/services/modal.service'; +import {ModalModel, ButtonModel} from 'app/models'; +import {ServicePathCreatorComponent} from 'app/ng2/pages/service-path-creator/service-path-creator.component'; +import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; +import ServicePathsListComponent from "app/ng2/pages/service-paths-list/service-paths-list.component"; +import {Service} from "app/models/components/service"; + +@Component({ + selector: 'service-path', + templateUrl: './service-path.component.html', + styleUrls: ['service-path.component.less'], + providers: [ModalService] +}) + +export class ServicePathComponent { + showServicePathMenu: boolean = false; + modalInstance: ComponentRef<ModalComponent>; + @Input() service: Service; + @Input() onCreate: Function; + @Input() onSave: Function; + + constructor(private ModalServiceNg2: ModalService) {} + + onCreateServicePath = ():void => { + this.showServicePathMenu = false; + let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal); + let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled ); + let modalModel: ModalModel = new ModalModel('l', 'Create Service Path', '', [saveButton, cancelButton], 'standard', true); + this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service}); + this.modalInstance.instance.open(); + }; + + onListServicePath = ():void => { + this.showServicePathMenu = false; + let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.ModalServiceNg2.closeCurrentModal); + let modalModel: ModalModel = new ModalModel('md', 'Service Paths List','', [cancelButton], 'standard', true); + this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {service: this.service, + onCreateServicePath: this.onCreateServicePath, onEditServicePath: this.onEditServicePath}); + this.modalInstance.instance.open(); + }; + + createPath = ():void => { + this.onCreate(this.modalInstance.instance.dynamicContent.instance.createServicePathData()); + this.ModalServiceNg2.closeCurrentModal(); + }; + + onEditServicePath = (id:string):void => { + let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal); + let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled ); + let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton]); + this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service, pathId: id}); + this.modalInstance.instance.open(); + }; + + getDisabled = ():boolean => { + return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); + }; +} + diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts new file mode 100644 index 0000000000..96af247086 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts @@ -0,0 +1,39 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {ServicePathComponent} from "./service-path.component"; +import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; + +@NgModule({ + declarations: [ + ServicePathComponent + ], + imports: [CommonModule, + UiElementsModule], + exports: [], + entryComponents: [ + ServicePathComponent + ], + providers: [] +}) +export class ServicePathModule { +}
\ No newline at end of file |