adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 11:42:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add clearable DatePicker and report tests

Browse Source
This commit is contained in:
Gregor Vostrak
2026-03-23 15:44:40 +01:00
parent a2b0828c54
commit 5c67709746
5 changed files with 156 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/Common/Report/ReportCreateModal.vue
View File

@@ -111,7 +111,7 @@ async function submit() {
<FieldLabel for="public_until">Expires at</FieldLabel>
<div class="text-text-tertiary font-medium">(optional)</div>
</div>
<DatePicker v-model="report.public_until"></DatePicker>
<DatePicker v-model="report.public_until" clearable></DatePicker>
</Field>
</div>
</Field>

2
resources/js/Components/Common/Report/ReportEditModal.vue
View File

@@ -125,7 +125,7 @@ async function submit() {
</Field>
<Field v-if="report.is_public" orientation="horizontal">
<FieldLabel for="public_until">Expires at</FieldLabel>
<DatePicker v-model="localPublicUntil"></DatePicker>
<DatePicker v-model="localPublicUntil" clearable></DatePicker>
</Field>
</div>
</Field>

20
resources/js/packages/ui/src/Input/DatePicker.vue
View File

@@ -9,7 +9,7 @@ import {
import { Popover, PopoverContent, PopoverTrigger } from '@/packages/ui/src/popover';
import { Calendar } from '..';
import { Button } from '@/packages/ui/src/Buttons';
import { CalendarIcon } from 'lucide-vue-next';
import { CalendarIcon, XIcon } from 'lucide-vue-next';
import { parseDate, type DateValue } from '@internationalized/date';
import type { Organization } from '@/packages/api/src';
@@ -17,6 +17,7 @@ const props = defineProps<{
tabindex?: string;
class?: string;
size?: 'sm' | 'default';
clearable?: boolean;
}>();
// This has to be a localized timestamp, not UTC
@@ -60,6 +61,12 @@ function handleDateSelect(newDate: DateValue | undefined) {
emit('changed', newValue);
open.value = false;
}
function handleClear(event: Event) {
event.stopPropagation();
model.value = null;
emit('changed', null);
}
</script>
<template>
@@ -72,7 +79,16 @@ function handleDateSelect(newDate: DateValue | undefined) {
:tabindex="tabindex"
:class="['w-full px-2 gap-1.5', props.class]">
<CalendarIcon class="!size-3 text-muted-foreground" />
<span>{{ displayDate || 'Pick a date' }}</span>
<span :class="{ 'flex-1': clearable }">{{
displayDate || 'Pick a date'
}}</span>
<span
v-if="clearable && model"
role="button"
class="hover:bg-muted rounded p-0.5 transition-colors"
@click.stop="handleClear($event)">
<XIcon class="size-3" />
</span>
</Button>
</PopoverTrigger>
<PopoverContent class="w-auto p-0" align="center">