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

Date formatting per workspace member settings (#6408)

Browse Source 
Implement date formatting per workspace member settings

We'll need another round to maybe initialize all workspaces on the
default settings.

For now the default behavior is to take system settings if nothing is
found in DB.

---------

Co-authored-by: Weiko <corentin@twenty.com>
This commit is contained in:
Lucas Bordeau
2024-07-30 14:52:10 +02:00
committed by GitHub
parent 45ebb0b824
commit ccf4d1eeec
64 changed files with 1176 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx
View File

@ -10,7 +10,7 @@ import { H2Title } from 'twenty-ui';
import {
CalendarChannelVisibility,
TimelineCalendarEvent,
} from '~/generated-metadata/graphql';
} from '~/generated/graphql';
const StyledGeneralContainer = styled.div`
display: flex;

10
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect.tsx
View File

@ -1,6 +1,6 @@
import { formatInTimeZone } from 'date-fns-tz';
import { DateFormat } from '@/settings/accounts/constants/DateFormat';
import { DateFormat } from '@/localization/constants/DateFormat';
import { Select } from '@/ui/input/components/Select';
type SettingsAccountsCalendarDateFormatSelectProps = {
@ -21,12 +21,12 @@ export const SettingsAccountsCalendarDateFormatSelect = ({
value={value}
options={[
{
label: formatInTimeZone(Date.now(), timeZone, DateFormat.US),
value: DateFormat.US,
label: formatInTimeZone(Date.now(), timeZone, DateFormat.MONTH_FIRST),
value: DateFormat.MONTH_FIRST,
},
{
label: formatInTimeZone(Date.now(), timeZone, DateFormat.UK),
value: DateFormat.UK,
label: formatInTimeZone(Date.now(), timeZone, DateFormat.DAY_FIRST),
value: DateFormat.DAY_FIRST,
},
]}
onChange={onChange}

13
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarDisplaySettings.tsx
View File

@ -1,12 +1,13 @@
import { useState } from 'react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { SettingsAccountsCalendarDateFormatSelect } from '@/settings/accounts/components/SettingsAccountsCalendarDateFormatSelect';
import { SettingsAccountsCalendarTimeFormatSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect';
import { SettingsAccountsCalendarTimeZoneSelect } from '@/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect';
import { DateFormat } from '@/settings/accounts/constants/DateFormat';
import { TimeFormat } from '@/settings/accounts/constants/TimeFormat';
import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { detectTimeZone } from '@/localization/utils/detectTimeZone';
const StyledContainer = styled.div`
display: flex;
@ -19,10 +20,10 @@ export const SettingsAccountsCalendarDisplaySettings = () => {
const [timeZone, setTimeZone] = useState(detectTimeZone());
// TODO: use the user's saved date format.
const [dateFormat, setDateFormat] = useState(DateFormat.US);
const [dateFormat, setDateFormat] = useState(DateFormat.MONTH_FIRST);
// TODO: use the user's saved time format.
const [timeFormat, setTimeFormat] = useState(TimeFormat['24h']);
const [timeFormat, setTimeFormat] = useState(TimeFormat['HOUR_24']);
return (
<StyledContainer>

10
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeFormatSelect.tsx
View File

@ -1,6 +1,6 @@
import { formatInTimeZone } from 'date-fns-tz';
import { TimeFormat } from '@/settings/accounts/constants/TimeFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { Select } from '@/ui/input/components/Select';
type SettingsAccountsCalendarTimeFormatSelectProps = {
@ -24,17 +24,17 @@ export const SettingsAccountsCalendarTimeFormatSelect = ({
label: `24h (${formatInTimeZone(
Date.now(),
timeZone,
TimeFormat['24h'],
TimeFormat.HOUR_24,
)})`,
value: TimeFormat['24h'],
value: TimeFormat.HOUR_24,
},
{
label: `12h (${formatInTimeZone(
Date.now(),
timeZone,
TimeFormat['12h'],
TimeFormat.HOUR_12,
)})`,
value: TimeFormat['12h'],
value: TimeFormat.HOUR_12,
},
]}
onChange={onChange}

5
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarTimeZoneSelect.tsx
View File

@ -1,6 +1,7 @@
import { detectTimeZone } from '@/localization/utils/detectTimeZone';
import { findAvailableTimeZoneOption } from '@/localization/utils/findAvailableTimeZoneOption';
import { AVAILABLE_TIMEZONE_OPTIONS } from '@/settings/accounts/constants/AvailableTimezoneOptions';
import { detectTimeZone } from '@/settings/accounts/utils/detectTimeZone';
import { findAvailableTimeZoneOption } from '@/settings/accounts/utils/findAvailableTimeZoneOption';
import { Select } from '@/ui/input/components/Select';
type SettingsAccountsCalendarTimeZoneSelectProps = {