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

4778 multi select field front implement multi select type (#4887)

Browse Source
This commit is contained in:
martmull
2024-04-11 12:57:08 +02:00
committed by GitHub
parent aecf8783a0
commit a7fcc5d47e
42 changed files with 698 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,8 @@ const canPersistFieldMetadataItemUpdate = (
) => {
return (
fieldMetadataItem.isCustom ||
fieldMetadataItem.type === FieldMetadataType.Select
fieldMetadataItem.type === FieldMetadataType.Select ||
fieldMetadataItem.type === FieldMetadataType.MultiSelect
);
};
@ -87,6 +88,7 @@ export const SettingsObjectFieldEdit = () => {
hasFormChanged,
hasRelationFormChanged,
hasSelectFormChanged,
hasMultiSelectFormChanged,
initForm,
isInitialized,
isValid,
@ -114,6 +116,14 @@ export const SettingsObjectFieldEdit = () => {
(optionA, optionB) => optionA.position - optionB.position,
);
const multiSelectOptions = activeMetadataField.options?.map((option) => ({
...option,
isDefault: defaultValue?.includes(`'${option.value}'`) || false,
}));
multiSelectOptions?.sort(
(optionA, optionB) => optionA.position - optionB.position,
);
const fieldType = activeMetadataField.type;
const isFieldTypeSupported = isFieldTypeSupportedInSettings(fieldType);
@ -135,6 +145,9 @@ export const SettingsObjectFieldEdit = () => {
},
defaultValue: activeMetadataField.defaultValue,
...(selectOptions?.length ? { select: selectOptions } : {}),
...(multiSelectOptions?.length
? { multiSelect: multiSelectOptions }
: {}),
});
}, [
activeMetadataField,
@ -170,11 +183,13 @@ export const SettingsObjectFieldEdit = () => {
icon: validatedFormValues.relation.field.icon,
id: relationFieldMetadataItem?.id,
label: validatedFormValues.relation.field.label,
type: validatedFormValues.type,
});
}
if (
hasFieldFormChanged ||
hasSelectFormChanged ||
hasMultiSelectFormChanged ||
hasDefaultValueChanged
) {
await editMetadataField({
@ -183,10 +198,13 @@ export const SettingsObjectFieldEdit = () => {
id: activeMetadataField.id,
label: validatedFormValues.label,
defaultValue: validatedFormValues.defaultValue,
type: validatedFormValues.type,
options:
validatedFormValues.type === FieldMetadataType.Select
? validatedFormValues.select
: undefined,
: validatedFormValues.type === FieldMetadataType.MultiSelect
? validatedFormValues.multiSelect
: undefined,
});
}
@ -261,6 +279,7 @@ export const SettingsObjectFieldEdit = () => {
currency: formValues.currency,
relation: formValues.relation,
select: formValues.select,
multiSelect: formValues.multiSelect,
defaultValue: formValues.defaultValue,
}}
/>

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

@ -28,6 +28,7 @@ import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { View } from '@/views/types/View';
import { ViewType } from '@/views/types/ViewType';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled.ts';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -41,6 +42,7 @@ export const SettingsObjectNewFieldStep2 = () => {
const navigate = useNavigate();
const { objectSlug = '' } = useParams();
const { enqueueSnackBar } = useSnackBar();
const isMultiSelectEnabled = useIsFeatureEnabled('IS_MULTI_SELECT_ENABLED');
const {
findActiveObjectMetadataItemBySlug,
@ -132,12 +134,14 @@ export const SettingsObjectNewFieldStep2 = () => {
description: validatedFormValues.description,
icon: validatedFormValues.icon,
label: validatedFormValues.label,
type: validatedFormValues.type,
},
objectMetadataId: activeObjectMetadataItem.id,
connect: {
field: {
icon: validatedFormValues.relation.field.icon,
label: validatedFormValues.relation.field.label,
type: validatedFormValues.relation.field.type,
},
objectMetadataId: validatedFormValues.relation.objectMetadataId,
},
@ -147,7 +151,7 @@ export const SettingsObjectNewFieldStep2 = () => {
validatedFormValues.relation.objectMetadataId,
);
objectViews.forEach(async (view) => {
objectViews.map(async (view) => {
const viewFieldToCreate = {
viewId: view.id,
fieldMetadataId:
@ -180,7 +184,7 @@ export const SettingsObjectNewFieldStep2 = () => {
recordId: view.id,
});
relationObjectViews.forEach(async (view) => {
relationObjectViews.map(async (view) => {
const viewFieldToCreate = {
viewId: view.id,
fieldMetadataId:
@ -230,10 +234,12 @@ export const SettingsObjectNewFieldStep2 = () => {
options:
validatedFormValues.type === FieldMetadataType.Select
? validatedFormValues.select
: undefined,
: validatedFormValues.type === FieldMetadataType.MultiSelect
? validatedFormValues.multiSelect
: undefined,
});
objectViews.forEach(async (view) => {
objectViews.map(async (view) => {
const viewFieldToCreate = {
viewId: view.id,
fieldMetadataId: createdMetadataField.data?.createOneField.id,
@ -278,13 +284,16 @@ export const SettingsObjectNewFieldStep2 = () => {
FieldMetadataType.Email,
FieldMetadataType.FullName,
FieldMetadataType.Link,
FieldMetadataType.MultiSelect,
FieldMetadataType.Numeric,
FieldMetadataType.Phone,
FieldMetadataType.Probability,
FieldMetadataType.Uuid,
];
if (!isMultiSelectEnabled) {
excludedFieldTypes.push(FieldMetadataType.MultiSelect);
}
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -335,6 +344,7 @@ export const SettingsObjectNewFieldStep2 = () => {
currency: formValues.currency,
relation: formValues.relation,
select: formValues.select,
multiSelect: formValues.multiSelect,
defaultValue: formValues.defaultValue,
}}
/>