Hide new related tasks form when related tasks exist

src/components/tasks/partials/relatedTasks.vue

@@ -1,47 +1,58 @@
 <template>
 	<div class="task-relations">
-		<template v-if="editEnabled">
+		<button
-			<label class="label">
+			class="button is-pulled-right add-task-relation-button"
-				New Task Relation
+			:class="{'is-active': showNewRelationForm}"
-				<transition name="fade">
+			@click="showNewRelationForm = !showNewRelationForm"
-					<span class="is-inline-flex" v-if="taskRelationService.loading">
+			v-tooltip="'Add a New Task Relation'"
-						<span class="loader is-inline-block mr-2"></span>
+			v-if="Object.keys(relatedTasks).length > 0"
-						Saving...
+		>
-					</span>
+			<icon icon="plus"/>
-					<span class="has-text-success" v-if="!taskRelationService.loading && saved">
+		</button>
-						Saved!
+		<transition-group name="fade">
-					</span>
+			<template v-if="editEnabled && showCreate">
-				</transition>
+				<label class="label" key="label">
-			</label>
+					New Task Relation
-			<div class="field">
+					<transition name="fade">
-				<multiselect
+						<span class="is-inline-flex" v-if="taskRelationService.loading">
-					placeholder="Type search for a new task to add as related..."
+							<span class="loader is-inline-block mr-2"></span>
-					@search="findTasks"
+							Saving...
-					:loading="taskService.loading"
+						</span>
-					:search-results="foundTasks"
+						<span class="has-text-success" v-if="!taskRelationService.loading && saved">
-					label="title"
+							Saved!
-					v-model="newTaskRelationTask"
+						</span>
-					:creatable="true"
+					</transition>
-					create-placeholder="Add this as new related task"
+				</label>
-					@create="createAndRelateTask"
+				<div class="field" key="field-search">
-				/>
+					<multiselect
-			</div>
+						placeholder="Type search for a new task to add as related..."
-			<div class="field has-addons">
+						@search="findTasks"
-				<div class="control is-expanded">
+						:loading="taskService.loading"
-					<div class="select is-fullwidth has-defaults">
+						:search-results="foundTasks"
-						<select v-model="newTaskRelationKind">
+						label="title"
-							<option value="unset">Select a relation kind</option>
+						v-model="newTaskRelationTask"
-							<option :key="rk" :value="rk" v-for="(label, rk) in relationKinds">
+						:creatable="true"
-								{{ label[0] }}
+						create-placeholder="Add this as new related task"
-							</option>
+						@create="createAndRelateTask"
-						</select>
+					/>
+				</div>
+				<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">
+								<option value="unset">Select a relation kind</option>
+								<option :key="rk" :value="rk" v-for="(label, rk) in relationKinds">
+									{{ label[0] }}
+								</option>
+							</select>
+						</div>
+					</div>
+					<div class="control">
+						<a @click="addTaskRelation()" class="button is-primary">Add Task Relation</a>
 					</div>
 				</div>
-				<div class="control">
+			</template>
-					<a @click="addTaskRelation()" class="button is-primary">Add task Relation</a>
+		</transition-group>
-				</div>
-			</div>
-		</template>
 
 		<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>