admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Enhance date and time format settings to reflect system preferences (#7274)

Browse Source 
Closes https://github.com/twentyhq/twenty/issues/6880

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Angela Li
2024-10-09 11:05:40 -04:00
committed by GitHub
parent b80fa9cf13
commit 28c0b146d4
4 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts
View File

@ -5,6 +5,10 @@ export const detectTimeFormat = () => {
const isHour12 = Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
}).resolvedOptions().hour12;
if (isDefined(isHour12) && isHour12) return TimeFormat.HOUR_12;
if (isDefined(isHour12) && isHour12) {
return TimeFormat.HOUR_12;
}
return TimeFormat.HOUR_24;
};

20
packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
View File

@ -1,6 +1,7 @@
import { formatInTimeZone } from 'date-fns-tz';
import { DateFormat } from '@/localization/constants/DateFormat';
import { detectDateFormat } from '@/localization/utils/detectDateFormat';
import { detectTimeZone } from '@/localization/utils/detectTimeZone';
import { Select } from '@/ui/input/components/Select';
@ -15,7 +16,12 @@ export const DateTimeSettingsDateFormatSelect = ({
timeZone,
value,
}: DateTimeSettingsDateFormatSelectProps) => {
const setTimeZone = timeZone === 'system' ? detectTimeZone() : timeZone;
const systemTimeZone = detectTimeZone();
const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
const systemDateFormat = detectDateFormat();
return (
<Select
dropdownId="datetime-settings-date-format"
@ -25,13 +31,17 @@ export const DateTimeSettingsDateFormatSelect = ({
value={value}
options={[
{
label: `System settings`,
label: `System settings - ${formatInTimeZone(
Date.now(),
usedTimeZone,
systemDateFormat,
)}`,
value: DateFormat.SYSTEM,
},
{
label: `${formatInTimeZone(
Date.now(),
setTimeZone,
usedTimeZone,
DateFormat.MONTH_FIRST,
)}`,
value: DateFormat.MONTH_FIRST,
@ -39,7 +49,7 @@ export const DateTimeSettingsDateFormatSelect = ({
{
label: `${formatInTimeZone(
Date.now(),
setTimeZone,
usedTimeZone,
DateFormat.DAY_FIRST,
)}`,
value: DateFormat.DAY_FIRST,
@ -47,7 +57,7 @@ export const DateTimeSettingsDateFormatSelect = ({
{
label: `${formatInTimeZone(
Date.now(),
setTimeZone,
usedTimeZone,
DateFormat.YEAR_FIRST,
)}`,
value: DateFormat.YEAR_FIRST,

18
packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
View File

@ -1,6 +1,7 @@
import { formatInTimeZone } from 'date-fns-tz';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
import { detectTimeZone } from '@/localization/utils/detectTimeZone';
import { Select } from '@/ui/input/components/Select';
@ -15,7 +16,12 @@ export const DateTimeSettingsTimeFormatSelect = ({
timeZone,
value,
}: DateTimeSettingsTimeFormatSelectProps) => {
const setTimeZone = timeZone === 'system' ? detectTimeZone() : timeZone;
const systemTimeZone = detectTimeZone();
const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
const systemTimeFormat = detectTimeFormat();
return (
<Select
dropdownId="datetime-settings-time-format"
@ -25,13 +31,17 @@ export const DateTimeSettingsTimeFormatSelect = ({
value={value}
options={[
{
label: 'System settings',
label: `System Settings - ${formatInTimeZone(
Date.now(),
usedTimeZone,
systemTimeFormat,
)}`,
value: TimeFormat.SYSTEM,
},
{
label: `24h (${formatInTimeZone(
Date.now(),
setTimeZone,
usedTimeZone,
TimeFormat.HOUR_24,
)})`,
value: TimeFormat.HOUR_24,
@ -39,7 +49,7 @@ export const DateTimeSettingsTimeFormatSelect = ({
{
label: `12h (${formatInTimeZone(
Date.now(),
setTimeZone,
usedTimeZone,
TimeFormat.HOUR_12,
)})`,
value: TimeFormat.HOUR_12,

15
packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeZoneSelect.tsx
View File

@ -12,19 +12,22 @@ export const DateTimeSettingsTimeZoneSelect = ({
value = detectTimeZone(),
onChange,
}: DateTimeSettingsTimeZoneSelectProps) => {
const systemTimeZone = detectTimeZone();
const systemTimeZoneOption = findAvailableTimeZoneOption(systemTimeZone);
return (
<Select
dropdownId="settings-accounts-calendar-time-zone"
dropdownWidth={416}
label="Time zone"
fullWidth
value={
value === 'system'
? 'System settings'
: findAvailableTimeZoneOption(value)?.value
}
value={value}
options={[
{ label: 'System settings', value: 'system' },
{
label: `System settings - ${systemTimeZoneOption.label}`,
value: 'system',
},
...AVAILABLE_TIMEZONE_OPTIONS,
]}
onChange={onChange}