vikunja-frontend/src/components/tasks/reusable/relatedTasks.vue

<template>
	<div class="task-relations">
		<label class="label">New Task Relation</label>
		<div class="columns">
				<div class="column is-three-quarters">
					<multiselect
							v-model="newTaskRelationTask"
							:options="foundTasks"
							:multiple="false"
							:searchable="true"
							:loading="taskService.loading"
							:internal-search="true"
							@search-change="findTasks"
							placeholder="Type search for a new task to add as related..."
							label="text"
							track-by="id"
					>
						<template slot="clear" slot-scope="props">
							<div class="multiselect__clear"
								v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"
								@mousedown.prevent.stop="clearAllFoundTasks(props.search)"></div>
						</template>
						<span slot="noResult">No task found. Consider changing the search query.</span>
					</multiselect>
				</div>
			<div class="column field has-addons">
				<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 v-for="(label, rk) in relationKinds" :key="rk" :value="rk">
								{{ label }}
							</option>
						</select>
					</div>
				</div>
				<div class="control">
					<a class="button is-primary" @click="addTaskRelation()">Add task Relation</a>
				</div>
			</div>
		</div>

		<div class="related-tasks" v-for="(rts, kind ) in relatedTasks" :key="kind">
			<template v-if="rts.length > 0">
				<span class="title">{{ relationKinds[kind] }}</span>
				<div class="tasks noborder">
					<div class="task" v-for="t in rts" :key="t.id">
						<router-link :to="{ name: 'taskDetailView', params: { id: t.id } }">
							<span class="tasktext" :class="{ 'done': t.done}">
								{{t.text}}
							</span>
						</router-link>
						<a class="remove" @click="() => {showDeleteModal = true; relationToDelete = {relation_kind: kind, other_task_id: t.id}}">
							<icon icon="trash-alt"/>
						</a>
					</div>
				</div>
			</template>
		</div>
		<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">No task relations yet.</p>

		<!-- Delete modal -->
		<modal
				v-if="showDeleteModal"
				@close="showDeleteModal = false"
				@submit="removeTaskRelation()">
			<span slot="header">Delete Task Relation</span>
			<p slot="text">Are you sure you want to delete this task relation?<br/>
				<b>This CANNOT BE UNDONE!</b></p>
		</modal>
	</div>
</template>

<script>
	import TaskService from '../../../services/task'
	import TaskModel from '../../../models/task'
	import TaskRelationService from '../../../services/taskRelation'
	import relationKinds from '../../../models/relationKinds'
	import TaskRelationModel from '../../../models/taskRelation'

	import multiselect from 'vue-multiselect'

	export default {
		name: 'relatedTasks',
		data() {
			return {
				relatedTasks: {},
				taskService: TaskService,
				foundTasks: [],
				relationKinds: relationKinds,
				newTaskRelationTask: TaskModel,
				newTaskRelationKind: 'unset',
				taskRelationService: TaskRelationService,
				showDeleteModal: false,
				relationToDelete: {},
			}
		},
		components: {
			multiselect,
		},
		props: {
			taskID: {
				type: Number,
				required: true,
			},
			initialRelatedTasks: {
				type: Object,
				default: () => {},
			},
			showNoRelationsNotice: {
				type: Boolean,
				default: false,
			},
		},
		created() {
			this.taskService = new TaskService()
			this.taskRelationService = new TaskRelationService()
			this.newTaskRelationTask = new TaskModel()
		},
		watch: {
			initialRelatedTasks(newVal) {
				this.relatedTasks = newVal
			},
		},
		mounted() {
			this.relatedTasks = this.initialRelatedTasks
		},
		methods: {
			findTasks(query) {
				if (query === '') {
					this.clearAllFoundTasks()
					return
				}

				this.taskService.getAll({}, {s: query})
					.then(response => {
						this.$set(this, 'foundTasks', response)
					})
					.catch(e => {
						this.error(e, this)
					})
			},
			clearAllFoundTasks() {
				this.$set(this, 'foundTasks', [])
			},
			addTaskRelation() {
				let rel = new TaskRelationModel({
					task_id: this.taskID,
					other_task_id: this.newTaskRelationTask.id,
					relation_kind: this.newTaskRelationKind,
				})
				this.taskRelationService.create(rel)
					.then(() => {
						if (!this.relatedTasks[this.newTaskRelationKind]) {
							this.$set(this.relatedTasks, this.newTaskRelationKind, [])
						}
						this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
						this.newTaskRelationKind = 'unset'
						this.newTaskRelationTask = new TaskModel()
						this.success({message: 'The task relation was created successfully'}, this)
					})
					.catch(e => {
						this.error(e, this)
					})
			},
			removeTaskRelation() {
				let rel = new TaskRelationModel({
					relation_kind: this.relationToDelete.relation_kind,
					task_id: this.taskID,
					other_task_id: this.relationToDelete.other_task_id,
				})
				this.taskRelationService.delete(rel)
					.then(r => {
						Object.keys(this.relatedTasks).forEach(relationKind  => {
							for (const t in this.relatedTasks[relationKind]) {
								if (this.relatedTasks[relationKind][t].id === this.relationToDelete.other_task_id && relationKind === this.relationToDelete.relation_kind) {
									this.relatedTasks[relationKind].splice(t, 1)
								}
							}
						})
						this.success(r, this)
					})
					.catch(e => {
						this.error(e, this)
					})
					.finally(() => {
						this.showDeleteModal = false
					})
			},

		},
	}
</script>