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

'Display as relative date' field formatting option for dateTime and date fields #5398 (#6945)

Browse Source 
Implements #5398.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
ad-elias
2024-09-25 11:42:16 +02:00
committed by GitHub
parent b3a0cba961
commit 092496f2db
35 changed files with 430 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/modules/ui/field/display/components/DateDisplay.tsx
View File

@ -1,17 +1,24 @@
import { formatDateISOStringToDate } from '@/localization/utils/formatDateISOStringToDate';
import { formatDateISOStringToRelativeDate } from '@/localization/utils/formatDateISOStringToRelativeDate';
import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { EllipsisDisplay } from './EllipsisDisplay';
type DateDisplayProps = {
value: string | null | undefined;
displayAsRelativeDate?: boolean;
};
export const DateDisplay = ({ value }: DateDisplayProps) => {
export const DateDisplay = ({
value,
displayAsRelativeDate,
}: DateDisplayProps) => {
const { dateFormat, timeZone } = useContext(UserContext);
const formattedDate = value
? formatDateISOStringToDate(value, timeZone, dateFormat)
? displayAsRelativeDate
? formatDateISOStringToRelativeDate(value, true)
: formatDateISOStringToDate(value, timeZone, dateFormat)
: '';
return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;

11
packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx
View File

@ -1,17 +1,24 @@
import { formatDateISOStringToDateTime } from '@/localization/utils/formatDateISOStringToDateTime';
import { formatDateISOStringToRelativeDate } from '@/localization/utils/formatDateISOStringToRelativeDate';
import { UserContext } from '@/users/contexts/UserContext';
import { useContext } from 'react';
import { EllipsisDisplay } from './EllipsisDisplay';
type DateTimeDisplayProps = {
value: string | null | undefined;
displayAsRelativeDate?: boolean;
};
export const DateTimeDisplay = ({ value }: DateTimeDisplayProps) => {
export const DateTimeDisplay = ({
value,
displayAsRelativeDate,
}: DateTimeDisplayProps) => {
const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
const formattedDate = value
? formatDateISOStringToDateTime(value, timeZone, dateFormat, timeFormat)
? displayAsRelativeDate
? formatDateISOStringToRelativeDate(value)
: formatDateISOStringToDateTime(value, timeZone, dateFormat, timeFormat)
: '';
return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;