Make it possible to create subfolders and show folder stats

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

2 files changed, 85 insertions, 7 deletions

diff --git a/src/components/NavigationFolder.vue b/src/components/NavigationFolder.vue
index 7435b7b71..004e38399 100644
--- a/src/components/NavigationFolder.vue
+++ b/src/components/NavigationFolder.vue
@@ -20,13 +20,14 @@
   -->
 
 <template>
-	<AppNavigationItem :item="data" />
+	<AppNavigationItem :item="data" :menu-open.sync="menuOpen" />
 </template>
 
 <script>
 import {AppNavigationItem} from 'nextcloud-vue'
 
 import {translate as translateMailboxName} from '../l10n/MailboxTranslator'
+import {getFolderStats} from '../service/FolderService'
 
 export default {
 	name: 'NavigationFolder',
@@ -43,18 +44,60 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			menuOpen: false,
+			loadingFolderStats: true,
+			folderStats: undefined,
+		}
+	},
 	computed: {
 		data() {
-			return this.folderToEntry(this.folder)
+			return this.folderToEntry(this.folder, true)
+		},
+	},
+	watch: {
+		menuOpen() {
+			// Fetch current stats when the menu is opened
+			if (this.menuOpen) {
+				this.fetchFolderStats()
+			}
 		},
 	},
 	methods: {
-		folderToEntry(folder) {
+		folderToEntry(folder, top) {
 			let icon = 'folder'
 			if (folder.specialRole) {
 				icon = folder.specialRole
 			}
 
+			const actions = []
+			if (top) {
+				if (this.loadingFolderStats) {
+					actions.push({
+						icon: 'icon-info',
+						text: atob(this.folder.id),
+						longtext: t('mail', 'Loading …'),
+					})
+				} else {
+					actions.push({
+						icon: 'icon-info',
+						text: atob(this.folder.id),
+						longtext: t('mail', '{total} messages ({unread} unread)', {
+							total: this.folderStats.total,
+							unread: this.folderStats.unread,
+						}),
+					})
+				}
+
+				actions.push({
+					icon: 'icon-add',
+					text: t('mail', 'Add subfolder'),
+					input: 'text',
+					action: this.createFolder,
+				})
+			}
+
 			return {
 				id: 'account' + this.account.id + '_' + folder.id,
 				key: 'account' + this.account.id + '_' + folder.id,
@@ -69,13 +112,39 @@ export default {
 					exact: false,
 				},
 				utils: {
+					actions,
 					counter: folder.unread,
 				},
 				collapsible: true,
 				opened: folder.opened,
-				children: folder.folders.map(this.folderToEntry),
+				children: folder.folders.map(folder => this.folderToEntry(folder, false)),
 			}
 		},
+		fetchFolderStats() {
+			this.loadingFolderStats = true
+
+			getFolderStats(this.account.id, this.folder.id)
+				.then(stats => {
+					console.debug('loaded folder stats', stats)
+					this.folderStats = stats
+
+					this.loadingFolderStats = false
+				})
+				.catch(console.error.bind(this))
+		},
+		createFolder(e) {
+			const name = e.target.elements[0].value
+			const withPrefix = atob(this.folder.id) + this.folder.delimiter + name
+			console.info(`creating folder ${withPrefix} as subfolder of ${this.folder.id}`)
+			this.menuOpen = false
+			this.$store
+				.dispatch('createFolder', {account: this.account, name: withPrefix})
+				.then(() => console.info(`folder ${withPrefix} created`))
+				.catch(e => {
+					console.error(`could not create folder ${withPrefix}`, e)
+					throw e
+				})
+		},
 	},
 }
 </script>
diff --git a/src/service/FolderService.js b/src/service/FolderService.js
index 411d575a4..c24c9aceb 100644
--- a/src/service/FolderService.js
+++ b/src/service/FolderService.js
@@ -1,5 +1,5 @@
 import {generateUrl} from 'nextcloud-server/dist/router'
-import HttpClient from 'nextcloud-axios'
+import Axios from 'nextcloud-axios'
 
 export function fetchAll(accountId) {
 	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders', {
@@ -8,7 +8,7 @@ export function fetchAll(accountId) {
 
 	// FIXME: this return format is weird and should be avoided
 	// TODO: respect `resp.data.delimiter` value
-	return HttpClient.get(url).then(resp => resp.data.folders)
+	return Axios.get(url).then(resp => resp.data.folders)
 }
 
 export function create(accountId, name) {
@@ -19,5 +19,14 @@ export function create(accountId, name) {
 	const data = {
 		name,
 	}
-	return HttpClient.post(url, data).then(resp => resp.data)
+	return Axios.post(url, data).then(resp => resp.data)
+}
+
+export function getFolderStats(accountId, folderId) {
+	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders/{folderId}/stats', {
+		accountId,
+		folderId,
+	})
+
+	return Axios.get(url).then(resp => resp.data)
 }