Add the support of Empty and Non-Empty filter (twentyhq#5773)

jpratt3000 · Jun 20, 2024 · 9228667 · 9228667
1 parent 9e08445
commit 9228667
Show file tree

Hide file tree

Showing 11 changed files with 478 additions and 56 deletions.
diff --git a/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationFilter.ts b/packages/twenty-front/src/modules/object-record/graphql/types/RecordGqlOperationFilter.ts
@@ -9,6 +9,11 @@ export type UUIDFilter = {
   is?: IsFilter;
 };
 
+export type RelationFilter = {
+  is?: IsFilter;
+  in?: UUIDFilterValue[];
+};
+
 export type BooleanFilter = {
   eq?: boolean;
   is?: IsFilter;

diff --git a/...odules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx b/...odules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx
@@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { ObjectFilterDropdownSearchInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownSearchInput';
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 
 import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
 import { ObjectFilterDropdownDateInput } from './ObjectFilterDropdownDateInput';
@@ -36,13 +37,20 @@ export const MultipleFiltersDropdownContent = ({
   const selectedOperandInDropdown = useRecoilValue(
     selectedOperandInDropdownState,
   );
+  const isEmptyOperand =
+    selectedOperandInDropdown &&
+    [ViewFilterOperand.IsEmpty, ViewFilterOperand.IsNotEmpty].includes(
+      selectedOperandInDropdown,
+    );
 
   return (
     <>
       {!filterDefinitionUsedInDropdown ? (
         <ObjectFilterDropdownFilterSelect />
       ) : isObjectFilterDropdownOperandSelectUnfolded ? (
         <ObjectFilterDropdownOperandSelect />
+      ) : isEmptyOperand ? (
+        <ObjectFilterDropdownOperandButton />
       ) : (
         selectedOperandInDropdown && (
           <>

diff --git a/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/...les/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
@@ -2,6 +2,7 @@ import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
@@ -34,10 +35,27 @@ export const ObjectFilterDropdownOperandSelect = () => {
     filterDefinitionUsedInDropdown?.type,
   );
 
-  const handleOperangeChange = (newOperand: ViewFilterOperand) => {
+  const handleOperandChange = (newOperand: ViewFilterOperand) => {
+    const isEmptyOperand = [
+      ViewFilterOperand.IsEmpty,
+      ViewFilterOperand.IsNotEmpty,
+    ].includes(newOperand);
+
     setSelectedOperandInDropdown(newOperand);
     setIsObjectFilterDropdownOperandSelectUnfolded(false);
 
+    if (isEmptyOperand) {
+      selectFilter?.({
+        id: v4(),
+        fieldMetadataId: filterDefinitionUsedInDropdown?.fieldMetadataId ?? '',
+        displayValue: '',
+        operand: newOperand,
+        value: '',
+        definition: filterDefinitionUsedInDropdown as FilterDefinition,
+      });
+      return;
+    }
+
     if (
       isDefined(filterDefinitionUsedInDropdown) &&
       isDefined(selectedFilter)
@@ -63,7 +81,7 @@ export const ObjectFilterDropdownOperandSelect = () => {
         <MenuItem
           key={`select-filter-operand-${index}`}
           onClick={() => {
-            handleOperangeChange(filterOperand);
+            handleOperandChange(filterOperand);
           }}
           text={getOperandLabel(filterOperand)}
         />

diff --git a/...es/object-record/object-filter-dropdown/utils/__tests__/getOperandsForFilterType.test.tsx b/...es/object-record/object-filter-dropdown/utils/__tests__/getOperandsForFilterType.test.tsx
@@ -4,20 +4,34 @@ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { getOperandsForFilterType } from '../getOperandsForFilterType';
 
 describe('getOperandsForFilterType', () => {
+  const emptyOperands = [
+    ViewFilterOperand.IsEmpty,
+    ViewFilterOperand.IsNotEmpty,
+  ];
+
+  const containsOperands = [
+    ViewFilterOperand.Contains,
+    ViewFilterOperand.DoesNotContain,
+  ];
+
+  const numberOperands = [
+    ViewFilterOperand.GreaterThan,
+    ViewFilterOperand.LessThan,
+  ];
+
+  const relationOperand = [ViewFilterOperand.Is, ViewFilterOperand.IsNot];
+
   const testCases = [
-    ['TEXT', [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain]],
-    ['EMAIL', [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain]],
-    [
-      'FULL_NAME',
-      [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain],
-    ],
-    ['ADDRESS', [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain]],
-    ['LINK', [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain]],
-    ['LINKS', [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain]],
-    ['CURRENCY', [ViewFilterOperand.GreaterThan, ViewFilterOperand.LessThan]],
-    ['NUMBER', [ViewFilterOperand.GreaterThan, ViewFilterOperand.LessThan]],
-    ['DATE_TIME', [ViewFilterOperand.GreaterThan, ViewFilterOperand.LessThan]],
-    ['RELATION', [ViewFilterOperand.Is, ViewFilterOperand.IsNot]],
+    ['TEXT', [...containsOperands, ...emptyOperands]],
+    ['EMAIL', [...containsOperands, ...emptyOperands]],
+    ['FULL_NAME', [...containsOperands, ...emptyOperands]],
+    ['ADDRESS', [...containsOperands, ...emptyOperands]],
+    ['LINK', [...containsOperands, ...emptyOperands]],
+    ['LINKS', [...containsOperands, ...emptyOperands]],
+    ['CURRENCY', [...numberOperands, ...emptyOperands]],
+    ['NUMBER', [...numberOperands, ...emptyOperands]],
+    ['DATE_TIME', [...numberOperands, ...emptyOperands]],
+    ['RELATION', [...relationOperand, ...emptyOperands]],
     [undefined, []],
     [null, []],
     ['UNKNOWN_TYPE', []],

diff --git a/...es/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getOperandLabel.ts b/...es/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getOperandLabel.ts
@@ -18,6 +18,10 @@ export const getOperandLabel = (
       return 'Is not';
     case ViewFilterOperand.IsNotNull:
       return 'Is not null';
+    case ViewFilterOperand.IsEmpty:
+      return 'Is empty';
+    case ViewFilterOperand.IsNotEmpty:
+      return 'Is not empty';
     default:
       return '';
   }
@@ -35,6 +39,10 @@ export const getOperandLabelShort = (
       return ': Not';
     case ViewFilterOperand.IsNotNull:
       return ': NotNull';
+    case ViewFilterOperand.IsNotEmpty:
+      return ': NotEmpty';
+    case ViewFilterOperand.IsEmpty:
+      return ': Empty';
     case ViewFilterOperand.GreaterThan:
       return '\u00A0> ';
     case ViewFilterOperand.LessThan:

diff --git a/...-front/src/modules/object-record/object-filter-dropdown/utils/getOperandsForFilterType.ts b/...-front/src/modules/object-record/object-filter-dropdown/utils/getOperandsForFilterType.ts
@@ -5,24 +5,39 @@ import { FilterType } from '../types/FilterType';
 export const getOperandsForFilterType = (
   filterType: FilterType | null | undefined,
 ): ViewFilterOperand[] => {
+  const emptyOperands = [
+    ViewFilterOperand.IsEmpty,
+    ViewFilterOperand.IsNotEmpty,
+  ];
+
+  const relationOperands = [ViewFilterOperand.Is, ViewFilterOperand.IsNot];
+
   switch (filterType) {
     case 'TEXT':
     case 'EMAIL':
     case 'FULL_NAME':
     case 'ADDRESS':
     case 'PHONE':
     case 'LINK':
-      return [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain];
     case 'LINKS':
-      return [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain];
+      return [
+        ViewFilterOperand.Contains,
+        ViewFilterOperand.DoesNotContain,
+        ...emptyOperands,
+      ];
     case 'CURRENCY':
     case 'NUMBER':
     case 'DATE_TIME':
     case 'DATE':
-      return [ViewFilterOperand.GreaterThan, ViewFilterOperand.LessThan];
+      return [
+        ViewFilterOperand.GreaterThan,
+        ViewFilterOperand.LessThan,
+        ...emptyOperands,
+      ];
     case 'RELATION':
+      return [...relationOperands, ...emptyOperands];
     case 'SELECT':
-      return [ViewFilterOperand.Is, ViewFilterOperand.IsNot];
+      return [...relationOperands];
     default:
       return [];
   }