diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx index 73d0b4bbb..2ed0cd0f3 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRatingInput.tsx @@ -7,7 +7,9 @@ import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetada import { RatingInput } from '@/ui/field/input/components/RatingInput'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -const convertFieldRatingValueToNumber = (rating: FieldRatingValue): string => { +const convertFieldRatingValueToNumber = ( + rating: Exclude, +): string => { return rating.split('_')[1]; }; @@ -51,6 +53,10 @@ export const ObjectFilterDropdownRatingInput = () => { { + if (!newValue) { + return; + } + selectFilter?.({ id: selectedFilter?.id ? selectedFilter.id : v4(), fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId, diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingField.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingField.ts index b28133df4..0c7211b32 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingField.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRatingField.ts @@ -16,14 +16,14 @@ export const useRatingField = () => { const fieldName = fieldDefinition.metadata.fieldName; - const [fieldValue, setFieldValue] = useRecoilState( + const [fieldValue, setFieldValue] = useRecoilState( recordStoreFamilySelector({ recordId: entityId, fieldName: fieldName, }), ); - const rating = fieldValue ?? 'RATING_1'; + const rating = fieldValue ?? null; return { fieldDefinition, diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts index 3208e5deb..830a757c3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts @@ -185,7 +185,7 @@ export type FieldAddressValue = { addressLat: number | null; addressLng: number | null; }; -export type FieldRatingValue = (typeof RATING_VALUES)[number]; +export type FieldRatingValue = (typeof RATING_VALUES)[number] | null; export type FieldSelectValue = string | null; export type FieldMultiSelectValue = string[] | null; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx index c5dd404e5..b9ee80a28 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx @@ -1,7 +1,8 @@ -import { useContext, useState } from 'react'; import { styled } from '@linaria/react'; +import { useContext, useState } from 'react'; import { IconTwentyStarFilled, THEME_COMMON, ThemeContext } from 'twenty-ui'; +import { useClearField } from '@/object-record/record-field/hooks/useClearField'; import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues'; import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata'; @@ -31,16 +32,29 @@ export const RatingInput = ({ readonly, }: RatingInputProps) => { const { theme } = useContext(ThemeContext); + const clearField = useClearField(); const activeColor = theme.font.color.secondary; const inactiveColor = theme.background.quaternary; - const [hoveredValue, setHoveredValue] = useState( - null, - ); + const [hoveredValue, setHoveredValue] = useState(null); + const currentValue = hoveredValue ?? value; - const selectedIndex = RATING_VALUES.indexOf(currentValue); + const selectedIndex = + currentValue !== null ? RATING_VALUES.indexOf(currentValue) : -1; + + const canClick = !readonly; + + const handleClick = (newValue: FieldRatingValue) => { + if (!canClick) return; + if (newValue === value) { + setHoveredValue(null); + clearField(); + } else { + onChange?.(newValue); + } + }; return ( {RATING_VALUES.map((value, index) => { @@ -58,7 +72,7 @@ export const RatingInput = ({ onChange?.(value)} + onClick={() => handleClick(value)} onMouseEnter={readonly ? undefined : () => setHoveredValue(value)} onMouseLeave={readonly ? undefined : () => setHoveredValue(null)} >