From 2960c232dc70bcd0de375a3732f98cef41b9e0b4 Mon Sep 17 00:00:00 2001 From: ShaabanEltanany Date: Tue, 10 Dec 2019 11:14:59 +0200 Subject: adding new designer component, sort and configuration dashboard Issue-ID: CCSDK-1982 Issue-ID: CCSDK-1984 Issue-ID: CCSDK-1983 Signed-off-by: ShaabanEltanany Change-Id: I05d12bbf5ebc940bd6983da06af3f85ee18eb723 --- .../configuration-dashboard.component.css | 0 .../configuration-dashboard.component.html | 7 + .../configuration-dashboard.component.spec.ts | 25 + .../configuration-dashboard.component.ts | 34 ++ .../configuration-dashboard.service.ts | 22 + .../configuration-dashboard/package.store.ts | 58 +++ .../designer/actions/actions.component.css | 0 .../designer/actions/actions.component.html | 15 + .../designer/actions/actions.component.spec.ts | 25 + .../packages/designer/actions/actions.component.ts | 19 + .../packages/designer/designer.component.css | 11 +- .../packages/designer/designer.component.html | 560 ++++++++++----------- .../packages/designer/designer.component.ts | 7 +- .../packages/designer/designer.service.ts | 40 ++ .../packages/designer/designer.store.ts | 48 ++ .../designer/functions/functions.component.css | 0 .../designer/functions/functions.component.html | 21 + .../designer/functions/functions.component.spec.ts | 25 + .../designer/functions/functions.component.ts | 26 + .../packages/model/BluePrint.detail.model.ts | 42 ++ .../packages/model/BluePrint.model.ts | 17 - .../packages/model/ModelType.model.ts | 12 + .../packages/model/designer-dashboard.state.ts | 27 + .../packages/model/package-dashboard.state.ts | 28 ++ .../packages-header/packages-header.component.css | 0 .../packages-header/packages-header.component.html | 10 + .../packages-header.component.spec.ts | 25 + .../packages-header/packages-header.component.ts | 23 + .../sort-packages/sort-packages.component.css | 0 .../sort-packages/sort-packages.component.html | 33 ++ .../sort-packages/sort-packages.component.spec.ts | 25 + .../sort-packages/sort-packages.component.ts | 32 ++ .../feature-modules/packages/packages.module.ts | 27 +- 33 files changed, 928 insertions(+), 316 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages') diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html new file mode 100644 index 000000000..804aad057 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -0,0 +1,7 @@ + + +

package-viewing works! + + + {{viewedPackage!.artifactName}}} +

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts new file mode 100644 index 000000000..3f9ba9c95 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfigurationDashboardComponent } from './configuration-dashboard.component'; + +describe('PackageViewingComponent', () => { + let component: ConfigurationDashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfigurationDashboardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfigurationDashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts new file mode 100644 index 000000000..84fdafb36 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -0,0 +1,34 @@ +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; +import {PackageStore} from './package.store'; +import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; + + +@Component({ + selector: 'app-configuration-dashboard', + templateUrl: './configuration-dashboard.component.html', + styleUrls: ['./configuration-dashboard.component.css'] +}) +export class ConfigurationDashboardComponent implements OnInit { + viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); + + constructor(private route: ActivatedRoute, private configurationStore: PackageStore) { + + const id = this.route.snapshot.paramMap.get('id'); + this.configurationStore.getPagedPackages(id); + this.configurationStore.state$.subscribe( + el => { + if (el && el.configuration) { + this.viewedPackage = el.configuration; + } + } + ); + + + } + + ngOnInit() { + + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts new file mode 100644 index 000000000..51d0e9db1 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts @@ -0,0 +1,22 @@ +import {Injectable} from '@angular/core'; +import {ApiService} from '../../../../common/core/services/api.typed.service'; +import {BlueprintURLs} from '../../../../common/constants/app-constants'; +import {Observable} from 'rxjs'; +import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; + + +@Injectable({ + providedIn: 'root' +}) +export class ConfigurationDashboardService { + + + constructor(private api: ApiService) { + + } + + getBluePrintModel(id: string): Observable { + return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id); + + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts new file mode 100644 index 000000000..efbaef8bd --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/package.store.ts @@ -0,0 +1,58 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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 {Injectable} from '@angular/core'; +import {Store} from '../../../../common/core/stores/Store'; +import {BluePrintDetailModel} from '../model/BluePrint.detail.model'; +import {ConfigurationDashboardService} from './configuration-dashboard.service'; +import {PackageDashboardState} from '../model/package-dashboard.state'; + + +@Injectable({ + providedIn: 'root' +}) +export class PackageStore extends Store { + + + constructor(private configurationDashboardService: ConfigurationDashboardService) { + super(new PackageDashboardState()); + } + + getPagedPackages(id: string) { + this.configurationDashboardService.getBluePrintModel(id).subscribe( + (bluePrintDetailModels) => { + this.setState({ + ...this.state, + configuration: bluePrintDetailModels[0] + }); + }); + /* bluePrintDetailModels.forEach( + bluePrintDetailModel => { + this.setState({ + ...this.state, + configuration: bluePrintDetailModel + }); + });*/ + + + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html new file mode 100644 index 000000000..df272bce4 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.html @@ -0,0 +1,15 @@ +
+ Select from other packages: +
+
+ + +
+
+
+ + +
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts new file mode 100644 index 000000000..2e30615e0 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ActionsComponent } from './actions.component'; + +describe('ActionsComponent', () => { + let component: ActionsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ActionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ActionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts new file mode 100644 index 000000000..144cd0a70 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.ts @@ -0,0 +1,19 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-actions', + templateUrl: './actions.component.html', + styleUrls: ['./actions.component.css'] +}) +export class ActionsComponent implements OnInit { + actions: string[] = []; + + constructor() { + this.actions.push('action 1 '); + this.actions.push('action 2'); + } + + ngOnInit() { + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css index 067d30d7f..799407093 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css @@ -1,6 +1,6 @@ body{ - background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important; + background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; } @@ -201,7 +201,7 @@ button.rotate{ border-color: #DEE8F3; } .actions-scroll{ - max-height: 160px; + max-height: 29vh; overflow-y: auto; margin-top: 12px; margin-bottom: 20px; @@ -280,6 +280,10 @@ p.compType-4{ .componentsList{ padding-bottom: 0; } +.custom-control.custom-checkbox:hover, +.custom-control-label:hover{ + cursor: pointer; +} .actionsList .custom-checkbox, .componentsList .list-group-item{ margin-bottom: 10px; @@ -344,7 +348,6 @@ p.compType-4{ background:#F4F9FE; border: solid 1px #E8EFF8; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); - margin-left: 20em; } .editBar .btn-group{ box-shadow: 0 2px 6px rgba(47, 83, 151, .15); @@ -544,4 +547,4 @@ p.compType-4{ color: #FF6469; font-size: 10px; -} \ No newline at end of file +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index 991e126c0..9021bf5e9 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -1,74 +1,79 @@
-
-
- - -
-
-
-
- - -
-
-
- -
-
-

Actions

-
-
- - -
-
+ + +
+
+
+ +
+
+

Actions

+
+
+ + +
+
-
-
+ + + - - -
-
-
- + +
+
+ + +
+
+ + + +
+
+ + +
-
-

Action Attributes

-
-
-
-
- - -
-
+
+
+ Action 1 +
+
+ + +

config-assign

+

component-resource-resolution

+ + + +

execute

+

component-netconf-executor

+ + + +

function 1

+

dg-generic

+ + + +

execute

+

component-netconf-executor

+
-
-
-
-

- -

-
- -
+
+ +
+ + +
+
+
+
+
+

Action Attributes

+
+
+
+
+ + +
+
+
+
+
+
+

+ +

+
+ +
+
-
-
-
-
-   - -
-
- -
-
-
- - -
-
- - -
-
- - -
+
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
-
-
-
-
-
-

- -

-
- -
-
-
-
-
-
-   - -
-
- -
-
-
- - -
-
- - -
-
- - -
+
+
+
+
+
+

+ +

+
+ +
+
+
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
-
-
-
-
-
-

- -

-
- -
-
-
-
-
-
-   - -
-
- -
-
-
- - -
-
- - -
-
- - -
+
+
+
+
+
+

+ +

+
+ +
+
+
+
+
+
+   + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
-
+
+
+
+
+
-
-
-
-
- + - \ No newline at end of file + diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 9e5f57b85..6d36a961f 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -1,7 +1,4 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import * as $ from 'jquery'; -import * as _ from 'lodash'; -import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js'; @Component({ selector: 'app-designer', @@ -13,9 +10,6 @@ export class DesignerComponent implements OnInit { private controllerSideBar: boolean; private attributesSideBar: boolean; - public graph: any; - public paper: any; - constructor() { this.controllerSideBar = true; this.attributesSideBar = false; @@ -29,6 +23,7 @@ export class DesignerComponent implements OnInit { ngOnInit() { + this.attachEditorBarToCanvas(); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts new file mode 100644 index 000000000..913abcf17 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.service.ts @@ -0,0 +1,40 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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 {Injectable} from '@angular/core'; +import {Observable} from 'rxjs'; +import {ApiService} from '../../../../common/core/services/api.typed.service'; +import {ResourceDictionaryURLs} from '../../../../common/constants/app-constants'; + + +@Injectable({ + providedIn: 'root' +}) +export class DesignerService { + + constructor(private api: ApiService) { + } + + getFunctions(modelDefinitionType: string): Observable { + return this.api.get(ResourceDictionaryURLs.getResourceDictionary + '/' + modelDefinitionType); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts new file mode 100644 index 000000000..554d459d2 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts @@ -0,0 +1,48 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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 {Injectable} from '@angular/core'; +import {Store} from '../../../../common/core/stores/Store'; +import {DesignerService} from './designer.service'; +import {DesignerDashboardState} from '../model/designer-dashboard.state'; + + +@Injectable({ + providedIn: 'root' +}) +export class DesignerStore extends Store { + + constructor(private designerService: DesignerService) { + super(new DesignerDashboardState()); + } + + public getFuntions() { + const modelDefinitionType = 'node_type'; + this.designerService.getFunctions(modelDefinitionType).subscribe( + (modelType: ModelType[]) => { + console.log(modelType); + this.setState({ + ...this.state, + functions: modelType, + }); + }); + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html new file mode 100644 index 000000000..b27f91f49 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.html @@ -0,0 +1,21 @@ +

Functions

+
+ Drag and drop function to Action’s box +
    +
  • +

    {{function.modelName}}

    +
    • + +
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts new file mode 100644 index 000000000..eec909b01 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FunctionsComponent } from './functions.component'; + +describe('FunctionsComponent', () => { + let component: FunctionsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FunctionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FunctionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts new file mode 100644 index 000000000..2223c9fa6 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.ts @@ -0,0 +1,26 @@ +import {Component, OnInit} from '@angular/core'; +import {DesignerStore} from '../designer.store'; + +@Component({ + selector: 'app-functions', + templateUrl: './functions.component.html', + styleUrls: ['./functions.component.css'] +}) +export class FunctionsComponent implements OnInit { + viewedFunctions: ModelType[] = []; + + constructor(private designerStore: DesignerStore) { + + this.designerStore.state$.subscribe(state => { + console.log(state); + if (state.functions) { + this.viewedFunctions = state.functions; + } + }); + } + + ngOnInit() { + this.designerStore.getFuntions(); + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts new file mode 100644 index 000000000..ff01695ab --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.detail.model.ts @@ -0,0 +1,42 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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 {Page} from 'src/app/common/model/page'; +import {BlueprintModel} from './BluePrint.model'; + +export class BluePrintDetailModel extends BlueprintModel { + blueprintModelContent: BlueprintModelContent; +} + +export class BlueprintModelContent { + id: string; + name: string; + description: string; + fileContent: any; + + +} + +/* +export class BluePrintDetailModelContent { + bluePrintDetailsModels: BluePrintDetailModel[]; + +}*/ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts index 46dab88f8..712b53b9a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/BluePrint.model.ts @@ -24,23 +24,6 @@ import { Page } from 'src/app/common/model/page'; export class BlueprintModel { - constructor(id: string, artifactUUId: null, artifactType: string, - artifactVersion: string, artifactDescription: string, - internalVersion: null, createdDate: string, artifactName: string, - published: string, updatedBy: string, tags: string) { - this.id = id; - this.artifactUUId = artifactUUId; - this.artifactType = artifactType; - this.artifactVersion = artifactVersion; - this.artifactDescription = artifactDescription; - this.internalVersion = internalVersion; - this.createdDate = createdDate; - this.artifactName = artifactName; - this.published = published; - this.updatedBy = updatedBy; - this.tags = tags; - } - id: string; artifactUUId?: null; artifactType: string; diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts new file mode 100644 index 000000000..edbb368b3 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/ModelType.model.ts @@ -0,0 +1,12 @@ +class ModelType { + modelName: string; + derivedFrom: string; + definitionType: string; + definition: object; + description: string; + version: string; + tags: string; + creationDate: string; + updatedBy: string; + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts new file mode 100644 index 000000000..a8711cdbb --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/designer-dashboard.state.ts @@ -0,0 +1,27 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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============================================ +*/ + +export class DesignerDashboardState { + + functions: ModelType[]; + actions: string[]; + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts new file mode 100644 index 000000000..638e68c06 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/model/package-dashboard.state.ts @@ -0,0 +1,28 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2019 Orange. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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 {BluePrintDetailModel} from './BluePrint.detail.model'; + +export class PackageDashboardState { + configuration: BluePrintDetailModel; + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html new file mode 100644 index 000000000..c058f81c7 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.html @@ -0,0 +1,10 @@ + +
+
+

CBA Packages + ({{numberOfPackages}} packages) +

+
+
+
+
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts new file mode 100644 index 000000000..06a09e851 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PackagesHeaderComponent } from './packages-header.component'; + +describe('PackagesHeaderComponent', () => { + let component: PackagesHeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PackagesHeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PackagesHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts new file mode 100644 index 000000000..64fe9e463 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { PackagesStore } from '../../packages.store'; + +@Component({ + selector: 'app-packages-header', + templateUrl: './packages-header.component.html', + styleUrls: ['./packages-header.component.css'] +}) +export class PackagesHeaderComponent implements OnInit { + + numberOfPackages: number; + + constructor(private packagesStore: PackagesStore) { + this.packagesStore.state$ + .subscribe(state => { + this.numberOfPackages = state.totalPackagesWithoutSearchorFilters; + }); + } + + ngOnInit() { + } + +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html new file mode 100644 index 000000000..9eb45f1be --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.html @@ -0,0 +1,33 @@ +
+
+
+ + + + +
+
+
+ diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts new file mode 100644 index 000000000..dd27aa1f2 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SortPackagesComponent } from './sort-packages.component'; + +describe('SortPackagesComponent', () => { + let component: SortPackagesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SortPackagesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SortPackagesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts new file mode 100644 index 000000000..b63f8879f --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.ts @@ -0,0 +1,32 @@ +import {Component, OnInit} from '@angular/core'; +import {PackagesStore} from '../../packages.store'; + +@Component({ + selector: 'app-sort-packages', + templateUrl: './sort-packages.component.html', + styleUrls: ['./sort-packages.component.css'] +}) +export class SortPackagesComponent implements OnInit { + sortTypes: string[]; + selected: string; + + constructor(private packagesStore: PackagesStore) { + this.sortTypes = Object.keys(SortByToServerValue); + this.selected = 'Recent'; + } + + ngOnInit() { + } + + sortPackages(event: any) { + const key = event.target.name; + console.log(key); + this.selected = key; + this.packagesStore.sortPagedPackages(SortByToServerValue[key]); + } +} + +enum SortByToServerValue { + Recent = 'DATE', + Name = 'NAME', +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts index f24ae8b00..48e8fbf32 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts @@ -3,15 +3,19 @@ import {CommonModule} from '@angular/common'; import {ApiService} from '../../../common/core/services/api.typed.service'; import {PackagesRoutingModule} from './packages.routing.module'; import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap'; -import { SharedModulesModule } from '../../shared-modules/shared-modules.module'; -import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component'; -import { PackageListComponent } from './packages-dashboard/package-list/package-list.component'; -import { DesignerComponent } from './designer/designer.component'; -import { SidebarModule } from 'ng-sidebar'; -import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component'; -import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component'; -import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component'; - +import {SharedModulesModule} from '../../shared-modules/shared-modules.module'; +import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; +import {PackageListComponent} from './packages-dashboard/package-list/package-list.component'; +import {DesignerComponent} from './designer/designer.component'; +import {SidebarModule} from 'ng-sidebar'; +import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component'; +import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component'; +import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component'; +import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component'; +import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component'; +import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component'; +import {FunctionsComponent} from './designer/functions/functions.component'; +import {ActionsComponent} from './designer/actions/actions.component'; @NgModule({ @@ -21,6 +25,11 @@ import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filt DesignerComponent, PackagePaginationComponent, PackagesSearchComponent, + SortPackagesComponent, + ConfigurationDashboardComponent, + PackagesHeaderComponent, + FunctionsComponent, + ActionsComponent, ], imports: [ CommonModule, -- cgit 1.2.3-korg