Date filter improvements

[Bonapara]

Current behavior

Users can only filter dates with the Greater than and Less than filters.

Desired behavior

We want to rename Greater than to Is After
We want to rename Less than to Is Before

We want to introduce some new filters:

• Is
• Is Empty
• Is Not Empty
• Is Relative
• Is in the past
• Is in the future
• Is today

Is Relative

1. Values: Past, Next, This
2. Number
3. Day, Week, Month, Year

We should reflect the selected values in the calendar. For instance, if someone chooses "This Week," it should be displayed in the calendar as selected. The calendar is only here for visualisation, it's not possible to click into the calendar to generate "last 2 weeks" for examples.

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=2709-52753&t=jqRWyAJosBHzOW0I-11

[greptile-apps]

Implementation Steps

1. Rename Existing Filters

   • Update isMatchingDateFilter.ts to rename Greater than to Is After and Less than to Is Before.

   // isMatchingDateFilter.ts
   const filterMap = {
     'Is After': (date, value) => date > value,
     'Is Before': (date, value) => date < value,
     // other filters
   };

2. Add New Filters

   • Extend isMatchingDateFilter.ts to include new filters: Is, Is Empty, Is Not Empty, Is Relative to today.

   // isMatchingDateFilter.ts
   const filterMap = {
     'Is': (date, value) => date === value,
     'Is Empty': (date) => !date,
     'Is Not Empty': (date) => !!date,
     'Is Relative to today': (date, value) => {
       // Implement relative date logic
     },
     // existing filters
   };

3. Update GraphQL Input Types

   • Modify date-time-filter.input-type.ts to include new filter types.

   // date-time-filter.input-type.ts
   export const DateTimeFilterInputType = new GraphQLInputObjectType({
     name: 'DateTimeFilterInput',
     fields: {
       is: { type: GraphQLString },
       isEmpty: { type: GraphQLBoolean },
       isNotEmpty: { type: GraphQLBoolean },
       isRelativeToToday: { type: GraphQLString },
       // existing fields
     }
   });

4. Update Filter Operand Types

   • Add new operand types in ViewFilterOperand.ts.

   // ViewFilterOperand.ts
   export enum ViewFilterOperand {
     Is = 'Is',
     IsEmpty = 'IsEmpty',
     IsNotEmpty = 'IsNotEmpty',
     IsRelativeToToday = 'IsRelativeToToday',
     // existing operands
   }

5. Update Tests

   • Add test cases in isMatchingDateFilter.spec.ts for new filters.

   // isMatchingDateFilter.spec.ts
   describe('isMatchingDateFilter', () => {
     it('should match Is filter', () => {
       // test implementation
     });
     it('should match Is Empty filter', () => {
       // test implementation
     });
     it('should match Is Not Empty filter', () => {
       // test implementation
     });
     it('should match Is Relative to today filter', () => {
       // test implementation
     });
     // existing tests
   });

References

[Bonapara]

Related to #6299 that should be handled first

[FelixMalfait]

Relative for range only or can I set a relative date for a simple filter? (e.g. before Today)

[Bonapara]

You mean add

• Before
• After

within the following list?

• Is
• Is Empty
• Is Not Empty
• Is Relative

Yes we can!

[FelixMalfait]

@Bonapara Mmm kind of but "before last 2 weeks" wouldn't really make sense?
I think the most frequent use-case for relative date filters is "in the future", "in the past" (request I've had during demo calls and from K). User could hack this by setting a very large number in the number of days/week, but it doesn't feel very elegant, any idea how to do it? Maybe there's no good solution

[Bonapara]

edited

We should add "is today," "is in the past," and "is in the future" because a simple "Before" and "After" are not relative and will change as the date changes.

[ad-elias]

Hello, I'd like to work on this after #5398, could you please assign this issue to me?

[Bonapara]

@ad-elias are you still on it? :)

[FelixMalfait]

@Bonapara yes he is!

[FelixMalfait]

This has been shipped :)) - really great work by @ad-elias!