* headings

* prio icon
* summary shorten
* unused card component removed

.gitignore

@@ -1,6 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
+/semantic
 /dist
 /tmp
 /out-tsc

src/app/app.component.ts

@@ -3,29 +3,42 @@ import {Subscription} from "rxjs/Subscription";
 import {TimerObservable} from "rxjs/observable/TimerObservable";
 
 import {KanbanService} from "./kanban/shared/kanban.service";
+import {Router} from "@angular/router";
+
+const TIMER_JIRA_REFRESH = 60000;
+const TIMER_PAGE_SWITCH = 300000;
 
-const RENEW_TIMER_INITIAL = 300000;
-const RENEW_TIMER_PERIOD = 300000;
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  templateUrl: './app.component.html',
+    templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit, OnDestroy{
+export class AppComponent implements OnInit, OnDestroy {
-  title = 'app';
-  authRenewTimer: Subscription;
 
-  constructor( private kanbanService: KanbanService ) {}
+    reloadJiraIssueTimer: Subscription;
+    pageSwitchTimer: Subscription;
 
-  public ngOnInit() {
+    constructor(
-    let timer = TimerObservable.create(RENEW_TIMER_INITIAL, RENEW_TIMER_PERIOD);
+        private kanbanService: KanbanService,
-    this.authRenewTimer = timer.subscribe(() => {
+        private router: Router
-        this.kanbanService.reload();
+    ) {}
-    });
-  }
 
-  public ngOnDestroy() {
+    public ngOnInit() {
-    this.authRenewTimer.unsubscribe();
+        let timer1 = TimerObservable.create(TIMER_JIRA_REFRESH, TIMER_JIRA_REFRESH);
-  }
+        this.reloadJiraIssueTimer = timer1.subscribe(() => {
+            this.kanbanService.reload();
+        });
+        let timer2 = TimerObservable.create(TIMER_PAGE_SWITCH, TIMER_PAGE_SWITCH);
+        this.pageSwitchTimer = timer2.subscribe(() => {
+            // navigate to next page
+            // this.router.navigate();
+            console.log("pageSwitch");
+        });
+    }
+
+    public ngOnDestroy() {
+        this.reloadJiraIssueTimer.unsubscribe();
+        this.pageSwitchTimer.unsubscribe();
+    }
 }

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

@@ -1,12 +1,12 @@
 <div class="ui main fullwide-container">
     <div class="ui grid">
         <div app-kanban-entry-item class="four wide column"
-             [kanbanEntries]="kanbanBoard.inbox"></div>
+             rowHeading="INBOX" [kanbanEntries]="kanbanBoard.inbox"></div>
         <div app-kanban-entry-item class="four wide column" [ngClass]="inprogressWipClass"
-             [kanbanEntries]="kanbanBoard.inProgress"></div>
+             rowHeading="INPROGRESS" [kanbanEntries]="kanbanBoard.inProgress"></div>
         <div app-kanban-entry-item class="four wide column" [ngClass]="verificationWipClass"
-             [kanbanEntries]="kanbanBoard.verification"></div>
+             rowHeading="VERIFICATION" [kanbanEntries]="kanbanBoard.verification"></div>
         <div app-kanban-entry-item class="four wide column"
-             [kanbanEntries]="kanbanBoard.done"></div>
+             rowHeading="DÖNER" [kanbanEntries]="kanbanBoard.done"></div>
     </div>
 </div>

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

@@ -1,17 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,3 +1,4 @@
+<h1>{{rowHeading}}</h1>
 <div class="ui divided items">
     <div class="item" *ngFor="let kanbanEntry of kanbanEntries">
         <div class="content">
@@ -5,7 +6,7 @@
                 <div class="ui jira-avatar floated image">
                     <img src="{{avatarUrl(kanbanEntry.assignee?.avatar)}}">
                 </div>
-                <span [innerHTML]="kanbanEntry.summary|priorityColor"></span>
+                <span [innerHTML]="kanbanEntry.summary|shortenText|priorityColor:kanbanEntry.issuePriorityIcon" [title]="kanbanEntry.summary"></span>
             </div>
         </div>
     </div>

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

@@ -12,6 +12,7 @@ const DEFAULT_AVATAR = '/assets/riddler.png';
 })
 export class KanbanEntryItemComponent implements OnInit {
     @Input() kanbanEntries: Array<KanbanEntry>;
+    @Input() rowHeading: string = "";
 
     constructor() {}
 

src/app/kanban/kanban.module.ts

@@ -6,8 +6,8 @@ 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';
 import { PriorityColorPipe } from './shared/priority-color.pipe';
+import { ShortenTextPipe } from './shared/shorten-text.pipe';
 
 @NgModule({
     imports: [
@@ -17,8 +17,8 @@ import { PriorityColorPipe } from './shared/priority-color.pipe';
     declarations: [
         KanbanBoardComponent,
         KanbanEntryItemComponent,
-        KanbanEntryCardComponent,
         PriorityColorPipe,
+        ShortenTextPipe,
     ],
     providers: [
         KanbanService,

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

@@ -9,6 +9,8 @@ export class KanbanEntry {
     public issueType: JiraIssueType;
     public status: JiraStatus;
     public assignee: JiraAssignee;
+    public issuePriority: string
+    public issuePriorityIcon: string;
     public prio: number;
     public functionalAreas: Array<string>;
     public externalId: string;

src/app/kanban/shared/priority-color.pipe.ts

@@ -5,7 +5,7 @@ import {Pipe, PipeTransform} from '@angular/core';
 })
 export class PriorityColorPipe implements PipeTransform {
 
-    transform(value: any, args?: any): any {
+    transform(value: any, prioIcon: string = ""): any {
         let mhrMatch = /(\[.*mhr\])/ig;
         value = value.replace(mhrMatch, (fullMatch: string, mhrMatched: string) => {
             return `<span class="match-mhr">${mhrMatched}</span> `;
@@ -26,7 +26,7 @@ export class PriorityColorPipe implements PipeTransform {
         value = value.replace(xlMatch, (fullMatch: string, mhrMatched: string) => {
             return `<span class="match-xl">${mhrMatched}</span> `;
         });
-        return value;
+        return (prioIcon ? `<img class="prio-icon" src="${prioIcon}"> ` : "") + value;
     }
 
 }

src/app/kanban/shared/shorten-text.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ShortenTextPipe } from './shorten-text.pipe';
+
+describe('ShortenTextPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ShortenTextPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/kanban/shared/shorten-text.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'shortenText'
+})
+export class ShortenTextPipe implements PipeTransform {
+
+  transform(value: string, length: number = 120): any {
+    return value.length > length
+        ? (value.substring(0,length) + '...')
+        : value;
+  }
+
+}

src/styles.css

@@ -1,10 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
 body {
   background-color: #303030 !important;
-  color: #cccccc !important;
+  color: #eeeeee !important;
   margin-top: 1em !important;
   margin-bottom: 1em !important;
   overflow: hidden;
+  font-weight: bold !important;
 }
 
 .ui.fullwide-container {
@@ -14,7 +15,7 @@ body {
 
 .match-mhr {
   text-justify: none;
-  color: red;
+  color: mediumpurple;
 }
 
 .match-s {
@@ -29,7 +30,7 @@ body {
 
 .match-l {
   text-justify: none;
-  color: yellow;
+  color: #ffbf00;
 }
 
 .match-xl {
@@ -40,3 +41,8 @@ body {
 .over-wip {
   background-color: rgba(194,59,34, 0.3);
 }
+
+.prio-icon {
+  display: inline-block;
+  vertical-align: middle;
+}