* semantic ui added

* very basic kanban module implementation to show api operation

.angular-cli.json

@@ -19,9 +19,12 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "../semantic/dist/semantic.css"
+      ],
+      "scripts": [
+
       ],
-      "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

package.json

@@ -23,6 +23,7 @@
     "@angular/router": "^4.0.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.4.1",
+    "semantic-ui": "^2.2.11",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

src/app/app-routing.module.ts

@@ -1,10 +1,20 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import { KanbanService } from "./kanban/shared"
+import { KanbanBoardComponent } from "./kanban/kanban-board/kanban-board.component"
 
 const routes: Routes = [
     {
         path: '',
         children: []
+    },{
+        path: 'kanban',
+        children: [],
+        component: KanbanBoardComponent,
+        resolve: {
+            kanbanBoard: KanbanService,
+        },
     }
 ];
 
@@ -12,4 +22,5 @@ const routes: Routes = [
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -1,21 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.com/">Angular blog</a></h2>
-  </li>
-</ul>
-
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { KanbanModule } from './kanban/kanban.module';
 
 @NgModule({
   declarations: [
@@ -10,7 +11,8 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    KanbanModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/kanban/kanban-board/kanban-board.component.html

@@ -0,0 +1,13 @@
+<div class="ui main fullwide-container">
+    <div class="ui grid">
+        <div class="six wide column">
+            <app-kanban-entry-item [kanbanEntries]="kanbanBoard.inbox"></app-kanban-entry-item>
+        </div>
+        <div class="six wide column">
+            <app-kanban-entry-item [kanbanEntries]="kanbanBoard.inProgress"></app-kanban-entry-item>
+        </div>
+        <div class="four wide column">
+            <app-kanban-entry-item [kanbanEntries]="kanbanBoard.verification"></app-kanban-entry-item>
+        </div>
+    </div>
+</div>

src/app/kanban/kanban-board/kanban-board.component.spec.ts

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

src/app/kanban/kanban-board/kanban-board.component.ts

@@ -0,0 +1,27 @@
+import {Component, OnInit} from '@angular/core';
+import {Title} from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+
+import {
+    KanbanBoard
+} from "../shared";
+
+@Component({
+    selector: 'app-kanban-board',
+    templateUrl: './kanban-board.component.html',
+    styleUrls: ['./kanban-board.component.css']
+})
+export class KanbanBoardComponent implements OnInit {
+
+    public kanbanBoard: KanbanBoard = new KanbanBoard;
+
+    constructor(private titleService: Title,
+                private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        this.titleService.setTitle('TaurusXFT : Kanban board');
+        this.route.data.subscribe((data: { kanbanBoard: KanbanBoard }) => this.kanbanBoard = data.kanbanBoard);
+    }
+
+}

src/app/kanban/kanban-entry-card/kanban-entry-card.component.html

@@ -0,0 +1,17 @@
+<div class="ui card" *ngFor="let kanbanEntry of kanbanEntries">
+    <div class="ui tiny image">
+        <img src="{{avatarUrl(kanbanEntry.assignee?.avatar)}}">
+    </div>
+    <div class="content">
+        <a class="header">{{kanbanEntry.assignee?.name}}</a>
+        <div class="description">
+            {{kanbanEntry.summary}}
+        </div>
+    </div>
+    <div class="extra content">
+        <a>
+            <i class="user icon"></i>
+            22 Friends
+        </a>
+    </div>
+</div>

src/app/kanban/kanban-entry-card/kanban-entry-card.component.spec.ts

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

src/app/kanban/kanban-entry-card/kanban-entry-card.component.ts

@@ -0,0 +1,25 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {environment} from "../../../environments/environment";
+import {KanbanEntry} from "../shared/kanban-entry.model";
+
+@Component({
+    selector: 'app-kanban-entry-card',
+    templateUrl: './kanban-entry-card.component.html',
+    styleUrls: ['./kanban-entry-card.component.css']
+})
+export class KanbanEntryCardComponent implements OnInit {
+    @Input() kanbanEntries: Array<KanbanEntry>;
+
+    constructor() {}
+
+    ngOnInit() {}
+
+    public avatarUrl(avatar: string): string {
+        try {
+            return environment.apiUri + avatar;
+        } catch (e) {
+            return "";
+        }
+    }
+}

src/app/kanban/kanban-entry-item/kanban-entry-item.component.html

@@ -0,0 +1,16 @@
+<div class="ui divided items">
+    <div class="item" *ngFor="let kanbanEntry of kanbanEntries">
+        <div class="ui tiny image">
+            <img src="{{avatarUrl(kanbanEntry.assignee?.avatar)}}">
+        </div>
+        <div class="content">
+            <a class="header">{{kanbanEntry.key}}</a>
+            <div class="description">
+                <p>{{kanbanEntry.summary}}</p>
+            </div>
+            <div class="extra">
+                Additional Details
+            </div>
+        </div>
+    </div>
+</div>

src/app/kanban/kanban-entry-item/kanban-entry-item.component.spec.ts

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

src/app/kanban/kanban-entry-item/kanban-entry-item.component.ts

@@ -0,0 +1,25 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {environment} from "../../../environments/environment";
+import {KanbanEntry} from "../shared/kanban-entry.model";
+
+@Component({
+    selector: 'app-kanban-entry-item',
+    templateUrl: './kanban-entry-item.component.html',
+    styleUrls: ['./kanban-entry-item.component.css']
+})
+export class KanbanEntryItemComponent implements OnInit {
+    @Input() kanbanEntries: Array<KanbanEntry>;
+
+    constructor() {}
+
+    ngOnInit() {}
+
+    public avatarUrl(avatarPath: string): string {
+        try {
+            return environment.apiUri + avatarPath;
+        } catch (e) {
+            return "";
+        }
+    }
+}

src/app/kanban/kanban.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpModule } from "@angular/http";
+
+import { KanbanBoardComponent } from './kanban-board/kanban-board.component';
+
+import { KanbanService } from './shared/kanban.service';
+import { KanbanEntryItemComponent } from './kanban-entry-item/kanban-entry-item.component';
+import { KanbanEntryCardComponent } from './kanban-entry-card/kanban-entry-card.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        HttpModule,
+    ],
+    declarations: [
+        KanbanBoardComponent,
+        KanbanEntryItemComponent,
+        KanbanEntryCardComponent,
+    ],
+    providers: [
+        KanbanService,
+    ],
+    exports: [],
+})
+export class KanbanModule {
+}

src/app/kanban/shared/index.ts

@@ -0,0 +1,6 @@
+export * from './jira-assignee.model';
+export * from './jira-issue-type.model';
+export * from './jira-status.model';
+export * from './kanban-board.model';
+export * from './kanban-entry.model';
+export * from './kanban.service';

src/app/kanban/shared/jira-assignee.model.ts

@@ -0,0 +1,7 @@
+export class JiraAssignee {
+    public signum: string;
+    public name: string;
+    public email: string;
+    public avatar: string;
+    public active: boolean;
+}

src/app/kanban/shared/jira-issue-type.model.ts

@@ -0,0 +1,5 @@
+export class JiraIssueType {
+    public name: string;
+    public description: string;
+    public icon: string;
+}

src/app/kanban/shared/jira-status.model.ts

@@ -0,0 +1,4 @@
+export class JiraStatus {
+    public name: string;
+    public color: string;
+}

src/app/kanban/shared/kanban-board.model.ts

@@ -0,0 +1,8 @@
+import {KanbanEntry} from "./kanban-entry.model";
+
+export class KanbanBoard {
+    public inbox: Array<KanbanEntry>;
+    public inProgress: Array<KanbanEntry>;
+    public verification: Array<KanbanEntry>;
+    public done: Array<KanbanEntry>;
+}

src/app/kanban/shared/kanban-entry.model.ts

@@ -0,0 +1,22 @@
+import {JiraIssueType} from "./jira-issue-type.model";
+import {JiraStatus} from "./jira-status.model";
+import {JiraAssignee} from "./jira-assignee.model";
+
+export class KanbanEntry {
+    public id: number;
+    public key: string;
+    public summary: string;
+    public issueType: JiraIssueType;
+    public status: JiraStatus;
+    public assignee: JiraAssignee;
+    public prio: number;
+    public functionalAreas: Array<string>;
+    public externalId: string;
+    public externalLink: string;
+    public project: string;
+    public mhwebStatus: string;
+    public mhwebHot: boolean;
+    public mhwebExternal: boolean;
+    public team: string;
+    public answerCode: string;
+}

src/app/kanban/shared/kanban.service.spec.ts

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

src/app/kanban/shared/kanban.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers } from "@angular/http";
+import 'rxjs/Rx';
+import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+import { environment } from '../../../environments/environment';
+import {
+    KanbanBoard
+} from '../shared';
+
+@Injectable()
+export class KanbanService {
+    private url = environment.apiUri + '/api/kanban';
+
+    constructor(private httpService: Http) {}
+
+    public getList(): Observable<KanbanBoard> {
+        return this.httpService.get(this.url).map(res => <KanbanBoard>res.json())
+    }
+
+    public resolve(route: ActivatedRouteSnapshot): Promise<KanbanBoard> {
+        return this.getList().toPromise().then(result => result ? result : false);
+    }
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+    production: true,
+    apiUri: "http://ttt-api.tsp.eth.ericsson.se/taurus-api",
 };

src/environments/environment.ts

@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+    production: false,
+    apiUri: "http://localhost:8080",
 };

src/index.html

@@ -9,6 +9,15 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+  <app-root>
+    <div class="ui main container">
+      <div class="ui visible massive floating icon message">
+        <i class="notched circle loading icon"></i>
+        <div class="content">
+          <div class="header">Loading ...</div>
+        </div>
+      </div>
+    </div>
+  </app-root>
 </body>
 </html>

src/styles.css

@@ -1 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+  background-color: #FFFFFF;
+}
+
+.ui.fullwide-container {
+  margin-left: 1em;
+  margin-right: 1em;
+}