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

add support for timeFormat in the frontend

Browse Source
This commit is contained in:
Gregor Vostrak
2025-05-12 21:45:57 +02:00
parent d8f4ba1517
commit fca4c26cfc
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
View File

@@ -156,7 +156,7 @@ function onSelectChange(checked: boolean) {
<button <button
class="hidden lg:block text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary" class="hidden lg:block text-text-secondary w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary"
@click="expanded = !expanded"> @click="expanded = !expanded">
{{ formatStartEnd(timeEntry.start, timeEntry.end) }} {{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
</button> </button>
</div> </div>
<button <button

5
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
View File

@@ -7,7 +7,8 @@ import {
} from '@/packages/ui/src/utils/time'; } from '@/packages/ui/src/utils/time';
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue'; import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { type Organization } from '@/packages/api/src'; import type { Organization } from '@/packages/api/src';
defineProps<{ defineProps<{
start: string; start: string;
end: string | null; end: string | null;
@@ -45,7 +46,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
open && 'border-card-border bg-card-background' open && 'border-card-border bg-card-background'
) )
"> ">
{{ formatStartEnd(start, end) }} {{ formatStartEnd(start, end, organization?.time_format) }}
<span v-if="showDate" class="text-text-tertiary font-medium" <span v-if="showDate" class="text-text-tertiary font-medium"
>{{ formatDateLocalized(start, organization?.date_format) }} >{{ formatDateLocalized(start, organization?.date_format) }}
</span> </span>

12
resources/js/packages/ui/src/utils/time.ts
View File

@@ -110,9 +110,11 @@ export function calculateDifference(start: string, end: string | null) {
/** /**
* Returns a formatted time. * Returns a formatted time.
* @param date - A UTC date time string. * @param date - A UTC date time string.
* @param timeFormat - The time format to use ('12-hours' or '24-hours')
*/ */
export function formatTime(date: string) { export function formatTime(date: string, timeFormat: TimeFormat = '24-hours') {
return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm'); const format = timeFormat === '12-hours' ? 'hh:mm A' : 'HH:mm';
return dayjs.utc(date).tz(getUserTimezone()).format(format);
} }
export function getLocalizedDayJs(timestamp?: string | null) { export function getLocalizedDayJs(timestamp?: string | null) {
@@ -169,11 +171,11 @@ export function formatWeekday(date: string) {
return dayjs(date).format('dddd'); return dayjs(date).format('dddd');
} }
export function formatStartEnd(start: string, end: string | null) { export function formatStartEnd(start: string, end: string | null, timeFormat: TimeFormat = '24-hours') {
if (end) { if (end) {
return `${formatTime(start)} - ${formatTime(end)}`; return `${formatTime(start, timeFormat)} - ${formatTime(end, timeFormat)}`;
} else { } else {
return `${formatTime(start)} - ...`; return `${formatTime(start, timeFormat)} - ...`;
} }
} }