feat: allow users to start the calendar week on Monday (#13295)

resolve twentyhq/core-team-issues#1255 - Introduced a new field isWeekStartMonday in the workspaceMember table. - Added a function updateCalendarStartDay to update the isWeekStartMonday value when the user toggles the corresponding field in the settings. The logic works for me, but I couldn’t find a way to create the column locally in the database for the workspaceMember tables. Please let me know if this approach looks good and how to properly create dynamic columns that are not directly handled via migration. https://github.com/user-attachments/assets/4eebada5-6a96-4a88-8e96-98f1501859e3 --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Félix Malfait <felix@twenty.com>
2025-07-30 11:46:05 +01:00
parent 1972e2fbf7
commit ad69ed9aba
31 changed files with 507 additions and 136 deletions
@@ -0,0 +1,73 @@
+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';
+import { t } from '@lingui/core/macro';
+
+type DateTimeSettingsDateFormatSelectProps = {
+  value: DateFormat;
+  onChange: (nextValue: DateFormat) => void;
+  timeZone: string;
+};
+
+export const DateTimeSettingsDateFormatSelect = ({
+  onChange,
+  timeZone,
+  value,
+}: DateTimeSettingsDateFormatSelectProps) => {
+  const systemTimeZone = detectTimeZone();
+
+  const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
+
+  const systemDateFormat = DateFormat[detectDateFormat()];
+
+  const systemDateFormatLabel = formatInTimeZone(
+    Date.now(),
+    usedTimeZone,
+    systemDateFormat,
+  );
+
+  return (
+    <Select
+      dropdownId="datetime-settings-date-format"
+      dropdownWidth={218}
+      label={t`Date format`}
+      fullWidth
+      dropdownWidthAuto
+      value={value}
+      options={[
+        {
+          label: t`System settings - ${systemDateFormatLabel}`,
+          value: DateFormat.SYSTEM,
+        },
+        {
+          label: `${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            DateFormat.MONTH_FIRST,
+          )}`,
+          value: DateFormat.MONTH_FIRST,
+        },
+        {
+          label: `${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            DateFormat.DAY_FIRST,
+          )}`,
+          value: DateFormat.DAY_FIRST,
+        },
+        {
+          label: `${formatInTimeZone(
+            Date.now(),
+            usedTimeZone,
+            DateFormat.YEAR_FIRST,
+          )}`,
+          value: DateFormat.YEAR_FIRST,
+        },
+      ]}
+      onChange={onChange}
+    />
+  );
+};
@@ -0,0 +1,70 @@
+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';
+import { useLingui } from '@lingui/react/macro';
+
+type DateTimeSettingsTimeFormatSelectProps = {
+  value: TimeFormat;
+  onChange: (nextValue: TimeFormat) => void;
+  timeZone: string;
+};
+
+export const DateTimeSettingsTimeFormatSelect = ({
+  onChange,
+  timeZone,
+  value,
+}: DateTimeSettingsTimeFormatSelectProps) => {
+  const { t } = useLingui();
+  const systemTimeZone = detectTimeZone();
+
+  const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
+
+  const systemTimeFormat = TimeFormat[detectTimeFormat()];
+
+  const systemTimeFormatLabel = formatInTimeZone(
+    Date.now(),
+    usedTimeZone,
+    systemTimeFormat,
+  );
+
+  const hour24Label = formatInTimeZone(
+    Date.now(),
+    usedTimeZone,
+    TimeFormat.HOUR_24,
+  );
+
+  const hour12Label = formatInTimeZone(
+    Date.now(),
+    usedTimeZone,
+    TimeFormat.HOUR_12,
+  );
+
+  return (
+    <Select
+      dropdownId="datetime-settings-time-format"
+      dropdownWidth={218}
+      label={t`Time format`}
+      dropdownWidthAuto
+      fullWidth
+      value={value}
+      options={[
+        {
+          label: t`System Settings - ${systemTimeFormatLabel}`,
+          value: TimeFormat.SYSTEM,
+        },
+        {
+          label: t`24h (${hour24Label})`,
+          value: TimeFormat.HOUR_24,
+        },
+        {
+          label: t`12h (${hour12Label})`,
+          value: TimeFormat.HOUR_12,
+        },
+      ]}
+      onChange={onChange}
+    />
+  );
+};
@@ -0,0 +1,42 @@
+import { detectTimeZone } from '@/localization/utils/detectTimeZone';
+import { findAvailableTimeZoneOption } from '@/localization/utils/findAvailableTimeZoneOption';
+import { AVAILABLE_TIMEZONE_OPTIONS } from '@/settings/experience/constants/AvailableTimezoneOptions';
+import { Select } from '@/ui/input/components/Select';
+import { t } from '@lingui/core/macro';
+import { isDefined } from 'twenty-shared/utils';
+import { SelectOption } from 'twenty-ui/input';
+
+type DateTimeSettingsTimeZoneSelectProps = {
+  value?: string;
+  onChange: (nextValue: string) => void;
+};
+
+export const DateTimeSettingsTimeZoneSelect = ({
+  value = detectTimeZone(),
+  onChange,
+}: DateTimeSettingsTimeZoneSelectProps) => {
+  const systemTimeZone = detectTimeZone();
+
+  const systemTimeZoneOption = findAvailableTimeZoneOption(systemTimeZone);
+
+  return (
+    <Select
+      dropdownId="datetime-settings-time-zone"
+      label={t`Time zone`}
+      dropdownWidthAuto
+      fullWidth
+      value={value}
+      options={[
+        {
+          label: isDefined(systemTimeZoneOption)
+            ? t`System settings`.concat(` - ${systemTimeZoneOption.label}`)
+            : t`System settings`,
+          value: 'system',
+        },
+        ...(AVAILABLE_TIMEZONE_OPTIONS as SelectOption<string>[]),
+      ]}
+      onChange={onChange}
+      withSearchInput
+    />
+  );
+};