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 741b448ab07..0a463a229d5 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 b0ad3cc8538..98f27f10932 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 d84d2e4dde8..757dca89bd3 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 && (