houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Workflows] Fix filtering on relative date (#16087)

Browse Source 
https://github.com/user-attachments/assets/4079d59e-0550-401f-a29b-b235edd8ed48

Closes https://github.com/twentyhq/twenty/issues/16054
This commit is contained in:
Baptiste Devessier
2025-11-26 14:45:05 +01:00
committed by GitHub
parent 996ccd8353
commit dc2c2c413c
16 changed files with 49 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
+6 -2
View File
@@ -49,8 +49,12 @@ export const AdvancedFilterDropdownFilterInput = ({
<AdvancedFilterDropdownTextInput recordFilter={recordFilter} />
))}
{filterType === 'RATING' && <ObjectFilterDropdownRatingInput />}
{filterType === 'DATE_TIME' && <ObjectFilterDropdownDateTimeInput />}
{filterType === 'DATE' && <ObjectFilterDropdownDateInput />}
{filterType === 'DATE_TIME' && (
<ObjectFilterDropdownDateTimeInput instanceId={filterDropdownId} />
)}
{filterType === 'DATE' && (
<ObjectFilterDropdownDateInput instanceId={filterDropdownId} />
)}
{filterType === 'RELATION' && (
<DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
<ObjectFilterDropdownSearchInput />
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
+8 -1
View File
@@ -24,7 +24,13 @@ import {
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { formatDateString } from '~/utils/string/formatDateString';
export const ObjectFilterDropdownDateInput = () => {
type ObjectFilterDropdownDateInputProps = {
instanceId: string;
};
export const ObjectFilterDropdownDateInput = ({
instanceId,
}: ObjectFilterDropdownDateInputProps) => {
const { dateFormat, timeZone } = useContext(UserContext);
const dateLocale = useRecoilValue(dateLocaleState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -109,6 +115,7 @@ export const ObjectFilterDropdownDateInput = () => {
return (
<DatePicker
instanceId={instanceId}
relativeDate={relativeDate}
isRelative={isRelativeOperand}
date={plainDateValue ?? null}
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateTimeInput.tsx
+8 -1
View File
@@ -24,7 +24,13 @@ import {
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
export const ObjectFilterDropdownDateTimeInput = () => {
type ObjectFilterDropdownDateTimeInputProps = {
instanceId: string;
};
export const ObjectFilterDropdownDateTimeInput = ({
instanceId,
}: ObjectFilterDropdownDateTimeInputProps) => {
const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
const dateLocale = useRecoilValue(dateLocaleState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -112,6 +118,7 @@ export const ObjectFilterDropdownDateTimeInput = () => {
return (
<DateTimePicker
instanceId={instanceId}
relativeDate={relativeDate}
isRelative={isRelativeOperand}
date={internalDate}
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput.tsx
+2 -2
View File
@@ -82,7 +82,7 @@ export const ObjectFilterDropdownFilterInput = ({
<>
<ObjectFilterDropdownInnerSelectOperandDropdown />
<DropdownMenuSeparator />
<ObjectFilterDropdownDateInput />
<ObjectFilterDropdownDateInput instanceId={filterDropdownId} />
</>
);
} else if (filterType === 'DATE_TIME') {
@@ -90,7 +90,7 @@ export const ObjectFilterDropdownFilterInput = ({
<>
<ObjectFilterDropdownInnerSelectOperandDropdown />
<DropdownMenuSeparator />
<ObjectFilterDropdownDateTimeInput />
<ObjectFilterDropdownDateTimeInput instanceId={filterDropdownId} />
</>
);
} else {
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
+3 -9
View File
@@ -13,13 +13,9 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { stringifyRelativeDateFilter } from '@/views/view-filter-value/utils/stringifyRelativeDateFilter';
import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
import {
isDefined,
type RelativeDateFilter,
type RelativeDateFilterDirection,
type RelativeDateFilterUnit,
} from 'twenty-shared/utils';
import { isDefined, type RelativeDateFilter } from 'twenty-shared/utils';
export const useApplyObjectFilterDropdownOperand = () => {
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
@@ -108,9 +104,7 @@ export const useApplyObjectFilterDropdownOperand = () => {
recordFilterToUpsert.displayValue = displayValue;
} else if (newOperand === RecordFilterOperand.IS_RELATIVE) {
const defaultRelativeDate: RelativeDateFilter = {
direction: 'THIS' as RelativeDateFilterDirection,
amount: 1,
unit: 'DAY' as RelativeDateFilterUnit,
...DEFAULT_RELATIVE_DATE_FILTER_VALUE,
timezone: userTimezone,
};
packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
+1
View File
@@ -121,6 +121,7 @@ export const RecordCalendarTopBar = () => {
dropdownComponents={
<DropdownContent widthInPixels={280}>
<DateTimePicker
instanceId={recordCalendarId}
date={recordCalendarSelectedDate}
onChange={handleDateChange}
onClose={handleDateChange}
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
+1
View File
@@ -337,6 +337,7 @@ export const FormDateFieldInput = ({
<StyledDateInputAbsoluteContainer>
<OverlayContainer>
<DatePicker
instanceId={instanceId}
date={pickerDate}
onChange={handlePickerChange}
onClose={handlePickerMouseSelect}
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateTimeFieldInput.tsx
+1
View File
@@ -336,6 +336,7 @@ export const FormDateTimeFieldInput = ({
<StyledDateInputAbsoluteContainer>
<OverlayContainer>
<DateTimePicker
instanceId={instanceId}
date={pickerDate ?? new Date()}
onChange={handlePickerChange}
onClose={handlePickerMouseSelect}
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormRelativeDatePicker.tsx
+4
View File
@@ -1,6 +1,7 @@
import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
import { isNonEmptyString, isString } from '@sniptt/guards';
import { useId } from 'react';
import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
import {
@@ -21,6 +22,8 @@ export const FormRelativeDatePicker = ({
onChange,
readonly,
}: FormRelativeDatePickerProps) => {
const instanceId = useId();
const value =
isString(defaultValue) && isNonEmptyString(defaultValue)
? safeParseRelativeDateFilterJSONStringified(defaultValue)
@@ -32,6 +35,7 @@ export const FormRelativeDatePicker = ({
return (
<RelativeDatePickerHeader
instanceId={instanceId}
onChange={handleValueChange}
direction={value?.direction ?? 'THIS'}
unit={value?.unit ?? 'DAY'}
packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+1
View File
@@ -109,6 +109,7 @@ export const DateInput = ({
return (
<div ref={wrapperRef}>
<DatePicker
instanceId={instanceId}
date={internalValue ?? null}
onChange={handleChange}
onClose={handleClose}
packages/twenty-front/src/modules/ui/field/input/components/DateTimeInput.tsx
+1
View File
@@ -109,6 +109,7 @@ export const DateTimeInput = ({
return (
<div ref={wrapperRef}>
<DateTimePicker
instanceId={instanceId}
date={internalValue ?? null}
onChange={handleChange}
onClose={handleClose}
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx
+3
View File
@@ -302,6 +302,7 @@ const StyledDatePickerFallback = styled.div`
`;
type DatePickerProps = {
instanceId: string;
isRelative?: boolean;
hideHeaderInput?: boolean;
date: Nullable<string>;
@@ -333,6 +334,7 @@ const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
);
export const DatePicker = ({
instanceId,
date,
onChange,
onClose,
@@ -476,6 +478,7 @@ export const DatePicker = ({
}) =>
isRelative ? (
<RelativeDatePickerHeader
instanceId={instanceId}
direction={relativeDate?.direction ?? 'PAST'}
amount={relativeDate?.amount}
unit={relativeDate?.unit ?? 'DAY'}
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx
+3
View File
@@ -300,6 +300,7 @@ const StyledDatePickerFallback = styled.div`
`;
type DateTimePickerProps = {
instanceId: string;
isRelative?: boolean;
hideHeaderInput?: boolean;
date: Date | null;
@@ -331,6 +332,7 @@ const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
);
export const DateTimePicker = ({
instanceId,
date,
onChange,
onClose,
@@ -484,6 +486,7 @@ export const DateTimePicker = ({
}) =>
isRelative ? (
<RelativeDatePickerHeader
instanceId={instanceId}
direction={relativeDate?.direction ?? 'PAST'}
amount={relativeDate?.amount}
unit={relativeDate?.unit ?? 'DAY'}
packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
+5 -3
View File
@@ -21,6 +21,7 @@ const StyledContainer = styled.div<{ noPadding: boolean }>`
`;
type RelativeDatePickerHeaderProps = {
instanceId: string;
direction: RelativeDateFilterDirection;
amount?: Nullable<number>;
unit: RelativeDateFilterUnit;
@@ -31,6 +32,7 @@ type RelativeDatePickerHeaderProps = {
};
export const RelativeDatePickerHeader = ({
instanceId,
direction,
unit,
amount,
@@ -53,7 +55,7 @@ export const RelativeDatePickerHeader = ({
return (
<StyledContainer noPadding={isFormField ?? false}>
<Select
dropdownId="direction-select"
dropdownId={`direction-select-${instanceId}`}
value={direction}
onChange={(newDirection) => {
if (amount === undefined && newDirection !== 'THIS') {
@@ -71,7 +73,7 @@ export const RelativeDatePickerHeader = ({
disabled={readonly}
/>
<SettingsTextInput
instanceId="relative-date-picker-amount"
instanceId={`relative-date-picker-amount-${instanceId}`}
width={50}
value={textInputValue}
onChange={(text) => {
@@ -92,7 +94,7 @@ export const RelativeDatePickerHeader = ({
disabled={direction === 'THIS' || readonly}
/>
<Select
dropdownId="unit-select"
dropdownId={`unit-select-${instanceId}`}
value={unit}
onChange={(newUnit) => {
if (direction !== 'THIS' && amount === undefined) {
packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
+1
View File
@@ -17,6 +17,7 @@ const meta: Meta<typeof DateTimePicker> = {
const [, updateArgs] = useArgs();
return (
<DateTimePicker
instanceId="story-date-time-picker"
date={isDefined(date) ? new Date(date) : new Date()}
onChange={(newDate) => updateArgs({ date: newDate })}
/>
packages/twenty-shared/src/constants/DefaultRelativeDateFilterValue.ts
+1 -1
View File
@@ -3,5 +3,5 @@ import { type RelativeDateFilter } from '@/utils';
export const DEFAULT_RELATIVE_DATE_FILTER_VALUE: RelativeDateFilter = {
direction: 'THIS',
unit: 'DAY',
amount: undefined,
amount: 1,
};