diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu')
4 files changed, 303 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html new file mode 100644 index 0000000000..18c6949b46 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html @@ -0,0 +1,34 @@ +<!-- + ~ - + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2022 Nordix Foundation. + ~ ================================================================================ + ~ 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. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + ~ ============LICENSE_END========================================================= + --> + +<div class="w-sdc-left-sidebar"> + <div class="menu-header" tooltips [attr.tooltip-content]="menuHeader" [title]="menuHeader"> + {{menuHeader}} + </div> + <div class="i-sdc-designer-sidebar-section-content-item" + [ngClass]="{'selected': isSelected(menuItem)}" + *ngFor="let menuItem of leftBarTabs.menuItems"> + <div class="expand-collapse-menu-box-item-text" ng-class="{'disabled': menuItem.isDisabled }"> + <button [attr.data-tests-id]="menuItem.text + 'LeftSideMenu'" type="button" class="i-sdc-designer-sidebar-section-content-item-service-cat" + (click)="menuItem.callback()" [disabled]="menuItem.disabledCategory">{{menuItem.text}}</button> + </div> + </div> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less new file mode 100644 index 0000000000..2df6e6ac8b --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less @@ -0,0 +1,75 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +@import '../../../../../assets/styles/variables.less'; +@import '../../../../../assets/styles/mixins.less'; + +.w-sdc-left-sidebar { + padding: 0; + background-color: @tlv_color_t; + box-shadow: none; + z-index: 2; + border-right: 1px solid @main_color_o; + + .menu-header { + border-bottom: 1px solid @main_color_o; + height: 53px; + .f-type._16_m; + font-weight: 700; + line-height: 53px; + padding-left: 40px; + padding-right: 10px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + white-space: nowrap; + } + + .i-sdc-designer-sidebar-section-content-item { + .f-type._13_m; + color: @main_color_m; + margin-left: 20px; + padding-left: 20px; + margin-top: 20px; + height: 17px; + .hand; + + &:hover { + color: @func_color_s; + font-weight: 600; + } + + &.selected { + border-left: 4px solid @main_color_a; + color: @main_color_a; + margin-left: 18px; + padding-left: 18px; + font-weight: 600; + + } + } + +} + +.hand { + cursor: pointer; +} diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts new file mode 100644 index 0000000000..a91258c00e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts @@ -0,0 +1,84 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {WorkspaceMenuComponent} from './workspace-menu.component'; +import {CacheService} from "../../../services/cache.service"; +import {States} from "../../../../utils/constants"; +import {IAppMenu} from "../../../../models/app-config"; +import {SdcMenuToken} from "../../../config/sdc-menu.config"; + +describe('WorkspaceMenuComponent', () => { + let component: WorkspaceMenuComponent; + let fixture: ComponentFixture<WorkspaceMenuComponent>; + let cacheService: Partial<CacheService> = { + 'get': jest.fn(param => { + if (param === 'version') { + return 'version'; + } + if (param === 'user') { + return {}; + } + }) + }; + let sdcMenuMock: Partial<IAppMenu> = { + 'component_workspace_menu_option': { + "DataType": [ + {"text": "General", "action": "onMenuItemPressed", "state": "general"} + ] + } + }; + let stateMock: Partial<ng.ui.IStateService> = { + 'current': { + 'name': States.TYPE_WORKSPACE + } + }; + let injectorMock: Partial<ng.auto.IInjectorService> = { + 'get': jest.fn(param => { + if (param === '$state') { + return stateMock; + } + }) + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WorkspaceMenuComponent ], + providers: [ + {provide: CacheService, useValue: cacheService}, + {provide: '$injector', useValue: injectorMock}, + {provide: SdcMenuToken, useValue: sdcMenuMock} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkspaceMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts new file mode 100644 index 0000000000..c5e49d4d7d --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts @@ -0,0 +1,110 @@ +/* + * - + * ============LICENSE_START======================================================= + * Copyright (C) 2022 Nordix Foundation. + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core'; +import {MenuItem, MenuItemGroup} from "../../../../utils/menu-handler"; +import {CacheService} from "../../../services/cache.service"; +import {IAppMenu} from "../../../../models/app-config"; +import {IUserProperties} from "../../../../models/user"; +import {SdcMenuToken} from "../../../config/sdc-menu.config"; + +@Component({ + selector: 'app-workspace-menu', + templateUrl: './workspace-menu.component.html', + styleUrls: ['./workspace-menu.component.less'] +}) +export class WorkspaceMenuComponent implements OnInit { + + @Input() menuHeader: string = ''; + @Output() onMenuUpdate: EventEmitter<MenuItemGroup> = new EventEmitter<MenuItemGroup>(); + @Output() onClick: EventEmitter<MenuItem> = new EventEmitter<MenuItem>(); + + private role: string; + private user: IUserProperties; + private $state: ng.ui.IStateService; + private $q: ng.IQService; + + leftBarTabs: MenuItemGroup = new MenuItemGroup(); + + constructor(private cacheService: CacheService, @Inject(SdcMenuToken) private sdcMenu: IAppMenu, @Inject('$injector') $injector) { + this.$state = $injector.get('$state'); + this.$q = $injector.get('$q'); + } + + ngOnInit(): void { + this.user = this.cacheService.get('user'); + this.role = this.user.role; + this.initMenuItems(); + } + + private initMenuItems(): void { + this.leftBarTabs = new MenuItemGroup(); + const menuItemsObjects: MenuItem[] = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option["DataType"], this.role); + + this.leftBarTabs.menuItems = menuItemsObjects.map((item: MenuItem) => { + const menuCallback = () => this[menuItem.action](menuItem); + const menuItem = new MenuItem(item.text, menuCallback, item.state, item.action, item.params, item.blockedForTypes, item.disabledCategory); + if (menuItem.params) { + menuItem.params.state = menuItem.state; + } else { + menuItem.params = {state: menuItem.state}; + } + return menuItem; + }); + this.updateSelectedMenuItem(); + this.onMenuUpdate.emit(this.leftBarTabs); + } + + isSelected(menuItem: MenuItem): boolean { + return this.leftBarTabs.selectedIndex === this.leftBarTabs.menuItems.indexOf(menuItem); + } + + private onMenuItemPressed(menuItem: MenuItem): angular.IPromise<boolean> { + this.leftBarTabs.selectedIndex = this.leftBarTabs.menuItems.indexOf(menuItem); + this.onClick.emit(this.leftBarTabs.menuItems[this.leftBarTabs.selectedIndex]); + const deferred: ng.IDeferred<boolean> = this.$q.defer(); + deferred.resolve(true); + return deferred.promise; + } + + private updateMenuItemByRole(menuItems: MenuItem[], role: string): MenuItem[] { + const filteredMenuItems: MenuItem[] = []; + menuItems.forEach((item: any) => { + if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) { + filteredMenuItems.push(item); + } + }); + return filteredMenuItems; + } + + private updateSelectedMenuItem(): void { + const stateArray: Array<string> = this.$state.current.name.split('.', 2); + const stateWithoutInternalNavigate: string = stateArray[0] + '.' + stateArray[1]; + const selectedItem: MenuItem = this.leftBarTabs.menuItems.find((item: MenuItem) => { + let itemStateArray: Array<string> = item.state.split('.', 2); + let itemStateWithoutNavigation: string = itemStateArray[0] + '.' + itemStateArray[1]; + return (itemStateWithoutNavigation === stateWithoutInternalNavigate); + }); + this.leftBarTabs.selectedIndex = selectedItem ? this.leftBarTabs.menuItems.indexOf(selectedItem) : 0; + this.onClick.emit(this.leftBarTabs.menuItems[this.leftBarTabs.selectedIndex]); + } + +} |