enh: Move to event bus usage

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · Oct 18, 2023 · 21bf446 · 21bf446
1 parent 297fe27
commit 21bf446
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 92 deletions.
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
@@ -22,6 +22,9 @@
 
 <template>
 	<div class="controls">
+		<NcModal v-if="showAddCardModal" class="card-selector" @close="clickHideAddCardModel">
+			<CreateNewCardCustomPicker show-created-notice @cancel="clickHideAddCardModel" />
+		</NcModal>
 		<div v-if="overviewName" class="board-title">
 			<div class="board-bullet icon-calendar-dark" />
 			<h2>{{ overviewName }}</h2>
@@ -30,12 +33,8 @@
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>
-			<NcModal v-if="showAddCardModal" class="card-selector" @close="clickHideAddCardModel">
-				<CreateNewCardCustomPicker show-created-notice @cancel="clickHideAddCardModel" />
-			</NcModal>
 		</div>
 		<div v-else-if="board" class="board-title">
-			<CardCreateDialog v-if="showAddCardModal" @close="clickHideAddCardModel" />
 			<div :style="{backgroundColor: '#' + board.color}" class="board-bullet" />
 			<h2>{{ board.title }}</h2>
 			<p v-if="showArchived">
@@ -91,6 +90,7 @@
 						@hide="filterVisible=false">
 						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
 						<NcButton slot="trigger"
+							ref="filterPopover"
 							:title="t('deck', 'Apply filter')"
 							class="filter-button"
 							type="tertiary-no-background">
@@ -236,6 +236,7 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
 import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
@@ -279,31 +280,6 @@ export default {
 			required: false,
 			default: null,
 		},
-		triggerOpenFilters: {
-			type: Boolean,
-			default: false,
-			required: false,
-		},
-		triggerOpenSearch: {
-			type: Boolean,
-			default: false,
-			required: false,
-		},
-		triggerClearFilter: {
-			type: Boolean,
-			default: false,
-			required: false,
-		},
-		triggerFilterByMe: {
-			type: Boolean,
-			default: false,
-			required: false,
-		},
-		triggerNewCard: {
-			type: Boolean,
-			default: false,
-			required: false,
-		},
 	},
 	data() {
 		return {
@@ -355,28 +331,13 @@ export default {
 				this.setPageTitle(current.title)
 			}
 		},
-		triggerNewCard(current, previous) {
-			this.showAddCardModal = true
-		},
-		triggerOpenFilters(current, previous) {
-			this.$refs.filterPopover.$el.click()
-		},
-		triggerOpenSearch(current, previous) {
-			this.$refs.search.focus()
-		},
-		triggerClearFilter(current, previous) {
-			this.clearFilter()
-		},
-		triggerFilterByMe(current, previous) {
-			if (current === false) {
-				this.clearFilter()
-			} else {
-				this.filter.users = [getCurrentUser().uid]
-				this.setFilter()
-			}
-		},
+	},
+	beforeMount() {
+		subscribe('deck:board:show-new-card', this.clickShowAddCardModel)
+		subscribe('deck:board:toggle-filter-popover', this.triggerOpenFilters)
 	},
 	beforeDestroy() {
+		unsubscribe('deck:board:show-new-card', this.clickShowAddCardModel)
 		this.setPageTitle('')
 	},
 	methods: {
@@ -455,6 +416,23 @@ export default {
 			}
 			window.document.title = newTitle
 		},
+		triggerOpenFilters() {
+			this.$refs.filterPopover.$el.click()
+		},
+		triggerOpenSearch() {
+			this.$refs.search.focus()
+		},
+		triggerClearFilter() {
+			this.clearFilter()
+		},
+		triggerFilterByMe() {
+			if (this.isFilterActive) {
+				this.clearFilter()
+			} else {
+				this.filter.users = [getCurrentUser().uid]
+				this.setFilter()
+			}
+		},
 	},
 }
 </script>

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
@@ -21,13 +21,8 @@
   -->
 
 <template>
-	<div class="board-wrapper" :tabindex="-1" @keyup="startShortcut">
-		<Controls :board="board"
-			:trigger-open-filters="triggerOpenFilters"
-			:trigger-open-search="triggerOpenSearch"
-			:trigger-filter-by-me="triggerFilterByMe"
-			:trigger-new-card="triggerNewCard"
-			:trigger-clear-filter="triggerClearFilter" />
+	<div class="board-wrapper" :tabindex="-1" @keyup="triggerGlobalKeyboardShortcut">
+		<Controls :board="board" />
 
 		<transition name="fade" mode="out-in">
 			<div v-if="loading" key="loading" class="emptycontent">
@@ -86,7 +81,7 @@
 </template>
 
 <script>
-
+import { emit } from '@nextcloud/event-bus'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
@@ -122,11 +117,6 @@ export default {
 			draggingStack: false,
 			loading: true,
 			newStackTitle: '',
-			triggerOpenFilters: false,
-			triggerOpenSearch: false,
-			triggerClearFilter: false,
-			triggerFilterByMe: false,
-			triggerNewCard: false,
 		}
 	},
 	computed: {
@@ -194,27 +184,30 @@ export default {
 			this.$store.dispatch('createStack', newStack)
 			this.newStackTitle = ''
 		},
-		startShortcut(key) {
+		triggerGlobalKeyboardShortcut(key) {
 			if (OCP.Accessibility.disableKeyboardShortcuts()) {
 				return
 			}
 
-			if (this.$store.state.shortcutLock) return
+			if (this.$store.state.shortcutLock || key.shiftKey || key.ctrlKey || key.altKey || key.metaKey) {
+				return
+			}
+
 			switch (key.code) {
 			case 'KeyN':
-				this.triggerNewCard = !this.triggerNewCard
+				emit('deck:board:show-new-card', this.board.id)
 				break
 			case 'KeyQ':
-				this.triggerFilterByMe = !this.triggerFilterByMe
+				emit('deck:board:toggle-filter-by-me', this.board.id)
 				break
 			case 'KeyF':
-				this.triggerOpenFilters = !this.triggerOpenFilters
+				emit('deck:board:toggle-filter-popover', this.board.id)
 				break
 			case 'KeyX':
-				this.triggerClearFilter = !this.triggerClearFilter
+				emit('deck:board:clear-filter', this.board.id)
 				break
 			case 'Slash':
-				this.triggerOpenSearch = !this.triggerOpenSearch
+				emit('deck:board:trigger-search', this.board.id)
 				break
 			}
 		},

diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
@@ -45,10 +45,10 @@
 				card__archived: card.archived,
 			}"
 			tag="div"
-			:tabindex="card.id"
+			:tabindex="0"
 			class="card"
 			@click="openCard"
-			@keyup="startShortcut"
+			@keyup.self="handleCardKeyboardShortcut"
 			@mouseenter="focus(card.id)">
 			<div v-if="standalone" class="card-related">
 				<div :style="{ backgroundColor: '#' + board.color }"
@@ -209,32 +209,18 @@ export default {
 			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
 			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
 		},
-		startShortcut(key) {
+		handleCardKeyboardShortcut(key) {
 			if (OCP.Accessibility.disableKeyboardShortcuts()) {
 				return
 			}
 
-			if (!this.canEdit || this.$store.state.shortcutLock) return
+			if (!this.canEdit || this.$store.state.shortcutLock || key.shiftKey || key.ctrlKey || key.altKey || key.metaKey) {
+				return
+			}
+
 			switch (key.code) {
-			case 'Space':
-				// assign/unassign self to card
-				 if (this.card.assignedUsers.find((item) => item.type === 0 && item.participant.uid === this.currentUser.uid)) {
-					this.$store.dispatch('removeUserFromCard', {
-						card: this.card,
-						assignee: {
-							userId: this.currentUser.uid,
-							type: 0,
-						},
-					})
-				} else {
-					this.$store.dispatch('assignCardToUser', {
-						card: this.card,
-						assignee: {
-							userId: this.currentUser.uid,
-							type: 0,
-						},
-					})
-				}
+			case 'KeyS':
+				this.toggleSelfAsignment()
 				break
 			case 'KeyM':
 			case 'KeyA':
@@ -247,6 +233,7 @@ export default {
 				this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
 				break
 			case 'Enter':
+			case 'Space':
 				this.openCard()
 				break
 			case 'KeyL':
@@ -279,6 +266,29 @@ export default {
 			}
 			this.$nextTick(() => this.$store.dispatch('toggleFilter', { tags: [label.id] }))
 		},
+		toggleSelfAsignment() {
+			// assign/unassign self to card
+			const isAssigned = this.card.assignedUsers.find(
+				(item) => item.type === 0 && item.participant.uid === this.currentUser.uid
+			)
+			if (isAssigned) {
+				this.$store.dispatch('removeUserFromCard', {
+					card: this.card,
+					assignee: {
+						userId: this.currentUser.uid,
+						type: 0,
+					},
+				})
+			} else {
+				this.$store.dispatch('assignCardToUser', {
+					card: this.card,
+					assignee: {
+						userId: this.currentUser.uid,
+						type: 0,
+					},
+				})
+			}
+		}
 	},
 }
 </script>