feat: nextcloud#46 add shortcut function

- add shortcut framework
- add spacebar function
- add enter function

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: nextcloud#46 add archive shortcut

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: nextcloud#46 add edit title shortcut

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: nextcloud#46 adds assign user shortcut

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

fix: nextcloud#46 999 exception

- add exception for new card order 999 scenario

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

chore: nextcloud#46 fix linebreak linting errors

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: nextcloud#46 adds labels shortcut

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: nextcloud#46 add duedate shortcut

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: nextcloud#46 adds board filters

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

feat: adds focus lock

preventing accidental shortcut trigger

Signed-off-by: Adrian Missy <adrian.missy@onewavestudios.com>

src/components/Controls.vue

@@ -35,6 +35,7 @@
  </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">
@@ -45,9 +46,13 @@
  <SessionList v-if="isNotifyPushEnabled && presentUsers.length"
  :sessions="presentUsers" />
  <div v-if="searchQuery || true" class="deck-search">
- <input type="search"
+ <input ref="search"
+ :tabindex="999"
+ type="search"
  class="icon-search"
  :value="searchQuery"
+ @focus="$store.dispatch('toggleShortcutLock', true)"
+ @blur="$store.dispatch('toggleShortcutLock', false)"
  @input="$store.commit('setSearchQuery', $event.target.value)">
  </div>
  <div v-if="board && canManage && !showArchived && !board.archived"
@@ -66,7 +71,9 @@
  type="text"
  class="no-close"
  :placeholder="t('deck', 'List name')"
- required>
+ required
+ @focus="$store.dispatch('toggleShortcutLock', true)"
+ @blur="$store.dispatch('toggleShortcutLock', false)">
  <input v-tooltip="t('deck', 'Add list')"
  class="icon-confirm"
  type="submit"
@@ -240,6 +247,7 @@ import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertic
 import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
+import { getCurrentUser } from '@nextcloud/auth'
 
 export default {
  name: 'Controls',
@@ -271,6 +279,31 @@ 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 {
@@ -322,6 +355,29 @@ 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()
+ }
+ },
+ },
+ beforeDestroy() {
+ this.setPageTitle('')
  },
  beforeDestroy() {
  this.setPageTitle('')

src/components/board/Board.vue

@@ -21,8 +21,13 @@
  -->
 
 <template>
- <div class="board-wrapper">
- <Controls :board="board" />
+ <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" />
 
  <transition name="fade" mode="out-in">
  <div v-if="loading" key="loading" class="emptycontent">
@@ -117,6 +122,11 @@ export default {
  draggingStack: false,
  loading: true,
  newStackTitle: '',
+ triggerOpenFilters: false,
+ triggerOpenSearch: false,
+ triggerClearFilter: false,
+ triggerFilterByMe: false,
+ triggerNewCard: false,
  }
  },
  computed: {
@@ -184,6 +194,26 @@ export default {
  this.$store.dispatch('createStack', newStack)
  this.newStackTitle = ''
  },
+ startShortcut(key) {
+ if (this.$store.state.shortcutLock) return
+ switch (key.code) {
+ case 'KeyN':
+ this.triggerNewCard = !this.triggerNewCard
+ break
+ case 'KeyQ':
+ this.triggerFilterByMe = !this.triggerFilterByMe
+ break
+ case 'KeyF':
+ this.triggerOpenFilters = !this.triggerOpenFilters
+ break
+ case 'KeyX':
+ this.triggerClearFilter = !this.triggerClearFilter
+ break
+ case 'Slash':
+ this.triggerOpenSearch = !this.triggerOpenSearch
+ break
+ }
+ },
  },
 }
 </script>