140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<script setup>
|
|
|
|
const showCommandPalette = ref(false)
|
|
const selectedCommand = ref("")
|
|
const commandPaletteRef = ref()
|
|
const router = useRouter()
|
|
const dataStore = useDataStore()
|
|
const openCommandPalette = () => {
|
|
showCommandPalette.value = true
|
|
console.log("Open Command Palette")
|
|
}
|
|
|
|
defineShortcuts({
|
|
meta_k: {
|
|
usingInput: true,
|
|
handler: () => {
|
|
openCommandPalette()
|
|
}
|
|
}
|
|
})
|
|
|
|
const actions = [
|
|
|
|
{
|
|
id: 'new-task',
|
|
label: 'Aufgabe hinzufügen',
|
|
icon: 'i-heroicons-rectangle-stack',
|
|
to: "/tasks/create" ,
|
|
},
|
|
{
|
|
id: 'new-customer',
|
|
label: 'Kunde hinzufügen',
|
|
icon: 'i-heroicons-user-group',
|
|
to: "/customers/create" ,
|
|
},
|
|
{
|
|
id: 'new-vendor',
|
|
label: 'Lieferant hinzufügen',
|
|
icon: 'i-heroicons-truck',
|
|
to: "/vendors/create" ,
|
|
},
|
|
{
|
|
id: 'new-contact',
|
|
label: 'Ansprechpartner hinzufügen',
|
|
icon: 'i-heroicons-user-group',
|
|
to: "/contacts/create" ,
|
|
},
|
|
{
|
|
id: 'new-project',
|
|
label: 'Projekt hinzufügen',
|
|
icon: 'i-heroicons-clipboard-document-check',
|
|
to: "/projects/create" ,
|
|
},{
|
|
id: 'new-plant',
|
|
label: 'Objekt hinzufügen',
|
|
icon: 'i-heroicons-clipboard-document',
|
|
to: "/plants/create" ,
|
|
},
|
|
{
|
|
id: 'new-product',
|
|
label: 'Artikel hinzufügen',
|
|
icon: 'i-heroicons-puzzle-piece',
|
|
to: "/products/create" ,
|
|
}
|
|
]
|
|
|
|
|
|
const groups = computed(() =>
|
|
[{
|
|
key: 'actions',
|
|
commands: actions
|
|
},{
|
|
key: "customers",
|
|
label: "Kunden",
|
|
commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
|
|
},{
|
|
key: "vendors",
|
|
label: "Lieferanten",
|
|
commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
|
|
},{
|
|
key: "contacts",
|
|
label: "Ansprechpartner",
|
|
commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
|
|
},{
|
|
key: "products",
|
|
label: "Artikel",
|
|
commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
|
|
},{
|
|
key: "tasks",
|
|
label: "Aufgaben",
|
|
commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
|
|
},{
|
|
key: "plants",
|
|
label: "Objekte",
|
|
commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
|
|
},{
|
|
key: "projects",
|
|
label: "Projekte",
|
|
commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
|
|
}
|
|
].filter(Boolean))
|
|
|
|
function onSelect (option) {
|
|
if (option.click) {
|
|
option.click()
|
|
} else if (option.to) {
|
|
router.push(option.to)
|
|
} else if (option.href) {
|
|
window.open(option.href, '_blank')
|
|
}
|
|
|
|
showCommandPalette.value = false
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UButton
|
|
icon="i-heroicons-magnifying-glass"
|
|
variant="ghost"
|
|
@click="openCommandPalette"
|
|
|
|
/>
|
|
|
|
<UModal
|
|
v-model="showCommandPalette"
|
|
>
|
|
<UCommandPalette
|
|
v-model="selectedCommand"
|
|
:groups="groups"
|
|
:autoselect="false"
|
|
@update:model-value="onSelect"
|
|
ref="commandPaletteRef"
|
|
/>
|
|
</UModal>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |