From 6ed5592ccb3b2bdb61403f1d1d41d93088cb0709 Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Fri, 23 Sep 2022 12:31:12 +0100 Subject: Add data type view/workspace MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implements a data type workspace, based on the Service/VF workspace, where it is possible to view a data type information. Issue-ID: SDC-4193 Signed-off-by: André Schmid Change-Id: Ica341efa43e70b4ac85d42d22a1397e0ab6e2794 --- .../type-workspace-general.component.html | 79 +++++++++++ .../type-workspace-general.component.less | 20 +++ .../type-workspace-general.component.spec.ts | 59 ++++++++ .../type-workspace-general.component.ts | 62 +++++++++ .../type-workspace/type-workspace.component.html | 53 ++++++++ .../type-workspace/type-workspace.component.less | 149 +++++++++++++++++++++ .../type-workspace.component.spec.ts | 122 +++++++++++++++++ .../type-workspace/type-workspace.component.ts | 91 +++++++++++++ .../pages/type-workspace/type-workspace.module.ts | 58 ++++++++ .../workspace-menu/workspace-menu.component.html | 34 +++++ .../workspace-menu/workspace-menu.component.less | 75 +++++++++++ .../workspace-menu.component.spec.ts | 84 ++++++++++++ .../workspace-menu/workspace-menu.component.ts | 110 +++++++++++++++ 13 files changed, 996 insertions(+) create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.html create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.ts (limited to 'catalog-ui/src/app/ng2/pages') diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html new file mode 100644 index 0000000000..877c58bd58 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.html @@ -0,0 +1,79 @@ + + +
+
+
+
+
+
+
+
+ + {{dataType.name}} +
+ +
+ + {{dataType.model ? dataType.model : DEFAULT_MODEL_NAME}} +
+ +
+ + {{dataType.derivedFromName}} +
+
+
+ +
+ + +
+
+ +
+
+
+ {{'CREATED_LABEL' | translate}}: +
+
{{dataType.creationTime | date:'MM/dd/yyyy'}}
+
+ {{'MODIFIED_LABEL' | translate}}: +
+
+ {{dataType.modificationTime | date:'MM/dd/yyyy'}} +
+
+ {{'UNIQUE_ID_LABEL' | translate}}: +
+
{{dataType.uniqueId}}
+
+
+ +
+
+
+
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less new file mode 100644 index 0000000000..3d9e984809 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.less @@ -0,0 +1,20 @@ +/* + * - + * ============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========================================================= + */ diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts new file mode 100644 index 0000000000..fe7b070354 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.spec.ts @@ -0,0 +1,59 @@ +/* + * - + * ============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 {TypeWorkspaceGeneralComponent} from './type-workspace-general.component'; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslateModule} from "../../../shared/translator/translate.module"; +import {TranslateService} from "../../../shared/translator/translate.service"; + +describe('TypeWorkspaceGeneralComponent', () => { + let component: TypeWorkspaceGeneralComponent; + let fixture: ComponentFixture; + let translateServiceMock: Partial = { + 'translate': jest.fn() + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TypeWorkspaceGeneralComponent ], + imports: [ + ReactiveFormsModule, + TranslateModule + ], + providers: [ + {provide: TranslateService, useValue: translateServiceMock} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TypeWorkspaceGeneralComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts new file mode 100644 index 0000000000..8728c3020e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-general/type-workspace-general.component.ts @@ -0,0 +1,62 @@ +/* + * - + * ============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, Input, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {DataTypeModel} from "../../../../models/data-types"; +import { DEFAULT_MODEL_NAME } from "app/utils/constants"; + +@Component({ + selector: 'app-type-workspace-general', + templateUrl: './type-workspace-general.component.html', + styleUrls: ['./type-workspace-general.component.less'] +}) +export class TypeWorkspaceGeneralComponent implements OnInit { + @Input() isViewOnly = true; + @Input() dataType: DataTypeModel = new DataTypeModel(); + + DEFAULT_MODEL_NAME = DEFAULT_MODEL_NAME; + + type: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1), Validators.maxLength(300)]); + derivedFrom: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1)]); + description: FormControl = new FormControl(undefined, [Validators.required, Validators.minLength(1)]); + model: FormControl = new FormControl(undefined, [Validators.required]); + formGroup: FormGroup = new FormGroup({ + 'type': this.type, + 'description': this.description, + 'model': this.model, + 'derivedFrom': this.derivedFrom + }); + + ngOnInit(): void { + this.initForm(); + } + + private initForm(): void { + if (!this.dataType) { + return; + } + this.type.setValue(this.dataType.name); + this.description.setValue(this.dataType.description); + this.model.setValue(this.dataType.model); + this.derivedFrom.setValue(this.dataType.derivedFrom); + } +} diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html new file mode 100644 index 0000000000..8d6ae02598 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.html @@ -0,0 +1,53 @@ + + +
+ +
+ + + +
+
+
+
+
+ +
+
+ +
+
+
+ {{currentMenu.text}} +
+
+
+ +
+
+ +
+
+ +
diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less new file mode 100644 index 0000000000..4839b24f5e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.less @@ -0,0 +1,149 @@ +/* + * - + * ============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'; +@import '../../../../assets/styles/mixins_old.less'; +@import '../../../../assets/styles/sprite.less'; + +.sdc-workspace-container { + .bg_p; + + .w-sdc-main-right-container { + + padding: 0; + background-color: @main_color_p; + + .sdc-workspace-top-bar { + height: @action_nav_height; + padding: 12px 10px 0 50px; + border-bottom: 1px solid @main_color_o; + display: flex; + justify-content: space-between; + white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + + .progress-container { + flex-grow: 4; + z-index: 1; + display: inline-block; + + .general-view-top-progress { + width: 30%; + margin: 0 auto; + min-width: 140px; + } + } + + .not-latest { + position: absolute; + left: 24px; + top: 20px; + .sprite-new; + .asdc-warning; + display: inline-block; + } + + .sdc-workspace-top-bar-buttons { + + > button, > span:not(.delimiter) { + margin-right: 10px; + vertical-align: middle; + .hand; + + &.sprite-new { + text-indent: 100%; + } + + &.disabled, &:hover.disabled { + pointer-events: none; + } + } + + .delimiter { + height: 32px; + width: 1px; + background-color: @main_color_o; + display: inline-block; + vertical-align: middle; + margin-right: 20px; + } + + display: inline-block; + + } + } + + .workspace-tab-title { + height: 110px; + padding-left: 100px; + line-height: 110px; + .f-type ._28; + } + + .w-sdc-main-container-body-content { + align-items: center; + padding: 0 100px 20px 100px; + + &.third-party { + text-align: left; + padding: 0; + position: absolute; + top: @action_nav_height + @tab_title; + left: 0; + right: 0; + bottom: 0; + } + } + + .w-sdc-main-container-body-content-wrapper { + overflow: auto; + height: calc(~'100% - @{action_nav_height}'); + + .w-sdc-main-container-body-content-header { + display: flex; + + .workspace-tab-title { + flex-grow: 1; + } + + .w-sdc-main-container-body-content-action-buttons { + margin: 72px 100px 0 0; + + > * { + display: inline-block; + vertical-align: middle; + } + + .revert-btn { + text-indent: 100%; + } + + .save-btn { + text-indent: 100%; + } + } + } + } + } +} + diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts new file mode 100644 index 0000000000..8450da829b --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.spec.ts @@ -0,0 +1,122 @@ +/* + * - + * ============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 {TypeWorkspaceComponent} from './type-workspace.component'; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslateModule} from "../../shared/translator/translate.module"; +import {UiElementsModule} from "../../components/ui/ui-elements.module"; +import {DataTypeService} from "../../services/data-type.service"; +import {TranslateService} from "../../shared/translator/translate.service"; +import {WorkspaceMenuComponent} from "./workspace-menu/workspace-menu.component"; +import {TypeWorkspaceGeneralComponent} from "./type-workspace-general/type-workspace-general.component"; +import {LayoutModule} from "../../components/layout/layout.module"; +import {CacheService} from "../../services/cache.service"; +import {IAppMenu, SdcMenuToken} from "../../config/sdc-menu.config"; +import {AuthenticationService} from "../../services/authentication.service"; +import {ISdcConfig, SdcConfigToken} from "../../config/sdc-config.config"; +import {States} from "../../../utils/constants"; +import {IUserProperties} from "../../../models/user"; +import {Observable} from "rxjs/Observable"; + +describe('TypeWorkspaceComponent', () => { + let component: TypeWorkspaceComponent; + let fixture: ComponentFixture; + let translateServiceMock: Partial = { + 'languageChangedObservable': Observable.of(), + 'translate': jest.fn() + }; + let dataTypeServiceMock: Partial; + let cacheService: Partial = { + 'get': jest.fn(param => { + if (param === 'version') { + return 'version'; + } + if (param === 'user') { + return {}; + } + }) + }; + let stateMock: Partial = { + 'current': { + 'name': States.TYPE_WORKSPACE + } + }; + let stateParamsMock: Partial = {}; + let injectorMock: Partial = { + 'get': jest.fn(param => { + if (param === '$state') { + return stateMock; + } + }) + }; + let sdcMenuMock: Partial = { + 'component_workspace_menu_option': { + "DataType": [ + {"text": "General", "action": "onMenuItemPressed", "state": "general"} + ] + } + }; + let sdcConfigMock: Partial; + let user: Partial = { + 'role': 'DESIGNER' + } + let authenticationService: Partial = { + 'getLoggedinUser': jest.fn(() => { + return user; + }) + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TypeWorkspaceComponent, WorkspaceMenuComponent, TypeWorkspaceGeneralComponent ], + imports: [ + ReactiveFormsModule, + TranslateModule, + UiElementsModule, + LayoutModule + ], + providers: [ + {provide: DataTypeService, useValue: dataTypeServiceMock}, + {provide: TranslateService, useValue: translateServiceMock}, + {provide: CacheService, useValue: cacheService}, + {provide: '$state', useValue: stateMock}, + {provide: '$stateParams', useValue: stateParamsMock}, + {provide: '$injector', useValue: injectorMock}, + {provide: SdcMenuToken, useValue: sdcMenuMock}, + {provide: SdcConfigToken, useValue: sdcConfigMock}, + {provide: AuthenticationService, useValue: authenticationService}, + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TypeWorkspaceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts new file mode 100644 index 0000000000..d0d5ae8c69 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.component.ts @@ -0,0 +1,91 @@ +/* + * - + * ============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, Inject, OnInit} from '@angular/core'; +import {MenuItem, MenuItemGroup} from "../../../utils/menu-handler"; +import {CacheService} from "../../services/cache.service"; +import {DataTypeModel} from "../../../models/data-types"; +import {DataTypeService} from "../../services/data-type.service"; + +@Component({ + selector: 'app-type-workspace', + templateUrl: './type-workspace.component.html', + styleUrls: ['./type-workspace.component.less'] +}) +export class TypeWorkspaceComponent implements OnInit { + + private typeMenuItemGroup: MenuItemGroup; + + isLoading: boolean; + disabled: boolean; + isViewOnly: boolean = true; + sdcVersion: string; + breadcrumbsModel: Array = []; + dataType: DataTypeModel = new DataTypeModel(); + currentMenu: MenuItem; + + constructor(private dataTypeService: DataTypeService, private cacheService: CacheService, + @Inject('$state') private $state: ng.ui.IStateService, + @Inject('$stateParams') private stateParams) { } + + ngOnInit(): void { + this.sdcVersion = this.cacheService.get('version'); + this.typeMenuItemGroup = this.createTypeBreadcrumb(); + this.loadDataType(); + } + + private loadDataType(): void { + if (this.stateParams.id) { + this.dataTypeService.findById(this.stateParams.id).subscribe(dataType => { + this.dataType = dataType; + this.updateTypeBreadcrumb(); + }, error => { + console.debug('Could not find data type %s', this.stateParams.id, error); + this.goToBreadcrumbHome(); + }); + } else { + this.dataType = new DataTypeModel(); + } + } + + private updateTypeBreadcrumb(): void { + this.typeMenuItemGroup.updateSelectedMenuItemText(`Data Type: ${this.dataType.name}`); + } + + private createTypeBreadcrumb(): MenuItemGroup { + const menuItem = new MenuItem(`Data Type: ${this.dataType ? this.dataType.name : ''}`, undefined, undefined, undefined, [], [], false); + return new MenuItemGroup(0, [menuItem]); + } + + goToBreadcrumbHome(): void { + const homeMenuItemGroup: MenuItemGroup = this.breadcrumbsModel[0]; + this.$state.go(homeMenuItemGroup.menuItems[homeMenuItemGroup.selectedIndex].state); + } + + onMenuUpdate(menuItemGroup: MenuItemGroup): void { + this.breadcrumbsModel.push(...[this.typeMenuItemGroup, menuItemGroup]); + } + + onMenuClick(menuItem: MenuItem): void { + this.currentMenu = menuItem; + } + +} diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts new file mode 100644 index 0000000000..d3f391db24 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace.module.ts @@ -0,0 +1,58 @@ +/* + * - + * ============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 {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {TypeWorkspaceComponent} from "./type-workspace.component"; +import {WorkspaceMenuComponent} from "./workspace-menu/workspace-menu.component"; +import {CacheService} from "../../services/cache.service"; +import {UiElementsModule} from "../../components/ui/ui-elements.module"; +import {LayoutModule} from "../../components/layout/layout.module"; +import {TypeWorkspaceGeneralComponent} from './type-workspace-general/type-workspace-general.component'; +import {UpgradeModule} from "@angular/upgrade/static"; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslateModule} from "../../shared/translator/translate.module"; +import {DataTypeService} from "../../services/data-type.service"; + +@NgModule({ + imports: [ + CommonModule, + UiElementsModule, + LayoutModule, + UpgradeModule, + ReactiveFormsModule, + TranslateModule, + ], + declarations: [ + TypeWorkspaceComponent, + WorkspaceMenuComponent, + TypeWorkspaceGeneralComponent + ], + providers: [ + CacheService, + WorkspaceMenuComponent, + DataTypeService + ], + entryComponents: [TypeWorkspaceComponent], + exports: [TypeWorkspaceComponent] +}) +export class TypeWorkspaceModule { +} 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 @@ + + +
+
+ {{menuHeader}} +
+
+
+ +
+
+
\ 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; + let cacheService: Partial = { + 'get': jest.fn(param => { + if (param === 'version') { + return 'version'; + } + if (param === 'user') { + return {}; + } + }) + }; + let sdcMenuMock: Partial = { + 'component_workspace_menu_option': { + "DataType": [ + {"text": "General", "action": "onMenuItemPressed", "state": "general"} + ] + } + }; + let stateMock: Partial = { + 'current': { + 'name': States.TYPE_WORKSPACE + } + }; + let injectorMock: Partial = { + '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 = new EventEmitter(); + @Output() onClick: EventEmitter = new EventEmitter(); + + 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 { + this.leftBarTabs.selectedIndex = this.leftBarTabs.menuItems.indexOf(menuItem); + this.onClick.emit(this.leftBarTabs.menuItems[this.leftBarTabs.selectedIndex]); + const deferred: ng.IDeferred = 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 = 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 = 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]); + } + +} -- cgit 1.2.3-korg