From c7ba6d4e9f647970ee2b4c8ba29e8da573f62911 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Mon, 5 Aug 2024 20:49:15 +0530 Subject: [PATCH] Existing filter value isn't passed to the component to edit it - Issue #6278 (#6449) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hi @FelixMalfait, Regarding Issue #6278 I’ve resolved the issue with fields involving numbers and text. However, I’ve encountered a problem with how dates are parsed, selected, and displayed. When a date is selected for the first time, it is correctly parsed and adjusted to the local timezone (e.g., 05:30:00 AM for my timezone). However, when trying to change the date, the day prior to the selected date is shown instead of the intended date. Please refer to the attached video for a demonstration of this bug. I suspect this issue is related to how the date is parsed and selected in relation to timezones, and I am currently investigating it further. Could you please review the changes made so far? Thanks! https://github.com/user-attachments/assets/4f0e5694-530b-489c-807e-3b7d52da0742 --------- Co-authored-by: Weiko --- .../ObjectFilterDropdownDateInput.tsx | 11 +++++--- .../ObjectFilterDropdownNumberInput.tsx | 25 ++++++++++++++++--- .../ObjectFilterDropdownSearchInput.tsx | 14 ++++++++++- .../ObjectFilterDropdownTextSearchInput.tsx | 14 ++++++++++- 4 files changed, 56 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx index 741b448ab..0a463a229 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx @@ -4,11 +4,10 @@ import { v4 } from 'uuid'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker'; import { useState } from 'react'; +import { FieldMetadataType } from '~/generated-metadata/graphql'; import { isDefined } from '~/utils/isDefined'; export const ObjectFilterDropdownDateInput = () => { - const [internalDate, setInternalDate] = useState(new Date()); - const { filterDefinitionUsedInDropdownState, selectedOperandInDropdownState, @@ -25,11 +24,14 @@ export const ObjectFilterDropdownDateInput = () => { ); const selectedFilter = useRecoilValue(selectedFilterState); - + const [internalDate, setInternalDate] = useState( + selectedFilter?.value ? new Date(selectedFilter.value) : new Date(), + ); const handleChange = (date: Date | null) => { setInternalDate(date); if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return; + selectFilter?.({ id: selectedFilter?.id ? selectedFilter.id : v4(), fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId, @@ -47,6 +49,9 @@ export const ObjectFilterDropdownDateInput = () => { date={internalDate} onChange={handleChange} onMouseSelect={handleChange} + isDateTimeInput={ + filterDefinitionUsedInDropdown?.type === FieldMetadataType.DateTime + } /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx index b0ad3cc85..98f27f109 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent } from 'react'; +import { ChangeEvent, useCallback, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { v4 } from 'uuid'; @@ -12,6 +12,7 @@ export const ObjectFilterDropdownNumberInput = () => { selectedFilterState, selectFilter, } = useFilterDropdown(); + const [hasFocused, setHasFocused] = useState(false); const filterDefinitionUsedInDropdown = useRecoilValue( filterDefinitionUsedInDropdownState, @@ -22,20 +23,38 @@ export const ObjectFilterDropdownNumberInput = () => { const selectedFilter = useRecoilValue(selectedFilterState); + const [inputValue, setInputValue] = useState( + () => selectedFilter?.value || '', + ); + + const handleInputRef = useCallback( + (node: HTMLInputElement | null) => { + if (Boolean(node) && !hasFocused) { + node?.focus(); + node?.select(); + setHasFocused(true); + } + }, + [hasFocused], + ); return ( filterDefinitionUsedInDropdown && selectedOperandInDropdown && ( ) => { + const newValue = event.target.value; + setInputValue(newValue); selectFilter?.({ id: selectedFilter?.id ? selectedFilter.id : v4(), fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId, - value: event.target.value, + value: newValue, operand: selectedOperandInDropdown, - displayValue: event.target.value, + displayValue: newValue, definition: filterDefinitionUsedInDropdown, }); }} diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx index d84d2e4dd..757dca89b 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent } from 'react'; +import { ChangeEvent, useCallback, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; @@ -11,6 +11,7 @@ export const ObjectFilterDropdownSearchInput = () => { objectFilterDropdownSearchInputState, setObjectFilterDropdownSearchInput, } = useFilterDropdown(); + const [hasFocused, setHasFocused] = useState(false); const filterDefinitionUsedInDropdown = useRecoilValue( filterDefinitionUsedInDropdownState, @@ -22,10 +23,21 @@ export const ObjectFilterDropdownSearchInput = () => { objectFilterDropdownSearchInputState, ); + const handleInputRef = useCallback( + (node: HTMLInputElement | null) => { + if (Boolean(node) && !hasFocused) { + node?.focus(); + node?.select(); + setHasFocused(true); + } + }, + [hasFocused], + ); return ( filterDefinitionUsedInDropdown && selectedOperandInDropdown && ( { } = useFilterDropdown(); const [filterId] = useState(v4()); + const [hasFocused, setHasFocused] = useState(false); const filterDefinitionUsedInDropdown = useRecoilValue( filterDefinitionUsedInDropdownState, @@ -28,10 +29,21 @@ export const ObjectFilterDropdownTextSearchInput = () => { ); const selectedFilter = useRecoilValue(selectedFilterState); + const handleInputRef = useCallback( + (node: HTMLInputElement | null) => { + if (Boolean(node) && !hasFocused) { + node?.focus(); + node?.select(); + setHasFocused(true); + } + }, + [hasFocused], + ); return ( filterDefinitionUsedInDropdown && selectedOperandInDropdown && (