Make it possible to create a new folder

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

4 files changed, 69 insertions, 17 deletions

diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index 5612c0a2f..f8fa6fdaf 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -20,7 +20,7 @@
   -->
 
 <template>
-	<AppNavigationItem v-if="visible" :item="data" />
+	<AppNavigationItem v-if="visible" :item="data" :menu-open.sync="menuOpen" />
 </template>
 
 <script>
@@ -39,6 +39,11 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			menuOpen: false,
+		}
+	},
 	computed: {
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
@@ -76,14 +81,11 @@ export default {
 							},
 						},
 						{
-							text: t('Add folder'),
-						},
-						{
 							icon: 'icon-add',
 							text: t('mail', 'Add folder'),
 							input: 'text',
 							action: e => {
-								this.createFolder(e.target.value)
+								this.createFolder(e)
 							},
 						},
 					],
@@ -92,8 +94,17 @@ export default {
 		},
 	},
 	methods: {
-		createFolder(account) {
-			console.info('create', account)
+		createFolder(e) {
+			const name = e.target.elements[0].value
+			console.info('creating folder ' + name, name)
+			this.menuOpen = false
+			this.$store
+				.dispatch('createFolder', {account: this.account, name})
+				.then(() => console.info(`folder ${name} created`))
+				.catch(e => {
+					console.error('could not create folder', e)
+					throw e
+				})
 		},
 	},
 }
diff --git a/src/service/FolderService.js b/src/service/FolderService.js
index 829bc3938..411d575a4 100644
--- a/src/service/FolderService.js
+++ b/src/service/FolderService.js
@@ -10,3 +10,14 @@ export function fetchAll(accountId) {
 	// TODO: respect `resp.data.delimiter` value
 	return HttpClient.get(url).then(resp => resp.data.folders)
 }
+
+export function create(accountId, name) {
+	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders', {
+		accountId,
+	})
+
+	const data = {
+		name,
+	}
+	return HttpClient.post(url, data).then(resp => resp.data)
+}
diff --git a/src/store/actions.js b/src/store/actions.js
index d1d2c16cc..5c27bb97f 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -30,7 +30,7 @@ import {
 	fetch as fetchAccount,
 	fetchAll as fetchAllAccounts,
 } from '../service/AccountService'
-import {fetchAll as fetchAllFolders} from '../service/FolderService'
+import {fetchAll as fetchAllFolders, create as createFolder} from '../service/FolderService'
 import {deleteMessage, fetchEnvelopes, fetchMessage, setEnvelopeFlag, syncEnvelopes} from '../service/MessageService'
 import {showNewMessagesNotification} from '../service/NotificationService'
 import {parseUid} from '../util/EnvelopeUidParser'
@@ -95,6 +95,12 @@ export default {
 				throw err
 			})
 	},
+	createFolder({commit}, {account, name}) {
+		return createFolder(account.id, name).then(folder => {
+			console.debug(`folder ${name} created for account ${account.id}`)
+			commit('addFolder', {account, folder})
+		})
+	},
 	fetchEnvelopes({state, commit, getters, dispatch}, {accountId, folderId, query}) {
 		const folder = getters.getFolder(accountId, folderId)
 		const isSearch = !_.isUndefined(query)
diff --git a/src/store/mutations.js b/src/store/mutations.js
index b67471543..4d21eb0e3 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -27,6 +27,15 @@ import {havePrefix} from '../imap/MailboxPrefix'
 import {sortMailboxes} from '../imap/MailboxSorter'
 import {UNIFIED_ACCOUNT_ID} from './constants'
 
+const addFolderToState = (state, account) => folder => {
+	const id = account.id + '-' + folder.id
+	folder.accountId = account.id
+	folder.envelopes = []
+	folder.searchEnvelopes = []
+	Vue.set(state.folders, id, folder)
+	return id
+}
+
 export default {
 	savePreference(state, {key, value}) {
 		Vue.set(state.preferences, key, value)
@@ -36,18 +45,10 @@ export default {
 		Vue.set(state.accounts, account.id, account)
 		Vue.set(state, 'accountList', _.sortBy(state.accountList.concat([account.id])))
 
-		const addToState = folder => {
-			const id = account.id + '-' + folder.id
-			folder.accountId = account.id
-			folder.envelopes = []
-			folder.searchEnvelopes = []
-			Vue.set(state.folders, id, folder)
-			return id
-		}
-
 		// Save the folders to the store, but only keep IDs in the account's folder list
 		const folders = buildMailboxHierarchy(sortMailboxes(account.folders || []), havePrefix(account.folders))
 		Vue.set(account, 'folders', [])
+		const addToState = addFolderToState(state, account)
 		folders.forEach(folder => {
 			// Add all folders (including subfolders to state, but only toplevel to account
 			const id = addToState(folder)
@@ -62,6 +63,29 @@ export default {
 	toggleAccountCollapsed(state, accountId) {
 		state.accounts[accountId].collapsed = !state.accounts[accountId].collapsed
 	},
+	addFolder(state, {account, folder}) {
+		// Flatten the existing ones before updating the hierarchy
+		const existing = account.folders.map(id => state.folders[id])
+		existing.forEach(folder => {
+			if (!folder.folders) {
+				return
+			}
+			folder.folders.map(folder => existing.push(folder))
+			folder.folders = []
+		})
+		// Save the folders to the store, but only keep IDs in the account's folder list
+		existing.push(folder)
+		const folders = buildMailboxHierarchy(sortMailboxes(existing), havePrefix(existing))
+		Vue.set(account, 'folders', [])
+		const addToState = addFolderToState(state, account)
+		folders.forEach(folder => {
+			// Add all folders (including subfolders to state, but only toplevel to account
+			const id = addToState(folder)
+			folder.folders.forEach(addToState)
+
+			account.folders.push(id)
+		})
+	},
 	updateFolderSyncToken(state, {folder, syncToken}) {
 		folder.syncToken = syncToken
 	},