fixup! 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>
+
+			<h4>{{ t('mail', 'Account settings') }}</h4>
+				<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')">
@@ -279,19 +291,6 @@
 					</div>
 				</dl>
 			</NcAppSettingsSection>
-			<NcAppSettingsSection id="mailbox_settings" :name="t('mail', 'Account settings')">
-				<li v-for="account in accounts" :key="account.id">
-					<NcButton v-if="account && account.emailAddress"
-						class="app-settings-button"
-						type="primary"
-						@click="openAccountSettings(account.id)">
-						{{ account.emailAddress }}
-					</NcButton>
-				</li>
-				<AccountSettings :open.sync="showAccountSettings"
-					:account="selectedAccount"
-					@update:open="closeAccountSettings"/>
-			</NcAppSettingsSection>
 		</NcAppSettingsDialog>
 	</div>
 </template>
@@ -427,9 +426,8 @@ export default {
 			this.showAccountSettings = false
 		},
 		openAccountSettings(accountId) {
-			this.selectedAccount = this.accounts.find(account => account.id === accountId)
-			this.showMailSettings = false
-			this.showAccountSettings = true
+			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,11 +149,13 @@ export default {
 			quota: undefined,
 			editing: false,
 			showSaving: false,
-			showSettings: false,
 			createMailboxName: '',
 		}
 	},
 	computed: {
+		showSettings() {
+			return this.$store.getters.showSettingsForAccount(this.account.id)
+		},
 		visible() {
 			return this.account.isUnified !== true && this.account.visible !== false
 		},
@@ -276,16 +277,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

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

src/store/index.js

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

src/store/mutations.js

@@ -513,4 +513,7 @@ export default {
 	setFollowUpFeatureAvailable(state, followUpFeatureAvailable) {
 		state.followUpFeatureAvailable = followUpFeatureAvailable
 	},
+	showSettingsForAccount(state, accountId) {
+		state.showAccountSettings = accountId
+	},
 }