Allow to drop tasks onto collections in left sidebar

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

css/src/style.scss

@@ -54,8 +54,10 @@
 				}
 			}
 
-			&.list .task-item {
-				display: none;
+			&.list, &.collection {
+				.task-item {
+					display: none;
+				}
 			}
 
 			.app-navigation-entry-edit {

src/components/TaskDragContainer.vue

@@ -54,8 +54,7 @@ export default {
 			'moveTask',
 			'setPriority',
 			'setPercentComplete',
-			'setDue',
-			'setStart',
+			'setDate',
 		]),
 
 		/**
@@ -131,48 +130,14 @@ export default {
 					}
 					break
 				case 'today':
-					this.setDate(task, 0)
+					this.setDate({ task: task, day: 0 })
 					break
 				case 'week':
-					this.setDate(task, collectionId[1])
+					this.setDate({ task: task, day: collectionId[1] })
 					break
 				}
 			}
 		},
-
-		/**
-		 * Sets the start or due date to the given day
-		 *
-		 * @param {Task} task The task to change
-		 * @param {Integer} day The day to set
-		 */
-		setDate: function(task, day) {
-			var start = moment(task.start, 'YYYYMMDDTHHmmss').startOf('day')
-			var due = moment(task.due, 'YYYYMMDDTHHmmss').startOf('day')
-			day = moment().startOf('day').add(day, 'days')
-
-			var diff
-			// Adjust start date
-			if (start.isValid()) {
-				diff = start.diff(moment().startOf('day'), 'days')
-				diff = diff < 0 ? 0 : diff
-				if (diff !== day) {
-					var newStart = moment(task.start, 'YYYYMMDDTHHmmss').year(day.year()).month(day.month()).date(day.date())
-					this.setStart({ task: task, start: newStart })
-				}
-			// Adjust due date
-			} else if (due.isValid()) {
-				diff = due.diff(moment().startOf('day'), 'days')
-				diff = diff < 0 ? 0 : diff
-				if (diff !== day) {
-					var newDue = moment(task.due, 'YYYYMMDDTHHmmss').year(day.year()).month(day.month()).date(day.date())
-					this.setDue({ task: task, due: newDue })
-				}
-			// Set the due date to appropriate value
-			} else {
-				this.setDue({ task: task, due: day })
-			}
-		},
 	},
 }
 </script>

src/components/TheList.vue

@@ -21,15 +21,15 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<ul id="collections">
-		<RouterLink
+		<draggable
 			v-for="collection in collections"
 			:id="'collection_' + collection.id"
 			:key="collection.id"
 			:collection-id="collection.id"
-			:to="{ name: 'collections', params: {collectionId: collection.id } }"
+			:component-data="{props: {tag: 'li', to: { name: 'collections', params: { collectionId: collection.id } }, 'active-class': 'active'}}"
 			:class="[collection.icon, {'animate-up': hideCollection(collection) }]"
-			tag="li" class="collection reactive"
-			active-class="active"
+			tag="RouterLink" class="collection reactive"
+			v-bind="{group: 'tasks', filter: '*'}" @add="dropTaskOnCollection(...arguments, collection)"
 		>
 			<a class="sprite">
 				<span v-if="collection.id=='today'" class="date">
@@ -46,7 +46,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					</li>
 				</ul>
 			</div>
-		</RouterLink>
+		</draggable>
 		<draggable
 			v-for="calendar in calendars"
 			:id="'list_' + calendar.id"
@@ -248,6 +248,9 @@ export default {
 			'deleteCalendar',
 			'appendCalendar',
 			'moveTask',
+			'setPriority',
+			'setPercentComplete',
+			'setDate',
 		]),
 		dropTaskOnCalendar: function($event, calendar) {
 			var task
@@ -259,6 +262,27 @@ export default {
 				}
 			}
 		},
+		dropTaskOnCollection: function($event, collection) {
+			var task
+			var taskAttribute = $event.item.attributes['task-id']
+			if (taskAttribute) {
+				task = this.getTask(taskAttribute.value)
+				switch (collection.id) {
+				case 'starred':
+					this.setPriority({ task: task, priority: 1 })
+					break
+				case 'completed':
+					this.setPercentComplete({ task: task, complete: 100 })
+					break
+				case 'today':
+					this.setDate({ task: task, day: 0 })
+					break
+				case 'week':
+					this.setDate({ task: task, day: 6 })
+					break
+				}
+			}
+		},
 		hideCollection: function(collection) {
 			switch (collection.show) {
 			case 0:

src/store/tasks.js

@@ -892,6 +892,44 @@ const actions = {
 		context.dispatch('scheduleTaskUpdate', task)
 	},
 
+	/**
+	 * Sets the start or due date to the given day
+	 *
+	 * @param {Object} context The store context
+	 * @param {Task} task The task to update
+	 * @param {Integer} day The day to set
+	 */
+	async setDate(context, { task, day }) {
+		var start = moment(task.start, 'YYYYMMDDTHHmmss').startOf('day')
+		var due = moment(task.due, 'YYYYMMDDTHHmmss').startOf('day')
+		day = moment().startOf('day').add(day, 'days')
+
+		var diff
+		// Adjust start date
+		if (start.isValid()) {
+			diff = start.diff(moment().startOf('day'), 'days')
+			diff = diff < 0 ? 0 : diff
+			if (diff !== day) {
+				var newStart = moment(task.start, 'YYYYMMDDTHHmmss').year(day.year()).month(day.month()).date(day.date())
+				context.commit('setStart', { task: task, start: newStart })
+				context.dispatch('scheduleTaskUpdate', task)
+			}
+		// Adjust due date
+		} else if (due.isValid()) {
+			diff = due.diff(moment().startOf('day'), 'days')
+			diff = diff < 0 ? 0 : diff
+			if (diff !== day) {
+				var newDue = moment(task.due, 'YYYYMMDDTHHmmss').year(day.year()).month(day.month()).date(day.date())
+				context.commit('setDue', { task: task, due: newDue })
+				context.dispatch('scheduleTaskUpdate', task)
+			}
+		// Set the due date to appropriate value
+		} else {
+			context.commit('setDue', { task: task, due: day })
+			context.dispatch('scheduleTaskUpdate', task)
+		}
+	},
+
 	/**
 	 * Toggles if due and start date of a task are all-day
 	 *