Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Add hotkey feature, #122

Browse Source
This commit is contained in:
Daniel Stock
2025-12-09 15:14:51 +01:00
parent 8173dacfb8
commit 63f3b999cf
2 changed files with 249 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/Invoices.vue
+64 -26
View File
@@ -17,6 +17,7 @@ import { Kbd, KbdGroup } from '@/components/ui/kbd'
import { statusBadgeLabels } from '@/components/ui/status-badge'
import AppHeader from '@/components/AppHeader.vue'
import InvoiceDialog from '@/components/documents/InvoiceDialog.vue'
import { hotkey, getPlatformModifierSymbol } from '@/lib/utils'
// initial invoice data from inertia
interface Props {
@@ -47,6 +48,21 @@ onMounted(async () => {
if (params.get('action') == 'new') createInvoice()
searchField.value = document.getElementById('search')
// register hotkeys
hotkey('n', createInvoice)
hotkey('mod+leftarrow', () => {
if (selectedYearIndex.value < (years.value.length - 1)) {
selectedYearIndex.value++
}
})
hotkey('mod+rightarrow', () => {
if (selectedYearIndex.value > 0) {
selectedYearIndex.value--
}
})
hotkey('a', () => { selectedYearIndex.value = -1 })
hotkey('mod+f', () => { searchField.value.focus() })
})
const years = computed((): number[] => {
@@ -140,30 +156,54 @@ const onDeleteInvoice = async (id: number) => {
<AppHeader>
<!-- Year select -->
<template #left>
<Button variant="ghost" :disabled="selectedYearIndex >= (years.length - 1)"
@click="selectedYearIndex++">
<ChevronLeft />
</Button>
<Select size="sm" v-model="selectedYearIndex">
<SelectTrigger class="hover:bg-accent">
<SelectValue :placeholder="(new Date()).getFullYear().toString()"
:disabled="years.length < 1" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="null">
<SelectLabel>Alle</SelectLabel>
</SelectItem>
<SelectSeparator />
<SelectItem v-for="(year, index) in years" :value="index">
<SelectLabel>{{ year }}</SelectLabel>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<Button variant="ghost" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
<ChevronRight />
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="ghost" :disabled="selectedYearIndex >= (years.length - 1)"
@click="selectedYearIndex++">
<ChevronLeft />
</Button>
</TooltipTrigger>
<TooltipContent>
<span>Ein Jahr zurück</span>
<KbdGroup class="ml-2">
<Kbd>{{ getPlatformModifierSymbol() }}</Kbd>
<Kbd>&larr;</Kbd>
</KbdGroup>
</TooltipContent>
</Tooltip>
<Select size="sm" v-model="selectedYearIndex">
<SelectTrigger class="hover:bg-accent">
<SelectValue :placeholder="(new Date()).getFullYear().toString()"
:disabled="years.length < 1" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem :value="-1">
<SelectLabel>Alle</SelectLabel>
</SelectItem>
<SelectSeparator />
<SelectItem v-for="(year, index) in years" :value="index">
<SelectLabel>{{ year }}</SelectLabel>
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<Tooltip>
<TooltipTrigger>
<Button variant="ghost" @click="selectedYearIndex--" :disabled="selectedYearIndex <= 0">
<ChevronRight />
</Button>
</TooltipTrigger>
<TooltipContent>
<span>Ein Jahr vorwärts</span>
<KbdGroup class="ml-2">
<Kbd>{{ getPlatformModifierSymbol() }}</Kbd>
<Kbd>&rarr;</Kbd>
</KbdGroup>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</template>
<!-- Search field -->
@@ -193,8 +233,6 @@ const onDeleteInvoice = async (id: number) => {
<TooltipContent>
<span>Neue Rechnung anlegen</span>
<KbdGroup class="ml-2">
<Kbd class="visible-mac">⌘</Kbd>
<Kbd class="visible-pc">Ctrl</Kbd>
<Kbd>N</Kbd>
</KbdGroup>
</TooltipContent>