Move navigation account and folder to separate components

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

4 files changed, 263 insertions, 95 deletions

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 9a9b200c8..cd14d1cdc 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -29,8 +29,20 @@
 		/>
 		<ul id="accounts-list">
 			<template v-for="group in menu">
-				<AppNavigationItem v-for="item in group.items" :key="item.key" :item="item" />
-				<AppNavigationSpacer :key="group.id" />
+				<NavigationAccount v-if="group.account" :key="group.account.id" :account="group.account" />
+				<NavigationFolder
+					v-for="item in group.folders"
+					v-show="!group.account.collapsed || SHOW_COLLAPSED.indexOf(item.specialRole) !== -1"
+					:key="item.key"
+					:account="group.account"
+					:folder="item"
+				/>
+				<NavigationAccountExpandCollapse
+					v-if="!group.account.isUnified && group.account.folders.length > 0"
+					:key="'collapse-' + group.account.id"
+					:account="group.account"
+				/>
+				<AppNavigationSpacer :key="'spacer-' + group.account.id" />
 			</template>
 		</ul>
 		<AppNavigationSettings :title="t('mail', 'Settings')">
@@ -40,17 +52,11 @@
 </template>
 
 <script>
-import {translate as t} from 'nextcloud-server/dist/l10n'
-import {
-	AppNavigation,
-	AppNavigationItem,
-	AppNavigationNew,
-	AppNavigationSettings,
-	AppNavigationSpacer,
-} from 'nextcloud-vue'
+import {AppNavigation, AppNavigationNew, AppNavigationSettings, AppNavigationSpacer} from 'nextcloud-vue'
 
-import {calculateAccountColor} from '../util/AccountColor'
-import {translate as translateMailboxName} from '../l10n/MailboxTranslator'
+import NavigationAccount from './NavigationAccount'
+import NavigationAccountExpandCollapse from './NavigationAccountExpandCollapse'
+import NavigationFolder from './NavigationFolder'
 
 const SHOW_COLLAPSED = Object.seal(['inbox', 'flagged', 'drafts', 'sent'])
 
@@ -60,102 +66,31 @@ export default {
 	name: 'Navigation',
 	components: {
 		AppNavigation,
-		AppNavigationItem,
 		AppNavigationNew,
 		AppNavigationSettings,
 		AppNavigationSpacer,
 		AppSettingsMenu,
+		NavigationAccount,
+		NavigationAccountExpandCollapse,
+		NavigationFolder,
+	},
+	data() {
+		return {
+			SHOW_COLLAPSED,
+		}
 	},
 	computed: {
 		menu() {
 			return this.$store.getters.getAccounts().map(account => {
-				const items = []
-
-				const isError = account.error
-
-				if (account.isUnified !== true && account.visible !== false) {
-					const route = {
-						name: 'accountSettings',
-						params: {
-							accountId: account.id,
-						},
-					}
-
-					items.push({
-						id: 'account' + account.id,
-						key: 'account' + account.id,
-						text: account.emailAddress,
-						bullet: isError ? undefined : calculateAccountColor(account.name), // TODO
-						icon: isError ? 'icon-error' : undefined,
-						router: route,
-						utils: {
-							actions: [
-								{
-									icon: 'icon-settings',
-									text: t('mail', 'Edit'),
-									action: () => {
-										this.$router.push(route) // eslint-disable-line
-									},
-								},
-								{
-									icon: 'icon-delete',
-									text: t('mail', 'Delete'),
-									action: () => {
-										this.$store.dispatch('deleteAccount', account).catch(console.error.bind(this))
-									},
-								},
-							],
-						},
-					})
-				}
-
-				const folderToEntry = folder => {
-					let icon = 'folder'
-					if (folder.specialRole) {
-						icon = folder.specialRole
-					}
-
-					return {
-						id: 'account' + account.id + '_' + folder.id,
-						key: 'account' + account.id + '_' + folder.id,
-						text: translateMailboxName(folder),
-						icon: 'icon-' + icon,
-						router: {
-							name: 'folder',
-							params: {
-								accountId: account.id,
-								folderId: folder.id,
-							},
-							exact: false,
-						},
-						utils: {
-							counter: folder.unread,
-						},
-						collapsible: true,
-						opened: folder.opened,
-						children: folder.folders.map(folderToEntry),
-					}
-				}
-
-				this.$store.getters
+				const folders = this.$store.getters
 					.getFolders(account.id)
 					.filter(folder => !account.collapsed || SHOW_COLLAPSED.indexOf(folder.specialRole) !== -1)
-					.map(folderToEntry)
-					.forEach(i => items.push(i))
-
-				if (!account.isUnified && account.folders.length > 0) {
-					items.push({
-						id: 'collapse-' + account.id,
-						key: 'collapse-' + account.id,
-						classes: ['collapse-folders'],
-						text: account.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders'),
-						action: () => this.$store.commit('toggleAccountCollapsed', account.id),
-					})
-				}
+				//.map(folderToEntry)
 
 				return {
 					id: account.id,
-					items,
+					account: account,
+					folders,
 				}
 			})
 		},
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
new file mode 100644
index 000000000..5612c0a2f
--- /dev/null
+++ b/src/components/NavigationAccount.vue
@@ -0,0 +1,100 @@
+<!--
+  - @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" :item="data" />
+</template>
+
+<script>
+import {AppNavigationItem} from 'nextcloud-vue'
+
+import {calculateAccountColor} from '../util/AccountColor'
+
+export default {
+	name: 'NavigationAccount',
+	components: {
+		AppNavigationItem,
+	},
+	props: {
+		account: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		visible() {
+			return this.account.isUnified !== true && this.account.visible !== false
+		},
+		data() {
+			const route = {
+				name: 'accountSettings',
+				params: {
+					accountId: this.account.id,
+				},
+			}
+
+			const isError = this.account.error
+			return {
+				id: 'account' + this.account.id,
+				key: 'account' + this.account.id,
+				text: this.account.emailAddress,
+				bullet: isError ? undefined : calculateAccountColor(this.account.name), // TODO
+				icon: isError ? 'icon-error' : undefined,
+				router: route,
+				utils: {
+					actions: [
+						{
+							icon: 'icon-settings',
+							text: t('mail', 'Edit'),
+							action: () => {
+									this.$router.push(route) // eslint-disable-line
+							},
+						},
+						{
+							icon: 'icon-delete',
+							text: t('mail', 'Delete'),
+							action: () => {
+								this.$store.dispatch('deleteAccount', this.account).catch(console.error.bind(this))
+							},
+						},
+						{
+							text: t('Add folder'),
+						},
+						{
+							icon: 'icon-add',
+							text: t('mail', 'Add folder'),
+							input: 'text',
+							action: e => {
+								this.createFolder(e.target.value)
+							},
+						},
+					],
+				},
+			}
+		},
+	},
+	methods: {
+		createFolder(account) {
+			console.info('create', account)
+		},
+	},
+}
+</script>
diff --git a/src/components/NavigationAccountExpandCollapse.vue b/src/components/NavigationAccountExpandCollapse.vue
new file mode 100644
index 000000000..188a3fa02
--- /dev/null
+++ b/src/components/NavigationAccountExpandCollapse.vue
@@ -0,0 +1,52 @@
+<!--
+  - @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 :item="data" />
+</template>
+
+<script>
+import {AppNavigationItem} from 'nextcloud-vue'
+
+export default {
+	name: 'NavigationAccount',
+	components: {
+		AppNavigationItem,
+	},
+	props: {
+		account: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		data() {
+			return {
+				id: 'collapse-' + this.account.id,
+				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),
+			}
+		},
+	},
+}
+</script>
diff --git a/src/components/NavigationFolder.vue b/src/components/NavigationFolder.vue
new file mode 100644
index 000000000..7435b7b71
--- /dev/null
+++ b/src/components/NavigationFolder.vue
@@ -0,0 +1,81 @@
+<!--
+  - @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 :item="data" />
+</template>
+
+<script>
+import {AppNavigationItem} from 'nextcloud-vue'
+
+import {translate as translateMailboxName} from '../l10n/MailboxTranslator'
+
+export default {
+	name: 'NavigationFolder',
+	components: {
+		AppNavigationItem,
+	},
+	props: {
+		account: {
+			type: Object,
+			required: true,
+		},
+		folder: {
+			type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		data() {
+			return this.folderToEntry(this.folder)
+		},
+	},
+	methods: {
+		folderToEntry(folder) {
+			let icon = 'folder'
+			if (folder.specialRole) {
+				icon = folder.specialRole
+			}
+
+			return {
+				id: 'account' + this.account.id + '_' + folder.id,
+				key: 'account' + this.account.id + '_' + folder.id,
+				text: translateMailboxName(folder),
+				icon: 'icon-' + icon,
+				router: {
+					name: 'folder',
+					params: {
+						accountId: this.account.id,
+						folderId: folder.id,
+					},
+					exact: false,
+				},
+				utils: {
+					counter: folder.unread,
+				},
+				collapsible: true,
+				opened: folder.opened,
+				children: folder.folders.map(this.folderToEntry),
+			}
+		},
+	},
+}
+</script>