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

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

@@ -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,
             }}
           />