twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 11:03:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix boolean field in table view (#5728)

Browse Source 
Boolean field was not working in display (unfocused) mode.

Before fix
<img width="269" alt="Capture d’écran 2024-06-04 à 11 50 55"
src="https://github.com/twentyhq/twenty/assets/51697796/9140f71c-41e4-44b4-9514-933edab33dd6">

https://github.com/twentyhq/twenty/assets/51697796/831c34a7-b91c-4df9-81d8-ced01cc7b9b6

After fix
<img width="284" alt="Capture d’écran 2024-06-04 à 11 51 01"
src="https://github.com/twentyhq/twenty/assets/51697796/7e4a089d-0c55-4624-a5d3-44c00681c6ca">

https://github.com/twentyhq/twenty/assets/51697796/b5103f39-64c1-4ace-ab32-353aba364471
This commit is contained in:
Marie 2024-06-04 13:02:38 +02:00 committed by GitHub
parent 719cce1ea2
commit a4e5e486f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/record-field/components/FieldDisplay.tsx
View File

@ -1,6 +1,8 @@
import { useContext } from 'react';
import { BooleanFieldDisplay } from '@/object-record/record-field/meta-types/display/components/BooleanFieldDisplay';
import { LinksFieldDisplay } from '@/object-record/record-field/meta-types/display/components/LinksFieldDisplay';
import { isFieldBoolean } from '@/object-record/record-field/types/guards/isFieldBoolean';
import { isFieldDisplayedAsPhone } from '@/object-record/record-field/types/guards/isFieldDisplayedAsPhone';
import { isFieldLinks } from '@/object-record/record-field/types/guards/isFieldLinks';
@ -81,5 +83,7 @@ export const FieldDisplay = () => {
<AddressFieldDisplay />
) : isFieldRawJson(fieldDefinition) ? (
<JsonFieldDisplay />
) : isFieldBoolean(fieldDefinition) ? (
<BooleanFieldDisplay />
) : null;
};

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/BooleanFieldDisplay.tsx Normal file
View File

@ -0,0 +1,8 @@
import { useBooleanField } from '@/object-record/record-field/meta-types/hooks/useBooleanField';
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
export const BooleanFieldDisplay = () => {
const { fieldValue } = useBooleanField();
return <BooleanDisplay value={fieldValue} />;
};

36
packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx Normal file
View File

@ -0,0 +1,36 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCheck, IconX } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined';
const StyledBooleanFieldValue = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
`;
type BooleanDisplayProps = {
value: boolean | null;
};
export const BooleanDisplay = ({ value }: BooleanDisplayProps) => {
const theme = useTheme();
return (
<>
{isDefined(value) ? (
<>
{value ? (
<IconCheck size={theme.icon.size.sm} />
) : (
<IconX size={theme.icon.size.sm} />
)}
<StyledBooleanFieldValue>
{value ? 'True' : 'False'}
</StyledBooleanFieldValue>
</>
) : (
<></>
)}
</>
);
};

19
packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCheck, IconX } from 'twenty-ui';
import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
const StyledEditableBooleanFieldContainer = styled.div`
align-items: center;
@ -12,10 +12,6 @@ const StyledEditableBooleanFieldContainer = styled.div`
width: 100%;
`;
const StyledEditableBooleanFieldValue = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)};
`;
type BooleanInputProps = {
value: boolean;
onToggle?: (newValue: boolean) => void;
@ -40,21 +36,12 @@ export const BooleanInput = ({
onToggle?.(!internalValue);
};
const theme = useTheme();
return (
<StyledEditableBooleanFieldContainer
onClick={readonly ? undefined : handleClick}
data-testid={testId}
>
{internalValue ? (
<IconCheck size={theme.icon.size.sm} />
) : (
<IconX size={theme.icon.size.sm} />
)}
<StyledEditableBooleanFieldValue>
{internalValue ? 'True' : 'False'}
</StyledEditableBooleanFieldValue>
<BooleanDisplay value={internalValue} />
</StyledEditableBooleanFieldContainer>
);
};