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

25
packages/twenty-front/src/modules/localization/utils/formatDateISOStringToRelativeDate.ts Normal file
View File

@ -0,0 +1,25 @@
import {
differenceInDays,
formatDistance,
isToday,
startOfDay,
} from 'date-fns';
export const formatDateISOStringToRelativeDate = (
isoDate: string,
isDayMaximumPrecision = false,
) => {
const now = new Date();
const targetDate = new Date(isoDate);
if (isDayMaximumPrecision && isToday(targetDate)) return 'Today';
const isWithin24h = Math.abs(differenceInDays(targetDate, now)) < 1;
if (isDayMaximumPrecision || !isWithin24h)
return formatDistance(startOfDay(targetDate), startOfDay(now), {
addSuffix: true,
});
return formatDistance(targetDate, now, { addSuffix: true });
};

3
packages/twenty-front/src/modules/object-metadata/graphql/mutations.ts
View File

@ -35,6 +35,7 @@ export const CREATE_ONE_FIELD_METADATA_ITEM = gql`
isNullable
createdAt
updatedAt
settings
defaultValue
options
}
@ -73,6 +74,7 @@ export const UPDATE_ONE_FIELD_METADATA_ITEM = gql`
isNullable
createdAt
updatedAt
settings
}
}
`;
@ -136,6 +138,7 @@ export const DELETE_ONE_FIELD_METADATA_ITEM = gql`
isNullable
createdAt
updatedAt
settings
}
}
`;

1
packages/twenty-front/src/modules/object-metadata/graphql/queries.ts
View File

@ -41,6 +41,7 @@ export const FIND_MANY_OBJECT_METADATA_ITEMS = gql`
updatedAt
defaultValue
options
settings
relationDefinition {
relationId
direction

3
packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts
View File

@ -17,6 +17,7 @@ const baseFields = `
isNullable
createdAt
updatedAt
settings
`;
export const queries = {
@ -73,6 +74,7 @@ export const variables = {
label: 'fieldLabel',
name: 'fieldLabel',
options: undefined,
settings: undefined,
objectMetadataId,
type: 'TEXT',
},
@ -96,6 +98,7 @@ const defaultResponseData = {
isNullable: false,
createdAt: '1977-09-28T13:56:55.157Z',
updatedAt: '1996-10-10T08:27:57.117Z',
settings: undefined,
};
const fieldRelationResponseData = {

10
packages/twenty-front/src/modules/object-metadata/hooks/useFieldMetadataItem.ts
View File

@ -1,6 +1,6 @@
import { useDeleteOneRelationMetadataItem } from '@/object-metadata/hooks/useDeleteOneRelationMetadataItem';
import { Field } from '~/generated/graphql';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { Field } from '~/generated/graphql';
import { FieldMetadataItem } from '../types/FieldMetadataItem';
import { formatFieldMetadataItemInput } from '../utils/formatFieldMetadataItemInput';
@ -18,7 +18,13 @@ export const useFieldMetadataItem = () => {
const createMetadataField = (
input: Pick<
Field,
'label' | 'icon' | 'description' | 'defaultValue' | 'type' | 'options'
| 'label'
| 'icon'
| 'description'
| 'defaultValue'
| 'type'
| 'options'
| 'settings'
> & {
objectMetadataId: string;
},

3
packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts
View File

@ -36,4 +36,7 @@ export type FieldMetadataItem = Omit<
'id' | 'nameSingular' | 'namePlural'
>;
} | null;
settings?: {
displayAsRelativeDate?: boolean;
};
};

1
packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts
View File

@ -37,6 +37,7 @@ export const formatFieldMetadataItemAsFieldDefinition = ({
targetFieldMetadataName:
field.relationDefinition?.targetFieldMetadata?.name ?? '',
options: field.options,
settings: field.settings,
isNullable: field.isNullable,
};

9
packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemInput.ts
View File

@ -5,7 +5,13 @@ export const formatFieldMetadataItemInput = (
input: Partial<
Pick<
FieldMetadataItem,
'type' | 'label' | 'defaultValue' | 'icon' | 'description' | 'options'
| 'type'
| 'label'
| 'defaultValue'
| 'icon'
| 'description'
| 'options'
| 'settings'
>
>,
) => {
@ -18,5 +24,6 @@ export const formatFieldMetadataItemInput = (
label,
name: label ? computeMetadataNameFromLabelOrThrow(label) : undefined,
options: input.options,
settings: input.settings,
};
};

1
packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts
View File

@ -35,6 +35,7 @@ export const fieldMetadataItemSchema = (existingLabels?: string[]) => {
)
.nullable()
.optional(),
settings: z.any().optional(),
relationDefinition: z
.object({
__typename: z.literal('RelationDefinition').optional(),

12
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateFieldDisplay.tsx
View File

@ -2,7 +2,15 @@ import { useDateFieldDisplay } from '@/object-record/record-field/meta-types/hoo
import { DateDisplay } from '@/ui/field/display/components/DateDisplay';
export const DateFieldDisplay = () => {
const { fieldValue } = useDateFieldDisplay();
const { fieldValue, fieldDefinition } = useDateFieldDisplay();
return <DateDisplay value={fieldValue} />;
const displayAsRelativeDate =
fieldDefinition.metadata?.settings?.displayAsRelativeDate;
return (
<DateDisplay
value={fieldValue}
displayAsRelativeDate={displayAsRelativeDate}
/>
);
};

12
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateTimeFieldDisplay.tsx
View File

@ -2,7 +2,15 @@ import { useDateTimeFieldDisplay } from '@/object-record/record-field/meta-types
import { DateTimeDisplay } from '@/ui/field/display/components/DateTimeDisplay';
export const DateTimeFieldDisplay = () => {
const { fieldValue } = useDateTimeFieldDisplay();
const { fieldValue, fieldDefinition } = useDateTimeFieldDisplay();
return <DateTimeDisplay value={fieldValue} />;
const displayAsRelativeDate =
fieldDefinition.metadata?.settings?.displayAsRelativeDate;
return (
<DateTimeDisplay
value={fieldValue}
displayAsRelativeDate={displayAsRelativeDate}
/>
);
};

7
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useDateFieldDisplay.ts
View File

@ -2,6 +2,8 @@ import { useContext } from 'react';
import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldDateMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { FieldContext } from '../../contexts/FieldContext';
export const useDateFieldDisplay = () => {
@ -16,7 +18,10 @@ export const useDateFieldDisplay = () => {
);
return {
fieldDefinition,
// TODO: we have to use this because we removed the assertion that would have otherwise narrowed the type because
// it impacts performance. We should find a way to assert the type in a way that doesn't impact performance.
// Maybe a level above ?
fieldDefinition: fieldDefinition as FieldDefinition<FieldDateMetadata>,
fieldValue,
hotkeyScope,
clearable,

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useDateTimeFieldDisplay.ts
View File

@ -2,6 +2,8 @@ import { useContext } from 'react';
import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
import { FieldDateTimeMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { FieldContext } from '../../contexts/FieldContext';
export const useDateTimeFieldDisplay = () => {
@ -16,7 +18,7 @@ export const useDateTimeFieldDisplay = () => {
);
return {
fieldDefinition,
fieldDefinition: fieldDefinition as FieldDefinition<FieldDateTimeMetadata>,
fieldValue,
hotkeyScope,
clearable,

6
packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
View File

@ -27,12 +27,18 @@ export type FieldDateTimeMetadata = {
objectMetadataNameSingular?: string;
placeHolder: string;
fieldName: string;
settings?: {
displayAsRelativeDate?: boolean;
};
};
export type FieldDateMetadata = {
objectMetadataNameSingular?: string;
placeHolder: string;
fieldName: string;
settings?: {
displayAsRelativeDate?: boolean;
};
};
export type FieldNumberMetadata = {

13
packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
View File

@ -1,6 +1,7 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
@ -14,14 +15,6 @@ const StyledPreviewContainer = styled(CardContent)`
background-color: ${({ theme }) => theme.background.transparent.lighter};
`;
const StyledTitle = styled.h3`
color: ${({ theme }) => theme.font.color.extraLight};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;
const StyledFormContainer = styled(CardContent)`
padding: 0;
`;
@ -33,7 +26,7 @@ export const SettingsDataModelPreviewFormCard = ({
}: SettingsDataModelPreviewFormCardProps) => (
<Card className={className} fullWidth>
<StyledPreviewContainer divider={!!form}>
<StyledTitle>Preview</StyledTitle>
<StyledFormCardTitle>Preview</StyledFormCardTitle>
{preview}
</StyledPreviewContainer>
{!!form && <StyledFormContainer>{form}</StyledFormContainer>}

9
packages/twenty-front/src/modules/settings/data-model/fields/components/StyledFormCardTitle.tsx Normal file
View File

@ -0,0 +1,9 @@
import styled from '@emotion/styled';
export const StyledFormCardTitle = styled.h3`
color: ${({ theme }) => theme.font.color.extraLight};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(4)};
`;

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
View File

@ -9,9 +9,9 @@ import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextInput } from '@/ui/input/components/TextInput';
export const settingsDataModelFieldIconLabelFormSchema = (
existingLabels?: string[],
existingOtherLabels: string[] = [],
) => {
return fieldMetadataItemSchema(existingLabels || []).pick({
return fieldMetadataItemSchema(existingOtherLabels).pick({
icon: true,
label: true,
});

33
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard.tsx
View File

@ -9,6 +9,8 @@ import { settingsDataModelFieldBooleanFormSchema } from '@/settings/data-model/f
import { SettingsDataModelFieldBooleanSettingsFormCard } from '@/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanSettingsFormCard';
import { settingsDataModelFieldCurrencyFormSchema } from '@/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm';
import { SettingsDataModelFieldCurrencySettingsFormCard } from '@/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencySettingsFormCard';
import { settingsDataModelFieldDateFormSchema } from '@/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm';
import { SettingsDataModelFieldDateSettingsFormCard } from '@/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateSettingsFormCard';
import { settingsDataModelFieldRelationFormSchema } from '@/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm';
import { SettingsDataModelFieldRelationSettingsFormCard } from '@/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard';
import {
@ -30,6 +32,14 @@ const currencyFieldFormSchema = z
.object({ type: z.literal(FieldMetadataType.Currency) })
.merge(settingsDataModelFieldCurrencyFormSchema);
const dateFieldFormSchema = z
.object({ type: z.literal(FieldMetadataType.Date) })
.merge(settingsDataModelFieldDateFormSchema);
const dateTimeFieldFormSchema = z
.object({ type: z.literal(FieldMetadataType.DateTime) })
.merge(settingsDataModelFieldDateFormSchema);
const relationFieldFormSchema = z
.object({ type: z.literal(FieldMetadataType.Relation) })
.merge(settingsDataModelFieldRelationFormSchema);
@ -51,6 +61,8 @@ const otherFieldsFormSchema = z.object({
FieldMetadataType.Relation,
FieldMetadataType.Select,
FieldMetadataType.MultiSelect,
FieldMetadataType.Date,
FieldMetadataType.DateTime,
]),
) as [FieldMetadataType, ...FieldMetadataType[]],
),
@ -61,6 +73,8 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
[
booleanFieldFormSchema,
currencyFieldFormSchema,
dateFieldFormSchema,
dateTimeFieldFormSchema,
relationFieldFormSchema,
selectFieldFormSchema,
multiSelectFieldFormSchema,
@ -69,7 +83,7 @@ export const settingsDataModelFieldSettingsFormSchema = z.discriminatedUnion(
);
type SettingsDataModelFieldSettingsFormCardProps = {
disableCurrencyForm?: boolean;
isCreatingField?: boolean;
fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
@ -102,7 +116,7 @@ const previewableTypes = [
];
export const SettingsDataModelFieldSettingsFormCard = ({
disableCurrencyForm,
isCreatingField,
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldSettingsFormCardProps) => {
@ -120,7 +134,20 @@ export const SettingsDataModelFieldSettingsFormCard = ({
if (fieldMetadataItem.type === FieldMetadataType.Currency) {
return (
<SettingsDataModelFieldCurrencySettingsFormCard
disabled={disableCurrencyForm}
disabled={!isCreatingField}
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>
);
}
if (
fieldMetadataItem.type === FieldMetadataType.Date ||
fieldMetadataItem.type === FieldMetadataType.DateTime
) {
return (
<SettingsDataModelFieldDateSettingsFormCard
disabled={!isCreatingField}
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>

91
packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle.tsx Normal file
View File

@ -0,0 +1,91 @@
import { Toggle } from '@/ui/input/components/Toggle';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { createPortal } from 'react-dom';
import {
AppTooltip,
IconComponent,
IconInfoCircle,
TooltipDelay,
} from 'twenty-ui';
const StyledContainer = styled.div<{ disabled?: boolean }>`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.lighter};
border: 1px solid ${({ theme }) => theme.border.color.medium};
box-sizing: border-box;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ disabled, theme }) =>
disabled ? theme.font.color.tertiary : theme.font.color.primary};
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
height: ${({ theme }) => theme.spacing(8)};
justify-content: space-between;
padding: 0 ${({ theme }) => theme.spacing(2)};
`;
const StyledGroup = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
`;
interface SettingsDataModelFieldToggleProps {
disabled?: boolean;
Icon?: IconComponent;
label: string;
tooltip?: string;
value?: boolean;
onChange: (value: boolean) => void;
}
export const SettingsDataModelFieldToggle = ({
disabled,
Icon,
label,
tooltip,
value,
onChange,
}: SettingsDataModelFieldToggleProps) => {
const theme = useTheme();
const infoCircleElementId = `info-circle-id-${Math.random().toString(36).slice(2)}`;
return (
<StyledContainer>
<StyledGroup>
{Icon && (
<Icon color={theme.font.color.tertiary} size={theme.icon.size.md} />
)}
{label}
</StyledGroup>
<StyledGroup>
{tooltip && (
<IconInfoCircle
id={infoCircleElementId}
size={theme.icon.size.md}
color={theme.font.color.tertiary}
/>
)}
{tooltip &&
createPortal(
<AppTooltip
anchorSelect={`#${infoCircleElementId}`}
content={tooltip}
offset={5}
noArrow
place="bottom"
positionStrategy="absolute"
delay={TooltipDelay.shortDelay}
/>,
document.body,
)}
<Toggle
disabled={disabled}
value={value}
onChange={onChange}
toggleSize="small"
/>
</StyledGroup>
</StyledContainer>
);
};

63
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx Normal file
View File

@ -0,0 +1,63 @@
import { Controller, useFormContext } from 'react-hook-form';
import { z } from 'zod';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
import { SettingsDataModelFieldToggle } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle';
import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { IconClockShare } from 'twenty-ui';
export const settingsDataModelFieldDateFormSchema = z.object({
settings: z
.object({
displayAsRelativeDate: z.boolean().optional(),
})
.optional(),
});
export type SettingsDataModelFieldDateFormValues = z.infer<
typeof settingsDataModelFieldDateFormSchema
>;
type SettingsDataModelFieldDateFormProps = {
disabled?: boolean;
fieldMetadataItem: Pick<FieldMetadataItem, 'settings'>;
};
export const SettingsDataModelFieldDateForm = ({
disabled,
fieldMetadataItem,
}: SettingsDataModelFieldDateFormProps) => {
const { control } = useFormContext<SettingsDataModelFieldDateFormValues>();
const { initialDisplayAsRelativeDateValue } =
useDateSettingsFormInitialValues({
fieldMetadataItem,
});
return (
<CardContent>
<Controller
name="settings.displayAsRelativeDate"
control={control}
defaultValue={initialDisplayAsRelativeDateValue}
render={({ field: { onChange, value } }) => (
<>
<StyledFormCardTitle>Options</StyledFormCardTitle>
<SettingsDataModelFieldToggle
label="Display as relative date"
Icon={IconClockShare}
onChange={onChange}
value={value}
disabled={disabled}
tooltip={
'Show dates in a human-friendly format. Example: "13 mins ago" instead of "Jul 30, 2024 7:11pm"'
}
/>
</>
)}
/>
</CardContent>
);
};

66
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateSettingsFormCard.tsx Normal file
View File

@ -0,0 +1,66 @@
import styled from '@emotion/styled';
import { useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
import {
SettingsDataModelFieldDateForm,
SettingsDataModelFieldDateFormValues,
} from '@/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm';
import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
import {
SettingsDataModelFieldPreviewCard,
SettingsDataModelFieldPreviewCardProps,
} from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
type SettingsDataModelFieldDateSettingsFormCardProps = {
disabled?: boolean;
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'settings'
>;
} & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
display: grid;
flex: 1 1 100%;
`;
export const SettingsDataModelFieldDateSettingsFormCard = ({
disabled,
fieldMetadataItem,
objectMetadataItem,
}: SettingsDataModelFieldDateSettingsFormCardProps) => {
const { initialDisplayAsRelativeDateValue } =
useDateSettingsFormInitialValues({
fieldMetadataItem,
});
const { watch: watchFormValue } =
useFormContext<SettingsDataModelFieldDateFormValues>();
return (
<SettingsDataModelPreviewFormCard
preview={
<StyledFieldPreviewCard
fieldMetadataItem={{
...fieldMetadataItem,
settings: {
displayAsRelativeDate: watchFormValue(
'settings.displayAsRelativeDate',
initialDisplayAsRelativeDateValue,
),
},
}}
objectMetadataItem={objectMetadataItem}
/>
}
form={
<SettingsDataModelFieldDateForm
disabled={disabled}
fieldMetadataItem={fieldMetadataItem}
/>
}
/>
);
};

25
packages/twenty-front/src/modules/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues.ts Normal file
View File

@ -0,0 +1,25 @@
import { useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { SettingsDataModelFieldDateFormValues } from '@/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm';
export const useDateSettingsFormInitialValues = ({
fieldMetadataItem,
}: {
fieldMetadataItem?: Pick<FieldMetadataItem, 'settings'>;
}) => {
const initialDisplayAsRelativeDateValue =
fieldMetadataItem?.settings?.displayAsRelativeDate;
const { resetField } = useFormContext<SettingsDataModelFieldDateFormValues>();
const resetDefaultValueField = () =>
resetField('settings.displayAsRelativeDate', {
defaultValue: initialDisplayAsRelativeDateValue,
});
return {
initialDisplayAsRelativeDateValue,
resetDefaultValueField,
};
};

4
packages/twenty-front/src/modules/settings/data-model/fields/forms/validation-schemas/settingsFieldFormSchema.ts
View File

@ -5,10 +5,10 @@ import { settingsDataModelFieldIconLabelFormSchema } from '@/settings/data-model
import { settingsDataModelFieldSettingsFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldSettingsFormCard';
import { settingsDataModelFieldTypeFormSchema } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldTypeSelect';
export const settingsFieldFormSchema = (existingLabels?: string[]) => {
export const settingsFieldFormSchema = (existingOtherLabels?: string[]) => {
return z
.object({})
.merge(settingsDataModelFieldIconLabelFormSchema(existingLabels))
.merge(settingsDataModelFieldIconLabelFormSchema(existingOtherLabels))
.merge(settingsDataModelFieldDescriptionFormSchema())
.merge(settingsDataModelFieldTypeFormSchema)
.and(settingsDataModelFieldSettingsFormSchema);

3
packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
View File

@ -18,7 +18,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
export type SettingsDataModelFieldPreviewProps = {
fieldMetadataItem: Pick<
FieldMetadataItem,
'icon' | 'label' | 'type' | 'defaultValue' | 'options'
'icon' | 'label' | 'type' | 'defaultValue' | 'options' | 'settings'
> & {
id?: string;
name?: string;
@ -132,6 +132,7 @@ export const SettingsDataModelFieldPreview = ({
relationObjectMetadataNameSingular:
relationObjectMetadataItem?.nameSingular,
options: fieldMetadataItem.options ?? [],
settings: fieldMetadataItem.settings,
},
defaultValue: fieldMetadataItem.defaultValue,
},

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>;

1
packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
View File

@ -229,7 +229,6 @@ export const SettingsObjectFieldEdit = () => {
<Section>
<H2Title title="Values" description="The values of this field" />
<SettingsDataModelFieldSettingsFormCard
disableCurrencyForm
fieldMetadataItem={fieldMetadataItem}
objectMetadataItem={objectMetadataItem}
/>

1
packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
View File

@ -248,6 +248,7 @@ export const SettingsObjectNewFieldStep2 = () => {
/>
<SettingsDataModelFieldSettingsFormCard
isCreatingField
fieldMetadataItem={{
icon: formConfig.watch('icon'),
label: formConfig.watch('label') || 'Employees',

10
packages/twenty-server/src/engine/metadata-modules/field-metadata/interfaces/field-metadata-settings.interface.ts
View File

@ -14,8 +14,18 @@ type FieldMetadataNumberSettings = {
dataType: NumberDataType;
};
type FieldMetadataDateSettings = {
displayAsRelativeDate?: boolean;
};
type FieldMetadataDateTimeSettings = {
displayAsRelativeDate?: boolean;
};
type FieldMetadataSettingsMapping = {
[FieldMetadataType.NUMBER]: FieldMetadataNumberSettings;
[FieldMetadataType.DATE]: FieldMetadataDateSettings;
[FieldMetadataType.DATE_TIME]: FieldMetadataDateTimeSettings;
};
type SettingsByFieldMetadata<T extends FieldMetadataType | 'default'> =

9
packages/twenty-server/src/engine/twenty-orm/base.workspace-entity.ts
View File

@ -25,6 +25,9 @@ export abstract class BaseWorkspaceEntity {
description: 'Creation date',
icon: 'IconCalendar',
defaultValue: 'now',
settings: {
displayAsRelativeDate: true,
},
})
createdAt: string;
@ -35,6 +38,9 @@ export abstract class BaseWorkspaceEntity {
description: 'Last time the record was changed',
icon: 'IconCalendarClock',
defaultValue: 'now',
settings: {
displayAsRelativeDate: true,
},
})
updatedAt: string;
@ -44,6 +50,9 @@ export abstract class BaseWorkspaceEntity {
label: 'Deleted at',
description: 'Date when the record was deleted',
icon: 'IconCalendarMinus',
settings: {
displayAsRelativeDate: true,
},
})
@WorkspaceIsNullable()
deletedAt?: string | null;

1
packages/twenty-server/src/engine/twenty-orm/decorators/workspace-field.decorator.ts
View File

@ -69,6 +69,7 @@ export function WorkspaceField<T extends FieldMetadataType>(
icon: options.icon,
defaultValue,
options: options.options,
settings: options.settings,
isPrimary,
isNullable,
isSystem,

6
packages/twenty-server/src/engine/twenty-orm/interfaces/workspace-field-metadata-args.interface.ts
View File

@ -1,5 +1,6 @@
import { FieldMetadataDefaultValue } from 'src/engine/metadata-modules/field-metadata/interfaces/field-metadata-default-value.interface';
import { FieldMetadataOptions } from 'src/engine/metadata-modules/field-metadata/interfaces/field-metadata-options.interface';
import { FieldMetadataSettings } from 'src/engine/metadata-modules/field-metadata/interfaces/field-metadata-settings.interface';
import { Gate } from 'src/engine/twenty-orm/interfaces/gate.interface';
import { FieldMetadataType } from 'src/engine/metadata-modules/field-metadata/field-metadata.entity';
@ -54,6 +55,11 @@ export interface WorkspaceFieldMetadataArgs {
*/
readonly options?: FieldMetadataOptions;
/**
* Field settings.
*/
readonly settings?: FieldMetadataSettings;
/**
* Is primary field.
*/

4
packages/twenty-server/src/engine/twenty-orm/storage/metadata-args.storage.ts
View File

@ -1,12 +1,12 @@
/* eslint-disable @typescript-eslint/ban-types */
import { WorkspaceDynamicRelationMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-dynamic-relation-metadata-args.interface';
import { WorkspaceFieldMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-field-metadata-args.interface';
import { WorkspaceEntityMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-entity-metadata-args.interface';
import { WorkspaceRelationMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-relation-metadata-args.interface';
import { WorkspaceExtendedEntityMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-extended-entity-metadata-args.interface';
import { WorkspaceFieldMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-field-metadata-args.interface';
import { WorkspaceIndexMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-index-metadata-args.interface';
import { WorkspaceJoinColumnsMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-join-columns-metadata-args.interface';
import { WorkspaceRelationMetadataArgs } from 'src/engine/twenty-orm/interfaces/workspace-relation-metadata-args.interface';
export class MetadataArgsStorage {
private readonly entities: WorkspaceEntityMetadataArgs[] = [];

1
packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/factories/standard-field.factory.ts
View File

@ -160,6 +160,7 @@ export class StandardFieldFactory {
description: workspaceFieldMetadataArgs.description,
defaultValue: workspaceFieldMetadataArgs.defaultValue,
options: workspaceFieldMetadataArgs.options,
settings: workspaceFieldMetadataArgs.settings,
workspaceId: context.workspaceId,
isNullable: workspaceFieldMetadataArgs.isNullable,
isCustom: workspaceFieldMetadataArgs.isDeprecated ? true : false,

1
packages/twenty-ui/src/display/icon/components/TablerIcons.ts
View File

@ -48,6 +48,7 @@ export {
IconCircleX,
IconClick,
IconClockHour8,
IconClockShare,
IconCode,
IconCoins,
IconColorSwatch,