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>
|
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
||||||
|
|
||||||
|
<quick-actions/>
|
||||||
|
|
||||||
<router-view/>
|
<router-view/>
|
||||||
|
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
|
@ -43,10 +45,11 @@
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
||||||
import Navigation from '@/components/home/navigation'
|
import Navigation from '@/components/home/navigation'
|
||||||
|
import QuickActions from '@/components/quick-actions/quick-actions'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'contentAuth',
|
name: 'contentAuth',
|
||||||
components: {Navigation},
|
components: {QuickActions, Navigation},
|
||||||
watch: {
|
watch: {
|
||||||
'$route': 'doStuffAfterRoute',
|
'$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,
|
||||||
LOADING_MODULE,
|
LOADING_MODULE,
|
||||||
MENU_ACTIVE,
|
MENU_ACTIVE,
|
||||||
ONLINE,
|
ONLINE, QUICK_ACTIONS_ACTIVE,
|
||||||
} from './mutation-types'
|
} from './mutation-types'
|
||||||
import config from './modules/config'
|
import config from './modules/config'
|
||||||
import auth from './modules/auth'
|
import auth from './modules/auth'
|
||||||
|
@ -44,6 +44,7 @@ export const store = new Vuex.Store({
|
||||||
hasTasks: false,
|
hasTasks: false,
|
||||||
menuActive: true,
|
menuActive: true,
|
||||||
keyboardShortcutsActive: false,
|
keyboardShortcutsActive: false,
|
||||||
|
quickActionsActive: false,
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
[LOADING](state, loading) {
|
[LOADING](state, loading) {
|
||||||
|
@ -127,5 +128,8 @@ export const store = new Vuex.Store({
|
||||||
[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
|
[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
|
||||||
state.keyboardShortcutsActive = 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 HAS_TASKS = 'hasTasks'
|
||||||
export const MENU_ACTIVE = 'menuActive'
|
export const MENU_ACTIVE = 'menuActive'
|
||||||
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
|
export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
|
||||||
|
export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
|
||||||
|
|
||||||
export const CONFIG = 'config'
|
export const CONFIG = 'config'
|
||||||
export const AUTH = 'auth'
|
export const AUTH = 'auth'
|
||||||
|
|
Reference in New Issue