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

Improve Filter chip empty state (#11704)

Browse Source 
Cases:

<img width="477" alt="image"
src="https://github.com/user-attachments/assets/06da3efc-b878-499f-97de-570317caa9b7"
/>

<img width="477" alt="image"
src="https://github.com/user-attachments/assets/40114c16-2810-489d-a60f-2579e2916691"
/>

<img width="477" alt="image"
src="https://github.com/user-attachments/assets/fa80d7cf-7c2d-4c19-919e-2d4c78a9202b"
/>
This commit is contained in:
Charles Bochet
2025-04-23 16:54:11 +02:00
committed by GitHub
parent a4882089b1
commit a2d2db441f
3 changed files with 60 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/__tests__/isFilterOperandExpectingValue.test.ts Normal file
View File

@ -0,0 +1,30 @@
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { isFilterOperandExpectingValue } from '../isFilterOperandExpectingValue';
describe('isFilterOperandExpectingValue', () => {
const testCases = [
{ operand: ViewFilterOperand.Contains, expectedResult: true },
{ operand: ViewFilterOperand.DoesNotContain, expectedResult: true },
{ operand: ViewFilterOperand.GreaterThan, expectedResult: true },
{ operand: ViewFilterOperand.LessThan, expectedResult: true },
{ operand: ViewFilterOperand.Is, expectedResult: true },
{ operand: ViewFilterOperand.IsNot, expectedResult: true },
{ operand: ViewFilterOperand.IsRelative, expectedResult: true },
{ operand: ViewFilterOperand.IsBefore, expectedResult: true },
{ operand: ViewFilterOperand.IsAfter, expectedResult: true },
{ operand: ViewFilterOperand.IsNotNull, expectedResult: false },
{ operand: ViewFilterOperand.IsEmpty, expectedResult: false },
{ operand: ViewFilterOperand.IsNotEmpty, expectedResult: false },
{ operand: ViewFilterOperand.IsInPast, expectedResult: false },
{ operand: ViewFilterOperand.IsInFuture, expectedResult: false },
{ operand: ViewFilterOperand.IsToday, expectedResult: false },
];
testCases.forEach(({ operand, expectedResult }) => {
it(`should return ${expectedResult} for ViewFilterOperand.${operand}`, () => {
expect(isFilterOperandExpectingValue(operand)).toBe(expectedResult);
});
});
});

24
packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/isFilterOperandExpectingValue.ts Normal file
View File

@ -0,0 +1,24 @@
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
export const isFilterOperandExpectingValue = (operand: ViewFilterOperand) => {
switch (operand) {
case ViewFilterOperand.IsNotNull:
case ViewFilterOperand.IsEmpty:
case ViewFilterOperand.IsNotEmpty:
case ViewFilterOperand.IsInPast:
case ViewFilterOperand.IsInFuture:
case ViewFilterOperand.IsToday:
return false;
case ViewFilterOperand.IsNot:
case ViewFilterOperand.Contains:
case ViewFilterOperand.DoesNotContain:
case ViewFilterOperand.GreaterThan:
case ViewFilterOperand.LessThan:
case ViewFilterOperand.IsBefore:
case ViewFilterOperand.IsAfter:
case ViewFilterOperand.Is:
case ViewFilterOperand.IsRelative:
default:
return true;
}
};

7
packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
View File

@ -2,6 +2,7 @@ import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetada
import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
import { isFilterOperandExpectingValue } from '@/object-record/object-filter-dropdown/utils/isFilterOperandExpectingValue';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { isValidSubFieldName } from '@/settings/data-model/utils/isValidSubFieldName';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
@ -43,7 +44,11 @@ export const EditableFilterChip = ({
? `${recordFilter.label} / ${subFieldLabel}`
: recordFilter.label;
const labelKey = `${fieldNameLabel}${isNonEmptyString(recordFilter.value) ? operandLabelShort : ''}`;
const shouldDisplayOperandLabelShort =
isNonEmptyString(recordFilter.value) ||
!isFilterOperandExpectingValue(recordFilter.operand);
const labelKey = `${fieldNameLabel}${shouldDisplayOperandLabelShort ? operandLabelShort : ''}`;
return (
<SortOrFilterChip