Merge pull request #2 from crupest/migrate-todo

Migrate todo page from Azure DevOps WorkItems to Github Issues.

4 files changed, 20 insertions, 32 deletions

diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.css b/Timeline/ClientApp/src/app/todo-item/todo-item.component.css
index ef952a04..dcf25fd8 100644
--- a/Timeline/ClientApp/src/app/todo-item/todo-item.component.css
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.css
@@ -4,18 +4,16 @@
   overflow: hidden;
 }
 
+.item-body-box {
+  margin: 5px!important
+}
+
 .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;
 }
diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.html b/Timeline/ClientApp/src/app/todo-item/todo-item.component.html
index bf080e83..6f76e73b 100644
--- a/Timeline/ClientApp/src/app/todo-item/todo-item.component.html
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.html
@@ -1,9 +1,7 @@
 <mat-card class="mat-elevation-z2 item-card">
-  <span class="item-color-block" [class.color-block-completed]="item.isCompleted" [class.color-block-resolving]="!item.isCompleted"></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>
+  <span class="item-color-block" [class.color-block-closed]="item.isClosed" [class.color-block-open]="!item.isClosed"></span>
+  <div class="mat-h3 item-body-box">
+    <span class="item-title">{{ item.number }}. {{ item.title }}</span>
     <a mat-icon-button class="item-detail-button" [href]="item.detailUrl">
       <mat-icon>arrow_forward</mat-icon>
     </a>
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
index 277eca23..520b6136 100644
--- a/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TodoItemComponent } from './todo-item.component';
-import { WorkItem } from '../todo-list-page/todo-list.service';
+import { TodoItem } from '../todo-list-page/todo-list.service';
 import { By } from '@angular/platform-browser';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
@@ -9,7 +9,12 @@ describe('TodoItemComponent', () => {
   let component: TodoItemComponent;
   let fixture: ComponentFixture<TodoItemComponent>;
 
-  let mockWorkItem: WorkItem;
+  const mockTodoItem: TodoItem = {
+    number: 1,
+    title: 'Title',
+    isClosed: true,
+    detailUrl: '/detail',
+  };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -19,17 +24,9 @@ describe('TodoItemComponent', () => {
   }));
 
   beforeEach(() => {
-    mockWorkItem = {
-      id: 0,
-      title: 'Title',
-      isCompleted: true,
-      detailUrl: '/detail',
-      iconUrl: '/icon'
-    };
-
     fixture = TestBed.createComponent(TodoItemComponent);
     component = fixture.componentInstance;
-    component.item = mockWorkItem;
+    component.item = mockTodoItem;
     fixture.detectChanges();
   });
 
@@ -37,17 +34,13 @@ describe('TodoItemComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should set icon', () => {
-    expect(fixture.debugElement.query(By.css('img.item-icon')).properties['src']).toBe(mockWorkItem.iconUrl);
-  });
-
   it('should set title', () => {
     expect((fixture.debugElement.query(By.css('span.item-title')).nativeElement as HTMLSpanElement).textContent).toBe(
-      mockWorkItem.id + '. ' + mockWorkItem.title
+      mockTodoItem.number + '. ' + mockTodoItem.title
     );
   });
 
   it('should set detail link', () => {
-    expect(fixture.debugElement.query(By.css('a.item-detail-button')).properties['href']).toBe(mockWorkItem.detailUrl);
+    expect(fixture.debugElement.query(By.css('a.item-detail-button')).properties['href']).toBe(mockTodoItem.detailUrl);
   });
 });
diff --git a/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts b/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts
index 27d57e28..325812f1 100644
--- a/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts
+++ b/Timeline/ClientApp/src/app/todo-item/todo-item.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { WorkItem } from '../todo-list-page/todo-list.service';
+import { Component, Input } from '@angular/core';
+import { TodoItem } from '../todo-list-page/todo-list.service';
 
 @Component({
   selector: 'app-todo-item',
@@ -8,7 +8,6 @@ import { WorkItem } from '../todo-list-page/todo-list.service';
 })
 export class TodoItemComponent {
 
-  @Input() item: WorkItem;
-
+  @Input() item: TodoItem;
 
 }