Add creating new related tasks

src/components/tasks/TaskDetailView.vue

@@ -193,6 +193,7 @@
 						</h3>
 						<related-tasks
 								:task-i-d="taskID"
+								:list-id="task.listID"
 								:initial-related-tasks="task.related_tasks"
 								:show-no-relations-notice="true"
 								ref="relatedTasks"

src/components/tasks/edit-task.vue

@@ -128,6 +128,7 @@
 		<related-tasks
 			class="is-narrow"
 			:task-i-d="task.id"
+			:list-id="task.listID"
 			:initial-related-tasks="task.related_tasks"
 		/>
 

src/components/tasks/reusable/relatedTasks.vue

@@ -14,6 +14,10 @@
 						placeholder="Type search for a new task to add as related..."
 						label="text"
 						track-by="id"
+						:taggable="true"
+						:showNoOptions="false"
+						@tag="createAndRelateTask"
+						tag-placeholder="Add this as new related task"
 				>
 					<template slot="clear" slot-scope="props">
 						<div class="multiselect__clear"
@@ -57,7 +61,9 @@
 				</div>
 			</template>
 		</div>
-		<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">No task relations yet.</p>
+		<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">
+			No task relations yet.
+		</p>
 
 		<!-- Delete modal -->
 		<modal
@@ -89,7 +95,7 @@
 				foundTasks: [],
 				relationKinds: relationKinds,
 				newTaskRelationTask: TaskModel,
-				newTaskRelationKind: 'unset',
+				newTaskRelationKind: 'related',
 				taskRelationService: TaskRelationService,
 				showDeleteModal: false,
 				relationToDelete: {},
@@ -105,12 +111,17 @@
 			},
 			initialRelatedTasks: {
 				type: Object,
-				default: () => {},
+				default: () => {
+				},
 			},
 			showNoRelationsNotice: {
 				type: Boolean,
 				default: false,
 			},
+			listId: {
+				type: Number,
+				default: 0,
+			}
 		},
 		created() {
 			this.taskService = new TaskService()
@@ -187,7 +198,17 @@
 						this.showDeleteModal = false
 					})
 			},
-
+			createAndRelateTask(text) {
+				const newTask = new TaskModel({text: text, listID: this.listId})
+				this.taskService.create(newTask)
+					.then(r => {
+						this.newTaskRelationTask = r
+						this.addTaskRelation()
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
 		},
 	}
 </script>