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

migrate datepickers to shadcn, Fixes #877, #807

Browse Source
This commit is contained in:
Gregor Vostrak
2026-02-05 15:02:01 +01:00
parent 9832c688fe
commit a154293348
14 changed files with 613 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/packages/ui/src/Input/TimeRangeSelector.vue
View File

@@ -4,7 +4,7 @@ import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
import { getDayJsInstance, getLocalizedDayJs } from '@/packages/ui/src/utils/time';
import dayjs from 'dayjs';
import TimePickerSimple from '@/packages/ui/src/Input/TimePickerSimple.vue';
import Button from '../Buttons/Button.vue';
import { Button } from '@/Components/ui/button';
const props = defineProps<{
start: string;
@@ -61,9 +61,10 @@ const dropdownContent = ref();
class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2">
<div class="px-2" @keydown.enter.prevent="nextTick(() => emit('close'))">
<div class="font-semibold text-text-primary text-sm pb-2">Start</div>
<div class="space-y-2">
<div class="flex flex-col items-center space-y-2 w-28 mx-auto">
<TimePickerSimple
v-model="tempStart"
class="w-full"
data-testid="time_entry_range_start"
tabindex="0"
:focus
@@ -71,35 +72,37 @@ const dropdownContent = ref();
@changed="updateTimeEntry"></TimePickerSimple>
<DatePicker
v-model="tempStart"
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
@changed="updateTimeEntry"
@blur.stop.prevent="emit('close')"></DatePicker>
class="w-full"
@changed="updateTimeEntry"></DatePicker>
</div>
</div>
<div class="px-2">
<div class="font-semibold text-text-primary text-sm pb-2">End</div>
<div v-if="end !== null && tempEnd !== null" class="space-y-2">
<div
v-if="end !== null && tempEnd !== null"
class="flex flex-col items-center space-y-2 w-28 mx-auto">
<TimePickerSimple
v-model="tempEnd"
class="w-full"
data-testid="time_entry_range_end"
@changed="updateTimeEntry"></TimePickerSimple>
<DatePicker
v-model="tempEnd"
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
class="w-full"
@changed="updateTimeEntry"></DatePicker>
</div>
<div v-else-if="end === null && !showEndTimePicker">
<Button variant="outline" size="sm" @click="setEndTime"> Set End Time </Button>
</div>
<div v-else-if="showEndTimePicker && tempEnd !== null" class="space-y-2">
<div
v-else-if="showEndTimePicker && tempEnd !== null"
class="flex flex-col items-center space-y-2 w-28 mx-auto">
<TimePickerSimple
v-model="tempEnd"
class="w-full"
data-testid="time_entry_range_end"
@keydown.enter.prevent.stop="confirmEndTime"></TimePickerSimple>
<DatePicker
v-model="tempEnd"
class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
@keydown.enter.prevent="confirmEndTime"></DatePicker>
<DatePicker v-model="tempEnd" class="w-full"></DatePicker>
<Button variant="outline" size="sm" class="w-full" @click="confirmEndTime">
Confirm
</Button>