Task chaining + some refactoring

web/angular/src/app/project-select/project-select.component.css

@@ -0,0 +1,3 @@
+.mat-form-field {
+    width: 100%;
+}

web/angular/src/app/project-select/project-select.component.html

@@ -0,0 +1,20 @@
+<mat-form-field appearance="outline" style="margin-top: 1em">
+    <mat-label>{{"project.chain" | translate}}</mat-label>
+    <mat-select [(ngModel)]="project" (selectionChange)="projectChange.emit($event.value)"
+                [placeholder]="'project.chain' | translate"
+                (opened)="loadProjectList()">
+        <mat-select-trigger>{{project?.name}}</mat-select-trigger>
+        <mat-option disabled *ngIf="projectList == undefined">
+            {{"project_select.loading" | translate}}
+        </mat-option>
+        <mat-option [value]="null" *ngIf="projectList">
+            {{"project_select.none" | translate}}
+        </mat-option>
+        <mat-option *ngFor="let p of projectList" [value]="p">
+            <mat-icon *ngIf="p.public">public</mat-icon>
+            <mat-icon *ngIf="!p.public">lock</mat-icon>
+            <span style="width: 3em; display: inline-block">{{p.id}}</span>
+            {{p.name}}
+        </mat-option>
+    </mat-select>
+</mat-form-field>

web/angular/src/app/project-select/project-select.component.ts

@@ -0,0 +1,28 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {ApiService} from "../api.service";
+import {Project} from "../models/project";
+
+@Component({
+    selector: 'project-select',
+    templateUrl: './project-select.component.html',
+    styleUrls: ['./project-select.component.css']
+})
+export class ProjectSelectComponent implements OnInit {
+
+    projectList: Project[];
+
+    @Input() project: Project;
+    @Output() projectChange = new EventEmitter<Project>();
+
+    constructor(private apiService: ApiService) {
+    }
+
+    ngOnInit() {
+    }
+
+    loadProjectList() {
+        this.apiService.getProjects().subscribe(data => {
+            this.projectList = data["projects"]
+        })
+    }
+}