Solidtime/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-05-07 20:32:26 +00: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
resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
+1 -1
View File
@@ -156,7 +156,7 @@ function onSelectChange(checked: boolean) {
<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"
@click="expanded = !expanded">
{{ formatStartEnd(timeEntry.start, timeEntry.end) }}
{{ formatStartEnd(timeEntry.start, timeEntry.end, organization?.time_format) }}
</button>
</div>
<button
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
+3 -2
View File
@@ -7,7 +7,8 @@ import {
} from '@/packages/ui/src/utils/time';
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
import { twMerge } from 'tailwind-merge';
import { type Organization } from '@/packages/api/src';
import type { Organization } from '@/packages/api/src';
defineProps<{
start: string;
end: string | null;
@@ -45,7 +46,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
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"
>{{ formatDateLocalized(start, organization?.date_format) }}
</span>
resources/js/packages/ui/src/utils/time.ts
+7 -5
View File
@@ -110,9 +110,11 @@ export function calculateDifference(start: string, end: string | null) {
/**
* Returns a formatted time.
* @param date - A UTC date time string.
* @param timeFormat - The time format to use ('12-hours' or '24-hours')
*/
export function formatTime(date: string) {
return dayjs.utc(date).tz(getUserTimezone()).format('HH:mm');
export function formatTime(date: string, timeFormat: TimeFormat = '24-hours') {
const format = timeFormat === '12-hours' ? 'hh:mm A' : 'HH:mm';
return dayjs.utc(date).tz(getUserTimezone()).format(format);
}
export function getLocalizedDayJs(timestamp?: string | null) {
@@ -169,11 +171,11 @@ export function formatWeekday(date: string) {
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) {
return `${formatTime(start)} - ${formatTime(end)}`;
return `${formatTime(start, timeFormat)} - ${formatTime(end, timeFormat)}`;
} else {
return `${formatTime(start)} - ...`;
return `${formatTime(start, timeFormat)} - ...`;
}
}