twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-03 09:42:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add links composite field

Browse Source
This commit is contained in:
Thomas Trompette 2024-12-12 11:45:19 +01:00
parent b10d831371
commit 0400f6e08e
3 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
View File

@ -1,6 +1,7 @@
import { FormAddressFieldInput } from '@/object-record/record-field/form-types/components/FormAddressFieldInput';
import { FormBooleanFieldInput } from '@/object-record/record-field/form-types/components/FormBooleanFieldInput';
import { FormFullNameFieldInput } from '@/object-record/record-field/form-types/components/FormFullNameFieldInput';
import { FormLinksFieldInput } from '@/object-record/record-field/form-types/components/FormLinksFieldInput';
import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
import { FormSelectFieldInput } from '@/object-record/record-field/form-types/components/FormSelectFieldInput';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
@ -9,11 +10,13 @@ import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinit
import {
FieldAddressValue,
FieldFullNameValue,
FieldLinksValue,
FieldMetadata,
} from '@/object-record/record-field/types/FieldMetadata';
import { isFieldAddress } from '@/object-record/record-field/types/guards/isFieldAddress';
import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
import { isFieldFullName } from '@/object-record/record-field/types/guards/isFieldFullName';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
@ -78,5 +81,12 @@ export const FormFieldInput = ({
onPersist={onPersist}
VariablePicker={VariablePicker}
/>
) : isFieldLinks(field) ? (
<FormLinksFieldInput
label={field.label}
defaultValue={defaultValue as FieldLinksValue}
onPersist={onPersist}
VariablePicker={VariablePicker}
/>
) : null;
};

58
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormLinksFieldInput.tsx Normal file
View File

@ -0,0 +1,58 @@
import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer';
import { FormNestedFieldInputContainer } from '@/object-record/record-field/form-types/components/FormNestedFieldInputContainer';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { FieldLinksDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
import { FieldLinksValue } from '@/object-record/record-field/types/FieldMetadata';
import { InputLabel } from '@/ui/input/components/InputLabel';
type FormLinksFieldInputProps = {
label?: string;
defaultValue: FieldLinksValue | undefined;
onPersist: (value: FieldLinksValue) => void;
VariablePicker?: VariablePickerComponent;
readonly?: boolean;
};
export const FormLinksFieldInput = ({
label,
defaultValue,
onPersist,
readonly,
VariablePicker,
}: FormLinksFieldInputProps) => {
const handleChange =
(field: keyof FieldLinksDraftValue) => (updatedLinksPart: string) => {
const updatedLinks = {
primaryLinkLabel: defaultValue?.primaryLinkLabel ?? '',
primaryLinkUrl: defaultValue?.primaryLinkUrl ?? '',
[field]: updatedLinksPart,
};
// We need to validate the links and display an error message if the links are not valid
onPersist(updatedLinks);
};
return (
<FormFieldInputContainer>
{label ? <InputLabel>{label}</InputLabel> : null}
<FormNestedFieldInputContainer>
<FormTextFieldInput
label="Primary Link Label"
defaultValue={defaultValue?.primaryLinkLabel}
onPersist={handleChange('primaryLinkLabel')}
placeholder={'Primary Link Label'}
readonly={readonly}
VariablePicker={VariablePicker}
/>
<FormTextFieldInput
label="Primary Link URL"
defaultValue={defaultValue?.primaryLinkUrl}
onPersist={handleChange('primaryLinkUrl')}
placeholder={'Primary Link URL'}
readonly={readonly}
VariablePicker={VariablePicker}
/>
</FormNestedFieldInputContainer>
</FormFieldInputContainer>
);
};

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

@ -35,8 +35,10 @@ export const useLinksField = () => {
const persistLinksField = (nextValue: FieldLinksValue) => {
try {
console.log('persistLinksField', nextValue);
persistField(linksSchema.parse(nextValue));
} catch {
console.error('Failed to persist links field');
return;
}
};