feat: global quick entry dialog component
This commit is contained in:
Your Name
255
src/components/QuickEntryDialog.vue
Normal file
255
src/components/QuickEntryDialog.vue
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch, nextTick, onUnmounted, computed } from 'vue'
|
||||||
|
import { useFocusTrap } from '../utils/focusTrap'
|
||||||
|
import { useAnnouncer } from '../composables/useAnnouncer'
|
||||||
|
import AppSelect from './AppSelect.vue'
|
||||||
|
import AppDatePicker from './AppDatePicker.vue'
|
||||||
|
import { useProjectsStore, type Task } from '../stores/projects'
|
||||||
|
import { useEntriesStore } from '../stores/entries'
|
||||||
|
import { useSettingsStore } from '../stores/settings'
|
||||||
|
import { useToastStore } from '../stores/toast'
|
||||||
|
import { X } from 'lucide-vue-next'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
show: boolean
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
close: []
|
||||||
|
saved: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const projectsStore = useProjectsStore()
|
||||||
|
const entriesStore = useEntriesStore()
|
||||||
|
const settingsStore = useSettingsStore()
|
||||||
|
const toastStore = useToastStore()
|
||||||
|
const { activate: activateTrap, deactivate: deactivateTrap } = useFocusTrap()
|
||||||
|
const { announce } = useAnnouncer()
|
||||||
|
const dialogRef = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
|
const selectedProjectId = ref<number | null>(null)
|
||||||
|
const selectedTaskId = ref<number | null>(null)
|
||||||
|
const description = ref('')
|
||||||
|
const entryDate = ref(new Date().toISOString().split('T')[0])
|
||||||
|
const durationInput = ref('')
|
||||||
|
const billable = ref(1)
|
||||||
|
const tasks = ref<Task[]>([])
|
||||||
|
const saving = ref(false)
|
||||||
|
|
||||||
|
const availableProjects = computed(() => projectsStore.projects.filter(p => !p.archived))
|
||||||
|
|
||||||
|
const canSave = computed(() => !!selectedProjectId.value && !!durationInput.value.trim() && !saving.value)
|
||||||
|
|
||||||
|
watch(selectedProjectId, async (projectId) => {
|
||||||
|
selectedTaskId.value = null
|
||||||
|
if (projectId) {
|
||||||
|
tasks.value = await projectsStore.fetchTasks(projectId)
|
||||||
|
} else {
|
||||||
|
tasks.value = []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.show, async (val) => {
|
||||||
|
if (val) {
|
||||||
|
// Ensure projects are loaded
|
||||||
|
if (projectsStore.projects.length === 0) {
|
||||||
|
await projectsStore.fetchProjects()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
const lastProjectId = parseInt(settingsStore.settings.last_project_id) || 0
|
||||||
|
selectedProjectId.value = lastProjectId || null
|
||||||
|
selectedTaskId.value = null
|
||||||
|
description.value = ''
|
||||||
|
entryDate.value = new Date().toISOString().split('T')[0]
|
||||||
|
durationInput.value = ''
|
||||||
|
billable.value = 1
|
||||||
|
saving.value = false
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
if (dialogRef.value) {
|
||||||
|
activateTrap(dialogRef.value, { onDeactivate: () => emit('close') })
|
||||||
|
}
|
||||||
|
announce('Quick entry dialog opened')
|
||||||
|
} else {
|
||||||
|
deactivateTrap()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => deactivateTrap())
|
||||||
|
|
||||||
|
function parseDuration(input: string): number | null {
|
||||||
|
const trimmed = input.trim()
|
||||||
|
if (!trimmed) return null
|
||||||
|
|
||||||
|
// H:MM format
|
||||||
|
if (trimmed.includes(':')) {
|
||||||
|
const [h, m] = trimmed.split(':').map(Number)
|
||||||
|
if (isNaN(h) || isNaN(m) || h < 0 || m < 0 || m > 59) return null
|
||||||
|
return h * 3600 + m * 60
|
||||||
|
}
|
||||||
|
|
||||||
|
// Decimal hours
|
||||||
|
const num = parseFloat(trimmed)
|
||||||
|
if (isNaN(num) || num < 0 || num > 24) return null
|
||||||
|
return Math.round(num * 3600)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSave() {
|
||||||
|
if (!selectedProjectId.value || !durationInput.value) return
|
||||||
|
const duration = parseDuration(durationInput.value)
|
||||||
|
if (duration === null || duration <= 0) return
|
||||||
|
|
||||||
|
saving.value = true
|
||||||
|
|
||||||
|
const startDate = new Date(entryDate.value + 'T09:00:00')
|
||||||
|
const endDate = new Date(startDate.getTime() + duration * 1000)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await entriesStore.createEntry({
|
||||||
|
project_id: selectedProjectId.value,
|
||||||
|
task_id: selectedTaskId.value || undefined,
|
||||||
|
description: description.value || undefined,
|
||||||
|
start_time: startDate.toISOString(),
|
||||||
|
end_time: endDate.toISOString(),
|
||||||
|
duration,
|
||||||
|
billable: billable.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Save last-used project
|
||||||
|
await settingsStore.updateSetting('last_project_id', String(selectedProjectId.value))
|
||||||
|
|
||||||
|
toastStore.success('Entry created')
|
||||||
|
announce('Time entry created successfully')
|
||||||
|
emit('saved')
|
||||||
|
emit('close')
|
||||||
|
} catch {
|
||||||
|
toastStore.error('Failed to create entry')
|
||||||
|
} finally {
|
||||||
|
saving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition name="modal">
|
||||||
|
<div
|
||||||
|
v-if="show"
|
||||||
|
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
|
||||||
|
@click.self="$emit('close')"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref="dialogRef"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="quick-entry-title"
|
||||||
|
class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h2 id="quick-entry-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary">
|
||||||
|
Quick Entry
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
@click="$emit('close')"
|
||||||
|
class="p-1 text-text-tertiary hover:text-text-primary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
<X class="w-4 h-4" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form @submit.prevent="handleSave" class="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project *</label>
|
||||||
|
<AppSelect
|
||||||
|
v-model="selectedProjectId"
|
||||||
|
:options="availableProjects"
|
||||||
|
label-key="name"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="Select project"
|
||||||
|
:searchable="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tasks.length > 0">
|
||||||
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Task</label>
|
||||||
|
<AppSelect
|
||||||
|
v-model="selectedTaskId"
|
||||||
|
:options="tasks"
|
||||||
|
label-key="name"
|
||||||
|
value-key="id"
|
||||||
|
placeholder="No task"
|
||||||
|
:placeholder-value="null"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="quick-entry-desc" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Description</label>
|
||||||
|
<input
|
||||||
|
id="quick-entry-desc"
|
||||||
|
v-model="description"
|
||||||
|
type="text"
|
||||||
|
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
|
||||||
|
placeholder="What did you work on?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Date</label>
|
||||||
|
<AppDatePicker v-model="entryDate" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="quick-entry-duration" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Duration *</label>
|
||||||
|
<input
|
||||||
|
id="quick-entry-duration"
|
||||||
|
v-model="durationInput"
|
||||||
|
type="text"
|
||||||
|
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary font-mono focus:outline-none focus:border-border-visible"
|
||||||
|
placeholder="1:30 or 1.5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="billable = billable ? 0 : 1"
|
||||||
|
role="switch"
|
||||||
|
:aria-checked="!!billable"
|
||||||
|
aria-label="Billable"
|
||||||
|
class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
||||||
|
:class="billable ? 'bg-status-running' : 'bg-bg-elevated'"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150"
|
||||||
|
:class="billable ? 'translate-x-[18px]' : 'translate-x-[3px]'"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<span class="text-[0.75rem] text-text-secondary">Billable</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-2 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="$emit('close')"
|
||||||
|
class="px-4 py-2 text-[0.8125rem] text-text-secondary border border-border-subtle rounded-lg hover:bg-bg-elevated transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="!canSave"
|
||||||
|
class="px-4 py-2 text-[0.8125rem] bg-accent text-bg-base rounded-lg hover:bg-accent-hover transition-colors disabled:opacity-40 disabled:cursor-not-allowed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user