From 52c6320f74257d8a2aaf5b06f502288383d4cfad Mon Sep 17 00:00:00 2001 From: Ashmash100 Date: Mon, 22 Jul 2024 15:47:10 +0530 Subject: [PATCH] Fixed reset rating field to "no value" on star re-click (#6296) ### Description Resolves Issue: [https://github.com/twentyhq/twenty/issues/6224](#6224) ### Additional Consideration I have changed the default start rating value from 1 star to no star since clicking on the selected start was reverting the filed to 1 star which didn't seem like the appropriate behaviour. Let me know if this change is fine --------- Co-authored-by: JosephAshwin23 Co-authored-by: Thomas Trompette --- .../ObjectFilterDropdownRatingInput.tsx | 8 +++++- .../meta-types/hooks/useRatingField.ts | 4 +-- .../record-field/types/FieldMetadata.ts | 2 +- .../ui/field/input/components/RatingInput.tsx | 28 ++++++++++++++----- 4 files changed, 31 insertions(+), 11 deletions(-) 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)} >