adding new designer component, sort and configuration dashboard

Issue-ID: CCSDK-1982
Issue-ID: CCSDK-1984
Issue-ID: CCSDK-1983

Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I05d12bbf5ebc940bd6983da06af3f85ee18eb723

6 files changed, 146 insertions, 0 deletions

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
+                 });
+             });*/
+
+
+    }
+
+}