Feat: cross link app settings to account settings

Signed-off-by: greta <[email protected]>

src/components/AccountSettings.vue

@@ -139,9 +139,6 @@ export default {
 		}
 	},
 	computed: {
-		menu() {
-			return this.buildMenu()
-		},
 		displayName() {
 			return this.account.name
 		},

src/components/AppSettingsMenu.vue

@@ -8,7 +8,7 @@
 			:name="t('mail', 'Mail settings')"
 			:show-navigation="true"
 			:open.sync="showSettings">
-			<NcAppSettingsSection id="account-settings" :name="t('mail', 'Account creation')">
+			<NcAppSettingsSection id="account-creation" :name="t('mail', 'Accounts')">
 				<NcButton v-if="allowNewMailAccounts"
 					type="primary"
 					to="/setup"
@@ -19,6 +19,18 @@
 					</template>
 					{{ t('mail', 'Add mail account') }}
 				</NcButton>
+
+			<h6>{{ t('mail', 'Account settings') }}</h6>
+				<p>{{ t('mail', 'Settings for:') }}</p>
+			<li v-for="account in accounts" :key="account.id">
+				<NcButton v-if="account && account.emailAddress"
+						  class="app-settings-button"
+						  type="secondary"
+						  :aria-label="t('mail', 'Account settings')"
+						  @click="openAccountSettings(account.id)">
+					{{ account.emailAddress }}
+				</NcButton>
+			</li>
 			</NcAppSettingsSection>
 
 			<NcAppSettingsSection id="appearance-and-accessibility" :name="t('mail', 'General')">
@@ -299,6 +311,7 @@ import Logger from '../logger.js'
 import SmimeCertificateModal from './smime/SmimeCertificateModal.vue'
 import TrustedSenders from './TrustedSenders.vue'
 import InternalAddress from './InternalAddress.vue'
+import AccountSettings from './AccountSettings.vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import { mapGetters } from 'vuex'
 
@@ -307,6 +320,7 @@ export default {
 	components: {
 		TrustedSenders,
 		InternalAddress,
+		AccountSettings,
 		NcButton,
 		IconEmail,
 		IconAdd,
@@ -347,13 +361,19 @@ export default {
 			displaySmimeCertificateModal: false,
 			sortOrder: 'newest',
 			showSettings: false,
+			showAccountSettings: false,
+			showMailSettings: true,
+			selectedAccount: null,
 			mailvelopeIsAvailable: false,
 		}
 	},
 	computed: {
 		...mapGetters([
 			'isFollowUpFeatureAvailable',
 		]),
+		...mapGetters({
+			accounts: 'accounts',
+		}),
 		searchPriorityBody() {
 			return this.$store.getters.getPreference('search-priority-body', 'false') === 'true'
 		},
@@ -402,6 +422,13 @@ export default {
 		this.checkMailvelope()
 	},
 	methods: {
+		closeAccountSettings() {
+			this.showAccountSettings = false
+		},
+		openAccountSettings(accountId) {
+			this.$store.commit('showSettingsForAccount', accountId)
+			this.showSettings = false
+		},
 		checkMailvelope() {
 			this.mailvelopeIsAvailable = !!window.mailvelope
 		},

src/components/NavigationAccount.vue

@@ -28,8 +28,7 @@
 						{{ quotaText }}
 					</ActionText>
 					<ActionButton :close-after-click="true"
-						@click="showAccountSettings"
-						@shortkey="toggleAccountSettings">
+						@click="showAccountSettings(true)">
 						<template #icon>
 							<IconSettings :size="16" />
 						</template>
@@ -81,7 +80,7 @@
 				</template>
 			</template>
 		</NcAppNavigationCaption>
-		<AccountSettings :open="showSettings" :account="account" @update:open="toggleAccountSettings" />
+		<AccountSettings :open="showSettings" :account="account" @update:open="showAccountSettings($event)" />
 	</Fragment>
 </template>
 
@@ -150,14 +149,16 @@ export default {
 			quota: undefined,
 			editing: false,
 			showSaving: false,
-			showSettings: false,
 			createMailboxName: '',
 			showMailboxes: false,
 			nameInput: false,
 			nameLabel: true,
 		}
 	},
 	computed: {
+		showSettings() {
+			return this.$store.getters.showSettingsForAccount(this.account.id)
+		},
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
 		},
@@ -286,16 +287,16 @@ export default {
 			}
 		},
 		/**
-		 * Toggles the account settings overview
-		 */
-		toggleAccountSettings() {
-			this.showSettings = !this.showSettings
-		},
-		/**
-		 * Shows the account settings
+		 * Show the settings for the given account
+		 *
+		 * @param {boolean} show true to show, false to hide
 		 */
-		showAccountSettings() {
-			this.showSettings = true
+		showAccountSettings(show) {
+			if (show) {
+				this.$store.commit('showSettingsForAccount', this.account.id)
+			} else {
+				this.$store.commit('showSettingsForAccount', null)
+			}
 		},
 	},
 }

src/store/getters.js

@@ -159,4 +159,5 @@ export const getters = {
 	isFollowUpFeatureAvailable: (state) => state.followUpFeatureAvailable,
 	getInternalAddresses: (state) => state.internalAddress?.filter(internalAddress => internalAddress !== undefined),
 	hasCurrentUserPrincipalAndCollections: (state) => state.hasCurrentUserPrincipalAndCollections,
+	showSettingsForAccount: (state) => (accountId) => state.showAccountSettings === accountId,
 }

src/store/index.js

@@ -108,6 +108,7 @@ export default new Store({
 				followUpFeatureAvailable: false,
 				internalAddress: [],
 				hasCurrentUserPrincipalAndCollections: false,
+				showAccountSettings: null,
 			},
 			getters,
 			mutations,

src/store/mutations.js

@@ -516,4 +516,7 @@ export default {
 	hasCurrentUserPrincipalAndCollections(state, hasCurrentUserPrincipalAndCollections) {
 		state.hasCurrentUserPrincipalAndCollections = hasCurrentUserPrincipalAndCollections
 	},
+	showSettingsForAccount(state, accountId) {
+		state.showAccountSettings = accountId
+	},
 }