diff options
Diffstat (limited to 'Timeline/ClientApp/src')
6 files changed, 113 insertions, 7 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..c17267c5 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,12 @@ +.item-id { + display: inline-block; + text-align: center; + background: skyblue; + border-radius: 0.2rem; + width: 1.2rem; + height: 1.2rem; +} + +mat-list-item { + margin: 10px; +} 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 0d005c83..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> - todo-list-page works! -</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 37de232b..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,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { TodoListService, WorkItem } from '../todo-list.service'; @Component({ selector: 'app-todo-list-page', @@ -7,7 +8,11 @@ import { Component, OnInit } from '@angular/core'; }) export class TodoListPageComponent implements OnInit { - constructor() { } + items: WorkItem[]; + + constructor(private todoService: TodoListService) { + todoService.getWorkItemList().subscribe(result => this.items = result); + } ngOnInit() { } diff --git a/Timeline/ClientApp/src/app/todo-list.service.spec.ts b/Timeline/ClientApp/src/app/todo-list.service.spec.ts new file mode 100644 index 00000000..529ba8cc --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list.service.spec.ts @@ -0,0 +1,12 @@ +import { TestBed } from '@angular/core/testing'; + +import { TodoListService } from './todo-list.service'; + +describe('TodoListServiceService', () => { + beforeEach(() => TestBed.configureTestingModule({})); + + it('should be created', () => { + const service: TodoListService = TestBed.get(TodoListService); + expect(service).toBeTruthy(); + }); +}); diff --git a/Timeline/ClientApp/src/app/todo-list.service.ts b/Timeline/ClientApp/src/app/todo-list.service.ts new file mode 100644 index 00000000..238919d3 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list.service.ts @@ -0,0 +1,68 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { switchMap, concatMap, map, toArray } from 'rxjs/operators'; + +interface WiqlWorkItemResult { + id: number; + url: string; +} + +interface WiqlResult { + workItems: WiqlWorkItemResult[]; +} + +interface WorkItemResult { + id: number; + fields: { [name: string]: any }; +} + +export interface WorkItem { + id: number; + title: string; +} + +@Injectable({ + providedIn: 'root' +}) +export class TodoListService { + + private username = 'crupest'; + private organization = 'crupest-web'; + private project = 'Timeline'; + private fieldId = 'System.Title'; + + + constructor(private client: HttpClient) { } + + private getAzureDevOpsPat(): Observable<string> { + return this.client.get('/api/TodoList/AzureDevOpsPat', { + headers: { + 'Accept': 'text/plain' + }, + responseType: 'text' + }); + } + + getWorkItemList(): Observable<WorkItem[]> { + return this.getAzureDevOpsPat().pipe( + switchMap( + pat => { + const headers = new HttpHeaders({ + 'Accept': 'application/json', + 'Authorization': `Basic ${btoa(this.username + ':' + pat)}` + }); + 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: headers }).pipe( + switchMap(result => result.workItems), + concatMap(result => this.client.get<WorkItemResult>(result.url, { headers: headers })), + map(result => <WorkItem>{ id: result.id, title: result.fields[this.fieldId] }), + toArray() + ); + } + ) + ); + } +} |