diff options
Diffstat (limited to 'cds-ui/designer-client')
35 files changed, 942 insertions, 317 deletions
diff --git a/cds-ui/designer-client/src/app/common/constants/app-constants.ts b/cds-ui/designer-client/src/app/common/constants/app-constants.ts index cfe8061f3..506d3b90f 100644 --- a/cds-ui/designer-client/src/app/common/constants/app-constants.ts +++ b/cds-ui/designer-client/src/app/common/constants/app-constants.ts @@ -88,6 +88,7 @@ export const GlobalContants = { export const BlueprintURLs = { getAllBlueprints: '/controllerblueprint/all', + getOneBlueprint: '/controllerblueprint', getPagedBlueprints: '/controllerblueprint/paged', searchByTag: '/controllerblueprint/searchByTags/', save: '/controllerblueprint/create-blueprint', @@ -106,7 +107,7 @@ export const ResourceDictionaryURLs = { searchResourceDictionaryByName: '', getSources: '/resourcedictionary/source-mapping', getModelType: '/resourcedictionary/model-type', - getDataType: '/resourcedictionary/model-type/by-definition/data_type' + getResourceDictionary: '/resourcedictionary/model-type/by-definition' }; export const ControllerCatalogURLs = { diff --git a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts index 2f3778c1a..9c9477f33 100644 --- a/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts +++ b/cds-ui/designer-client/src/app/common/core/services/api.typed.service.ts @@ -48,4 +48,16 @@ export class ApiService<T> { return this.httpClient.post(url, body, options); } + + getOne(url: string, params?: {}): Observable<T> { + console.log('params', params); + let httpParams = new HttpParams(); + for (const key in params) { + if (params.hasOwnProperty(key)) { + httpParams = httpParams.append(key, params[key]); + } + } + const options = {params: httpParams}; + return this.httpClient.get<T>(url, options); + } } 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 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.css 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 @@ +<app-header> +</app-header> +<p>package-viewing works! + + + {{viewedPackage!.artifactName}}} +</p> 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<ConfigurationDashboardComponent>; + + 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<BluePrintDetailModel>) { + + } + + getBluePrintModel(id: string): Observable<BluePrintDetailModel> { + 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<PackageDashboardState> { + + + 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 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/actions/actions.component.css 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 @@ +<div> + <b>Select from other packages:</b> + <div class="actions-scroll"> + <div class="custom-control custom-checkbox" *ngFor="let action of actions"> + <input type="checkbox" class="custom-control-input" id="customCheck1"> + <label class="custom-control-label" for="customCheck1">Action name + <p class="m-0">{{action}}</p> + </label> + </div> + </div> + <div class="btn-group inserActionBtns" role="group" aria-label="Basic example"> + <button type="button" class="btn btn-secondary mr-3">Insert</button> + <button type="button" class="btn btn-secondary">Cancel</button> + </div> +</div> 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<ActionsComponent>; + + 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 @@ <!--Header--> <header> - <div class="row m-0"> - <div class="col pl-0"> - <p class="logo mb-0"></p> - <nav aria-label="breadcrumb"> - <ol class="breadcrumb mb-0"> - <li class="breadcrumb-item"> - <a href="#">CBA Packages</a> - </li> - <li class="breadcrumb-item"> - <a href="#">Package Name</a> - </li> - <li class="breadcrumb-item active" aria-current="page"> - <p class="mb-0">Topology View</p> - </li> - </ol> - </nav> - </div> - <div class="col pr-0 text-right"> - <ul class="topology-actions"> - <li> - <div class="btn-group" role="group" aria-label="Basic example"> - <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Preview"> - <i class="fa fa-eye"></i> - </a> - <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Download"> - <i class="fa fa-download"></i> - </a> - <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Share"> - <i class="fa fa-share-square"></i> - </a> - </div> - </li> - <li> - <div class="dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text">Save</div> - <ul class="dropdown-content"> - <li> - <a href="">Save</a> - </li> - <li> - <a href="">Save & Deploy</a> - </li> + <div class="row m-0"> + <div class="col pl-0"> + <p class="logo mb-0"></p> + <nav aria-label="breadcrumb"> + <ol class="breadcrumb mb-0"> + <li class="breadcrumb-item"> + <a href="#">CBA Packages</a> + </li> + <li class="breadcrumb-item"> + <a href="#">Package Name</a> + </li> + <li class="breadcrumb-item active" aria-current="page"> + <p class="mb-0">Topology View</p> + </li> + </ol> + </nav> + </div> + <div class="col pr-0 text-right"> + <ul class="topology-actions"> + <li> + <div class="btn-group" role="group" aria-label="Basic example"> + <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" + data-tooltip="Preview"> + <i class="fa fa-eye"></i> + </a> + <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" + data-tooltip="Download"> + <i class="fa fa-download"></i> + </a> + <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" + data-tooltip="Share"> + <i class="fa fa-share-square"></i> + </a> + </div> + </li> + <li> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">Save</div> + <ul class="dropdown-content"> + <li> + <a href="">Save</a> + </li> + <li> + <a href="">Save & Deploy</a> + </li> + </ul> + </div> + </li> </ul> - </div> - </li> - </ul> + </div> </div> - </div> </header> <ng-sidebar-container class="sidebar-container"> - <!-- Controller SideBar --> - <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'" - #sidebarLeft> - <div class="row"> - <div class="col-12 p-0"> - <form> - <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions"> - </form> - </div> - <h1 class="col-12">Actions</h1> - <div class="col-12 text-center p-0"> - <div class="btn-group actionBtns" role="group"> - <button type="button" class="btn">Insert Custom</button> - <button type="button" class="btn">Import Action</button> - </div> - </div> + <!-- Controller SideBar --> + <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" + [mode]="'push'" + #sidebarLeft> + <div class="row"> + <div class="col-12 p-0"> + <form> + <input type="text" class="form-control input-search-controller" + placeholder="Search actions and functions"> + </form> + </div> + <h1 class="col-12">Actions</h1> + <div class="col-12 text-center p-0"> + <div class="btn-group actionBtns" role="group"> + <button type="button" class="btn">Insert Custom</button> + <button type="button" class="btn">Import Action</button> + </div> + </div><!-- <div class="col-12 actionsList"> <b>Select from other packages:</b> <div class="actions-scroll"> @@ -102,236 +107,231 @@ <button type="button" class="btn btn-secondary">Cancel</button> </div> </div> - <h1 class="col-12">Functions</h1> - <div class="col-12 componentsList"> - <b>Drag and drop function to Action’s box</b> - <ul class="list-group actions-scroll"> - <li class="list-group-item"> - <p class="compType-1">component-resource-resolution</p> - </li> - <li class="list-group-item"> - <p class="compType-2">component-netconf-executor</p> - </li> - <li class="list-group-item"> - <p class="compType-3">component-remote-ansible-executor</p> - </li> - <li class="list-group-item"> - <p class="compType-4">dg-generic</p> - </li> - <li class="list-group-item"> - <p class="compType-1">component-resource-resolution</p> - </li> - </ul> - </div> - </div> - </ng-sidebar> - <!-- Page content --> - <div ng-sidebar-content id="paper"> - <button class="rotate" (click)="_toggleSidebar1()"> +--> + <app-actions class="col-12 actionsList"></app-actions> + <app-functions></app-functions> + </div> + </ng-sidebar> + <!-- Page content --> + <div ng-sidebar-content> + <button class="rotate" (click)="_toggleSidebar1()"> <span> Controller <i class="fa fa-angle-double-left"></i> </span> - </button> - <!-- Canvas --> - <div class="editBar text-center"> - <div class="btn-group mr-2" role="group" aria-label="First group"> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo"> - <img src="/assets/img/icon-undoActive.svg"> - </button> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo"> - <img src="/assets/img/icon-redo.svg"> - </button> - </div> - <div class="btn-group mr-2" role="group" aria-label="Second group"> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out"> - <img src="/assets/img/icon-zoomOut.svg"> </button> - <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button> - <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In"> - <img src="/assets/img/icon-zoomIn.svg"> - </button> - </div> - <div class="btn-group viewBtns" role="group" aria-label="Third group"> - <button type="button" class="btn btn-secondary topologySource active">View</button> - <button type="button" class="btn btn-secondary topologyView">Source</button> - </div> - </div> - <div class="card actionContainer"> - <div class="card-header"> - <span>Action 1</span> - </div> - <div class="card-body"> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType1.svg" title=""> - <h2>config-assign</h2> - <p>component-resource-resolution</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType3.svg" title=""> - <h2>function 1</h2> - <p>dg-generic</p> - </a> - <a (click)="sidebarRight.open()" class="componentContainer text-center"> - <img src="/assets/img/icon-comType2.svg" title=""> - <h2>execute</h2> - <p>component-netconf-executor</p> - </a> - </div> - </div> - <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> - </div> - <!-- Attribute SideBar --> - <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'" - #sidebarRight> - <div class="container-fluid0"> - <div class="row m-0"> - <div class="col-2 pr-0"> - <button (click)="sidebarRight.close()" class="closeBar"></button> + <!-- Canvas --> + <div class="editBar text-center"> + <div class="btn-group mr-2" role="group" aria-label="First group"> + <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo"> + <img src="/assets/img/icon-undoActive.svg"> + </button> + <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo"> + <img src="/assets/img/icon-redo.svg"> + </button> + </div> + <div class="btn-group mr-2" role="group" aria-label="Second group"> + <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out"> + <img src="/assets/img/icon-zoomOut.svg"> + </button> + <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button> + <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In"> + <img src="/assets/img/icon-zoomIn.svg"> + </button> + </div> + <div class="btn-group viewBtns" role="group" aria-label="Third group"> + <button type="button" class="btn btn-secondary topologySource active">View</button> + <button type="button" class="btn btn-secondary topologyView">Source</button> + </div> </div> - <div class="col-10 attributesContainer p-0"> - <h1>Action Attributes</h1> - <div class="scrolll"> - <div class="row m-0"> - <div class="col-12"> - <div class="form-group actionName"> - <label for="exampleInputEmail1">Action Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - </div> + <div class="card actionContainer"> + <div class="card-header"> + <span>Action 1</span> + </div> + <div class="card-body"> + <a (click)="sidebarRight.open()" class="componentContainer text-center"> + <img src="/assets/img/icon-comType1.svg" title=""> + <h2>config-assign</h2> + <p>component-resource-resolution</p> + </a> + <a (click)="sidebarRight.open()" class="componentContainer text-center"> + <img src="/assets/img/icon-comType2.svg" title=""> + <h2>execute</h2> + <p>component-netconf-executor</p> + </a> + <a (click)="sidebarRight.open()" class="componentContainer text-center"> + <img src="/assets/img/icon-comType3.svg" title=""> + <h2>function 1</h2> + <p>dg-generic</p> + </a> + <a (click)="sidebarRight.open()" class="componentContainer text-center"> + <img src="/assets/img/icon-comType2.svg" title=""> + <h2>execute</h2> + <p>component-netconf-executor</p> + </a> </div> - <div class="accordion" id="accordionExample"> - <div class="card"> - <div class="card-header row" id="headingOne"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> - Steps - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> + </div> + <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> --> + </div> + <!-- Attribute SideBar --> + <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" + [position]="'right'" + #sidebarRight> + <div class="container-fluid0"> + <div class="row m-0"> + <div class="col-2 pr-0"> + <button (click)="sidebarRight.close()" class="closeBar"></button> </div> + <div class="col-10 attributesContainer p-0"> + <h1>Action Attributes</h1> + <div class="scrolll"> + <div class="row m-0"> + <div class="col-12"> + <div class="form-group actionName"> + <label for="exampleInputEmail1">Action Name</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> + </div> + </div> + <div class="accordion" id="accordionExample"> + <div class="card"> + <div class="card-header row" id="headingOne"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" + aria-controls="collapseOne"> + Steps + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> + </div> + </div> - <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> + <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">Name</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Name</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Description</label> + <textarea class="form-control" id="exampleFormControlTextarea1" + rows="3"></textarea> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Target</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> - </div> - </div> - </div> - <div class="card"> - <div class="card-header row" id="headingTwo"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> - Inputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> - <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> + </div> + </div> + </div> + <div class="card"> + <div class="card-header row" id="headingTwo"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="true" + aria-controls="collapseTwo"> + Inputs + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> + </div> + </div> + <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">Name</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Name</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Description</label> + <textarea class="form-control" id="exampleFormControlTextarea1" + rows="3"></textarea> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Target</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> - </div> - </div> - </div> - <div class="card"> - <div class="card-header row" id="headingThree"> - <h2 class="col-10 mb-0"> - <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> - Outputs - </button> - </h2> - <div class="col-2 p-0 text-center"> - <button class="btn btn-addAttribute" type="button"></button> - </div> - </div> - <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample"> - <div class="card-body"> - <div class="row"> - <div class="col-9"> - <label for="exampleInputEmail1">Name</label> - <button type="button" class="btn p-0"> - <img src="/assets/img/icon-edit.svg"> - </button> - </div> - <div class="col-3"> - <button type="button" class="btn btn-deleteAttribute">Delete</button> - </div> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Name</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> - <div class="form-group"> - <label for="exampleFormControlTextarea1">Description</label> - <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> - </div> - <div class="form-group"> - <label for="exampleInputEmail1">Target</label> - <input type="text" class="form-control" placeholder="Action 1"> - </div> + </div> + </div> + </div> + <div class="card"> + <div class="card-header row" id="headingThree"> + <h2 class="col-10 mb-0"> + <button class="btn btn-link" type="button" data-toggle="collapse" + data-target="#collapseThree" aria-expanded="true" + aria-controls="collapseThree"> + Outputs + </button> + </h2> + <div class="col-2 p-0 text-center"> + <button class="btn btn-addAttribute" type="button"></button> + </div> + </div> + <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" + data-parent="#accordionExample"> + <div class="card-body"> + <div class="row"> + <div class="col-9"> + <label for="exampleInputEmail1">Name</label> + <button type="button" class="btn p-0"> + <img src="/assets/img/icon-edit.svg"> + </button> + </div> + <div class="col-3"> + <button type="button" class="btn btn-deleteAttribute">Delete</button> + </div> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Name</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> + <div class="form-group"> + <label for="exampleFormControlTextarea1">Description</label> + <textarea class="form-control" id="exampleFormControlTextarea1" + rows="3"></textarea> + </div> + <div class="form-group"> + <label for="exampleInputEmail1">Target</label> + <input type="text" class="form-control" placeholder="Action 1"> + </div> - </div> + </div> + </div> + </div> + </div> + </div> </div> - </div> </div> - </div> </div> - </div> - </div> - </ng-sidebar> + </ng-sidebar> -</ng-sidebar-container>
\ No newline at end of file +</ng-sidebar-container> 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<ModelType>) { + } + + getFunctions(modelDefinitionType: string): Observable<ModelType[]> { + 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<DesignerDashboardState> { + + 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 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions/functions.component.css 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 @@ +<h1 class="col-12">Functions</h1> +<div class="col-12 componentsList"> + <b>Drag and drop function to Action’s box</b> + <ul class="list-group actions-scroll" > + <li class="list-group-item" *ngFor="let function of viewedFunctions"> + <p class="compType-1">{{function.modelName}}</p> + </li> + <!--<li class="list-group-item"> + <p class="compType-2">component-netconf-executor</p> + </li> + <li class="list-group-item"> + <p class="compType-3">component-remote-ansible-executor</p> + </li> + <li class="list-group-item"> + <p class="compType-4">dg-generic</p> + </li> + <li class="list-group-item"> + <p class="compType-1">component-resource-resolution</p> + </li>--> + </ul> +</div> 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<FunctionsComponent>; + + 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 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-header/packages-header.component.css 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 @@ +<!--Page Title--> +<header class="page-title"> + <div class="row"> + <h2 class="col m-0">CBA Packages + <span>({{numberOfPackages}} packages)</span> + </h2> + <div class="col"> + </div> + </div> +</header>
\ 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<PackagesHeaderComponent>; + + 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 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/sort-packages/sort-packages.component.css 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 @@ +<div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> + <div class="row"> + <!--Package Sort--> + <div class="col sort-packages"> + Sort by: + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text">{{selected}}</div> + <ul class="dropdown-content"> + <li *ngFor="let sortType of sortTypes"> + <a (click)="sortPackages($event)" name={{sortType}}>{{sortType}}</a> + </li> + + </ul> + </div> + </div> + <!--Package Paginator--> + <app-package-pagination></app-package-pagination> + </div> + <app-packages-list></app-packages-list> + + </div> + <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> + <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> + <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">... + </div> + </div> + </div> +</div> + 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<SortPackagesComponent>; + + 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, |