diff options
author | Ahmed Abbas <ahmad.helmy@orange.com> | 2019-11-20 11:32:53 +0200 |
---|---|---|
committer | Ahmed Abbas <ahmad.helmy@orange.com> | 2019-11-21 12:20:55 +0200 |
commit | 6ee4d31800a68975294ef11156bea9a595b23adf (patch) | |
tree | 23ab53c05a1f5908e106b4830985db0c52df8dc8 /cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list | |
parent | f0b747065e11ee5cc1be4bad2983a557af9c7969 (diff) |
add pacakges dashboard component to new cds ui
Issue-ID: CCSDK-1951
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: I0c320e5f49a50e442068f5af1fd79c41c97bb74d
Diffstat (limited to 'cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list')
4 files changed, 156 insertions, 0 deletions
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.css diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html new file mode 100644 index 000000000..f67b3ca6a --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -0,0 +1,92 @@ +<div class="row packages-card"><div class="col-lg-3 col-md-6 p-0"> + <!--Add Package Card--> + <div class="card addPaackage-card"> + <div class="card-body text-center"> + <img src="/assets/img/icon-addPackage.svg"> + </div> + <div class="card-footer row"> + <div class="col text-right pr-0"> + <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package + </a> + </div> + <div class="col pr-0"> + <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package + </a> + </div> + </div> + </div> +</div> +<div class="col-lg-3 col-md-6 p-0" *ngFor="let bluePrint of viewedPackages"> + + <!--Card 1--> + <div> + <div class="card"> + <div class="card-body"> + <div class="row"> + <div class="col-9 pr-0"> + <h5 class="card-title">{{bluePrint.artifactName}}</h5> + <p>Last modified {{bluePrint.createdDate}} by {{bluePrint.updatedBy}}</p> + <ul class="package-contributers"> + <li> + <button type="button" class="border-fade" data-toggle="tooltip" data-placement="bottom" + title="User name"> + <img src="/assets/img/img-user1.jpeg"> + </button> + </li> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name"> + <img src="/assets/img/img-user2.jpg"> + </button> + </li> + <li> + <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name"> + <img src="/assets/img/img-user3.jpg"> + </button> + </li> + <li> + <a href="">5 contributors</a> + </li> + </ul> + </div> + <div class="col-3"> + <img class="icon-deployed" src="/assets/img/icon-deploy.svg"> + <div class="dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"> + <img src="/assets/img/icon-menuDots.svg" title="Actions"> + </div> + <ul class="dropdown-content"> + <li class="action-clone"> + <a href="#">Clone</a> + </li> + <li class="action-archive"> + <a href="#">Archive</a> + </li> + <li class="action-delete"> + <a href="#">Delete</a> + </li> + </ul> + </div> + </div> + </div> + <div class="card-footer"> + <div class="row"> + <div class="col"> + <button type="button" class="btn btn-card-topology">Topology View + </button> + </div> + <div class="col"> + <button type="button" class="btn btn-card-config">Configuration</button> + </div> + </div> + </div> + </div> + + </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>
\ No newline at end of file diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts new file mode 100644 index 000000000..f45f25996 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.spec.ts @@ -0,0 +1,36 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PackageListComponent } from './package-list.component'; +import { PackagesStore } from '../../packages.store'; +import { getBluePrintPageMock } from '../../blueprint.page.mock'; +import { of } from 'rxjs'; + +describe('PackageListComponent', () => { + let component: PackageListComponent; + let fixture: ComponentFixture<PackageListComponent>; + let store: Partial<PackagesStore>; + + beforeEach(async(() => { + + store = { state$: of(getBluePrintPageMock()) }; + + TestBed.configureTestingModule({ + declarations: [ PackageListComponent ], + providers: [{ provide: PackagesStore, useValue: store }] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PackageListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + + // TODO create another test with store in mind +}); diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts new file mode 100644 index 000000000..4ef0faf45 --- /dev/null +++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { BlueprintModel } from '../../model/BluePrint.model'; +import { PackagesStore } from '../../packages.store'; + +@Component({ + selector: 'app-packages-list', + templateUrl: './package-list.component.html', + styleUrls: ['./package-list.component.css'] +}) +export class PackageListComponent implements OnInit { + + viewedPackages: BlueprintModel[] = []; + numberOfPackages: number; + + + constructor(private packagesStore: PackagesStore) { + console.log('PackageListComponent'); + this.packagesStore.state$.subscribe(page => { + console.log(page); + this.viewedPackages = page.content; + }); + } + + ngOnInit() { + // this.packagesStore.getPagedPackages(0, this.packagesStore.pageSize); + } + +} |