From 420389cded4a1dd6ed7cfe8c7cdb7538b975e640 Mon Sep 17 00:00:00 2001
From: GretaD <gretadoci@gmail.com>
Date: Mon, 15 Jun 2020 18:28:57 +0200
Subject: [PATCH] Add rename mailbox option

Signed-off-by: GretaD <gretadoci@gmail.com>
---
 lib/IMAP/FolderMapper.php              |  13 +
 src/components/NavigationFolder.vue    | 331 +++++++++++++++++++++++++
 src/service/FolderService.js           |  51 ++++
 src/store/actions.js                   |   7 +
 src/store/mutations.js                 |  15 ++
 src/tests/unit/store/mutations.spec.js |  51 ++++
 6 files changed, 468 insertions(+)
 create mode 100644 src/components/NavigationFolder.vue
 create mode 100644 src/service/FolderService.js

diff --git a/lib/IMAP/FolderMapper.php b/lib/IMAP/FolderMapper.php
index 7f3f2795ef..b40d5abeba 100644
--- a/lib/IMAP/FolderMapper.php
+++ b/lib/IMAP/FolderMapper.php
@@ -139,6 +139,19 @@ public function getFoldersStatusAsObject(Horde_Imap_Client_Socket $client,
 		);
 	}
 
+	/**
+	 * @param Horde_Imap_Client_Socket $client
+	 * @param string $oldName
+	 * @param string $newName
+	 *
+	 * @throws Horde_Imap_Client_Exception
+	 */
+	public function renameFolder(Horde_Imap_Client_Socket $client,
+								 string $oldName,
+								 string $newName): void {
+		$client->renameMailbox($oldName, $newName);
+	}
+
 	/**
 	 * @param Folder[] $folders
 	 *
diff --git a/src/components/NavigationFolder.vue b/src/components/NavigationFolder.vue
new file mode 100644
index 0000000000..932689a5ce
--- /dev/null
+++ b/src/components/NavigationFolder.vue
@@ -0,0 +1,331 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<AppNavigationItem
+		v-if="visible"
+		:id="genId(folder)"
+		:key="genId(folder)"
+		:allow-collapse="true"
+		:force-menu="true"
+		:icon="icon"
+		:title="title"
+		:to="to"
+		@update:menuOpen="onMenuToggle"
+	>
+		<!-- actions -->
+		<template slot="actions">
+			<template v-if="top">
+				<ActionText
+					v-if="!account.isUnified && folder.specialRole !== 'flagged'"
+					icon="icon-info"
+					:title="folderId"
+				>
+					{{ statsText }}
+				</ActionText>
+				<ActionButton
+					v-if="renameLabel && folder.specialRole === null"
+					icon="icon-rename"
+					@click.prevent.stop="openRenameInput"
+				>
+					{{ t('mail', 'Edit name') }}
+				</ActionButton>
+				<ActionInput
+					v-if="renameInput"
+					icon="icon-rename"
+					:value.sync="folder.displayName"
+					@submit.prevent.stop="renameFolder"
+				/>
+				<ActionText v-if="showSaving" icon="icon-loading-small">
+					{{ t('mail', 'Saving') }}
+				</ActionText>
+				<ActionButton
+					v-if="folder.specialRole !== 'flagged'"
+					icon="icon-mail"
+					:title="t('mail', 'Mark all as read')"
+					:disabled="loadingMarkAsRead"
+					@click="markAsRead"
+				>
+					{{ t('mail', 'Mark all messages of this folder as read') }}
+				</ActionButton>
+
+				<ActionInput
+					v-if="!account.isUnified && folder.specialRole !== 'flagged'"
+					icon="icon-add"
+					@submit="createFolder"
+				>
+					{{ t('mail', 'Add subfolder') }}
+				</ActionInput>
+
+				<ActionButton
+					v-if="debug && !account.isUnified && folder.specialRole !== 'flagged'"
+					icon="icon-settings"
+					:title="t('mail', 'Clear cache')"
+					:disabled="clearingCache"
+					@click="clearCache"
+				>
+					{{ t('mail', 'Clear locally cached data, in case there are issues with synchronization.') }}
+				</ActionButton>
+			</template>
+		</template>
+		<AppNavigationCounter v-if="folder.unread" slot="counter">
+			{{ folder.unread }}
+		</AppNavigationCounter>
+
+		<!-- subfolders -->
+		<NavigationFolder
+			v-for="subFolder in subFolders"
+			:key="genId(subFolder)"
+			:account="account"
+			:folder="subFolder"
+			:top="false"
+		/>
+	</AppNavigationItem>
+</template>
+
+<script>
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
+import ActionText from '@nextcloud/vue/dist/Components/ActionText'
+
+import {clearCache} from '../service/MessageService'
+import {getFolderStats} from '../service/FolderService'
+import logger from '../logger'
+import {translatePlural as n} from '@nextcloud/l10n'
+import {translate as translateMailboxName} from '../i18n/MailboxTranslator'
+import {showInfo} from '@nextcloud/dialogs'
+
+export default {
+	name: 'NavigationFolder',
+	components: {
+		AppNavigationItem,
+		AppNavigationCounter,
+		ActionText,
+		ActionButton,
+		ActionInput,
+	},
+	props: {
+		account: {
+			type: Object,
+			required: true,
+		},
+		folder: {
+			type: Object,
+			required: true,
+		},
+		top: {
+			type: Boolean,
+			default: true,
+		},
+		filter: {
+			type: String,
+			default: '',
+			required: false,
+		},
+	},
+	data() {
+		return {
+			debug: window?.OC?.debug || false,
+			folderStats: undefined,
+			loadingMarkAsRead: false,
+			clearingCache: false,
+			renameLabel: true,
+			renameInput: false,
+			showSaving: false,
+		}
+	},
+	computed: {
+		visible() {
+			return (
+				this.account.showSubscribedOnly === false ||
+				(this.folder.attributes && this.folder.attributes.includes('\\subscribed'))
+			)
+		},
+		title() {
+			if (this.filter === 'starred') {
+				// Little hack to trick the translation logic into a different path
+				return translateMailboxName({
+					...this.folder,
+					specialUse: ['flagged'],
+				})
+			}
+			return translateMailboxName(this.folder)
+		},
+		folderId() {
+			return atob(this.folder.id)
+		},
+		icon() {
+			if (this.filter === 'starred') {
+				return 'icon-flagged'
+			} else if (this.folder.isPriorityInbox) {
+				return 'icon-important'
+			}
+			return this.folder.specialRole ? 'icon-' + this.folder.specialRole : 'icon-folder'
+		},
+		to() {
+			return {
+				name: 'folder',
+				params: {
+					accountId: this.account.id,
+					folderId: this.folder.id,
+					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 …')
+		},
+	},
+	methods: {
+		/**
+		 * Generate unique key id for a specific folder
+		 */
+		genId(folder) {
+			return 'account-' + this.account.id + '_' + folder.id
+		},
+
+		/**
+		 * On menu toggle, fetch stats
+		 * @param {boolean} open menu opened state
+		 */
+		onMenuToggle(open) {
+			if (open) {
+				this.fetchFolderStats()
+			}
+		},
+
+		/**
+		 * Fetch folder unread/read stats
+		 */
+		async fetchFolderStats() {
+			this.folderStats = null
+			if (this.account.isUnified || this.folder.specialRole === 'flagged') {
+				return
+			}
+
+			try {
+				const stats = await getFolderStats(this.account.id, this.folder.id)
+				logger.debug('loaded folder stats', {stats})
+				this.folderStats = stats
+			} catch (error) {
+				this.folderStats = {error: true}
+				logger.error(`could not load folder stats for ${this.folder.id}`, error)
+			}
+		},
+
+		createFolder(e) {
+			const name = e.target.elements[1].value
+			const withPrefix = atob(this.folder.id) + this.folder.delimiter + name
+			logger.info(`creating folder ${withPrefix} as subfolder of ${this.folder.id}`)
+			this.menuOpen = false
+			this.$store
+				.dispatch('createFolder', {
+					account: this.account,
+					name: withPrefix,
+				})
+				.then(() => logger.info(`folder ${withPrefix} created`))
+				.catch((error) => {
+					logger.error(`could not create folder ${withPrefix}`, {error})
+					throw error
+				})
+		},
+		markAsRead() {
+			this.loadingMarkAsRead = true
+
+			this.$store
+				.dispatch('markFolderRead', {
+					accountId: this.account.id,
+					folderId: this.folder.id,
+				})
+				.then(() => logger.info(`folder ${this.folder.id} marked as read`))
+				.catch((error) => logger.error(`could not mark folder ${this.folder.id} as read`, {error}))
+				.then(() => (this.loadingMarkAsRead = false))
+		},
+		async clearCache() {
+			try {
+				this.clearingCache = true
+				logger.debug('clearing message cache', {
+					accountId: this.account.id,
+					folderId: this.folder.id,
+				})
+
+				await clearCache(this.account.id, this.folder.id)
+
+				// TODO: there might be a nicer way to handle this
+				window.location.reload(false)
+			} finally {
+				this.clearCache = false
+			}
+		},
+		async renameFolder(event) {
+			this.renameInput = false
+			this.showSaving = true
+
+			const newName = event.target.querySelector('input[type=text]').value
+			try {
+				await this.$store.dispatch('renameFolder', {
+					account: this.account,
+					folder: this.folder,
+					newName,
+				})
+				this.renameLabel = true
+				this.renameInput = false
+				this.showSaving = false
+			} catch (error) {
+				showInfo(t('mail', 'An error occurred, unable to rename the folder.'))
+				console.error(error)
+				this.renameLabel = false
+				this.renameInput = true
+				this.showSaving = false
+			}
+		},
+		openRenameInput() {
+			// Hide label and show input
+			this.renameLabel = false
+			this.renameInput = true
+			this.showSaving = false
+		},
+	},
+}
+</script>
diff --git a/src/service/FolderService.js b/src/service/FolderService.js
new file mode 100644
index 0000000000..3a3289f931
--- /dev/null
+++ b/src/service/FolderService.js
@@ -0,0 +1,51 @@
+import {generateUrl} from '@nextcloud/router'
+import Axios from '@nextcloud/axios'
+
+export function fetchAll(accountId) {
+	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders', {
+		accountId,
+	})
+
+	// FIXME: this return format is weird and should be avoided
+	// TODO: respect `resp.data.delimiter` value
+	return Axios.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 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)
+}
+
+export function markFolderRead(accountId, folderId) {
+	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders/{folderId}/read', {
+		accountId,
+		folderId,
+	})
+
+	return Axios.post(url).then((resp) => resp.data)
+}
+
+export async function patchFolder(accountId, folderId, data) {
+	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders/{folderId}', {
+		accountId,
+		folderId,
+	})
+
+	const response = await Axios.patch(url, data)
+	return response.data.data
+}
diff --git a/src/store/actions.js b/src/store/actions.js
index d0a62e26eb..659e0b9463 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -669,5 +669,12 @@ export default {
 	async deleteAlias({ commit }, { account, aliasToDelete }) {
 		await deleteAlias(account, aliasToDelete)
 		commit('deleteAlias', { account, alias: aliasToDelete })
+	async renameFolder({commit}, {account, folder, newName}) {
+		await patchFolder(account.id, folder.id, {
+			name: newName,
+		})
+
+		console.debug(`folder ${folder.id} renamed to ${newName}`, {folder})
+		commit('renameFolder', {accountId: account.id, folder, newName})
 	},
 }
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 64e57b3031..38d764a915 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -218,4 +218,19 @@ export default {
 	deleteAlias(state, { account, alias }) {
 		account.aliases.splice(account.aliases.indexOf(alias), 1)
 	},
+	renameFolder(state, { accountId, folder, newName }) {
+		const oldId = folder.id
+
+		// Remove the old entry
+		Vue.delete(state.folders, normalizedFolderId(accountId, oldId))
+		// Update the ID
+		folder.id = btoa(newName)
+		// Set the new entry
+		Vue.set(state.folders, normalizedFolderId(accountId, folder.id), folder)
+
+		// Update the reference
+		const oldNormalized = normalizedFolderId(accountId, oldId)
+		state.accounts[accountId].folders = state.accounts[accountId].folders.filter(id => id !== oldNormalized)
+		state.accounts[accountId].folders.push(normalizedFolderId(accountId, folder.id))
+	},
 }
diff --git a/src/tests/unit/store/mutations.spec.js b/src/tests/unit/store/mutations.spec.js
index 6099c9cac3..a3519bc192 100644
--- a/src/tests/unit/store/mutations.spec.js
+++ b/src/tests/unit/store/mutations.spec.js
@@ -27,6 +27,57 @@ import {
 } from '../../../store/constants'
 
 describe('Vuex store mutations', () => {
+	it('renames a folder', () => {
+		const oldId = btoa('Old')
+		const newId = btoa('New')
+		const state = {
+			accounts: {
+				123: {
+					accountId: 123,
+					id: 123,
+					folders: [
+						'123-' + oldId
+					],
+				},
+			},
+			envelopes: {},
+			folders: {
+				['123-' + oldId]: {
+					id: oldId,
+					envelopeLists: {},
+				},
+			},
+		}
+
+		mutations.renameFolder(state, {
+			accountId: 123,
+			folder: {
+				id: oldId,
+				envelopeLists: {},
+			},
+			newName: 'New'
+		})
+
+		expect(state).to.deep.equal({
+			accounts: {
+				123: {
+					accountId: 123,
+					id: 123,
+					folders: [
+						'123-' + newId
+					],
+				},
+			},
+			envelopes: {},
+			folders: {
+				['123-' + newId]: {
+					id: newId,
+					envelopeLists: {},
+				},
+			},
+		})
+	})
+
 	it('adds envelopes', () => {
 		const state = {
 			accounts: {