diff options
Diffstat (limited to 'Timeline/ClientApp/src')
5 files changed, 32 insertions, 10 deletions
diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts index e1f45136..3247cf92 100644 --- a/Timeline/ClientApp/src/app/app.module.ts +++ b/Timeline/ClientApp/src/app/app.module.ts @@ -4,7 +4,10 @@ import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule } from '@angular/material'; +import { + MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, MatListModule, + MatProgressBarModule, MatCardModule +} from '@angular/material'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; @@ -21,10 +24,10 @@ import { TodoListPageComponent } from './todo-list-page/todo-list-page.component HttpClientModule, FormsModule, BrowserAnimationsModule, - MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, + MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, MatListModule, MatProgressBarModule, MatCardModule, RouterModule.forRoot([ { path: '', component: HomeComponent, pathMatch: 'full' }, - { path: 'todo', component: TodoListPageComponent} + { path: 'todo', component: TodoListPageComponent } ]) ], providers: [], 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 e69de29b..43bd26d8 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 @@ -0,0 +1,8 @@ +.item-id { + display: inline-block; + text-align: center; + background: skyblue; + border-radius: 0.2rem; + width: 1.2rem; + height: 1.2rem; +} 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 6287c14e..3a80e4eb 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 @@ -1,3 +1,9 @@ -<p *ngFor="let item of items"> - {{item}} -</p> +<mat-progress-bar *ngIf="!items" mode="indeterminate"></mat-progress-bar> + +<mat-list> + <mat-list-item *ngFor="let item of items"> + <mat-card> + <span class="item-id">{{item.id}}</span> {{item.title}} + </mat-card> + </mat-list-item> +</mat-list> 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 6037e1ea..722ecbdc 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 @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { TodoListService } from '../todo-list.service'; +import { TodoListService, WorkItem } from '../todo-list.service'; @Component({ selector: 'app-todo-list-page', @@ -8,7 +8,7 @@ import { TodoListService } from '../todo-list.service'; }) export class TodoListPageComponent implements OnInit { - items: string[]; + items: WorkItem[]; constructor(private todoService: TodoListService) { todoService.getWorkItemList().subscribe(result => this.items = result); diff --git a/Timeline/ClientApp/src/app/todo-list.service.ts b/Timeline/ClientApp/src/app/todo-list.service.ts index e92a11c9..b1bc5ff3 100644 --- a/Timeline/ClientApp/src/app/todo-list.service.ts +++ b/Timeline/ClientApp/src/app/todo-list.service.ts @@ -17,6 +17,11 @@ interface WorkItemResult { fields: { [name: string]: any }; } +export interface WorkItem { + id: number; + title: string; +} + @Injectable({ providedIn: 'root' }) @@ -37,13 +42,13 @@ export class TodoListService { }); } - getWorkItemList(): Observable<string[]> { + getWorkItemList(): Observable<WorkItem[]> { return this.client.post<WiqlResult>(`https://dev.azure.com/${this.organization}/${this.project}/_apis/wit/wiql?api-version=5.0`, { query: 'SELECT [System.Id] FROM workitems WHERE [System.TeamProject] = @project' }, { headers: this.headers }).pipe( switchMap(result => result.workItems), concatMap(result => this.client.get<WorkItemResult>(result.url, {headers: this.headers})), - map(result => <string>(result.fields[this.fieldId])), + map(result => <WorkItem>{ id: result.id, title: result.fields[this.fieldId] }), toArray() ); } |