Drag'n'Drop support

package.json

@@ -67,6 +67,7 @@
     "vue-slide-up-down": "^2.0.1",
     "vue-tabs-component": "^1.5.0",
     "vuex": "^3.1.3",
+    "vue-draggable": "^2.0.6",
     "vuex-router-sync": "^5.0.0"
   },
   "browserslist": [

src/components/NavigationAccountExpandCollapse.vue

@@ -26,6 +26,8 @@
 <script>
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 
+import logger from '../logger'
+
 export default {
 	name: 'NavigationAccountExpandCollapse',
 	components: {
@@ -45,11 +47,39 @@ export default {
 			return this.account.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders')
 		},
 	},
+	data() {
+		return {
+			timeoutID: '',
+			key: 'collapse-' + this.account.id,
+			classes: ['collapse-folders'],
+			text: this.account.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders'),
+			action: () => this.$store.commit('toggleAccountCollapsed', this.account.id),
+		}
+	},
 	methods: {
 		toggleCollapse() {
 			this.$store.commit('toggleAccountCollapsed', this.account.id)
 		},
 	},
+	mounted() {
+		this.$el.ondragenter = () => {
+			logger.debug('drag enter on expand-collapse component')
+
+			// this.style.background = '#F5F5F5'
+			clearTimeout(this.timeoutID)
+			this.timeoutID = setTimeout(() => {
+				logger.debug('expanding folder list for drag and drop')
+
+				this.$store.commit('toggleAccountCollapsed', this.account.id)
+				this.timeoutID = undefined
+			}, 800)
+		}
+		this.$el.ondragleave = () => {
+			logger.debug('drag leave on expand-collapse component')
+
+			clearTimeout(this.timeoutID)
+		}
+	}
 }
 </script>
 

src/components/NavigationFolder.vue

@@ -28,6 +28,8 @@
 		:icon="icon"
 		:title="title"
 		:to="to"
+		:menu-open.sync="menuOpen"
+		:open.sync="folderOpen"
 		@update:menuOpen="onMenuToggle"
 	>
 		<!-- actions -->
@@ -122,6 +124,10 @@ export default {
 	},
 	data() {
 		return {
+			timeoutID: '',
+			folderOpen: false,
+			menuOpen: false,
+			loadingFolderStats: true,
 			folderStats: undefined,
 			loadingMarkAsRead: false,
 		}
@@ -155,31 +161,21 @@ export default {
 					filter: this.filter ? this.filter : undefined,
 				},
 			}
-		},
-		subFolders() {
-			return this.$store.getters.getSubfolders(this.account.id, this.folder.id)
-		},
-		statsText() {
-			if (this.folderStats && 'total' in this.folderStats && 'unread' in this.folderStats) {
-				if (this.folderStats.unread === 0) {
-					return n('mail', '{total} message', '{total} messages', this.folderStats.total, {
-						total: this.folderStats.total,
-					})
-				} else {
-					return n(
-						'mail',
-						'{unread} unread of {total}',
-						'{unread} unread of {total}',
-						this.folderStats.unread,
-						{
-							total: this.folderStats.total,
-							unread: this.folderStats.unread,
-						}
-					)
-				}
-			}
-			return t('mail', 'Loading …')
-		},
+		}
+	},
+	mounted() {
+		this.$el.ondragenter = () => {
+			//this.style.background = '#F5F5F5'
+			clearTimeout(this.timeoutID)
+			this.timeoutID = setTimeout(() => {
+				this.folderOpen = !this.folderOpen
+				this.timeoutID = ''
+			}, 800)
+		}
+		this.$el.ondragleave = () => {
+			//this.style.background = ''
+			clearTimeout(this.timeoutID)
+		}
 	},
 	methods: {
 		/**
@@ -246,6 +242,32 @@ export default {
 				.catch((error) => logger.error(`could not mark folder ${this.folder.id} as read`, {error}))
 				.then(() => (this.loadingMarkAsRead = false))
 		},
+
+		subFolders() {
+			return this.$store.getters.getSubfolders(this.account.id, this.folder.id)
+		},
+
+		statsText() {
+			if (this.folderStats && 'total' in this.folderStats && 'unread' in this.folderStats) {
+				if (this.folderStats.unread === 0) {
+					return n('mail', '{total} message', '{total} messages', this.folderStats.total, {
+						total: this.folderStats.total,
+					})
+				} else {
+					return n(
+						'mail',
+						'{unread} unread of {total}',
+						'{unread} unread of {total}',
+						this.folderStats.unread,
+						{
+							total: this.folderStats.total,
+							unread: this.folderStats.unread,
+						}
+					)
+				}
+			}
+			return t('mail', 'Loading …')
+		},
 	},
 }
 </script>

src/service/MessageService.js

@@ -146,3 +146,13 @@ export function deleteMessage(accountId, folderId, id) {
 
 	return axios.delete(url).then((resp) => resp.data)
 }
+
+export function moveMessage(accountId, startFolderId, targetFolderId, id) {
+	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders/{startFolderId}/messages/{id}/move', {
+		accountId,
+		startFolderId,
+		id,
+	})
+
+	return HttpClient.post(url, {destAccountId: accountId, destFolderId: targetFolderId}).then(resp => resp.data)
+}

src/store/actions.js

@@ -56,6 +56,7 @@ import {
 	fetchEnvelope,
 	fetchEnvelopes,
 	fetchMessage,
+	moveMessage,
 	setEnvelopeFlag,
 	syncEnvelopes,
 } from '../service/MessageService'
@@ -534,6 +535,33 @@ export default {
 			newUid: uid,
 		})
 	},
+	moveMessage({getters, commit}, data) {
+		const folder = getters.getFolder(data.accountId, data.startFolderId)
+		commit('removeEnvelope', {
+			accountId: data.accountId,
+			folder,
+			id: data.msgId,
+		})
+		return moveMessage(data.accountId, data.startFolderId, data.targetFolderId, data.msgId)
+			.then(() => {
+				commit('removeMessage', {
+					accountId: data.accountId,
+					folder,
+					id: data.msgId,
+				})
+				console.log('message moved')
+			})
+			.catch(err => {
+				console.error('could not move message', err)
+				const env = getters.getEnvelope(data.accountId, data.startFolderId, data.msgId)
+				commit('addEnvelope', {
+					accountId: data.accountId,
+					folder,
+					env,
+				})
+				throw err
+			})
+	},
 	deleteMessage({getters, commit}, {accountId, folderId, id}) {
 		commit('removeEnvelope', {accountId, folderId, id})