Add moving tasks between lists

src/components/tasks/TaskDetailView.vue

@@ -200,6 +200,21 @@
 						/>
 					</div>
 
+					<!-- Move Task -->
+					<div class="content details has-top-border" v-if="activeFields.moveList">
+						<h3>
+							<span class="icon is-grey">
+								<icon icon="list"/>
+							</span>
+							Move task to different list
+						</h3>
+						<div class="field has-addons">
+							<div class="control is-expanded">
+								<list-search @selected="changeList"/>
+							</div>
+						</div>
+					</div>
+
 					<!-- Comments -->
 					<comments :task-id="taskId"/>
 				</div>
@@ -257,6 +272,10 @@
 						<span class="icon is-small"><icon icon="tasks"/></span>
 						Add task relations
 					</a>
+					<a class="button" @click="setFieldActive('moveList')">
+						<span class="icon is-small"><icon icon="list"/></span>
+						Move task to different list
+					</a>
 					<a class="button is-danger is-outlined noshadow has-no-border" @click="showDeleteModal = true">
 						<span class="icon is-small"><icon icon="trash-alt"/></span>
 						Delete task
@@ -302,10 +321,12 @@
 	import Reminders from './reusable/reminders'
 	import Comments from './reusable/comments'
 	import router from '../../router'
+	import ListSearch from "./reusable/listSearch";
 
 	export default {
 		name: 'TaskDetailView',
 		components: {
+			ListSearch,
 			Reminders,
 			RepeatAfter,
 			RelatedTasks,
@@ -350,6 +371,7 @@
 					labels: false,
 					attachments: false,
 					relatedTasks: false,
+					moveList: false,
 				},
 			}
 		},
@@ -486,6 +508,10 @@
 					this.saveTask()
 				}
 			},
+			changeList(list) {
+				this.task.listId = list.id
+				this.saveTask()
+			}
 		},
 	}
 </script>

src/components/tasks/reusable/listSearch.vue

@@ -0,0 +1,69 @@
+<template>
+	<multiselect
+			v-model="list"
+			:options="foundLists"
+			:multiple="false"
+			:searchable="true"
+			:loading="listSerivce.loading"
+			:internal-search="true"
+			@search-change="findLists"
+			@select="select"
+			placeholder="Type to search for a list..."
+			label="title"
+			track-by="id"
+			:showNoOptions="false"
+			class="control is-expanded"
+			v-focus
+	>
+		<template slot="clear" slot-scope="props">
+			<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+		</template>
+		<span slot="noResult">No list found. Consider changing the search query.</span>
+	</multiselect>
+</template>
+
+<script>
+	import ListService from '../../../services/list'
+	import ListModel from '../../../models/list'
+	import multiselect from 'vue-multiselect'
+
+	export default {
+		name: 'listSearch',
+		data() {
+			return {
+				listSerivce: ListService,
+				list: ListModel,
+				foundLists: [],
+			}
+		},
+		components: {
+			multiselect,
+		},
+		beforeMount() {
+			this.listSerivce = new ListService()
+			this.list = new ListModel()
+		},
+		methods: {
+			findLists(query) {
+				if (query === '') {
+					this.clearAll()
+					return
+				}
+
+				this.listSerivce.getAll({}, {s: query})
+					.then(response => {
+						this.$set(this, 'foundLists', response)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+			clearAll() {
+				this.$set(this, 'foundLists', [])
+			},
+			select(list) {
+				this.$emit('selected', list)
+			},
+		},
+	}
+</script>

src/main.js

@@ -67,6 +67,7 @@ import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
 import { faTh } from '@fortawesome/free-solid-svg-icons'
 import { faSort } from '@fortawesome/free-solid-svg-icons'
 import { faSortUp } from '@fortawesome/free-solid-svg-icons'
+import { faList } from '@fortawesome/free-solid-svg-icons'
 import { faComments } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
@@ -110,6 +111,7 @@ library.add(faComments)
 library.add(faTh)
 library.add(faSort)
 library.add(faSortUp)
+library.add(faList)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/services/list.js

@@ -8,6 +8,7 @@ export default class ListService extends AbstractService {
 		super({
 			create: '/namespaces/{namespaceId}/lists',
 			get: '/lists/{id}',
+			getAll: '/lists',
 			update: '/lists/{id}',
 			delete: '/lists/{id}',
 		})