Feature 7552 patch (#8574)

Related to #7552

<img width="556" alt="Screenshot 2024-11-18 at 17 57 30"
src="https://github.com/user-attachments/assets/e89e575b-9adb-4910-ab0d-b60079727f70">

---------

Co-authored-by: guillim <guillaume@twenty.com>
This commit is contained in:
Guillim 2024-11-19 12:47:33 +01:00 committed by GitHub
parent 9073bdf21a
commit 4a8234d18c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 57 deletions

View File

@ -1,18 +1,10 @@
import { Controller, useFormContext } from 'react-hook-form'; import { Controller, useFormContext } from 'react-hook-form';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { Select } from '@/ui/input/components/Select'; import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import styled from '@emotion/styled'; import { IconTextWrap } from 'twenty-ui';
import { CardContent } from 'twenty-ui';
import { z } from 'zod'; import { z } from 'zod';
const StyledFormCardTitle = styled.div`
color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(1)};
`;
type SettingsDataModelFieldTextFormProps = { type SettingsDataModelFieldTextFormProps = {
disabled?: boolean; disabled?: boolean;
fieldMetadataItem: Pick< fieldMetadataItem: Pick<
@ -39,53 +31,51 @@ export const SettingsDataModelFieldTextForm = ({
}: SettingsDataModelFieldTextFormProps) => { }: SettingsDataModelFieldTextFormProps) => {
const { control } = useFormContext<SettingsDataModelFieldTextFormValues>(); const { control } = useFormContext<SettingsDataModelFieldTextFormValues>();
return ( return (
<CardContent> <Controller
<Controller name="settings"
name="settings" defaultValue={{
defaultValue={{ displayedMaxRows: fieldMetadataItem?.settings?.displayedMaxRows || 0,
displayedMaxRows: fieldMetadataItem?.settings?.displayedMaxRows || 0, }}
}} control={control}
control={control} render={({ field: { onChange, value } }) => {
render={({ field: { onChange, value } }) => { const displayedMaxRows = value?.displayedMaxRows ?? 0;
const displayedMaxRows = value?.displayedMaxRows ?? 0;
return ( return (
<> <>
<StyledFormCardTitle>Wrap on record pages</StyledFormCardTitle> <SettingsOptionCardContentSelect
<Select Icon={IconTextWrap}
disabled={disabled} dropdownId="text-wrap"
dropdownId="selectTextWrap" title="Wrap on record pages"
options={[ description="Display text on multiple lines"
{ value={displayedMaxRows}
label: 'Deactivated', onChange={(value) => onChange({ displayedMaxRows: value })}
value: 0, disabled={disabled}
}, options={[
{ {
label: 'First 2 lines', label: 'Deactivated',
value: 2, value: 0,
}, },
{ {
label: 'First 5 lines', label: 'First 2 lines',
value: 5, value: 2,
}, },
{ {
label: 'First 10 lines', label: 'First 5 lines',
value: 10, value: 5,
}, },
{ {
label: 'All lines', label: 'First 10 lines',
value: 99, value: 10,
}, },
]} {
value={displayedMaxRows} label: 'All lines',
onChange={(value) => onChange({ displayedMaxRows: value })} value: 99,
withSearchInput={false} },
dropdownWidthAuto={true} ]}
/> />
</> </>
); );
}} }}
/> />
</CardContent>
); );
}; };

View File

@ -229,6 +229,7 @@ export {
IconTargetArrow, IconTargetArrow,
IconTestPipe, IconTestPipe,
IconTextSize, IconTextSize,
IconTextWrap,
IconTimelineEvent, IconTimelineEvent,
IconTool, IconTool,
IconTrash, IconTrash,