Simplify submenu logic for due date notifications

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/navigation/AppNavigationBoard.vue

@@ -34,56 +34,53 @@
 			style="opacity: 0.5" />
 
 		<template v-if="!deleted" slot="actions">
-			<ActionButton v-if="!showDueSettings"
+			<template v-if="!isDueSubmenuActive">
+				<ActionButton
 					icon="icon-more"
 					:close-after-click="true"
 					@click="actionDetails">
 					{{ t('deck', 'Board details') }}
 				</ActionButton>
-			<ActionButton v-if="canManage && !board.archived && !showDueSettings"
+				<ActionButton v-if="canManage"
 					icon="icon-rename"
 					:close-after-click="true"
 					@click="actionEdit">
 					{{ t('deck', 'Edit board') }}
 				</ActionButton>
-			<ActionButton v-if="canManage && !board.archived && !showDueSettings"
+				<ActionButton v-if="canManage"
 					icon="icon-clone"
 					:close-after-click="true"
 					@click="actionClone">
 					{{ t('deck', 'Clone board') }}
 				</ActionButton>
-			<ActionButton v-if="canManage && board.archived && !showDueSettings"
+				<ActionButton v-if="canManage"
 					icon="icon-archive"
 					:close-after-click="true"
 					@click="actionUnarchive">
 					{{ t('deck', 'Unarchive board') }}
 				</ActionButton>
-			<ActionButton v-if="canManage && !board.archived && !showDueSettings"
+				<ActionButton v-if="canManage"
 					icon="icon-archive"
 					:close-after-click="true"
 					@click="actionArchive">
 					{{ t('deck', 'Archive board') }}
 				</ActionButton>
 
-			<!-- Due date reminder settings -->
+				<ActionButton v-if="board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
-
-			<ActionButton v-if="showDueSettings"
-				:icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
-				:disabled="updateDueSetting"
-				@click="showDueSettings=false">
-				{{ t('deck', 'Due date reminders') }}
-			</ActionButton>
-			<ActionButton v-else-if="board.acl.length > 0"
-				:title="t('deck', 'Due date reminders')"
-				:icon="dueDateReminderIcon"
-				@click="showDueSettings=true">
-				{{ dueDateReminderText }}
-			</ActionButton>
-			<ActionButton v-else :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
 					{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
 				</ActionButton>
+			</template>
 
-			<ActionButton v-if="showDueSettings"
+			<!-- Due date reminder settings -->
+			<template v-if="isDueSubmenuActive">
+				<ActionButton
+					:icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
+					:disabled="updateDueSetting"
+					@click="isDueSubmenuActive=false">
+					{{ t('deck', 'Due date reminders') }}
+				</ActionButton>
+
+				<ActionButton
 					name="notification"
 					icon="icon-sound"
 					:disabled="updateDueSetting"
@@ -91,7 +88,7 @@
 					@click="updateSetting('notify-due', 'all')">
 					{{ t('deck', 'All cards') }}
 				</ActionButton>
-			<ActionButton v-if="showDueSettings"
+				<ActionButton
 					name="notification"
 					icon="icon-user"
 					:disabled="updateDueSetting"
@@ -99,7 +96,7 @@
 					@click="updateSetting('notify-due', 'assigned')">
 					{{ t('deck', 'Assigned cards') }}
 				</ActionButton>
-			<ActionButton v-if="showDueSettings"
+				<ActionButton
 					name="notification"
 					icon="icon-sound-off"
 					:disabled="updateDueSetting"
@@ -107,8 +104,15 @@
 					@click="updateSetting('notify-due', 'off')">
 					{{ t('deck', 'No notifications') }}
 				</ActionButton>
+			</template>
+			<ActionButton v-else-if="board.acl.length > 0"
+				:title="t('deck', 'Due date reminders')"
+				:icon="dueDateReminderIcon"
+				@click="isDueSubmenuActive=true">
+				{{ dueDateReminderText }}
+			</ActionButton>
 
-			<ActionButton v-if="canManage && !showDueSettings"
+			<ActionButton v-if="canManage && !isDueSubmenuActive"
 				icon="icon-delete"
 				:close-after-click="true"
 				@click="actionDelete">
@@ -161,7 +165,7 @@ export default {
 			undoTimeoutHandle: null,
 			editTitle: '',
 			editColor: '',
-			showDueSettings: false,
+			isDueSubmenuActive: false,
 			updateDueSetting: null,
 		}
 	},
@@ -182,7 +186,7 @@ export default {
 			}
 		},
 		canManage() {
-			return this.board.permissions.PERMISSION_MANAGE
+			return this.board.permissions.PERMISSION_MANAGE && !this.board.archived
 		},
 		dueDateReminderIcon() {
 			if (this.board.settings['notify-due'] === 'all') {
@@ -304,7 +308,7 @@ export default {
 			const setting = {}
 			setting['board:' + this.board.id + ':' + key] = value
 			await this.$store.dispatch('setConfig', setting)
-			this.showDueSettings = false
+			this.isDueSubmenuActive = false
 			this.updateDueSetting = null
 		},
 	},