diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/todo')
14 files changed, 0 insertions, 407 deletions
diff --git a/Timeline/ClientApp/src/app/todo/todo-item.ts b/Timeline/ClientApp/src/app/todo/todo-item.ts deleted file mode 100644 index b19d8335..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-item.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface TodoItem { - number: number; - title: string; - isClosed: boolean; - detailUrl: string; -} diff --git a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.css b/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.css deleted file mode 100644 index dcf25fd8..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.css +++ /dev/null @@ -1,25 +0,0 @@ -.item-card { - padding: 0; - display: flex; - overflow: hidden; -} - -.item-body-box { - margin: 5px!important -} - -.item-color-block { - width: 15px; - align-self: stretch; - flex: 0 0 auto; -} - -.item-title { - vertical-align: middle; -} - -.item-detail-button { - width: unset; - height: unset; - line-height: unset; -} diff --git a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.html b/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.html deleted file mode 100644 index 6f76e73b..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.html +++ /dev/null @@ -1,9 +0,0 @@ -<mat-card class="mat-elevation-z2 item-card"> - <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> - </div> -</mat-card> diff --git a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.spec.ts b/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.spec.ts deleted file mode 100644 index 239ffc42..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.spec.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { TodoItem } from '../todo-item'; -import { TodoItemComponent } from '../todo-item/todo-item.component'; - -describe('TodoItemComponent', () => { - let component: TodoItemComponent; - let fixture: ComponentFixture<TodoItemComponent>; - - const mockTodoItem: TodoItem = { - number: 1, - title: 'Title', - isClosed: true, - detailUrl: '/detail', - }; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [TodoItemComponent], - schemas: [NO_ERRORS_SCHEMA] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TodoItemComponent); - component = fixture.componentInstance; - component.item = mockTodoItem; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should set title', () => { - expect((fixture.debugElement.query(By.css('span.item-title')).nativeElement as HTMLSpanElement).textContent).toBe( - mockTodoItem.number + '. ' + mockTodoItem.title - ); - }); - - it('should set detail link', () => { - expect(fixture.debugElement.query(By.css('a.item-detail-button')).properties['href']).toBe(mockTodoItem.detailUrl); - }); -}); diff --git a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.ts b/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.ts deleted file mode 100644 index b5c51229..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-item/todo-item.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { TodoItem } from '../todo-item'; - -@Component({ - selector: 'app-todo-item', - templateUrl: './todo-item.component.html', - styleUrls: ['./todo-item.component.css', '../todo-list-color-block.css'] -}) -export class TodoItemComponent { - @Input() item!: TodoItem; -} diff --git a/Timeline/ClientApp/src/app/todo/todo-list-color-block.css b/Timeline/ClientApp/src/app/todo/todo-list-color-block.css deleted file mode 100644 index 5e0d4ba9..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-list-color-block.css +++ /dev/null @@ -1,7 +0,0 @@ -.color-block-open { - background: red; -} - -.color-block-closed { - background: green; -} diff --git a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.css b/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.css deleted file mode 100644 index 754b786e..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.css +++ /dev/null @@ -1,39 +0,0 @@ -.align-self-bottom { - align-self: flex-end; -} - -.item-box { - display: flex; - width: 100%; - box-sizing: border-box; -} - -.first-item-box { - justify-content: space-between; - padding: 0 0 5px 5px; -} - -.non-first-item-box { - padding: 5px; -} - -.space { - flex: 1 4 20px; -} - -.sample-box { - box-sizing: border-box; - align-self: flex-start; -} - -.sample-item { - display: flex; - align-items: center; -} - -.sample-color-block { - border-radius: 0.2em; - width: 1em; - height: 1em; - margin-right: 2px; -} diff --git a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.html b/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.html deleted file mode 100644 index 50180fe8..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.html +++ /dev/null @@ -1,21 +0,0 @@ -<mat-progress-bar *ngIf="!isLoadCompleted" mode="indeterminate"></mat-progress-bar> - -<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" [class.non-first-item-box]="i !== 0"> - <app-todo-item @itemEnter [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-item"> - <span class="sample-color-block color-block-open"></span> - <span> means working now.</span> - </div> - <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> - </div> - </mat-list-item> -</mat-list> diff --git a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.spec.ts b/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.spec.ts deleted file mode 100644 index 16c77376..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.spec.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -import { Observable, from } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -import { TodoItem } from '../todo-item'; -import { TodoPageComponent } from './todo-page.component'; -import { TodoService } from '../todo-service/todo.service'; - - -@Component({ - /* tslint:disable-next-line:component-selector*/ - selector: 'mat-progress-bar', - template: '' -}) -class MatProgressBarStubComponent { } - -function asyncArray<T>(data: T[]): Observable<T> { - return from(data).pipe(delay(0)); -} - -describe('TodoListPageComponent', () => { - let component: TodoPageComponent; - let fixture: ComponentFixture<TodoPageComponent>; - - const mockTodoItems: TodoItem[] = [ - { - number: 0, - title: 'Test title 1', - isClosed: true, - detailUrl: 'test_url1' - }, - { - number: 1, - title: 'Test title 2', - isClosed: false, - detailUrl: 'test_url2' - } - ]; - - beforeEach(async(() => { - const mockTodoService: jasmine.SpyObj<TodoService> = jasmine.createSpyObj('TodoService', ['getWorkItemList']); - - mockTodoService.getWorkItemList.and.returnValue(asyncArray(mockTodoItems)); - - TestBed.configureTestingModule({ - declarations: [TodoPageComponent, MatProgressBarStubComponent], - imports: [NoopAnimationsModule], - providers: [{ provide: TodoService, useValue: mockTodoService }], - schemas: [NO_ERRORS_SCHEMA] - }).compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TodoPageComponent); - component = fixture.componentInstance; - }); - - it('should create', () => { - fixture.detectChanges(); - expect(component).toBeTruthy(); - }); - - it('should show progress bar during loading', () => { - fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('mat-progress-bar'))).toBeTruthy(); - }); - - it('should hide progress bar after loading', fakeAsync(() => { - fixture.detectChanges(); - tick(); - fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('mat-progress-bar'))).toBeFalsy(); - })); -}); diff --git a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.ts b/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.ts deleted file mode 100644 index 7b658228..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-page/todo-page.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { trigger, transition, style, animate } from '@angular/animations'; - - -import { TodoItem } from '../todo-item'; -import { TodoService } from '../todo-service/todo.service'; - -@Component({ - selector: 'app-todo-page', - templateUrl: './todo-page.component.html', - styleUrls: ['./todo-page.component.css', '../todo-list-color-block.css'], - animations: [ - trigger('itemEnter', [ - transition(':enter', [ - style({ - transform: 'translateX(-100%) translateX(-20px)' - }), - animate('400ms ease-out', style({ - transform: 'none' - })) - ]) - ]) - ] -}) -export class TodoPageComponent implements OnInit { - - items: TodoItem[] = []; - isLoadCompleted = false; - - constructor(private todoService: TodoService) { - } - - ngOnInit() { - this.todoService.getWorkItemList().subscribe({ - next: result => this.items.push(result), - complete: () => { this.isLoadCompleted = true; } - }); - } -} diff --git a/Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts b/Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts deleted file mode 100644 index 3971617c..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const githubBaseUrl = 'https://api.github.com/repos/crupest/Timeline'; - -export interface IssueResponseItem { - number: number; - title: string; - state: string; - html_url: string; - pull_request?: any; -} - -export type IssueResponse = IssueResponseItem[]; diff --git a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts b/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts deleted file mode 100644 index 679dc8b7..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { toArray } from 'rxjs/operators'; - -import { TodoItem } from '../todo-item'; -import { TodoService } from './todo.service'; -import { IssueResponse, githubBaseUrl } from './http-entities'; - - -describe('TodoService', () => { - beforeEach(() => TestBed.configureTestingModule({ - imports: [HttpClientTestingModule] - })); - - it('should be created', () => { - const service: TodoService = TestBed.get(TodoService); - expect(service).toBeTruthy(); - }); - - it('should work well', () => { - const service: TodoService = TestBed.get(TodoService); - - const mockIssueList: IssueResponse = [{ - number: 1, - title: 'Issue title 1', - state: 'open', - html_url: 'test_url1' - }, { - number: 2, - title: 'Issue title 2', - state: 'closed', - html_url: 'test_url2', - pull_request: {} - }]; - - const mockTodoItemList: TodoItem[] = [{ - number: 1, - title: 'Issue title 1', - isClosed: false, - detailUrl: 'test_url1' - }]; - - service.getWorkItemList().pipe(toArray()).subscribe(data => { - expect(data).toEqual(mockTodoItemList); - }); - - const httpController: HttpTestingController = TestBed.get(HttpTestingController); - - httpController.expectOne(request => request.url === githubBaseUrl + '/issues' && - request.params.get('state') === 'all').flush(mockIssueList); - - httpController.verify(); - }); -}); diff --git a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts b/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts deleted file mode 100644 index df63636d..00000000 --- a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { Observable, from } from 'rxjs'; -import { switchMap, map, filter } from 'rxjs/operators'; - -import { IssueResponse, githubBaseUrl } from './http-entities'; -import { TodoItem } from '../todo-item'; - - -@Injectable({ - providedIn: 'root' -}) -export class TodoService { - - constructor(private client: HttpClient) { } - - getWorkItemList(): Observable<TodoItem> { - return this.client.get<IssueResponse>(`${githubBaseUrl}/issues`, { - params: { - state: 'all' - } - }).pipe( - switchMap(result => from(result)), - filter(result => result.pull_request === undefined), // filter out pull requests. - map(result => <TodoItem>{ - number: result.number, - title: result.title, - isClosed: result.state === 'closed', - detailUrl: result.html_url - }) - ); - } -} diff --git a/Timeline/ClientApp/src/app/todo/todo.module.ts b/Timeline/ClientApp/src/app/todo/todo.module.ts deleted file mode 100644 index 5bcfefbd..00000000 --- a/Timeline/ClientApp/src/app/todo/todo.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { MatListModule, MatIconModule, MatCardModule, MatProgressBarModule, MatButtonModule } from '@angular/material'; -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { TodoItemComponent } from './todo-item/todo-item.component'; -import { TodoPageComponent } from './todo-page/todo-page.component'; - -@NgModule({ - declarations: [ - TodoItemComponent, - TodoPageComponent - ], - imports: [ - CommonModule, HttpClientModule, BrowserAnimationsModule, - MatListModule, MatCardModule, MatIconModule, MatProgressBarModule, MatButtonModule, - RouterModule.forChild([ - { path: 'todo', component: TodoPageComponent } - ]) - ], - exports: [ - RouterModule - ] -}) -export class TodoModule { } |