Better userstory selector

src/app/task-form/task-form.component.html

@@ -5,14 +5,16 @@
                 <h4 class="modal-title">Neuen Task anlegen</h4>
             </tr>
             <tr>
-                <h6 class="modal-caption text-muted" *ngIf="this.editing">
-                    Gehört zu Story:
-                    <a href="#" id="userstoryTitle">{{ this.userstoryId }}</a>
-                </h6>
+                <div ngbDropdown class="dropdown">
+                    <span ngbDropdownToggle class="dropdown-toggle" id="dropdownMenuUserstory" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Gehört zu Story: {{getUserstoryTitleById(task.userstoryid) || "Keine"}}
+                        <i class="fa fa-caret-down"></i>
+                    </span>
+                    <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuUserstory">
+                        <option ngbDropdownItem *ngFor="let userstory of userstories" (click)="task.userstoryid = userstory.id">{{ userstory.title }}</option>
+                    </div>
+                </div>
             </tr>
-            <select *ngIf="!this.editing" class="form-control custom-select mr-sm-2" id="prio" required name="prio" [(ngModel)]="task.userstoryid">
-                <option *ngFor="let userstory of userstories" [ngValue]="userstory.id">{{ userstory.title }}</option>
-            </select>
         </table>
         <button (click)="onClose()" type="button" class="close" aria-label="Close">
             <span aria-hidden="true">&times;</span>

src/app/task-form/task-form.component.ts

@@ -113,7 +113,18 @@ export class TaskFormComponent implements OnInit {
 		});
 	}
 
-	public getAllPriorities(): string[] {
+	getAllPriorities(): string[] {
 		return Object.values(Priority);
-	  }
+	}
+
+	getUserstoryTitleById(id: number): string{
+		if (!id) {
+			return null;
+		  }
+		var story = this.userstories.find((x) => x.id === id);
+		if (!story) {
+			return null;
+		  }
+		return story.title;
+	}
 }