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

54
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
View File

@ -24,6 +24,7 @@ export type SettingsObjectFieldSelectFormValues =
type SettingsObjectFieldSelectFormProps = {
onChange: (values: SettingsObjectFieldSelectFormValues) => void;
values: SettingsObjectFieldSelectFormValues;
isMultiSelect?: boolean;
};
const StyledContainer = styled(CardContent)`
@ -60,6 +61,7 @@ const getNextColor = (currentColor: ThemeColor) => {
export const SettingsObjectFieldSelectForm = ({
onChange,
values,
isMultiSelect = false,
}: SettingsObjectFieldSelectFormProps) => {
const handleDragEnd = (result: DropResult) => {
if (!result.destination) return;
@ -72,6 +74,38 @@ export const SettingsObjectFieldSelectForm = ({
onChange(nextOptions);
};
const handleDefaultValueChange = (
index: number,
option: SettingsObjectFieldSelectFormOption,
nextOption: SettingsObjectFieldSelectFormOption,
forceUniqueDefaultValue: boolean,
) => {
const computeUniqueDefaultValue =
forceUniqueDefaultValue && option.isDefault !== nextOption.isDefault;
const nextOptions = computeUniqueDefaultValue
? values.map((value) => ({
...value,
isDefault: false,
}))
: [...values];
nextOptions.splice(index, 1, nextOption);
onChange(nextOptions);
};
const findNewLabel = () => {
let optionIndex = values.length + 1;
while (optionIndex < 100) {
const newLabel = `Option ${optionIndex}`;
if (!values.map((value) => value.label).includes(newLabel)) {
return newLabel;
}
optionIndex += 1;
}
return `Option 100`;
};
return (
<>
<StyledContainer>
@ -91,18 +125,12 @@ export const SettingsObjectFieldSelectForm = ({
key={option.value}
isDefault={option.isDefault}
onChange={(nextOption) => {
const hasDefaultOptionChanged =
!option.isDefault && nextOption.isDefault;
const nextOptions = hasDefaultOptionChanged
? values.map((value) => ({
...value,
isDefault: false,
}))
: [...values];
nextOptions.splice(index, 1, nextOption);
onChange(nextOptions);
handleDefaultValueChange(
index,
option,
nextOption,
!isMultiSelect,
);
}}
onRemove={
values.length > 1
@ -131,7 +159,7 @@ export const SettingsObjectFieldSelectForm = ({
...values,
{
color: getNextColor(values[values.length - 1].color),
label: `Option ${values.length + 1}`,
label: findNewLabel(),
value: v4(),
},
])