Merged PR 6: Add icon of todo list and redesign it.

Related work items: #1, #3

13 files changed, 163 insertions, 67 deletions

diff --git a/Timeline/ClientApp/.prettierrc.json b/Timeline/ClientApp/.prettierrc.json
new file mode 100644
index 00000000..30371183
--- /dev/null
+++ b/Timeline/ClientApp/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "printWidth": 140
+}
diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts
index 3247cf92..86511be8 100644
--- a/Timeline/ClientApp/src/app/app.module.ts
+++ b/Timeline/ClientApp/src/app/app.module.ts
@@ -12,12 +12,14 @@ import {
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { TodoListPageComponent } from './todo-list-page/todo-list-page.component';
+import { TodoItemComponent } from './todo-item/todo-item.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
-    TodoListPageComponent
+    TodoListPageComponent,
+    TodoItemComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.css b/Timeline/ClientApp/src/app/todo-item/todo-item.component.css
new file mode 100644
index 00000000..ef952a04
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.css
@@ -0,0 +1,27 @@
+.item-card {
+  padding: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.item-color-block {
+  width: 15px;
+  align-self: stretch;
+  flex: 0 0 auto;
+}
+
+.item-icon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: -0.25em;
+}
+
+.item-title {
+  vertical-align: middle;
+}
+
+.item-detail-button {
+  width: unset;
+  height: unset;
+  line-height: unset;
+}
diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.html b/Timeline/ClientApp/src/app/todo-item/todo-item.component.html
new file mode 100644
index 00000000..624586cb
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.html
@@ -0,0 +1,11 @@
+<mat-card class="mat-elevation-z2 item-card">
+  <span class="item-color-block" [class.color-block-closed]="item.closed" [class.color-block-open]="!item.closed"></span>
+  <!-- Do not move the margin style to class because there is some preset classes on mat-card children making it invalid. -->
+  <div class="mat-h3 item-body-box" style="margin: 5px;">
+    <img class="item-icon" [src]="item.iconUrl" />
+    <span class="item-title">{{ item.id }}. {{ item.title }}</span>
+    <a mat-icon-button class="item-detail-button" [href]="item.detailUrl">
+      <mat-icon>arrow_forward</mat-icon>
+    </a>
+  </div>
+</mat-card>
diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts b/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts
new file mode 100644
index 00000000..7ec7d768
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoItemComponent } from './todo-item.component';
+
+describe('TodoItemComponent', () => {
+  let component: TodoItemComponent;
+  let fixture: ComponentFixture<TodoItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts b/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts
new file mode 100644
index 00000000..27d57e28
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { WorkItem } from '../todo-list-page/todo-list.service';
+
+@Component({
+  selector: 'app-todo-item',
+  templateUrl: './todo-item.component.html',
+  styleUrls: ['./todo-item.component.css', '../todo-list-page/todo-list-color-block.css']
+})
+export class TodoItemComponent {
+
+  @Input() item: WorkItem;
+
+
+}
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css
new file mode 100644
index 00000000..5e0d4ba9
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css
@@ -0,0 +1,7 @@
+.color-block-open {
+  background: red;
+}
+
+.color-block-closed {
+  background: green;
+}
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
index 89a0f0ce..754b786e 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
@@ -5,34 +5,20 @@
 .item-box {
   display: flex;
   width: 100%;
-  padding: 5px;
   box-sizing: border-box;
 }
 
 .first-item-box {
   justify-content: space-between;
+  padding: 0 0 5px 5px;
 }
 
-.item-id {
-  display: inline-block;
-  text-align: center;
-  border-radius: 0.2rem;
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.item-id-open {
-  background: red;
-}
-
-.item-id-closed {
-  background: green;
+.non-first-item-box {
+  padding: 5px;
 }
 
-.item-title {
-  margin-left: 5px;
-  color: black;
-  text-decoration: none;
+.space {
+  flex: 1 4 20px;
 }
 
 .sample-box {
@@ -40,12 +26,12 @@
   align-self: flex-start;
 }
 
-.sample-container {
+.sample-item {
   display: flex;
   align-items: center;
 }
 
-.item-id-sample {
+.sample-color-block {
   border-radius: 0.2em;
   width: 1em;
   height: 1em;
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
index 4e1aa2f1..3b4809ae 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
@@ -2,18 +2,17 @@
 
 <mat-list>
   <mat-list-item *ngFor="let item of items; let i = index" style="height:unset;">
-    <div class="item-box" [class.first-item-box]="i === 0">
-      <mat-card class="mat-elevation-z2" [class.align-self-bottom]="i === 0">
-        <span class="item-id" [class.item-id-closed]="item.closed"
-          [class.item-id-open]="!item.closed">{{item.id}}</span>
-        <a class="mat-h3 item-title" [href]="item.detailUrl">{{item.title}}</a>
-      </mat-card>
+    <div class="item-box" [class.first-item-box]="i === 0" [class.non-first-item-box]="i !== 0">
+      <app-todo-item [class.align-self-bottom]="i === 0" [item]="item"></app-todo-item>
+      <div class="space"></div>
       <div class="sample-box" *ngIf="i === 0">
-        <div class="mat-caption sample-container">
-          <span class="item-id-sample item-id-open"></span> means working now.
+        <div class="mat-caption sample-item">
+          <span class="sample-color-block color-block-open"></span>
+          <span> means working now.</span>
         </div>
-        <div class="mat-caption sample-container">
-          <span class="item-id-sample item-id-closed"></span> means completed.
+        <div class="mat-caption sample-item">
+          <span class="sample-color-block color-block-closed"></span>
+          <span> means completed.</span>
         </div>
         <div class="mat-caption">click on item to see details.</div>
       </div>
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts
index 2da74002..9543f7ad 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts
@@ -30,9 +30,9 @@ describe('TodoListPageComponent', () => {
     const todoListService: jasmine.SpyObj<TodoListService> = jasmine.createSpyObj('TodoListService', ['getWorkItemList']);
 
     mockWorkItems = [{
-      id: 0, title: 'Test title 1', closed: true, detailUrl: 'https://test.org/workitems/0'
+      id: 0, title: 'Test title 1', closed: true, detailUrl: 'https://test.org/workitems/0', iconUrl: 'https://test.org/icon/0'
     }, {
-      id: 1, title: 'Test title 2', closed: false, detailUrl: 'https://test.org/workitems/1'
+      id: 1, title: 'Test title 2', closed: false, detailUrl: 'https://test.org/workitems/1', iconUrl: 'https://test.org/icon/1'
     }];
 
     todoListService.getWorkItemList.and.returnValue(asyncData(mockWorkItems));
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
index 06f49923..e58cca7d 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
@@ -4,7 +4,7 @@ import { TodoListService, WorkItem } from './todo-list.service';
 @Component({
   selector: 'app-todo-list-page',
   templateUrl: './todo-list-page.component.html',
-  styleUrls: ['./todo-list-page.component.css']
+  styleUrls: ['./todo-list-page.component.css', './todo-list-color-block.css']
 })
 export class TodoListPageComponent implements OnInit {
 
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.spec.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.spec.ts
index 3ed4e004..13bae5be 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.spec.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.spec.ts
@@ -1,7 +1,10 @@
 import { TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 
-import { TodoListService, WorkItem, AzureDevOpsAccessInfo, WiqlResult, WiqlWorkItemResult, WorkItemResult } from './todo-list.service';
+import {
+  TodoListService, WorkItem, AzureDevOpsAccessInfo,
+  WiqlResult, WiqlWorkItemResult, WorkItemResult, WorkItemTypeResult
+} from './todo-list.service';
 
 
 describe('TodoListServiceService', () => {
@@ -26,20 +29,17 @@ describe('TodoListServiceService', () => {
       project: 'testproject'
     };
 
-    const generateDetailUrl = (id: number) =>
-     `https://dev.azure.com/${mockAccessInfo.organization}/${mockAccessInfo.project}/_workitems/edit/${id}/`;
-
-    const mockWorkItems: WorkItem[] = [{
-      id: 0,
-      title: 'Test work item 1',
-      closed: true,
-      detailUrl: generateDetailUrl(0)
-    }, {
-      id: 1,
-      title: 'Test work item 2',
-      closed: false,
-      detailUrl: generateDetailUrl(1)
-    }];
+    const baseUrl = `https://dev.azure.com/${mockAccessInfo.organization}/${mockAccessInfo.project}/`;
+
+    const mockWorkItems: WorkItem[] = Array.from({ length: 2 }, (_, i) => <WorkItem>{
+      id: i,
+      title: 'Test work item ' + i,
+      closed: i === 0,
+      detailUrl: `${baseUrl}_workitems/edit/${i}/`,
+      iconUrl: `${baseUrl}_api/wit/icon/${i}`,
+    });
+
+    const workItemTypeMap = new Map<WorkItem, string>(Array.from(mockWorkItems, v => <[WorkItem, string]>[v, 'type' + v.id]));
 
     service.getWorkItemList().subscribe(data => {
       expect(data).toEqual(mockWorkItems);
@@ -47,31 +47,27 @@ describe('TodoListServiceService', () => {
 
     const httpController: HttpTestingController = TestBed.get(HttpTestingController);
 
-
-
     httpController.expectOne('/api/TodoPage/AzureDevOpsAccessInfo').flush(mockAccessInfo);
 
-    const mockWiqlWorkItems: WiqlWorkItemResult[] = [{
-      id: 0,
-      url: `https://dev.azure.com/${mockAccessInfo.organization}/${mockAccessInfo.project}/_apis/wit/workItems/0`
-    }, {
-      id: 1,
-      url: `https://dev.azure.com/${mockAccessInfo.organization}/${mockAccessInfo.project}/_apis/wit/workItems/1`
-    }];
+    const mockWiqlWorkItems: WiqlWorkItemResult[] = Array.from(mockWorkItems, v => <WiqlWorkItemResult>{
+      id: v.id,
+      url: `${baseUrl}_apis/wit/workItems/${v.id}`
+    });
 
     const authorizationHeader = 'Basic ' + btoa(mockAccessInfo.username + ':' + mockAccessInfo.personalAccessToken);
 
     httpController.expectOne(req =>
-      req.url === `https://dev.azure.com/${mockAccessInfo.organization}/${mockAccessInfo.project}/_apis/wit/wiql?api-version=5.0` &&
+      req.url === `${baseUrl}_apis/wit/wiql?api-version=5.0` &&
       req.headers.get('Authorization') === authorizationHeader
     ).flush(<WiqlResult>{ workItems: mockWiqlWorkItems });
 
-    function mapWorkItemToResult(workItem: WorkItem): WorkItemResult {
+    function mapWorkItemToResult(mockWorkItem: WorkItem): WorkItemResult {
       return {
-        id: workItem.id,
+        id: mockWorkItem.id,
         fields: {
-          [TodoListService.titleFieldName]: workItem.title,
-          [TodoListService.stateFieldName]: (workItem.closed ? 'Closed' : 'Active')
+          [TodoListService.titleFieldName]: mockWorkItem.title,
+          [TodoListService.stateFieldName]: (mockWorkItem.closed ? 'Closed' : 'Active'),
+          [TodoListService.typeFieldName]: workItemTypeMap.get(mockWorkItem)
         }
       };
     }
@@ -81,6 +77,15 @@ describe('TodoListServiceService', () => {
         req.url === mockWiqlWorkItems[i].url &&
         req.headers.get('Authorization') === authorizationHeader
       ).flush(mapWorkItemToResult(mockWorkItems[i]));
+
+      httpController.expectOne(req =>
+        req.url === `${baseUrl}_apis/wit/workitemtypes/${encodeURIComponent(workItemTypeMap.get(mockWorkItems[i]))}?api-version=5.0` &&
+        req.headers.get('Authorization') === authorizationHeader
+      ).flush(<WorkItemTypeResult>{
+        icon: {
+          url: mockWorkItems[i].iconUrl
+        }
+      });
     }
   });
 });
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.ts
index ed28bc59..17ded67b 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.ts
@@ -24,12 +24,18 @@ export interface WorkItemResult {
   fields: { [name: string]: any };
 }
 
+export interface WorkItemTypeResult {
+  icon: {
+    url: string
+  };
+}
 
 export interface WorkItem {
   id: number;
   title: string;
   closed: boolean;
   detailUrl: string;
+  iconUrl: string;
 }
 
 @Injectable({
@@ -39,6 +45,7 @@ export class TodoListService {
 
   public static titleFieldName = 'System.Title';
   public static stateFieldName = 'System.State';
+  public static typeFieldName = 'System.WorkItemType';
 
   constructor(private client: HttpClient) { }
 
@@ -46,6 +53,14 @@ export class TodoListService {
     return this.client.get<AzureDevOpsAccessInfo>('/api/TodoPage/AzureDevOpsAccessInfo');
   }
 
+  private getItemIconUrl(baseUrl: string, headers: HttpHeaders, type: string): Observable<string> {
+    return this.client.get<WorkItemTypeResult>(`${baseUrl}_apis/wit/workitemtypes/${encodeURIComponent(type)}?api-version=5.0`, {
+      headers: headers
+    }).pipe(
+      map(result => result.icon.url)
+    );
+  }
+
   getWorkItemList(): Observable<WorkItem[]> {
     return this.getAzureDevOpsAccessInfo().pipe(
       switchMap(
@@ -61,12 +76,14 @@ export class TodoListService {
             }, { headers: headers }).pipe(
               switchMap(result => result.workItems),
               concatMap(result => this.client.get<WorkItemResult>(result.url, { headers: headers })),
-              map(result => <WorkItem>{
+              concatMap(result => this.getItemIconUrl(baseUrl, headers, result.fields[TodoListService.typeFieldName]).pipe(
+                map(iconResult => <WorkItem>{
                 id: result.id,
                 title: <string>result.fields[TodoListService.titleFieldName],
                 closed: ((<string>result.fields[TodoListService.stateFieldName]).toLowerCase() === 'closed'),
-                detailUrl: `${baseUrl}_workitems/edit/${result.id}/`
-              }),
+                detailUrl: `${baseUrl}_workitems/edit/${result.id}/`,
+                iconUrl: iconResult
+              }))),
               toArray()
             );
         }