lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: replace native datetime-local with custom date picker + time inputs

Browse Source
This commit is contained in:
Your Name
2026-02-17 23:41:24 +02:00
parent 519bdabe61
commit 137be610f8
1 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/Entries.vue
View File

@@ -122,10 +122,10 @@
<!-- Edit Dialog -->
<div
v-if="showEditDialog"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
@click.self="closeEditDialog"
>
<div 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 mx-4 p-6 animate-modal-enter">
<div 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 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
<h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Edit Entry</h2>
<form @submit.prevent="handleEdit" class="space-y-4">
@@ -163,15 +163,35 @@
/>
</div>
<!-- Start Time -->
<!-- Start Date & Time -->
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Time</label>
<input
v-model="editForm.start_time"
type="datetime-local"
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"
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date & Time</label>
<div class="flex items-center gap-2">
<div class="flex-1">
<AppDatePicker
v-model="editDate"
placeholder="Date"
/>
</div>
<div class="flex items-center gap-1">
<input
v-model="editHour"
type="number"
min="0"
max="23"
class="w-12 px-2 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
<span class="text-text-tertiary text-sm font-mono">:</span>
<input
v-model="editMinute"
type="number"
min="0"
max="59"
class="w-12 px-2 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>
</div>
</div>
</div>
<!-- Buttons -->
<div class="flex justify-end gap-3 pt-4">
@@ -256,6 +276,11 @@ const editForm = reactive<TimeEntry>({
duration: 0
})
// Split date/time refs for edit dialog
const editDate = ref('')
const editHour = ref(0)
const editMinute = ref(0)
// Duration in minutes (computed for editing)
const durationMinutes = computed({
get: () => Math.round(editForm.duration / 60),
@@ -336,8 +361,17 @@ function openEditDialog(entry: TimeEntry) {
editForm.id = entry.id || 0
editForm.project_id = entry.project_id
editForm.description = entry.description || ''
editForm.start_time = entry.start_time.slice(0, 16) // Format for datetime-local
editForm.duration = entry.duration
// Split start_time into date and time parts
const dt = new Date(entry.start_time)
const y = dt.getFullYear()
const m = String(dt.getMonth() + 1).padStart(2, '0')
const d = String(dt.getDate()).padStart(2, '0')
editDate.value = `${y}-${m}-${d}`
editHour.value = dt.getHours()
editMinute.value = dt.getMinutes()
showEditDialog.value = true
}
@@ -350,8 +384,9 @@ function closeEditDialog() {
// Handle edit submit
async function handleEdit() {
if (editingEntry.value) {
// Recalculate end_time based on duration
const start = new Date(editForm.start_time)
// Reconstruct start time from split date/time fields
const [y, m, d] = editDate.value.split('-').map(Number)
const start = new Date(y, m - 1, d, editHour.value, editMinute.value)
const end = new Date(start.getTime() + editForm.duration * 1000)
const updatedEntry: TimeEntry = {