TSK-183 workbasket list styling without tests and refactored workbasket edition

admin/.angular-cli.json

@@ -9,7 +9,7 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "taskana.ico"
       ],
       "index": "index.html",
       "main": "main.ts",

admin/src/app/app-routing.module.ts

@@ -2,7 +2,7 @@ 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 { WorkbasketDetailsComponent } from './workbasket/details/workbasket-details.component';
 import { CategoriesadministrationComponent } from './categoriesadministration/categoriesadministration.component';
 import { MasterAndDetailComponent } from './shared/masterAndDetail/master-and-detail.component';
 
@@ -17,7 +17,7 @@ const appRoutes: Routes = [
             },
             {
                 path: ':id',
-                component: WorkbasketadministrationComponent,
+                component: WorkbasketDetailsComponent,
                 outlet: 'detail'
             }
         ]

admin/src/app/app.component.html

@@ -30,4 +30,8 @@
   </div>     
 </nav>
 
+<div class="container-fluid container-main">
+    <div class ="row ">
         <router-outlet></router-outlet>
+    </div>
+</div>

admin/src/app/app.component.scss

@@ -17,3 +17,47 @@ p.navbar-brand >a{
         color: white;
     }
 }
+ 
+/*
+ * All side bar links styling.
+*/
+.nav-sidebar > li > a {
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.nav-sidebar > .active > a,
+.nav-sidebar > .active > a:hover,
+.nav-sidebar > .active > a:focus {
+    color: #fff;
+    background-color: #428bca;
+}
+
+
+.nav.nav-tabs { 
+    & > li {
+        & > a{
+            min-height: 56px;
+            padding-top: 17px;
+        }
+        
+        &:first-child > a{
+            border-left: none;
+        }
+    }
+    & > p{
+        margin: 0px;
+    }
+}
+
+.navbar-brand {
+    float: none;
+}
+
+.navbar-inverse {
+    border: none;
+}
+
+.navbar {
+    margin-bottom: 0px;
+}

admin/src/app/app.module.ts

@@ -22,10 +22,11 @@ import { CategorieslistComponent } from './categorieslist/categorieslist.compone
 import { CategoriestreeComponent } from './categoriestree/categoriestree.component';
 import { CategoryeditorComponent } from './categoryeditor/categoryeditor.component';
 import { CategoriesadministrationComponent } from './categoriesadministration/categoriesadministration.component';
-import { WorkbasketadministrationComponent } from './workbasketadministration/workbasketadministration.component';
 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 { WorkbasketDetailsComponent } from './workbasket/details/workbasket-details.component'
+import { WorkbasketInformationComponent } from './workbasket/details/information/workbasket-information.component'
+
 //Shared
 import { MasterAndDetailComponent} from './shared/masterAndDetail/master-and-detail.component';
 
@@ -33,6 +34,8 @@ import { MasterAndDetailComponent} from './shared/masterAndDetail/master-and-det
 /**
  * Services
  */
+import { WorkbasketService } from './services/workbasketservice.service'
+
 
 const MODULES =     [
                     BrowserModule,
@@ -55,16 +58,16 @@ const COMPONENTS =  [
                       CategoriestreeComponent,
                       CategoryeditorComponent,
                       CategoriesadministrationComponent,
-                      WorkbasketadministrationComponent,
                       WorkbasketAuthorizationComponent,
                       WorkbasketDetailsComponent,
                       WorkbasketDistributiontargetsComponent,
-                      MasterAndDetailComponent
+                      MasterAndDetailComponent,
+                      WorkbasketInformationComponent
                     ];
 @NgModule({
   declarations: COMPONENTS,
   imports: MODULES,
-  providers: [HttpClientModule],
+  providers: [HttpClientModule, WorkbasketService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

admin/src/app/model/workbasket.ts

@@ -1,10 +1,22 @@
+import {WorkbasketSummary} from './WorkbasketSummary';
 export class Workbasket {
     constructor(
         public id: string,
         public created: string,
+        public key: string,
+        public domain: string,
+        public type: string,
         public modified: string,
         public name: string,
         public description: string,        
         public owner: string,
-        public distributionTargets: [string]) { }
+        public custom1: string,
+        public custom2: string,
+        public custom3: string,
+        public custom4: string,
+        public orgLevel1: string,
+        public orgLevel2: string,
+        public orgLevel3: string,
+        public orgLevel4: string, 
+        public workbasketSummary: WorkbasketSummary){}
 }

admin/src/app/model/workbasketSummary.ts

@@ -0,0 +1,15 @@
+export class WorkbasketSummary {
+    constructor(
+        public id: string,
+        public key: string,
+        public name: string,
+        public description: string,        
+        public owner: string,
+        public modified: string,
+        public domain: string,
+        public type: string,
+        public orgLevel1: string,
+        public orgLevel2: string,
+        public orgLevel3: string,
+        public orgLevel4: string){}
+}

admin/src/app/services/workbasketservice.service.spec.ts

@@ -1,15 +1,15 @@
 import { TestBed, inject } from '@angular/core/testing';
 
-import { WorkbasketserviceService } from './workbasketservice.service';
+import { WorkbasketService } from './workbasketservice.service';
 
-describe('WorkbasketserviceService', () => {
+describe('WorkbasketService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [WorkbasketserviceService]
+      providers: [WorkbasketService]
     });
   });
 
-  xit('should be created', inject([WorkbasketserviceService], (service: WorkbasketserviceService) => {
+  xit('should be created', inject([WorkbasketService], (service: WorkbasketService) => {
     expect(service).toBeTruthy();
   }));
 });

admin/src/app/services/workbasketservice.service.ts

@@ -1,22 +1,30 @@
 import { Injectable } from '@angular/core';
 import { RequestOptions, Headers, Http, Response } from '@angular/http';
+import { WorkbasketSummary } from '../model/workbasketSummary';
 import { Workbasket } from '../model/workbasket';
 import { WorkbasketAuthorization } from '../model/workbasket-authorization';
 import { environment } from '../../environments/environment';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/Rx';
+import { Subject } from 'rxjs/Subject';
 
 @Injectable()
-export class WorkbasketserviceService {
+export class WorkbasketService {
+
+  public workBasketSelected = new Subject<string>();
 
   constructor(private http: Http) { }
 
-  getAllWorkBaskets(): Observable<Workbasket[]> {
+  getWorkBasketsSummary(): Observable<WorkbasketSummary[]> {
     return this.http.get(environment.taskanaRestUrl + "/v1/workbaskets", this.createAuthorizationHeader())
       .map(res => res.json());
   }
 
-  createWorkbasket(workbasket: Workbasket): Observable<Workbasket> {
+  getWorkBasket(id: string): Observable<Workbasket> {
+    return this.http.get(`${environment.taskanaRestUrl}/v1/workbaskets/${id}`, this.createAuthorizationHeader())
+      .map(res => res.json());
+  }
+
+  createWorkbasket(workbasket: WorkbasketSummary): Observable<WorkbasketSummary> {
     return this.http.post(environment.taskanaRestUrl + "/v1/workbaskets", workbasket, this.createAuthorizationHeader())
       .map(res => res.json());
   }
@@ -26,7 +34,7 @@ export class WorkbasketserviceService {
       .map(res => res.json());
   }
 
-  updateWorkbasket(workbasket: Workbasket): Observable<Workbasket> {
+  updateWorkbasket(workbasket: WorkbasketSummary): Observable<WorkbasketSummary> {
     return this.http.put(environment.taskanaRestUrl + "/v1/workbaskets/" + workbasket.id, workbasket, this.createAuthorizationHeader())
       .map(res => res.json());
   }
@@ -50,6 +58,14 @@ export class WorkbasketserviceService {
     return this.http.delete(environment.taskanaRestUrl + "/v1/workbaskets/authorizations/" + workbasketAuthorization.id, this.createAuthorizationHeader());
   }
 
+  selectWorkBasket(id: string){
+    this.workBasketSelected.next(id);
+  }
+
+  getSelectedWorkBasket(){
+    return this.workBasketSelected.asObservable();
+  }
+
   private createAuthorizationHeader() {
     let headers: Headers = new Headers();
     headers.append("Authorization", "Basic dXNlcl8xXzE6dXNlcl8xXzE=");

admin/src/app/shared/masterAndDetail/master-and-detail.component.html

@@ -1,15 +1,16 @@
-
+<div class="no-gutter">
-<div class="{{showDetail? 'col-md-4 hidden-xs hidden-sm':'col-xs-12 col-md-4'}} vertical-right-divider full-height" >
+    <div class="{{showDetail? 'col-md-4 hidden-xs hidden-sm':'col-xs-12 col-md-4'}} vertical-right-divider" >
         <router-outlet name="master"></router-outlet>
     </div>
-<div class="{{showDetail? 'col-xs-12 col-md-8': 'hidden'}} container-scrollable" >
+    <div class="{{showDetail? 'col-xs-12 col-md-8': 'hidden'}}" >
         <router-outlet name="detail">
             <a class="{{showDetail? 'hidden visible-xs visible-sm': 'hidden'}}" (click) = "backClicked()"> < Back</a>
         </router-outlet>
     </div>
-<div class="{{showDetail? 'hidden': 'col-md-8 container-no-detail' }}">
+    <div class="{{showDetail? 'hidden': 'hidden-xs hidden-sm col-md-8 container-no-detail'}}">
         <div class = "center-block no-detail" >
             <h3>Select a worbasket</h3>
             <svg-icon class="img-responsive no-detail-icon" src="./assets/icons/no-shopping-basket.svg"></svg-icon>
         </div>
     </div>
+</div>

admin/src/app/workbasket-authorization/workbasket-authorization.component.html

@@ -1,4 +1,4 @@
-<h2>Authorizations</h2>
+<!-- <h2>Authorizations</h2>
 <table class="table table-condensed table-hover">
   <thead>
     <th>ID</th>
@@ -95,4 +95,4 @@
       </button>
     </td>
   </tr>
-</table>
+</table> -->

admin/src/app/workbasket-authorization/workbasket-authorization.component.ts

@@ -1,101 +1,100 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { WorkbasketserviceService } from '../services/workbasketservice.service';
+import { WorkbasketService } from '../services/workbasketservice.service';
 import { WorkbasketAuthorization } from '../model/workbasket-authorization';
-import { Workbasket } from '../model/workbasket';
+import { WorkbasketSummary } from '../model/workbasketSummary';
 
 @Component({
   selector: 'app-workbasket-authorization',
   templateUrl: './workbasket-authorization.component.html',
-  styleUrls: ['./workbasket-authorization.component.css'],
+  styleUrls: ['./workbasket-authorization.component.css']
-  providers: [WorkbasketserviceService]
 })
 export class WorkbasketAuthorizationComponent implements OnInit {
 
    @Input()
-  workbasket: Workbasket;
+   workbasket: WorkbasketSummary;
 
-  workbasketAuthorization: WorkbasketAuthorization = this.getEmptyObject();
+  // workbasketAuthorization: WorkbasketAuthorization = this.getEmptyObject();
-  selected: WorkbasketAuthorization = this.getEmptyObject();
+  // selected: WorkbasketAuthorization = this.getEmptyObject();
-  editing: WorkbasketAuthorization = this.getEmptyObject();
+  // editing: WorkbasketAuthorization = this.getEmptyObject();
-  isEditing: boolean = false;
+  // isEditing: boolean = false;
 
-  constructor(private service: WorkbasketserviceService, private route: ActivatedRoute) { }
+  // constructor(private service: WorkbasketService, private route: ActivatedRoute) { }
 
-  workbasketAuthorizations: WorkbasketAuthorization[];
+  // workbasketAuthorizations: WorkbasketAuthorization[];
 
   ngOnInit() {
-    this.route.params.switchMap((params: Params) => this.service.getAllWorkBasketAuthorizations(params['id']))
+    // this.route.params.switchMap((params: Params) => this.service.getAllWorkBasketAuthorizations(params['id']))
-      .subscribe(resultList => {
+    //   .subscribe(resultList => {
-        this.workbasketAuthorizations = resultList;
+    //     this.workbasketAuthorizations = resultList;
-      });
+    //   });
   }
 
-  getEmptyObject() {
+  // getEmptyObject() {
-    return new WorkbasketAuthorization("", "", "", "", false, false, false, false, false);
+  //   return new WorkbasketAuthorization("", "", "", "", false, false, false, false, false);
-  }
+  // }
 
-  onDelete(workbasket: WorkbasketAuthorization) {
+  // onDelete(workbasket: WorkbasketAuthorization) {
-    this.service.deleteWorkBasketAuthorization(workbasket).subscribe(result => {
+  //   this.service.deleteWorkBasketAuthorization(workbasket).subscribe(result => {
-      var index = this.workbasketAuthorizations.indexOf(workbasket);
+  //     var index = this.workbasketAuthorizations.indexOf(workbasket);
-      if (index > -1) {
+  //     if (index > -1) {
-        this.workbasketAuthorizations.splice(index, 1);
+  //       this.workbasketAuthorizations.splice(index, 1);
-      }
+  //     }
-    });
+  //   });
-  }
+  // }
 
-  onAdd() {
+  // onAdd() {
-    console.log(this.workbasketAuthorization);
+  //   console.log(this.workbasketAuthorization);
-    this.workbasketAuthorization.workbasketId = this.workbasket.id;
+  //   this.workbasketAuthorization.workbasketId = this.workbasket.id;
-    this.service.createWorkBasketAuthorization(this.workbasketAuthorization).subscribe(result => {
+  //   this.service.createWorkBasketAuthorization(this.workbasketAuthorization).subscribe(result => {
-      this.workbasketAuthorizations.push(result);
+  //     this.workbasketAuthorizations.push(result);
-      this.onClear();
+  //     this.onClear();
-    });
+  //   });
-  }
+  // }
 
-  onEdit(workbasketAuthorizations: WorkbasketAuthorization) {
+  // onEdit(workbasketAuthorizations: WorkbasketAuthorization) {
-    this.editing = { ...workbasketAuthorizations };
+  //   this.editing = { ...workbasketAuthorizations };
-    this.isEditing = true;
+  //   this.isEditing = true;
-  }
+  // }
 
-  onSelect(workbasketAuthorizations: WorkbasketAuthorization) {
+  // onSelect(workbasketAuthorizations: WorkbasketAuthorization) {
-    if (!this.isEditing) {
+  //   if (!this.isEditing) {
-      this.selected = workbasketAuthorizations;
+  //     this.selected = workbasketAuthorizations;
-    }
+  //   }
-  }
+  // }
 
-  onClear() {
+  // onClear() {
-    this.workbasketAuthorization.id = "";
+  //   this.workbasketAuthorization.id = "";
-    this.workbasketAuthorization.workbasketId = "";
+  //   this.workbasketAuthorization.workbasketId = "";
-    this.workbasketAuthorization.userId = "";
+  //   this.workbasketAuthorization.userId = "";
-    this.workbasketAuthorization.groupId = "";
+  //   this.workbasketAuthorization.groupId = "";
-    this.workbasketAuthorization.read = false;
+  //   this.workbasketAuthorization.read = false;
-    this.workbasketAuthorization.open = false;
+  //   this.workbasketAuthorization.open = false;
-    this.workbasketAuthorization.append = false;
+  //   this.workbasketAuthorization.append = false;
-    this.workbasketAuthorization.transfer = false;
+  //   this.workbasketAuthorization.transfer = false;
-    this.workbasketAuthorization.distribute = false;
+  //   this.workbasketAuthorization.distribute = false;
-  }
+  // }
 
-  onSave() {
+  // onSave() {
-    if (this.isEditing) {
+  //   if (this.isEditing) {
-      this.service.updateWorkBasketAuthorization(this.editing).subscribe(result => {
+  //     this.service.updateWorkBasketAuthorization(this.editing).subscribe(result => {
-        this.selected.id = result.id;
+  //       this.selected.id = result.id;
-        this.selected.workbasketId = result.workbasketId;
+  //       this.selected.workbasketId = result.workbasketId;
-        this.selected.userId = result.userId;
+  //       this.selected.userId = result.userId;
-        this.selected.groupId = result.groupId;
+  //       this.selected.groupId = result.groupId;
-        this.selected.read = result.read;
+  //       this.selected.read = result.read;
-        this.selected.open = result.open;
+  //       this.selected.open = result.open;
-        this.selected.append = result.append;
+  //       this.selected.append = result.append;
-        this.selected.transfer = result.transfer;
+  //       this.selected.transfer = result.transfer;
-        this.selected.distribute = result.distribute;
+  //       this.selected.distribute = result.distribute;
-      });
+  //     });
-    }
+  //   }
-    this.isEditing = false;
+  //   this.isEditing = false;
-    this.editing = this.getEmptyObject();
+  //   this.editing = this.getEmptyObject();
-  }
+  // }
 
-  onCancel() {
+  // onCancel() {
-    this.editing = this.getEmptyObject();
+  //   this.editing = this.getEmptyObject();
-    this.isEditing = false;
+  //   this.isEditing = false;
-  }
+  // }
 }

admin/src/app/workbasket-details/workbasket-details.component.html

@@ -1,29 +0,0 @@
-<div class="row">
-  <div class="col-md-6">
-    <h2>Details</h2>
-  </div>
-  <div class="col-md-6">
-    <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onEdit()">
-        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
-      </button>
-    <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onSave()">
-      <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
-  </div>
-</div>
-<dl class="dl-horizontal">
-  <dt>Id</dt>
-  <dd>{{ workbasketClone.id }}</dd>
-  <dt>Created Date</dt>
-  <dd>{{ workbasketClone.created | date: 'dd/MM/yyyy HH:mm' }}</dd>
-  <dt>Modified Date</dt>
-  <dd>{{ workbasketClone.modified | date: 'dd/MM/yyyy HH:mm' }}</dd>
-  <dt>Name</dt>
-  <dd *ngIf="!editMode">{{ workbasketClone.name }}</dd>
-  <dd *ngIf="editMode"><input class="form-control" placeholder="Name" name="editName" [(ngModel)]="workbasketClone.name" required></dd>
-  <dt>Owner</dt>
-  <dd *ngIf="!editMode">{{ workbasketClone.owner }}</dd>
-  <dd *ngIf="editMode"><input class="form-control" placeholder="Owner" name="editOwner" [(ngModel)]="workbasketClone.owner" required></dd>
-  <dt>Description</dt>
-  <dd *ngIf="!editMode">{{ workbasketClone.description }}</dd>
-  <dd *ngIf="editMode"><textarea class="form-control" rows="3" placeholder="Description" name="editDescription" [(ngModel)]="workbasketClone.description"></textarea></dd>
-</dl>

admin/src/app/workbasket-details/workbasket-details.component.ts

@@ -1,41 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Workbasket } from '../model/workbasket';
-import { WorkbasketserviceService } from '../services/workbasketservice.service';
-
-@Component({
-  selector: 'app-workbasket-details',
-  templateUrl: './workbasket-details.component.html',
-  styleUrls: ['./workbasket-details.component.css']
-})
-export class WorkbasketDetailsComponent implements OnInit {
-
-  @Input()
-  workbasket: Workbasket;
-  workbasketClone: Workbasket;
-
-  allWorkbasket: Workbasket[];
-  editMode: boolean = false;
-
-  @Output()
-  onSaved = new EventEmitter<Workbasket>();
-
-  constructor(private service: WorkbasketserviceService) { }
-
-  ngOnInit() {
-    this.workbasketClone = { ...this.workbasket };
-  }
-
-  ngOnChanges() {
-    this.workbasketClone = { ...this.workbasket };
-    this.editMode = false;
-  }
-
-  onEdit() {
-    this.editMode = true;
-  }
-
-  onSave() {
-    this.onSaved.emit(this.workbasketClone);
-    this.editMode = false;
-  }
-}

admin/src/app/workbasket-distributiontargets/workbasket-distributiontargets.component.html

@@ -1,4 +1,4 @@
-<h2>Distribution Targets</h2>
+<!-- <h2>Distribution Targets</h2>
 <div *ngFor="let alert of alerts">
   <alert [type]="alert.type" dismissible="true" [dismissOnTimeout]="5000">{{ alert.msg }}</alert>
 </div>
@@ -31,4 +31,4 @@
       </td>
     </tr>
   </table>
-</div>
+</div> -->

admin/src/app/workbasket-distributiontargets/workbasket-distributiontargets.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { Workbasket } from '../model/workbasket';
+import { WorkbasketSummary } from '../model/workbasketSummary';
-import { WorkbasketserviceService } from '../services/workbasketservice.service'
+import { WorkbasketService } from '../services/workbasketservice.service'
 import { Observable } from 'rxjs/Observable';
 
 @Component({
@@ -11,96 +11,96 @@ import { Observable } from 'rxjs/Observable';
 export class WorkbasketDistributiontargetsComponent implements OnInit {
 
   @Input()
-  workbasket: Workbasket;
+  workbasket: WorkbasketSummary;
-  workbaskets: Workbasket[];
+  workbaskets: WorkbasketSummary[];
   public alerts: any = [];
 
-  constructor(private service: WorkbasketserviceService) { }
+  constructor(private service: WorkbasketService) { }
 
   ngOnInit() {
-    this.prepareData();
+    //this.prepareData();
   }
 
-  ngOnChange() {
+  // ngOnChange() {
-    this.prepareData();
+  //   this.prepareData();
-  }
+  // }
 
-  prepareData() {
+  // prepareData() {
-    this.service.getAllWorkBaskets().subscribe(resultList => {
+  //   this.service.getWorkBasketsSummary().subscribe(resultList => {
-      this.workbaskets = resultList;
+  //     this.workbaskets = resultList;
-    });
+  //   });
-  }
+  // }
 
-  onAdd(w: Workbasket) {
+  // onAdd(w: WorkbasketSummary) {
-    if (this.workbasket.distributionTargets.length > 0) {
+  //   if (this.workbasket.distributionTargets.length > 0) {
-      let found: boolean = false;
+  //     let found: boolean = false;
-      for (var i = 0, len = this.workbasket.distributionTargets.length; i < len; i++) {
+  //     for (var i = 0, len = this.workbasket.distributionTargets.length; i < len; i++) {
-        if (this.workbasket.distributionTargets[i] === w.id) {
+  //       if (this.workbasket.distributionTargets[i] === w.id) {
-          found = true;
+  //         found = true;
-          break;
+  //         break;
-        }
+  //       }
-      }
+  //     }
 
-      if (!found) {
+  //     if (!found) {
-        this.onSaved(w, true);
+  //       this.onSaved(w, true);
-      } else {
+  //     } else {
-        this.alerts = [{
+  //       this.alerts = [{
-          type: "danger",
+  //         type: "danger",
-          msg: "This workbasket is already mapped!"
+  //         msg: "This workbasket is already mapped!"
-        }];
+  //       }];
-      }
+  //     }
-    } else {
+  //   } else {
-      this.onSaved(w, true);
+  //     this.onSaved(w, true);
-    }
+  //   }
-  }
+  // }
 
-  onDelete(id: string) {
+  // onDelete(id: string) {
-    this.onSaved(this.resolveObject(id), false);
+  //   this.onSaved(this.resolveObject(id), false);
-  }
+  // }
 
-  // get workbasket name
+  // // get workbasket name
-  resolveName(id: string): any {
+  // resolveName(id: string): any {
-    if (this.workbaskets != null) {
+  //   if (this.workbaskets != null) {
-      return this.workbaskets.filter(item => item.id === id)[0].name;
+  //     return this.workbaskets.filter(item => item.id === id)[0].name;
-    }
+  //   }
-  }
+  // }
 
-  // create an Workbasket
+  // // create an WorkbasketSummary
-  resolveObject(id: string): any {
+  // resolveObject(id: string): any {
-    if (this.workbaskets != null) {
+  //   if (this.workbaskets != null) {
-      return this.workbaskets.filter(item => item.id === id)[0];
+  //     return this.workbaskets.filter(item => item.id === id)[0];
-    }
+  //   }
-  }
+  // }
 
-  onSaved(w: Workbasket, isUpdate: boolean) {
+  // onSaved(w: WorkbasketSummary, isUpdate: boolean) {
-    if (w != null) {
+  //   if (w != null) {
-      // add changes
+  //     // add changes
-      if (isUpdate) {
+  //     if (isUpdate) {
-        this.workbasket.distributionTargets.push(w.id);
+  //       this.workbasket.distributionTargets.push(w.id);
-      } else {
+  //     } else {
-        let index = this.workbasket.distributionTargets.indexOf(w.id);
+  //       let index = this.workbasket.distributionTargets.indexOf(w.id);
-        this.workbasket.distributionTargets.splice(index, 1);
+  //       this.workbasket.distributionTargets.splice(index, 1);
-      }
+  //     }
 
-      // try to save changes
+  //     // try to save changes
-      this.service.updateWorkbasket(this.workbasket).subscribe(result => {
+  //     this.service.updateWorkbasket(this.workbasket).subscribe(result => {
-        this.workbasket.id = result.id;
+  //       this.workbasket.id = result.id;
-        this.workbasket.name = result.name;
+  //       this.workbasket.name = result.name;
-        this.workbasket.description = result.description;
+  //       this.workbasket.description = result.description;
-        this.workbasket.owner = result.owner;
+  //       this.workbasket.owner = result.owner;
-        this.workbasket.distributionTargets = result.distributionTargets;
+  //       this.workbasket.distributionTargets = result.distributionTargets;
-      }, (err) => {
+  //     }, (err) => {
-        this.alerts = [{
+  //       this.alerts = [{
-          type: "danger",
+  //         type: "danger",
-          msg: "You are not authorized."
+  //         msg: "You are not authorized."
-        }];
+  //       }];
-        // reset changes
+  //       // reset changes
-        if (isUpdate) {
+  //       if (isUpdate) {
-          this.workbasket.distributionTargets.pop();
+  //         this.workbasket.distributionTargets.pop();
-        } else {
+  //       } else {
-          this.workbasket.distributionTargets.push(w.id);
+  //         this.workbasket.distributionTargets.push(w.id);
-        }
+  //       }
-      });
+  //     });
-    }
+  //   }
-  }
+  // }
 }

admin/src/app/workbasket/details/information/workbasket-information.component.html

@@ -0,0 +1,27 @@
+
+<div class="row">
+    <div class="col-md-6">
+      <h2>Details</h2>
+    </div>
+    <div class="col-md-6">
+      <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onEdit()">
+          <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+        </button>
+      <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onSave()">
+        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span></button>
+    </div>
+  </div>
+  <dl class="dl-horizontal" *ngIf = "workbasket">
+    <dt>Id</dt>
+    <dd>{{ workbasket.id }}</dd>
+    <dt>Created Date</dt>
+    <dd>{{ workbasket.created | date: 'dd/MM/yyyy HH:mm' }}</dd>
+    <dt>Modified Date</dt>
+    <dd>{{ workbasket.modified | date: 'dd/MM/yyyy HH:mm' }}</dd>
+    <dt>Name</dt>
+    <dd><input class="form-control" placeholder="Name" name="editName" [(ngModel)]="workbasket.name" required></dd>
+    <dt>Owner</dt>
+    <dd><input class="form-control" placeholder="Owner" name="editOwner" [(ngModel)]="workbasket.owner" required></dd>
+    <dt>Description</dt>
+    <dd><textarea class="form-control" rows="3" placeholder="Description" name="editDescription" [(ngModel)]="workbasket.description"></textarea></dd>
+  </dl>

admin/src/app/workbasket/details/information/workbasket-information.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkbasketInformationComponent } from './workbasket-information.component';
+
+describe('InformationComponent', () => {
+  let component: WorkbasketInformationComponent;
+  let fixture: ComponentFixture<WorkbasketInformationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkbasketInformationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkbasketInformationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

admin/src/app/workbasket/details/information/workbasket-information.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Output } from '@angular/core';
+import { WorkbasketSummary } from '../../../model/workbasketSummary';
+import { WorkbasketService } from '../../../services/workbasketservice.service';
+
+@Component({
+  selector: 'workbasket-information',
+  templateUrl: './workbasket-information.component.html',
+  styleUrls: ['./workbasket-information.component.scss']
+})
+export class WorkbasketInformationComponent implements OnInit {
+
+  @Input()
+  workbasket: WorkbasketSummary;
+
+  constructor(private service: WorkbasketService) { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges() {
+  }
+
+}

admin/src/app/workbasket/details/workbasket-details.component.html

@@ -0,0 +1,20 @@
+  <div class="col-xs-1">
+      <ul class="nav nav-tabs tabs-left sideways">
+        <li [class.active]="wbClicked"><a href="#workbaskets-information" data-toggle="tab" ><br>Details</a></li>
+        <li [class.active]="authClicked"><a href="#workbaskets-authorization" data-toggle="tab" ><br>Authorizations</a></li>
+        <li [class.active]="dtClicked"><a href="#workbaskets-distribution-targets" data-toggle="tab" >Distribution Targets</a></li>
+      </ul>
+  </div>
+  <div class="col-xs-10">
+      <div class="tab-content">
+        <div class="tab-pane" [class.active]="wbClicked" id="workbaskets-information">
+          <workbasket-information [workbasket]="workbasket"></workbasket-information>
+        </div>
+        <div class="tab-pane" [class.active]="authClicked" id="workbaskets-authorization">
+          <app-workbasket-authorization [workbasket]="workbasket"></app-workbasket-authorization>
+        </div>
+        <div class="tab-pane" [class.active]="dtClicked" id="workbaskets-distribution-targets">
+          <app-workbasket-distributiontargets [workbasket]="workbasket"></app-workbasket-distributiontargets>
+        </div>
+      </div>
+  </div>

admin/src/app/workbasket/details/workbasket-details.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { WorkbasketSummary } from '../../model/workbasketSummary';
+import { WorkbasketService } from '../../services/workbasketservice.service'
+import { ActivatedRoute, Params, Router, NavigationStart } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'workbasket-details',
+  templateUrl: './workbasket-details.component.html',
+  styleUrls: ['./workbasket-details.component.scss']
+})
+export class WorkbasketDetailsComponent implements OnInit {
+
+
+  workbasket: WorkbasketSummary;
+  workbasketClone: WorkbasketSummary;
+
+  workbasketServiceSubscription: Subscription;
+  routeSubscription: Subscription;
+
+  constructor(private service: WorkbasketService, private route: ActivatedRoute, private router: Router) { }
+
+  ngOnInit() {
+    this.routeSubscription = this.route.params.subscribe(params => {
+      this.service.selectWorkBasket(params['id']);
+    });
+
+    this.workbasketServiceSubscription = this.service.getSelectedWorkBasket().subscribe( workbasketIdSelected => {
+      this.service.getWorkBasket(workbasketIdSelected).subscribe( workbasket => {
+        this.workbasket = workbasket;
+        this.workbasketClone = { ...this.workbasket };
+       });
+    });
+  }
+
+  ngOnChanges() {
+  }
+
+  onSave() {
+  }
+
+  ngOnDestroy(){
+    this.workbasketServiceSubscription.unsubscribe();
+    this.routeSubscription.unsubscribe();
+  }
+}

admin/src/app/workbasket/list/workbasket-list.component.html

@@ -1,88 +1,146 @@
-<h1>Workbaskets</h1>
+<div class = "workbasket-list-full-height">
-<form #workbasketForm="ngForm">
+    <ul class="list-group footer-space"> 
-  <table class="table table-condensed table-hover">
+        <li id="wb-action-toolbar" class="list-group-item"> 
-    <thead>
+            <div class="row"> 
-      <th>ID</th>
+                <div class="col-xs-9 mod-col-9">
-      <th>Name</th>
+                    <button type="button" data-toggle="tooltip" title="Add" class="btn btn-default">
-      <th>Description</th>
+                        <span class="glyphicon glyphicon-plus green" aria-hidden="true"></span>
-      <th>Owner</th>
-      <th>Actions</th>
-    </thead>
-    <tr>
-      <td></td>
-      <td>
-        <input class="form-control" placeholder="Name" name="name" [(ngModel)]="workbasket.name" required>
-      </td>
-      <td>
-        <input class="form-control" placeholder="Description" name="description" [(ngModel)]="workbasket.description">
-      </td>
-      <td>
-        <input class="form-control" placeholder="Owner" name="owner" [(ngModel)]="workbasket.owner" required>
-      </td>
-      <td>
-        <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onAdd()">
-        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                     </button>                                             
-        <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onClear()">
+                    <button type="button" data-toggle="tooltip" title="Edit" class="btn btn-default">
-        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-      </button>
-      </td>
-    </tr>
-
-    <tr *ngFor="let workbasket of workbaskets" (click)="onSelect(workbasket)" [class.active]="workbasket.id == selected.id" [routerLink]="[ {outlets: { detail: [workbasket.id] } }]">
-      <td *ngIf="workbasket.id != editing.id">{{ workbasket.id }}</td>
-      <td *ngIf="workbasket.id == editing.id">
-        <input class="form-control" placeholder="Id" name="editid" [(ngModel)]="editing.id" readonly>
-      </td>
-      <td *ngIf="workbasket.id != editing.id">{{ workbasket.name }}</td>
-      <td *ngIf="workbasket.id == editing.id">
-        <input class="form-control" placeholder="Name" name="editname" [(ngModel)]="editing.name" required>
-      </td>
-      <td *ngIf="workbasket.id != editing.id">{{ workbasket.description }}</td>
-      <td *ngIf="workbasket.id == editing.id">
-        <input class="form-control" placeholder="Description" name="editdescription" [(ngModel)]="editing.description">
-      </td>
-      <td *ngIf="workbasket.id != editing.id">{{ workbasket.owner }}</td>
-      <td *ngIf="workbasket.id == editing.id">
-        <input class="form-control" placeholder="Owner" name="editowner" [(ngModel)]="editing.owner" required>
-      </td>
-      <td *ngIf="workbasket.id != editing.id">
-        <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onEdit(workbasket)">
                         <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                     </button>                                             
-        <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onDelete(workbasket)">
+                    <button type="button" data-toggle="tooltip" title="copy" class="btn btn-default">
-        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+                        <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
                     </button>                                             
-      </td>
+                    <button type="button" data-toggle="tooltip" title="Remove distibution target" class="btn btn-default">
-      <td *ngIf="workbasket.id == editing.id">
+                        <span class="glyphicon glyphicon-erase" aria-hidden="true"></span>
-        <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onSave(workbasket)">
-        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                     </button>                                             
-        <button type="button" class="btn btn-default" aria-label="Left Align" (click)="onCancel(workbasket)">
+                    <button type="button" data-toggle="tooltip" title="Remove" class="btn btn-default remove">
                         <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                     </button>
-      </td>
+                </div>                                         
-    </tr>
+                <div class="clearfix btn-group"> 
-  </table>
+                    <button class="btn btn-default collapsed" type="button" id="collapsedMenuSearchWb" data-toggle="collapse" data-target="#wb-search-bar" aria-expanded="false"> 
-</form>
+                        <span class="glyphicon glyphicon-filter blue wb-search-toggle"></span> 
-<hr>
+                    </button>
-<div class="col-xs-1" *ngIf="workbasket.id != selected.id">
+                </div>
-  <ul class="nav nav-tabs tabs-left sideways">
+                <div class="dropdown clearfix btn-group"> 
-    <li [class.active]="wbClicked"><a href="javascript:void(0)" data-toggle="tab" (click)="onClickWB()"><br>Details</a></li>
+                    <button class="btn btn-default" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
-    <li [class.active]="authClicked"><a href="javascript:void(0)" data-toggle="tab" (click)="onClickAuth()"><br>Authorizations</a></li>
+                        <span class="glyphicon glyphicon-sort blue dropdown-toggle"></span> 
-    <li [class.active]="dtClicked"><a href="javascript:void(0)" data-toggle="tab" (click)="onClickDt()">Distribution Targets</a></li>
+                    </button>                                             
+                    <ul class="dropdown-menu dropdown-menu-right orderby-dropdown popup" aria-labelledby="dropdownMenu1"> 
+                        <li>
+                            <div class="col-xs-6">
+                                <h5>Order By</h5>
+                            </div>
+                            <button type="button" placeholder="des" class="btn btn-default" data-toggle="tooltip" title="descending">
+                                <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
+                            </button>
+                            <button type="button" data-toggle="tooltip" title="ascending" class="btn btn-default">
+                                <span class="glyphicon glyphicon-sort-by-attributes-alt" aria-hidden="true"></span>
+                            </button>                                                     
+                        </li>                                                 
+                        <li role="separator" class="divider"></li>
+                        <li class="link-padding">
+                            <a>
+                                <div class="radio">
+                                    <label class="radio-inline active">
+                                        <input type="radio" name="orderRadio" id="nameRadio" value="Name" aria-label="Name">Name
+                                    </label>
+                                </div>
+                            </a>
+                        </li>                                                 
+                        <li>
+                            <a>
+                                <div class="radio">
+                                    <label class="radio-inline">
+                                        <input type="radio" name="orderRadio" id="descriptionRadio" value="Description" aria-label="Description">Description
+                                    </label>
+                                </div>
+                            </a>
+                        </li>                                                 
+                        <li>
+                            <a>
+                                <div class="radio">
+                                    <label class="radio-inline">
+                                        <input type="radio" name="orderRadio" id="ownerRadio" value="Owner" aria-label="Name">Owner
+                                    </label>
+                                </div>
+                            </a>
+                        </li>                                                 
+                        <li>
+                            <a>
+                                <div class="radio">
+                                    <label class="radio-inline">
+                                        <input type="radio" name="orderRadio" id="typeRadio" value="Type" aria-label="Name">Type
+                                    </label>
+                                </div>
+                            </a>
+                        </li>                                                 
                     </ul>                                             
                 </div>
-<div class="col-xs-10" *ngIf="workbasket.id != selected.id">
-  <div class="tab-content">
-    <div class="tab-pane" [class.active]="wbClicked">
-      <app-workbasket-details [workbasket]="selected"></app-workbasket-details>
             </div>
-    <div class="tab-pane" [class.active]="authClicked">
+        </li>                                 
-      <app-workbasket-authorization [workbasket]="selected"></app-workbasket-authorization>
+
-    </div>
+        <li type="text" id="wb-search-bar" class="list-group-seach collapse">
-    <div class="tab-pane" [class.active]="dtClicked">
+            <div class="row"> 
-      <app-workbasket-distributiontargets [workbasket]="selected"></app-workbasket-distributiontargets>
+                <dl class="pull-left padding-left-5"> 
+                    <dt class="dropdown"> <button class="btn btn-default" type="button" id="dropdownMenuSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
+                        <svg-icon class="small blue" src="./assets/icons/user.svg"></svg-icon>
+                        </button> <ul class="dropdown-menu dropdown-menu-users" role="menu">
+                            <li>
+                                <button type="button" placeholder="individual" class="btn btn-default btn-users-list" data-toggle="tooltip" title="individual">
+                                    <svg-icon class="small blue" src="./assets/icons/user.svg"></svg-icon>
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" placeholder="multiple" data-toggle="tooltip" title="multiple" class="btn btn-default btn-users-list">
+                                    <svg-icon class="small blue" src="./assets/icons/users.svg"></svg-icon>
+                                </button>                                                         
+                            </li>
+                        </ul></dt> 
+                </dl>                                         
+                <dl class="col-xs-10">
+                    <dt><input type="text" class="form-control" id="wb-display-name-search" placeholder="Filter by name"> </dt>
+                    <dt><input type="text" class="form-control" id="wb-display-description-search" placeholder="Filter by description"> </dt>
+                    <dt><input type="text" class="form-control" id="wb-display-task-owner-search" placeholder="Filter by Task owner"> </dt>
+                </dl>                                         
             </div>                                     
+        </li>                                 
+        <li class="list-group-item"  *ngFor= "let workbasket of workbaskets" [class.active]="workbasket.id === selectedId" type="text" [routerLink]="[ {outlets: { detail: [workbasket.id] } }]">
+            <div class="row">
+                <dl class="col-xs-1">
+                    <dt><svg-icon class="{{workbasket.id === selectedId? 'white': 'blue' }} small" src="./assets/icons/{{workbasket.type === 'PERSONAL'? 'user.svg': 'users.svg'}}"></svg-icon></dt>
+                </dl>
+                <dl class="col-xs-10">
+                    <dt>{{workbasket.name}}  ({{workbasket.key}}) </dt>
+                    <dd>{{workbasket.description}}</dd>
+                    <dd>{{workbasket.owner}} &nbsp;</dd>
+                </dl>
             </div>                                     
+        </li>                                                                 
+    </ul>                             
+    <ul class="pagination vertical-center"> 
+        <li> 
+            <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> 
+        </li>                                 
+        <li>
+            <a href="">1</a>
+        </li>                                 
+        <li>
+            <a href="">2</a>
+        </li>                                 
+        <li>
+            <a href="">3</a>
+        </li>                                 
+        <li>
+            <a href="">4</a>
+        </li>                                 
+        <li>
+            <a href="">5</a>
+        </li>                                 
+        <li> 
+            <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> 
+        </li>                                 
+    </ul>                             
 </div>

admin/src/app/workbasket/list/workbasket-list.component.scss

@@ -0,0 +1,7 @@
+.padding-left-5 {
+    padding-left:5px;
+}
+
+.workbasket-list-full-height{
+    height: calc(100vh - 55px);
+}

admin/src/app/workbasket/list/workbasket-list.component.ts

@@ -1,40 +1,38 @@
 import { Component, OnInit, EventEmitter } from '@angular/core';
-import { Workbasket } from '../../model/workbasket';
+import { WorkbasketSummary } from '../../model/workbasketSummary';
-import { WorkbasketserviceService } from '../../services/workbasketservice.service'
+import { WorkbasketService } from '../../services/workbasketservice.service'
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router, NavigationStart } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'workbasket-list',
   outputs: ['selectedWorkbasket'],
   templateUrl: './workbasket-list.component.html',
-  styleUrls: ['./workbasket-list.component.css'],
+  styleUrls: ['./workbasket-list.component.scss']
-  providers: [WorkbasketserviceService]
 })
 export class WorkbasketListComponent implements OnInit {
-  public selectedWorkbasket: EventEmitter<Workbasket> = new EventEmitter();
+  public selectedWorkbasket: EventEmitter<WorkbasketSummary> = new EventEmitter();
 
-  workbasket: Workbasket = this.getEmptyObject();
+  newWorkbasket: WorkbasketSummary;
-  selected: Workbasket = this.getEmptyObject();
+  selectedId: string = undefined;
-  editing: Workbasket = this.getEmptyObject();
+  workbaskets : Array<WorkbasketSummary> = [];
-  isEditing: boolean = false;
 
-  wbClicked = true;
+  private workBasketSummarySubscription: Subscription;
-  authClicked = false;
+  private workbasketServiceSubscription: Subscription;
-  dtClicked = false
 
-  workbaskets = [];
+  constructor(private service: WorkbasketService, private route: ActivatedRoute, private router: Router) { }
-
-  public alerts: any = [];
-
-  constructor(private service: WorkbasketserviceService, private route: ActivatedRoute) { }
 
   ngOnInit() {
-    this.service.getAllWorkBaskets().subscribe(resultList => {
+    this.workBasketSummarySubscription = this.service.getWorkBasketsSummary().subscribe(resultList => {
       this.workbaskets = resultList;
     });
+
+    this.workbasketServiceSubscription = this.service.getSelectedWorkBasket().subscribe( workbasketIdSelected => {
+      this.selectedId = workbasketIdSelected;
+    });
   }
 
-  onDelete(workbasket: Workbasket) {
+  onDelete(workbasket: WorkbasketSummary) {
     this.service.deleteWorkbasket(workbasket.id).subscribe(result => {
       var index = this.workbaskets.indexOf(workbasket);
       if (index > -1) {
@@ -44,72 +42,26 @@ export class WorkbasketListComponent implements OnInit {
   }
 
   onAdd() {
-    this.service.createWorkbasket(this.workbasket).subscribe(result => {
+    this.service.createWorkbasket(this.newWorkbasket).subscribe(result => {
       this.workbaskets.push(result);
       this.onClear();
     });
   }
 
-  onEdit(workbasket: Workbasket) {
-    this.editing = { ...workbasket };
-    this.isEditing = true;
-  }
-
-  onSelect(workbasket: Workbasket) {
-    if (!this.isEditing) {
-      this.selected = workbasket;
-    }
-  }
-
   onClear() {
-    this.workbasket.id = "";
+    this.newWorkbasket.id = "";
-    this.workbasket.name = "";
+    this.newWorkbasket.name = "";
-    this.workbasket.description = "";
+    this.newWorkbasket.description = "";
-    this.workbasket.owner = "";
+    this.newWorkbasket.owner = "";
-  }
-
-  onSave() {
-    if (this.isEditing) {
-      this.service.updateWorkbasket(this.editing).subscribe(result => {
-        this.selected.id = result.id;
-        this.selected.name = result.name;
-        this.selected.description = result.description;
-        this.selected.owner = result.owner;
-      }, (err) => {
-        this.alerts = [{
-          type: "danger",
-          msg: "You are not authorized."
-        }]
-      });
-    }
-    this.isEditing = false;
-    this.editing = this.getEmptyObject();
-  }
-
-  onCancel() {
-    this.editing = this.getEmptyObject();
-    this.isEditing = false;
   }
 
   getEmptyObject() {
-    return new Workbasket("", "", "", "", "", "", null);
+    return new WorkbasketSummary("", "", "", "", "", "", "", "", "", "", "", null);
   }
 
-  onClickWB() {
+  ngOnDestroy(){
-    this.wbClicked = !this.wbClicked;
+    this.workBasketSummarySubscription.unsubscribe();
-    this.authClicked = false;
+    this.workbasketServiceSubscription.unsubscribe();
-    this.dtClicked = false;
   }
 
-  onClickAuth() {
-    this.authClicked = !this.authClicked;
-    this.wbClicked = false;
-    this.dtClicked = false;
-  }
-
-  onClickDt() {
-    this.dtClicked = !this.dtClicked;
-    this.wbClicked = false;
-    this.authClicked = false;
-  }
 }

admin/src/app/workbasketadministration/workbasketadministration.component.html

@@ -1,3 +0,0 @@
-<!-- app-workbasketeditor [workbasket]="selectedWorkbasket" (workbasketSaved)="onWorkbasketSaved($event)"></app-workbasketeditor -->
-<!-- <workbasket-list (selectedWorkbasket)="onWorkbasketSelected($event)"></workbasket-list> -->
-DETAIL COMPONENT

admin/src/app/workbasketadministration/workbasketadministration.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WorkbasketadministrationComponent } from './workbasketadministration.component';
-
-describe('WorkbasketadministrationComponent', () => {
-  let component: WorkbasketadministrationComponent;
-  let fixture: ComponentFixture<WorkbasketadministrationComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WorkbasketadministrationComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WorkbasketadministrationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  xit('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

admin/src/app/workbasketadministration/workbasketadministration.component.ts

@@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Workbasket } from '../model/workbasket';
-
-@Component({
-  selector: 'app-workbasketadministration',
-  templateUrl: './workbasketadministration.component.html',
-  styleUrls: ['./workbasketadministration.component.css']
-})
-export class WorkbasketadministrationComponent implements OnInit {
-  selectedWorkbasket: Workbasket;
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  onWorkbasketSelected(workbasket: Workbasket) {
-    console.log("got new selected workbasket: " + workbasket.id);
-    this.selectedWorkbasket = workbasket;
-  }
-
-  onWorkbasketSaved(workbasket: Workbasket) {
-    console.log("got saved workbasket: " + workbasket);
-  }
-
-}

admin/src/app/workbasketeditor/workbasketeditor.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, EventEmitter } from '@angular/core';
-import { Workbasket } from '../model/workbasket';
+import { WorkbasketSummary } from '../model/workbasketSummary';
 
 @Component({
   selector: 'app-workbasketeditor',
@@ -9,13 +9,13 @@ import { Workbasket } from '../model/workbasket';
   styleUrls: ['./workbasketeditor.component.css']
 })
 export class WorkbasketeditorComponent implements OnInit {
-  public workbasket: Workbasket;
+  public workbasket: WorkbasketSummary;
-  public workbasketSaved: EventEmitter<Workbasket> = new EventEmitter();
+  public workbasketSaved: EventEmitter<WorkbasketSummary> = new EventEmitter();
 
   constructor() { }
 
   ngOnInit() {
-    this.workbasket = new Workbasket("", "", "", "", "", "", null);
+    this.workbasket = new WorkbasketSummary("", "", "", "", "", "", "", "", "", "", "", null);
   }
 
   onSubmit() {

admin/src/assets/_site.scss

@@ -1,68 +1,4 @@
 
-/*
- * Base structure
- */
-/* Move down content because we have a fixed navbar that is 55px tall */
-body {
-    padding-top: 55px;
-}
-
-/*
- * All side bar links styling.
-*/
-.nav-sidebar > li > a {
-    padding-right: 20px;
-    padding-left: 20px;
-}
-
-.nav-sidebar > .active > a,
-.nav-sidebar > .active > a:hover,
-.nav-sidebar > .active > a:focus {
-    color: #fff;
-    background-color: #428bca;
-}
-
-
-.nav.nav-tabs { 
-    & > li {
-        & > a{
-            min-height: 56px;
-            padding-top: 17px;
-        }
-        
-        &:first-child > a{
-            border-left: none;
-        }
-    }
-    & > p{
-        margin: 0px;
-    }
-}
-
-.navbar-brand {
-    float: none;
-}
-
-.navbar-inverse {
-    border: none;
-}
-
-.navbar {
-    margin-bottom: 0px;
-}
-
-/*
- * Placeholder dashboard ideas
- */
-.placeholders {
-    margin-bottom: 30px;
-    text-align: center;
-}
-
-.placeholders h4 {
-    margin-bottom: 0;
-}
-
 .placeholder {
     margin-bottom: 20px;
 }
@@ -83,8 +19,13 @@ body {
 .no-border-radius {
     border-radius: 0px;
 }
+/*
+ * Base structure
+ */
+/* Move down content because we have a fixed navbar that is 55px tall */
 
 .container-main {
+    margin-top: 55px;
     overflow-y: hidden;
     /*Min mobile view size*/
     min-width: 420px;
@@ -138,16 +79,16 @@ body {
 }
 
 /*
- *Remove bootstrap cols padding
+ *Remove bootstrap cols padding for master and detail component
 */
-.no-gutter > [class*='col-'] {
+.no-gutter > master-and-detail > [class*='col-'] {
     padding-right: 0;
     padding-left: 0;
 }
 
-img.small {
+.small {
-    width: 14px;
+    width: 16px;
-    height: 14px;
+    height: 16px;
 }
 
 .dropdown-menu.action {
@@ -161,13 +102,6 @@ img.small {
     overflow-x: hidden;
 }
 
-.full-height {
-    max-height: 100vh;
-    height: 100vh;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
 .margin-right {
     margin-right: 2px;
 }
@@ -282,14 +216,40 @@ li > div.row > dl {
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
 }
 
-.green-32 {
+.white{
+    color: white;
+    & svg {
+        fill: white;
+    }
+}
+
+.blue{
+    color: #337ab7;
+    & svg {
+        fill: #337ab7;
+    }
+}
+
+.green {
     color: green;
 }
 
-.blue-32 {
-    color: #337ab7;
-}
 
 .toolbar {
     padding: 13px 15px;
 }
+
+.open > .dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+}
+  
+.dropdown-menu {
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transition: opacity 300ms ease, visibility 300ms ease;
+    -moz-transition: opacity 300ms ease, visibility 300ms ease;
+    -o-transition: opacity 300ms ease, visibility 300ms ease;
+    transition: opacity 300ms ease, visibility 300ms ease;
+}

admin/src/assets/icons/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.157 11v-.947c1.257-.712 2.282-2.489 2.282-4.266 0-2.853 0-5.166-3.423-5.166-3.422 0-3.422 2.313-3.422 5.166 0 1.777 1.025 3.554 2.281 4.266V11c-3.87.318-6.844 2.232-6.844 4.546H16c0-2.314-2.974-4.228-6.844-4.546z"/></svg>

admin/src/assets/icons/users.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.674 12.061v-.824c.974-.62 1.769-2.166 1.769-3.712 0-2.482 0-4.495-2.653-4.495-2.654 0-2.654 2.013-2.654 4.495 0 1.546.795 3.092 1.77 3.712v.824c-3 .277-5.307 1.942-5.307 3.955H15.98c0-2.013-2.307-3.678-5.307-3.955z"/><path d="M4.583 12.447c.764-.564 1.714-.993 2.76-1.255a5.714 5.714 0 0 1-.56-.921 6.306 6.306 0 0 1-.642-2.746c0-1.343 0-2.611.423-3.648.41-1.007 1.149-1.631 2.2-1.865C8.532.818 7.91.033 6.253.033c-2.653 0-2.653 2.013-2.653 4.495 0 1.546.794 3.092 1.769 3.712v.824C2.368 9.341.06 11.006.06 13.02h3.856c.2-.201.422-.393.666-.572z"/></svg>

admin/src/index.html

@@ -7,10 +7,10 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="taskana.ico">
 </head>
 
-<body class ="container-main">
+<body>
   <app-root></app-root>
 </body>
 

admin/src/polyfills.ts

@@ -19,19 +19,19 @@
  */
 
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
+import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
+import 'core-js/es6/object';
-// import 'core-js/es6/function';
+import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
+import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
+import 'core-js/es6/number';
-// import 'core-js/es6/math';
+import 'core-js/es6/math';
-// import 'core-js/es6/string';
+import 'core-js/es6/string';
-// import 'core-js/es6/date';
+import 'core-js/es6/date';
-// import 'core-js/es6/array';
+import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
+import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
+import 'core-js/es6/map';
-// import 'core-js/es6/set';
+import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.

admin/src/styles.css

@@ -1,7 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-.ng-valid[required], .ng-valid.required  {
-    border-left: 5px solid #42A948; /* green */
-}
-.ng-invalid:not(form)  {
-    border-left: 5px solid #a94442; /* red */
-}