Add basic quick actions component
This commit is contained in:
parent
dff84209f0
commit
def719d86f
|
@ -20,6 +20,8 @@
|
|||
>
|
||||
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
||||
|
||||
<quick-actions/>
|
||||
|
||||
<router-view/>
|
||||
|
||||
<transition name="modal">
|
||||
|
@ -43,10 +45,11 @@
|
|||
import {mapState} from 'vuex'
|
||||
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
||||
import Navigation from '@/components/home/navigation'
|
||||
import QuickActions from '@/components/quick-actions/quick-actions'
|
||||
|
||||
export default {
|
||||
name: 'contentAuth',
|
||||
components: {Navigation},
|
||||
components: {QuickActions, Navigation},
|
||||
watch: {
|
||||
'$route': 'doStuffAfterRoute',
|
||||
},
|
||||
|
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<modal v-if="active">
|
||||
<div class="card p-4">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="What do you want to do?"
|
||||
v-focus
|
||||
@keyup="run"
|
||||
v-model="search"/>
|
||||
|
||||
<div v-if="search !== ''">
|
||||
<ul>
|
||||
<li v-for="l in lists" :key="l.id">{{ l.title }}</li>
|
||||
</ul>
|
||||
<nothing v-if="nothing">
|
||||
No results found.
|
||||
</nothing>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Nothing from '@/components/misc/nothing'
|
||||
export default {
|
||||
name: 'quick-actions',
|
||||
components: {Nothing},
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
results: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
active: () => true, // TODO: use state + keyboard shortcut
|
||||
lists() {
|
||||
return Object.fromEntries(Object.entries(this.$store.state.lists).filter(l => {
|
||||
return l[1].title.toLowerCase().includes(this.search.toLowerCase())
|
||||
}))
|
||||
},
|
||||
nothing() {
|
||||
return this.search === '' || Object.keys(this.lists).length === 0
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
run() {
|
||||
console.log('run', this.search)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
|
@ -8,7 +8,7 @@ import {
|
|||
LOADING,
|
||||
LOADING_MODULE,
|
||||
MENU_ACTIVE,
|
||||
ONLINE,
|
||||
ONLINE, QUICK_ACTIONS_ACTIVE,
|
||||
} from './mutation-types'
|
||||
import config from './modules/config'
|
||||
import auth from './modules/auth'
|
||||
|
@ -44,6 +44,7 @@ export const store = new Vuex.Store({
|
|||
hasTasks: false,
|
||||
menuActive: true,
|
||||
keyboardShortcutsActive: false,
|
||||
quickActionsActive: false,
|
||||
},
|
||||
mutations: {
|
||||
[LOADING](state, loading) {
|
||||
|
@ -127,5 +128,8 @@ export const store = new Vuex.Store({
|
|||
[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
|
||||
state.keyboardShortcutsActive = active
|
||||
},
|
||||
[QUICK_ACTIONS_ACTIVE](state, active) {
|
||||
state.quickActionsActive = active
|
||||
},
|
||||
},
|
||||
})
|
|
@ -6,6 +6,7 @@ export const CURRENT_LIST = 'currentList'
|
|||
export const HAS_TASKS = 'hasTasks'
|
||||
export const MENU_ACTIVE = 'menuActive'
|
||||
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
|
||||
export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
|
||||
|
||||
export const CONFIG = 'config'
|
||||
export const AUTH = 'auth'
|
||||
|
|
Reference in New Issue