From 2705c1571e72396154e57b4676a623de54f2ad76 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Mon, 28 Oct 2019 21:45:37 +0000
Subject: [PATCH] Handle task relations the right way (#36)

---
 src/components/tasks/edit-task.vue | 575 +++++++++++++++++------------
 src/models/list.js                 |  23 +-
 src/models/relationKinds.json      |  13 +
 src/models/task.js                 |   9 +-
 src/models/taskRelation.js         |  21 ++
 src/services/taskRelation.js       |  15 +
 src/styles/tasks.scss              |   4 +
 7 files changed, 398 insertions(+), 262 deletions(-)
 create mode 100644 src/models/relationKinds.json
 create mode 100644 src/models/taskRelation.js
 create mode 100644 src/services/taskRelation.js

diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 915c1ce35..9b9326cda 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -3,18 +3,23 @@
         <div class="field">
             <label class="label" for="tasktext">Task Text</label>
             <div class="control">
-                <input v-focus :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="input" type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
+                <input v-focus :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="input"
+                       type="text" id="tasktext" placeholder="The task text is here..." v-model="taskEditTask.text">
             </div>
         </div>
         <div class="field">
             <label class="label" for="taskdescription">Description</label>
             <div class="control">
-                <textarea :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="textarea" placeholder="The tasks description goes here..." id="taskdescription" v-model="taskEditTask.description"></textarea>
+                <textarea :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="textarea"
+                          placeholder="The tasks description goes here..." id="taskdescription"
+                          v-model="taskEditTask.description"></textarea>
             </div>
         </div>
 
         <b>Reminder Dates</b>
-        <div class="reminder-input" :class="{ 'overdue': (r < nowUnix && index !== (taskEditTask.reminderDates.length - 1))}" v-for="(r, index) in taskEditTask.reminderDates" :key="index">
+        <div class="reminder-input"
+             :class="{ 'overdue': (r < nowUnix && index !== (taskEditTask.reminderDates.length - 1))}"
+             v-for="(r, index) in taskEditTask.reminderDates" :key="index">
             <flat-pickr
                     :class="{ 'disabled': taskService.loading}"
                     :disabled="taskService.loading"
@@ -25,7 +30,9 @@
                     :data-index="index"
                     placeholder="Add a new reminder...">
             </flat-pickr>
-            <a v-if="index !== (taskEditTask.reminderDates.length - 1)" @click="removeReminderByIndex(index)"><icon icon="times"></icon></a>
+            <a v-if="index !== (taskEditTask.reminderDates.length - 1)" @click="removeReminderByIndex(index)">
+                <icon icon="times"></icon>
+            </a>
         </div>
 
         <div class="field">
@@ -147,7 +154,9 @@
             <ul class="assingees">
                 <li v-for="(a, index) in taskEditTask.assignees" :key="a.id">
                     {{a.username}}
-                    <a @click="deleteAssigneeByIndex(index)"><icon icon="times"/></a>
+                    <a @click="deleteAssigneeByIndex(index)">
+                        <icon icon="times"/>
+                    </a>
                 </li>
             </ul>
         </div>
@@ -166,7 +175,8 @@
                         label="username"
                         track-by="id">
                     <template slot="clear" slot-scope="props">
-                        <div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0" @mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
+                        <div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0"
+                             @mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
                     </template>
                     <span slot="noResult">Oops! No user found. Consider changing the search query.</span>
                 </multiselect>
@@ -204,45 +214,75 @@
                         tag-placeholder="Add this as new label"
                 >
                     <template slot="tag" slot-scope="{ option, remove }">
-                                        <span class="tag" :style="{'background': option.hex_color, 'color': option.textColor}">
+                                        <span class="tag"
+                                              :style="{'background': option.hex_color, 'color': option.textColor}">
                                             <span>{{ option.title }}</span>
                                             <a class="delete is-small" @click="removeLabel(option)"></a>
                                         </span>
                     </template>
                     <template slot="clear" slot-scope="props">
-                        <div class="multiselect__clear" v-if="taskEditTask.labels.length" @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
+                        <div class="multiselect__clear" v-if="taskEditTask.labels.length"
+                             @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
                     </template>
                 </multiselect>
             </div>
         </div>
 
-        <div class="field">
-            <label class="label" for="subtasks">Subtasks</label>
-            <div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0">
-                <div class="task" v-for="s in taskEditTask.subtasks" :key="s.id">
-                    <label :for="s.id">
-                        <div class="fancycheckbox">
-                            <input @change="markAsDone" type="checkbox" :id="s.id" :checked="s.done" style="display: none;">
-                            <label  :for="s.id" class="check">
-                                <svg width="18px" height="18px" viewBox="0 0 18 18">
-                                    <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
-                                    <polyline points="1 9 7 14 15 4"></polyline>
-                                </svg>
-                            </label>
-                        </div>
-                        <span class="tasktext" :class="{ 'done': s.done}">
-                                            {{s.text}}
-                                        </span>
+        <div class="field" v-for="(rts, kind ) in task.related_tasks" :key="kind" v-if="rts.length > 0">
+            <label class="label">{{ relationKinds[kind] }}</label>
+            <div class="tasks noborder">
+                <div class="task" v-for="t in rts" :key="t.id">
+                    <label>
+                     <span class="tasktext" :class="{ 'done': t.done}">
+                         {{t.text}}
+                     </span>
                     </label>
+                    <a class="remove" @click="removeTaskRelation({relation_kind: kind, other_task_id: t.id})">
+                        <icon icon="trash-alt"/>
+                    </a>
                 </div>
             </div>
+
         </div>
-        <div class="field has-addons">
-            <div class="control is-expanded">
-                <input @keyup.enter="addSubtask()" :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="input" type="text" id="tasktext" placeholder="New subtask" v-model="newTask.text"/>
+
+        <div class="field">
+            <label class="label">New Task Relation</label>
+            <div class="field">
+                <div class="control is-expanded">
+                    <multiselect
+                            v-model="newTaskRelationTask"
+                            :options="foundTasks"
+                            :multiple="false"
+                            :searchable="true"
+                            :loading="taskService.loading"
+                            :internal-search="true"
+                            @search-change="findTasks"
+                            placeholder="Type to search"
+                            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>
-            <div class="control">
-                <a class="button is-primary" @click="addSubtask()"><icon icon="plus"></icon></a>
+            <div class="field has-addons">
+                <div class="control is-expanded">
+                    <div class="select is-fullwidth">
+                        <select v-model="newTaskRelationKind">
+                            <option value="unset">Select a kind of relation</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>
 
@@ -254,231 +294,286 @@
 </template>
 
 <script>
-    import message from '../../message'
-    import flatPickr from 'vue-flatpickr-component'
-    import 'flatpickr/dist/flatpickr.css'
-    import multiselect from 'vue-multiselect'
-    import {differenceWith} from 'lodash'
+	import message from '../../message'
+	import flatPickr from 'vue-flatpickr-component'
+	import 'flatpickr/dist/flatpickr.css'
+	import multiselect from 'vue-multiselect'
+	import {differenceWith} from 'lodash'
 	import verte from 'verte'
 	import 'verte/dist/verte.css'
 
-    import ListService from '../../services/list'
-    import TaskService from '../../services/task'
-    import TaskModel from '../../models/task'
-    import UserModel from '../../models/user'
-    import ListUserService from '../../services/listUsers'
-    import priorities from '../../models/priorities'
-    import LabelTaskService from '../../services/labelTask'
-    import LabelService from '../../services/label'
-    import LabelTaskModel from '../../models/labelTask'
-    import LabelModel from '../../models/label'
+	import ListService from '../../services/list'
+	import TaskService from '../../services/task'
+	import TaskModel from '../../models/task'
+	import UserModel from '../../models/user'
+	import ListUserService from '../../services/listUsers'
+	import priorities from '../../models/priorities'
+	import LabelTaskService from '../../services/labelTask'
+	import LabelService from '../../services/label'
+	import LabelTaskModel from '../../models/labelTask'
+	import LabelModel from '../../models/label'
+	import relationKinds from '../../models/relationKinds'
+	import TaskRelationModel from '../../models/taskRelation'
+	import TaskRelationService from '../../services/taskRelation'
 
-    export default {
-        name: 'edit-task',
-        data() {
-            return {
-                listID: this.$route.params.id,
-                listService: ListService,
-                taskService: TaskService,
+	export default {
+		name: 'edit-task',
+		data() {
+			return {
+				listID: this.$route.params.id,
+				listService: ListService,
+				taskService: TaskService,
 
-                priorities: priorities,
-                list: {},
-                newTask: TaskModel,
-                isTaskEdit: false,
-                taskEditTask: TaskModel,
-                lastReminder: 0,
-                nowUnix: new Date(),
-                flatPickerConfig:{
-                    altFormat: 'j M Y H:i',
-                    altInput: true,
-                    dateFormat: 'Y-m-d H:i',
-                    enableTime: true,
-                    onOpen: this.updateLastReminderDate,
-                    onClose: this.addReminderDate,
-                },
+				priorities: priorities,
+				list: {},
+				newTask: TaskModel,
+				isTaskEdit: false,
+				taskEditTask: TaskModel,
+				lastReminder: 0,
+				nowUnix: new Date(),
+				flatPickerConfig: {
+					altFormat: 'j M Y H:i',
+					altInput: true,
+					dateFormat: 'Y-m-d H:i',
+					enableTime: true,
+					onOpen: this.updateLastReminderDate,
+					onClose: this.addReminderDate,
+				},
 
-                newAssignee: UserModel,
-                listUserService: ListUserService,
-                foundUsers: [],
+				newAssignee: UserModel,
+				listUserService: ListUserService,
+				foundUsers: [],
 
-                labelService: LabelService,
-                labelTaskService: LabelTaskService,
-                foundLabels: [],
-                labelTimeout: null,
-            }
-        },
-        components: {
-            flatPickr,
-            multiselect,
-            verte,
-        },
-        props: {
-            task: {
-                type: TaskModel,
-                required: true,
-            }
-        },
-        watch: {
-            task() {
-                this.taskEditTask = this.task
-            }
-        },
-        created() {
-            this.listService = new ListService()
-            this.taskService = new TaskService()
-            this.newTask = new TaskModel()
-            this.listUserService = new ListUserService()
-            this.newAssignee = new UserModel()
-            this.labelService = new LabelService()
-            this.labelTaskService = new LabelTaskService()
-            this.taskEditTask = this.task
-        },
-        methods: {
-            editTaskSubmit() {
-                this.taskService.update(this.taskEditTask)
-                    .then(r => {
-                        this.$set(this, 'taskEditTask', r)
-                        message.success({message: 'The task was successfully updated.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            addSubtask() {
-                this.newTask.parentTaskID = this.taskEditTask.id
-                this.newTask.listID = this.$route.params.id
-                this.taskService.create(this.newTask)
-                    .then(r => {
-                        this.list.addTaskToList(r)
-                        message.success({message: 'The task was successfully created.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
+				foundTasks: [],
+				relationKinds: relationKinds,
+				newTaskRelationTask: TaskModel,
+				newTaskRelationKind: 'unset',
+				taskRelationService: TaskRelationService,
 
-                this.newTask = {}
-            },
-            updateLastReminderDate(selectedDates) {
-                this.lastReminder = +new Date(selectedDates[0])
-            },
-            addReminderDate(selectedDates, dateStr, instance) {
-                let newDate = +new Date(selectedDates[0])
+				labelService: LabelService,
+				labelTaskService: LabelTaskService,
+				foundLabels: [],
+				labelTimeout: null,
+			}
+		},
+		components: {
+			flatPickr,
+			multiselect,
+			verte,
+		},
+		props: {
+			task: {
+				type: TaskModel,
+				required: true,
+			}
+		},
+		watch: {
+			task() {
+				this.taskEditTask = this.task
+			}
+		},
+		created() {
+			this.listService = new ListService()
+			this.taskService = new TaskService()
+			this.newTask = new TaskModel()
+			this.listUserService = new ListUserService()
+			this.newAssignee = new UserModel()
+			this.labelService = new LabelService()
+			this.labelTaskService = new LabelTaskService()
+			this.taskRelationService = new TaskRelationService()
+			this.newTaskRelationTask = new TaskModel()
+			this.taskEditTask = this.task
+		},
+		methods: {
+			editTaskSubmit() {
+				this.taskService.update(this.taskEditTask)
+					.then(r => {
+						this.$set(this, 'taskEditTask', r)
+						message.success({message: 'The task was successfully updated.'}, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			updateLastReminderDate(selectedDates) {
+				this.lastReminder = +new Date(selectedDates[0])
+			},
+			addReminderDate(selectedDates, dateStr, instance) {
+				let newDate = +new Date(selectedDates[0])
 
-                // Don't update if nothing changed
-                if (newDate === this.lastReminder) {
-                    return
-                }
+				// Don't update if nothing changed
+				if (newDate === this.lastReminder) {
+					return
+				}
 
-                let index = parseInt(instance.input.dataset.index)
-                this.taskEditTask.reminderDates[index] = newDate
+				let index = parseInt(instance.input.dataset.index)
+				this.taskEditTask.reminderDates[index] = newDate
 
-                let lastIndex = this.taskEditTask.reminderDates.length - 1
-                // put a new null at the end if we changed something
-                if (lastIndex === index && !isNaN(newDate)) {
-                    this.taskEditTask.reminderDates.push(null)
-                }
-            },
-            removeReminderByIndex(index) {
-                this.taskEditTask.reminderDates.splice(index, 1)
-                // Reset the last to 0 to have the "add reminder" button
-                this.taskEditTask.reminderDates[this.taskEditTask.reminderDates.length - 1] = null
-            },
-            addAssignee() {
-                this.taskEditTask.assignees.push(this.newAssignee)
-            },
-            deleteAssigneeByIndex(index) {
-                this.taskEditTask.assignees.splice(index, 1)
-            },
-            findUser(query) {
-                if(query === '') {
-                    this.clearAllFoundUsers()
-                    return
-                }
+				let lastIndex = this.taskEditTask.reminderDates.length - 1
+				// put a new null at the end if we changed something
+				if (lastIndex === index && !isNaN(newDate)) {
+					this.taskEditTask.reminderDates.push(null)
+				}
+			},
+			removeReminderByIndex(index) {
+				this.taskEditTask.reminderDates.splice(index, 1)
+				// Reset the last to 0 to have the "add reminder" button
+				this.taskEditTask.reminderDates[this.taskEditTask.reminderDates.length - 1] = null
+			},
+			addAssignee() {
+				this.taskEditTask.assignees.push(this.newAssignee)
+			},
+			deleteAssigneeByIndex(index) {
+				this.taskEditTask.assignees.splice(index, 1)
+			},
+			findUser(query) {
+				if (query === '') {
+					this.clearAllFoundUsers()
+					return
+				}
 
-                this.listUserService.getAll({listID: this.$route.params.id}, {s: query})
-                    .then(response => {
-                        // Filter the results to not include users who are already assigned
-                        this.$set(this, 'foundUsers', differenceWith(response, this.taskEditTask.assignees, (first, second) => {
-                            return first.id === second.id
-                        }))
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            clearAllFoundUsers () {
-                this.$set(this, 'foundUsers', [])
-            },
-            findLabel(query) {
-                if(query === '') {
-                    this.clearAllLabels()
-                    return
-                }
+				this.listUserService.getAll({listID: this.$route.params.id}, {s: query})
+					.then(response => {
+						// Filter the results to not include users who are already assigned
+						this.$set(this, 'foundUsers', differenceWith(response, this.taskEditTask.assignees, (first, second) => {
+							return first.id === second.id
+						}))
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			clearAllFoundUsers() {
+				this.$set(this, 'foundUsers', [])
+			},
+			findLabel(query) {
+				if (query === '') {
+					this.clearAllLabels()
+					return
+				}
 
-                if(this.labelTimeout !== null) {
-                    clearTimeout(this.labelTimeout)
-                }
+				if (this.labelTimeout !== null) {
+					clearTimeout(this.labelTimeout)
+				}
 
-                // Delay the search 300ms to not send a request on every keystroke
-                this.labelTimeout = setTimeout(() => {
-                    this.labelService.getAll({}, {s: query})
-                        .then(response => {
-                            this.$set(this, 'foundLabels', differenceWith(response, this.taskEditTask.labels, (first, second) => {
-                                return first.id === second.id
-                            }))
-                            this.labelTimeout = null
-                        })
-                        .catch(e => {
-                            message.error(e, this)
-                        })
-                }, 300)
-            },
-            clearAllLabels () {
-                this.$set(this, 'foundLabels', [])
-            },
-            addLabel(label) {
-                let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
-                this.labelTaskService.create(labelTask)
-                    .then(() => {
-                        message.success({message: 'The label was successfully added.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            removeLabel(label) {
-                let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
-                this.labelTaskService.delete(labelTask)
-                    .then(() => {
-                        // Remove the label from the list
-                        for (const l in this.taskEditTask.labels) {
-                            if (this.taskEditTask.labels[l].id === label.id) {
-                                this.taskEditTask.labels.splice(l, 1)
-                            }
-                        }
-                        message.success({message: 'The label was successfully removed.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            createAndAddLabel(title) {
-                let newLabel = new LabelModel({title: title})
-                this.labelService.create(newLabel)
-                    .then(r => {
-                        this.addLabel(r)
-                        this.taskEditTask.labels.push(r)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            }
-        },
-    }
+				// Delay the search 300ms to not send a request on every keystroke
+				this.labelTimeout = setTimeout(() => {
+					this.labelService.getAll({}, {s: query})
+						.then(response => {
+							this.$set(this, 'foundLabels', differenceWith(response, this.taskEditTask.labels, (first, second) => {
+								return first.id === second.id
+							}))
+							this.labelTimeout = null
+						})
+						.catch(e => {
+							message.error(e, this)
+						})
+				}, 300)
+			},
+			clearAllLabels() {
+				this.$set(this, 'foundLabels', [])
+			},
+			addLabel(label) {
+				let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
+				this.labelTaskService.create(labelTask)
+					.then(() => {
+						message.success({message: 'The label was successfully added.'}, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			removeLabel(label) {
+				let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
+				this.labelTaskService.delete(labelTask)
+					.then(() => {
+						// Remove the label from the list
+						for (const l in this.taskEditTask.labels) {
+							if (this.taskEditTask.labels[l].id === label.id) {
+								this.taskEditTask.labels.splice(l, 1)
+							}
+						}
+						message.success({message: 'The label was successfully removed.'}, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			createAndAddLabel(title) {
+				let newLabel = new LabelModel({title: title})
+				this.labelService.create(newLabel)
+					.then(r => {
+						this.addLabel(r)
+						this.taskEditTask.labels.push(r)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			findTasks(query) {
+				if (query === '') {
+					this.clearAllFoundTasks()
+					return
+				}
+
+				this.taskService.getAll({}, {s: query})
+					.then(response => {
+						this.$set(this, 'foundTasks', response)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			clearAllFoundTasks() {
+				this.$set(this, 'foundTasks', [])
+			},
+			addTaskRelation() {
+				let rel = new TaskRelationModel({
+					task_id: this.taskEditTask.id,
+					other_task_id: this.newTaskRelationTask.id,
+					relation_kind: this.newTaskRelationKind,
+				})
+				this.taskRelationService.create(rel)
+					.then(() => {
+						if (!this.taskEditTask.related_tasks[this.newTaskRelationKind]) {
+							this.$set(this.taskEditTask.related_tasks, this.newTaskRelationKind, [])
+						}
+						this.taskEditTask.related_tasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
+						this.newTaskRelationKind = 'unset'
+						this.newTaskRelationTask = new TaskModel()
+						message.success({message: 'The task relation was created successfully'}, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+			removeTaskRelation(relation) {
+				let rel = new TaskRelationModel({
+					relation_kind: relation.relation_kind,
+					task_id: this.taskEditTask.id,
+					other_task_id: relation.other_task_id,
+				})
+				this.taskRelationService.delete(rel)
+					.then(r => {
+						Object.keys(this.taskEditTask.related_tasks).forEach(relationKind  => {
+							for (const t in this.taskEditTask.related_tasks[relationKind]) {
+								if (this.taskEditTask.related_tasks[relationKind][t].id === relation.other_task_id && relationKind === relation.relation_kind) {
+									this.taskEditTask.related_tasks[relationKind].splice(t, 1)
+								}
+							}
+						})
+						message.success(r, this)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
+			},
+		},
+	}
 </script>
 
 <style scoped>
-	form {
-		margin-bottom: 1em;
-	}
+    form {
+        margin-bottom: 1em;
+    }
 </style>
\ No newline at end of file
diff --git a/src/models/list.js b/src/models/list.js
index 5f90c451b..7d2291ca1 100644
--- a/src/models/list.js
+++ b/src/models/list.js
@@ -62,17 +62,7 @@ export default class ListModel extends AbstractModel {
 	 * @param task
 	 */
 	addTaskToList(task) {
-		// If it's a subtask, add it to its parent, otherwise append it to the list of tasks
-		if (task.parentTaskID === 0) {
-			this.tasks.push(task)
-		} else {
-			for (const t in this.tasks) {
-				if (this.tasks[t].id === task.parentTaskID) {
-					this.tasks[t].subtasks.push(task)
-					break
-				}
-			}
-		}
+		this.tasks.push(task)
 		this.sortTasks()
 	}
 	
@@ -92,7 +82,7 @@ export default class ListModel extends AbstractModel {
 	}
 
 	/**
-	 * Loops through all tasks and updates the one  with the id it has
+	 * Loops through all tasks and updates the one with the id it has
 	 * @param task
 	 */
 	updateTaskByID(task) {
@@ -101,15 +91,6 @@ export default class ListModel extends AbstractModel {
 				this.tasks[t] = task
 				break
 			}
-
-			if (this.tasks[t].id === task.parentTaskID) {
-				for (const s in this.tasks[t].subtasks) {
-					if (this.tasks[t].subtasks[s].id === task.id) {
-						this.tasks[t].subtasks[s] = task
-						break
-					}
-				}
-			}
 		}
 		this.sortTasks()
 	}
diff --git a/src/models/relationKinds.json b/src/models/relationKinds.json
new file mode 100644
index 000000000..2129c6d30
--- /dev/null
+++ b/src/models/relationKinds.json
@@ -0,0 +1,13 @@
+{
+  "subtask": "Subtask",
+  "parenttask": "Parent Task",
+  "related": "Related Task",
+  "duplicateof": "Duplicate Of",
+  "duplicates": "Duplicates",
+  "blocking": "Blocking",
+  "blocked": "Blocked By",
+  "precedes": "Preceds",
+  "follows": "Follows",
+  "copiedfrom": "Copied From",
+  "copiedto": "Copied To"
+}
\ No newline at end of file
diff --git a/src/models/task.js b/src/models/task.js
index 56187d803..a1fd80d82 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -37,6 +37,13 @@ export default class TaskModel extends AbstractModel {
 		if (this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
+
+		// Make all subtasks to task models
+		Object.keys(this.related_tasks).forEach(relationKind  => {
+			this.related_tasks[relationKind] = this.related_tasks[relationKind].map(t => {
+				return new TaskModel(t)
+			})
+		})
 	}
 	
 	defaults() {
@@ -54,10 +61,10 @@ export default class TaskModel extends AbstractModel {
 			endDate: 0,
 			repeatAfter: 0,
 			reminderDates: [],
-			subtasks: [],
 			parentTaskID: 0,
 			hexColor: '',
 			percentDone: 0,
+			related_tasks: {},
 
 			createdBy: UserModel,
 			created: 0,
diff --git a/src/models/taskRelation.js b/src/models/taskRelation.js
new file mode 100644
index 000000000..d88e86869
--- /dev/null
+++ b/src/models/taskRelation.js
@@ -0,0 +1,21 @@
+import AbstractModel from './abstractModel'
+import UserModel from "./user";
+
+export default class TaskRelationModel extends AbstractModel {
+	constructor(data) {
+		super(data)
+		this.created_by = new UserModel(this.created_by)
+	}
+	
+	defaults() {
+		return {
+			id: 0,
+			other_task_id: 0,
+			task_id: 0,
+			relation_kind: '',
+
+			created_by: UserModel,
+			created: 0,
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/services/taskRelation.js b/src/services/taskRelation.js
new file mode 100644
index 000000000..5934aace8
--- /dev/null
+++ b/src/services/taskRelation.js
@@ -0,0 +1,15 @@
+import AbstractService from "./abstractService";
+import TaskRelationModel from '../models/taskRelation'
+
+export default class TaskRelationService extends AbstractService {
+	constructor() {
+		super({
+			create: '/tasks/{task_id}/relations',
+			delete: '/tasks/{task_id}/relations',
+		})
+	}
+	
+	modelFactory(data) {
+		return new TaskRelationModel(data)
+	}
+}
\ No newline at end of file
diff --git a/src/styles/tasks.scss b/src/styles/tasks.scss
index 386c2daff..1b31a6c8a 100644
--- a/src/styles/tasks.scss
+++ b/src/styles/tasks.scss
@@ -68,6 +68,10 @@
       }
     }
 
+    .remove {
+      color: $red;
+    }
+
     .high-priority{
       color: $red;