From 4044b8f8b381a666414e1a4d8b2ff0092a473c84 Mon Sep 17 00:00:00 2001 From: Martin Rojas Miguel Angel Date: Thu, 1 Feb 2018 14:20:20 +0100 Subject: [PATCH] TSK-178 add master and detail component --- admin/package.json | 2 +- admin/src/app/app-routing.module.ts | 37 ++++-- admin/src/app/app.component.html | 4 +- admin/src/app/app.component.spec.ts | 2 - admin/src/app/app.module.ts | 78 ++++++++----- .../master-and-detail.component.html | 15 +++ .../master-and-detail.component.scss | 17 +++ .../master-and-detail.component.spec.ts | 105 ++++++++++++++++++ .../master-and-detail.component.ts | 46 ++++++++ .../list/workbasket-list.component.css} | 0 .../list/workbasket-list.component.html} | 3 +- .../list/workbasket-list.component.spec.ts} | 12 +- .../list/workbasket-list.component.ts} | 12 +- .../workbasketadministration.component.html | 3 +- admin/src/assets/icons/no-shopping-basket.svg | 1 + 15 files changed, 276 insertions(+), 61 deletions(-) create mode 100644 admin/src/app/shared/masterAndDetail/master-and-detail.component.html create mode 100644 admin/src/app/shared/masterAndDetail/master-and-detail.component.scss create mode 100644 admin/src/app/shared/masterAndDetail/master-and-detail.component.spec.ts create mode 100644 admin/src/app/shared/masterAndDetail/master-and-detail.component.ts rename admin/src/app/{workbasketlist/workbasketlist.component.css => workbasket/list/workbasket-list.component.css} (100%) rename admin/src/app/{workbasketlist/workbasketlist.component.html => workbasket/list/workbasket-list.component.html} (98%) rename admin/src/app/{workbasketlist/workbasketlist.component.spec.ts => workbasket/list/workbasket-list.component.spec.ts} (52%) rename admin/src/app/{workbasketlist/workbasketlist.component.ts => workbasket/list/workbasket-list.component.ts} (88%) create mode 100644 admin/src/assets/icons/no-shopping-basket.svg diff --git a/admin/package.json b/admin/package.json index f1feec89d..bf946604e 100755 --- a/admin/package.json +++ b/admin/package.json @@ -5,7 +5,7 @@ "scripts": { "ng": "ng", "start": "ng serve", - "build": " npm run", + "build": " ng build --env=dev", "build:prod": "ng build --env=prod", "test": "ng test", "lint": "ng lint", diff --git a/admin/src/app/app-routing.module.ts b/admin/src/app/app-routing.module.ts index 397762be2..42616e179 100644 --- a/admin/src/app/app-routing.module.ts +++ b/admin/src/app/app-routing.module.ts @@ -1,27 +1,42 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; +import { WorkbasketListComponent } from './workbasket/list/workbasket-list.component'; import { WorkbasketadministrationComponent } from './workbasketadministration/workbasketadministration.component'; import { CategoriesadministrationComponent } from './categoriesadministration/categoriesadministration.component'; +import { MasterAndDetailComponent } from './shared/masterAndDetail/master-and-detail.component'; const appRoutes: Routes = [ - { - path: 'workbaskets', - component: WorkbasketadministrationComponent + { path: 'workbaskets', + component: MasterAndDetailComponent, + children: [ + { + path: '', + component: WorkbasketListComponent, + outlet: 'master' + }, + { + path: ':id', + component: WorkbasketadministrationComponent, + outlet: 'detail' + } + ] }, - { - path: 'workbaskets/:id', - component: WorkbasketadministrationComponent - }, - { - path: 'categories', - component: CategoriesadministrationComponent + { path: 'clasifications', + component: MasterAndDetailComponent, + children: [ + { + path: '', + component: CategoriesadministrationComponent, + outlet: 'detail' + } + ] }, { path: '', redirectTo: 'workbaskets', pathMatch: 'full' - }, + } ]; @NgModule({ imports: [ diff --git a/admin/src/app/app.component.html b/admin/src/app/app.component.html index 3ed73b227..1ded87169 100644 --- a/admin/src/app/app.component.html +++ b/admin/src/app/app.component.html @@ -10,7 +10,7 @@
@@ -31,5 +31,3 @@ - - diff --git a/admin/src/app/app.component.spec.ts b/admin/src/app/app.component.spec.ts index f2c917583..35a303547 100644 --- a/admin/src/app/app.component.spec.ts +++ b/admin/src/app/app.component.spec.ts @@ -14,7 +14,6 @@ describe('AppComponent', () => { { path: 'categories', component: AppComponent } ]; - beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ @@ -24,7 +23,6 @@ describe('AppComponent', () => { AngularSvgIconModule, RouterTestingModule.withRoutes(routes), HttpClientModule - ] }).compileComponents(); diff --git a/admin/src/app/app.module.ts b/admin/src/app/app.module.ts index 07b314370..0e51f5a12 100644 --- a/admin/src/app/app.module.ts +++ b/admin/src/app/app.module.ts @@ -1,12 +1,22 @@ +/** + * Modules + */ import { BrowserModule } from '@angular/platform-browser'; import { NgModule, } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule, JsonpModule } from '@angular/http'; import { HttpClientModule } from '@angular/common/http'; -import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; +import { AlertModule } from 'ngx-bootstrap'; +import { AngularSvgIconModule } from 'angular-svg-icon'; import { TabsModule } from 'ngx-bootstrap/tabs'; import { TreeModule } from 'angular-tree-component'; -import { WorkbasketlistComponent } from './workbasketlist/workbasketlist.component'; + +/** + * Components + */ +import { AppComponent } from './app.component'; +import { WorkbasketListComponent } from './workbasket/list/workbasket-list.component'; import { WorkbasketeditorComponent } from './workbasketeditor/workbasketeditor.component'; import { CategorieslistComponent } from './categorieslist/categorieslist.component'; import { CategoriestreeComponent } from './categoriestree/categoriestree.component'; @@ -16,36 +26,44 @@ import { WorkbasketadministrationComponent } from './workbasketadministration/wo import { WorkbasketAuthorizationComponent } from './workbasket-authorization/workbasket-authorization.component'; import { WorkbasketDetailsComponent } from './workbasket-details/workbasket-details.component'; import { WorkbasketDistributiontargetsComponent } from './workbasket-distributiontargets/workbasket-distributiontargets.component'; -import { AppRoutingModule } from './app-routing.module'; -import { AlertModule } from 'ngx-bootstrap'; -import { AngularSvgIconModule } from 'angular-svg-icon'; +//Shared +import { MasterAndDetailComponent} from './shared/masterAndDetail/master-and-detail.component'; + +/** + * Services + */ + +const MODULES = [ + BrowserModule, + FormsModule, + HttpModule, + JsonpModule, + TabsModule.forRoot(), + TreeModule, + AppRoutingModule, + AlertModule.forRoot(), + AngularSvgIconModule, + HttpClientModule + ]; + +const COMPONENTS = [ + AppComponent, + WorkbasketListComponent, + WorkbasketeditorComponent, + CategorieslistComponent, + CategoriestreeComponent, + CategoryeditorComponent, + CategoriesadministrationComponent, + WorkbasketadministrationComponent, + WorkbasketAuthorizationComponent, + WorkbasketDetailsComponent, + WorkbasketDistributiontargetsComponent, + MasterAndDetailComponent + ]; @NgModule({ - declarations: [ - AppComponent, - WorkbasketlistComponent, - WorkbasketeditorComponent, - CategorieslistComponent, - CategoriestreeComponent, - CategoryeditorComponent, - CategoriesadministrationComponent, - WorkbasketadministrationComponent, - WorkbasketAuthorizationComponent, - WorkbasketDetailsComponent, - WorkbasketDistributiontargetsComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule, - JsonpModule, - TabsModule.forRoot(), - TreeModule, - AppRoutingModule, - AlertModule.forRoot(), - AngularSvgIconModule, - HttpClientModule - ], + declarations: COMPONENTS, + imports: MODULES, providers: [HttpClientModule], bootstrap: [AppComponent] }) diff --git a/admin/src/app/shared/masterAndDetail/master-and-detail.component.html b/admin/src/app/shared/masterAndDetail/master-and-detail.component.html new file mode 100644 index 000000000..b68ce4a52 --- /dev/null +++ b/admin/src/app/shared/masterAndDetail/master-and-detail.component.html @@ -0,0 +1,15 @@ + + +
+ + < Back + +
+
+
+

Select a worbasket

+ +
+
\ No newline at end of file diff --git a/admin/src/app/shared/masterAndDetail/master-and-detail.component.scss b/admin/src/app/shared/masterAndDetail/master-and-detail.component.scss new file mode 100644 index 000000000..4aeb7c499 --- /dev/null +++ b/admin/src/app/shared/masterAndDetail/master-and-detail.component.scss @@ -0,0 +1,17 @@ + +.container-no-detail .no-detail-icon { + display: block; + width: 150px; + height: 150px; + fill: grey; + margin: 0 auto; +} +.container-no-detail{ + top:30vh; +} + +.center-block.no-detail { + width: 250px; + text-align: center; +} + diff --git a/admin/src/app/shared/masterAndDetail/master-and-detail.component.spec.ts b/admin/src/app/shared/masterAndDetail/master-and-detail.component.spec.ts new file mode 100644 index 000000000..16699631f --- /dev/null +++ b/admin/src/app/shared/masterAndDetail/master-and-detail.component.spec.ts @@ -0,0 +1,105 @@ +import {Location} from "@angular/common"; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { TestBed, async, inject, fakeAsync } from '@angular/core/testing'; +import { MasterAndDetailComponent } from './master-and-detail.component'; +import { RouterTestingModule } from '@angular/router/testing'; +import { Router, Routes, ActivatedRoute, NavigationStart, RouterEvent } from '@angular/router'; +import { AngularSvgIconModule } from 'angular-svg-icon'; +import { HttpClientModule } from '@angular/common/http'; + +@Component({ + selector: 'dummy-master', + template: 'dummymaster' +}) +export class DummyMasterComponent { + +} + +@Component({ + selector: 'dummy-detail', + template: 'dummydetail' +}) +export class DummyDetailComponent { + +} + +describe('MasterAndDetailComponent ', () => { + + var component, fixture, debugElement, location, router; + + const routes: Routes = [ + { path: 'workbaskets', + component: MasterAndDetailComponent, + children: [ + { + path: '', + component: DummyMasterComponent, + outlet: 'master' + }, + { + path: ':id', + component: DummyDetailComponent, + outlet: 'detail' + } + ] + } + ]; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MasterAndDetailComponent, DummyMasterComponent, DummyDetailComponent ], + imports:[ + RouterTestingModule.withRoutes(routes), + AngularSvgIconModule, + HttpClientModule + ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MasterAndDetailComponent); + component = fixture.debugElement.componentInstance; + debugElement = fixture.debugElement.nativeElement; + location = TestBed.get(Location); + router = TestBed.get(Router); + router.initialNavigation(); + + })); + + afterEach(async(()=>{ + document.body.removeChild(debugElement); + })); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); + + it('should call Router.navigateByUrl("/wokbaskets") and showDetail property should be false', async ( () => { + + expect(component.showDetail).toBe(false); + fixture.detectChanges(); + router.navigateByUrl('/workbaskets'); + expect(component.showDetail).toBe(false); + + })); + + it('should call Router.navigateByUrl("/wokbaskets/(detail:Id)") and showDetail property should be true', async ( () => { + + expect(component.showDetail).toBe(false); + fixture.detectChanges(); + router.navigateByUrl('/workbaskets/(detail:2)'); + expect(component.showDetail).toBe(true); + + })); + + it('should navigate to parent state when backIsClicked', async( () => { + + const spy = spyOn(router, 'navigateByUrl'); + router.navigateByUrl('/workbaskets/(detail:2)'); + fixture.detectChanges(); + expect(spy.calls.first().args[0]).toBe('/workbaskets/(detail:2)'); + component.backClicked(); + expect(spy.calls.mostRecent().args.length).toBe(2); + + })); + +}); diff --git a/admin/src/app/shared/masterAndDetail/master-and-detail.component.ts b/admin/src/app/shared/masterAndDetail/master-and-detail.component.ts new file mode 100644 index 000000000..dc51725b2 --- /dev/null +++ b/admin/src/app/shared/masterAndDetail/master-and-detail.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Router, Routes, ActivatedRoute, NavigationStart, RouterEvent } from '@angular/router'; + +@Component({ + selector: 'master-and-detail', + templateUrl: './master-and-detail.component.html', + styleUrls: ['./master-and-detail.component.scss'], + +}) +export class MasterAndDetailComponent implements OnInit{ + private detailRoutes: Array = ['/workbaskets/(detail', 'clasifications']; + private sub: any; + + showDetail: Boolean = false; + constructor(private route: ActivatedRoute, private router: Router){ + } + + ngOnInit(): void { + this.showDetail = this.showDetails(); + this.router.events.subscribe(event => { + if(event instanceof NavigationStart) { + this.showDetail = this.showDetails(event); + } + }); + } + + backClicked(): void { + this.router.navigate(['../'], { relativeTo: this.route }); + } + + private showDetails(event? : RouterEvent): Boolean { + if(event === undefined) { + return this.checkUrl(this.router.url); + } + return this.checkUrl(event.url) + } + + private checkUrl(url: string): Boolean { + for(let routeDetail of this.detailRoutes){ + if(url.indexOf(routeDetail) !== -1){ + return true; + } + } + return false; + } +} \ No newline at end of file diff --git a/admin/src/app/workbasketlist/workbasketlist.component.css b/admin/src/app/workbasket/list/workbasket-list.component.css similarity index 100% rename from admin/src/app/workbasketlist/workbasketlist.component.css rename to admin/src/app/workbasket/list/workbasket-list.component.css diff --git a/admin/src/app/workbasketlist/workbasketlist.component.html b/admin/src/app/workbasket/list/workbasket-list.component.html similarity index 98% rename from admin/src/app/workbasketlist/workbasketlist.component.html rename to admin/src/app/workbasket/list/workbasket-list.component.html index 111187b23..954ede381 100644 --- a/admin/src/app/workbasketlist/workbasketlist.component.html +++ b/admin/src/app/workbasket/list/workbasket-list.component.html @@ -28,7 +28,8 @@ - + + {{ workbasket.id }} diff --git a/admin/src/app/workbasketlist/workbasketlist.component.spec.ts b/admin/src/app/workbasket/list/workbasket-list.component.spec.ts similarity index 52% rename from admin/src/app/workbasketlist/workbasketlist.component.spec.ts rename to admin/src/app/workbasket/list/workbasket-list.component.spec.ts index 2c8d93003..f0a1592ef 100644 --- a/admin/src/app/workbasketlist/workbasketlist.component.spec.ts +++ b/admin/src/app/workbasket/list/workbasket-list.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { WorkbasketlistComponent } from './workbasketlist.component'; +import { WorkbasketListComponent } from './workbasket-list.component'; -describe('WorkbasketlistComponent', () => { - let component: WorkbasketlistComponent; - let fixture: ComponentFixture; +describe('WorkbasketListComponent', () => { + let component: WorkbasketListComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ WorkbasketlistComponent ] + declarations: [ WorkbasketListComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(WorkbasketlistComponent); + fixture = TestBed.createComponent(WorkbasketListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/admin/src/app/workbasketlist/workbasketlist.component.ts b/admin/src/app/workbasket/list/workbasket-list.component.ts similarity index 88% rename from admin/src/app/workbasketlist/workbasketlist.component.ts rename to admin/src/app/workbasket/list/workbasket-list.component.ts index 3e9822e07..ac8220165 100644 --- a/admin/src/app/workbasketlist/workbasketlist.component.ts +++ b/admin/src/app/workbasket/list/workbasket-list.component.ts @@ -1,16 +1,16 @@ import { Component, OnInit, EventEmitter } from '@angular/core'; -import { Workbasket } from '../model/workbasket'; -import { WorkbasketserviceService } from '../services/workbasketservice.service' +import { Workbasket } from '../../model/workbasket'; +import { WorkbasketserviceService } from '../../services/workbasketservice.service' import { ActivatedRoute, Params } from '@angular/router'; @Component({ - selector: 'app-workbasketlist', + selector: 'workbasket-list', outputs: ['selectedWorkbasket'], - templateUrl: './workbasketlist.component.html', - styleUrls: ['./workbasketlist.component.css'], + templateUrl: './workbasket-list.component.html', + styleUrls: ['./workbasket-list.component.css'], providers: [WorkbasketserviceService] }) -export class WorkbasketlistComponent implements OnInit { +export class WorkbasketListComponent implements OnInit { public selectedWorkbasket: EventEmitter = new EventEmitter(); workbasket: Workbasket = this.getEmptyObject(); diff --git a/admin/src/app/workbasketadministration/workbasketadministration.component.html b/admin/src/app/workbasketadministration/workbasketadministration.component.html index b55c0457d..689618fc6 100644 --- a/admin/src/app/workbasketadministration/workbasketadministration.component.html +++ b/admin/src/app/workbasketadministration/workbasketadministration.component.html @@ -1,2 +1,3 @@ - \ No newline at end of file + +DETAIL COMPONENT \ No newline at end of file diff --git a/admin/src/assets/icons/no-shopping-basket.svg b/admin/src/assets/icons/no-shopping-basket.svg new file mode 100644 index 000000000..97b5c28b7 --- /dev/null +++ b/admin/src/assets/icons/no-shopping-basket.svg @@ -0,0 +1 @@ + \ No newline at end of file