Hide new related tasks form when related tasks exist

src/components/tasks/partials/relatedTasks.vue

@@ -1,7 +1,17 @@
 <template>
 	<div class="task-relations">
-		<template v-if="editEnabled">
-			<label class="label">
+		<button
+			class="button is-pulled-right add-task-relation-button"
+			:class="{'is-active': showNewRelationForm}"
+			@click="showNewRelationForm = !showNewRelationForm"
+			v-tooltip="'Add a New Task Relation'"
+			v-if="Object.keys(relatedTasks).length > 0"
+		>
+			<icon icon="plus"/>
+		</button>
+		<transition-group name="fade">
+			<template v-if="editEnabled && showCreate">
+				<label class="label" key="label">
 					New Task Relation
 					<transition name="fade">
 						<span class="is-inline-flex" v-if="taskRelationService.loading">
@@ -13,7 +23,7 @@
 						</span>
 					</transition>
 				</label>
-			<div class="field">
+				<div class="field" key="field-search">
 					<multiselect
 						placeholder="Type search for a new task to add as related..."
 						@search="findTasks"
@@ -26,7 +36,7 @@
 						@create="createAndRelateTask"
 					/>
 				</div>
-			<div class="field has-addons">
+				<div class="field has-addons mb-4" key="field-kind">
 					<div class="control is-expanded">
 						<div class="select is-fullwidth has-defaults">
 							<select v-model="newTaskRelationKind">
@@ -38,10 +48,11 @@
 						</div>
 					</div>
 					<div class="control">
-					<a @click="addTaskRelation()" class="button is-primary">Add task Relation</a>
+						<a @click="addTaskRelation()" class="button is-primary">Add Task Relation</a>
 					</div>
 				</div>
 			</template>
+		</transition-group>
 
 		<div :key="kind" class="related-tasks" v-for="(rts, kind ) in relatedTasks">
 			<template v-if="rts.length > 0">
@@ -110,6 +121,7 @@ export default {
 			showDeleteModal: false,
 			relationToDelete: {},
 			saved: false,
+			showNewRelationForm: false,
 		}
 	},
 	components: {
@@ -150,6 +162,11 @@ export default {
 	mounted() {
 		this.relatedTasks = this.initialRelatedTasks
 	},
+	computed: {
+		showCreate() {
+			return Object.keys(this.relatedTasks).length === 0 || this.showNewRelationForm
+		},
+	},
 	methods: {
 		findTasks(query) {
 			this.taskService.getAll({}, {s: query})
@@ -174,6 +191,7 @@ export default {
 					this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
 					this.newTaskRelationTask = null
 					this.saved = true
+					this.showNewRelationForm = false
 					setTimeout(() => {
 						this.saved = false
 					}, 2000)
@@ -229,3 +247,19 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+@import '@/styles/theme/variables';
+
+.add-task-relation-button {
+	margin-top: -3rem;
+
+	svg {
+		transition: transform $transition;
+	}
+
+	&.is-active svg {
+		transform: rotate(45deg);
+	}
+}
+</style>