Enrich filters with all types (#2653)

This commit is contained in:
Charles Bochet
2023-11-22 17:23:10 +01:00
committed by GitHub
parent 0fd823af21
commit 8f12aea64a
20 changed files with 315 additions and 111 deletions

View File

@ -20,7 +20,7 @@ export const KeyboardShortcutMenu = () => {
isKeyboardShortcutMenuOpenedState,
);
useScopedHotkeys(
'shift+?,meta+?,esc',
'shift+?,meta+?',
() => {
toggleKeyboardShortcutMenu();
},

View File

@ -12,14 +12,29 @@ export const formatFieldMetadataItemsAsFilterDefinitions = ({
if (
![
FieldMetadataType.DateTime,
FieldMetadataType.Number,
FieldMetadataType.Currency,
FieldMetadataType.Text,
].includes(field.type) ||
field.name === 'probability'
FieldMetadataType.Email,
FieldMetadataType.Number,
FieldMetadataType.Link,
FieldMetadataType.FullName,
FieldMetadataType.Relation,
FieldMetadataType.Currency,
].includes(field.type)
) {
return acc;
}
// Todo: remove once Rating fieldtype is implemented
if (field.name === 'probability') {
return acc;
}
if (field.type === FieldMetadataType.Relation) {
if (field.fromRelationMetadata) {
return acc;
}
}
return [...acc, formatFieldMetadataItemAsFilterDefinition({ field })];
}, [] as FilterDefinition[]);
@ -34,9 +49,19 @@ const formatFieldMetadataItemAsFilterDefinition = ({
type:
field.type === FieldMetadataType.DateTime
? 'DATE_TIME'
: field.type === FieldMetadataType.Link
? 'LINK'
: field.type === FieldMetadataType.FullName
? 'FULL_NAME'
: field.type === FieldMetadataType.Number
? 'NUMBER'
: field.type === FieldMetadataType.Currency
? 'CURRENCY'
: field.type === FieldMetadataType.Email
? 'TEXT'
: field.type === FieldMetadataType.Phone
? 'TEXT'
: field.type === FieldMetadataType.Relation
? 'RELATION'
: 'TEXT',
});

View File

@ -4,16 +4,16 @@ import { useQuery } from '@apollo/client';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { IconUserCircle } from '@/ui/display/icon';
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { useRelationField } from '@/ui/object/field/meta-types/hooks/useRelationField';
import { FieldDefinition } from '@/ui/object/field/types/FieldDefinition';
import { FieldRelationMetadata } from '@/ui/object/field/types/FieldMetadata';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
export type RelationPickerProps = {
recordId: string;
recordId?: string;
onSubmit: (newUser: EntityForSelect | null) => void;
onCancel?: () => void;
width?: number;
@ -43,9 +43,9 @@ export const RelationPicker = ({
const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
const { identifiersMapper, searchQuery } = useRelationField();
const { identifiersMapper, searchQuery } = useRelationPicker();
const workspaceMembers = useFilteredSearchEntityQuery({
const records = useFilteredSearchEntityQuery({
queryHook: useFindManyQuery,
filters: [
{
@ -74,11 +74,11 @@ export const RelationPicker = ({
<SingleEntitySelect
EmptyIcon={IconUserCircle}
emptyLabel="No Owner"
entitiesToSelect={workspaceMembers.entitiesToSelect}
loading={workspaceMembers.loading}
entitiesToSelect={records.entitiesToSelect}
loading={records.loading}
onCancel={onCancel}
onEntitySelected={handleEntitySelected}
selectedEntity={workspaceMembers.selectedEntities[0]}
selectedEntity={records.selectedEntities[0]}
width={width}
/>
);

View File

@ -1,11 +1,12 @@
import { EntityChip } from '@/ui/display/chip/components/EntityChip';
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
import { useRelationField } from '../../hooks/useRelationField';
export const RelationFieldDisplay = () => {
const { fieldValue, fieldDefinition } = useRelationField();
const { identifiersMapper } = useRelationField();
const { identifiersMapper } = useRelationPicker();
if (!fieldValue || !fieldDefinition || !identifiersMapper) {
return <></>;

View File

@ -1,8 +1,6 @@
import { useContext } from 'react';
import { useRecoilState } from 'recoil';
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
import { FieldContext } from '../../contexts/FieldContext';
import { useFieldInitialValue } from '../../hooks/useFieldInitialValue';
import { entityFieldsFamilySelector } from '../../states/selectors/entityFieldsFamilySelector';
@ -32,15 +30,11 @@ export const useRelationField = () => {
const initialValue = fieldInitialValue?.isEmpty ? null : fieldValue;
const { identifiersMapper, searchQuery } = useRelationPicker();
return {
fieldDefinition,
fieldValue,
initialValue,
initialSearchValue,
setFieldValue,
searchQuery,
identifiersMapper,
};
};

View File

@ -1,7 +1,7 @@
import { useEffect } from 'react';
import styled from '@emotion/styled';
import { RelationPicker } from '@/ui/input/components/internal/relation-picker/RelationPicker';
import { RelationPicker } from '@/ui/input/components/internal/relation-picker/components/RelationPicker';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { usePersistField } from '../../../hooks/usePersistField';

View File

@ -1,5 +1,6 @@
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
@ -14,9 +15,12 @@ type MultipleFiltersDropdownButtonProps = {
export const MultipleFiltersDropdownButton = ({
hotkeyScope,
}: MultipleFiltersDropdownButtonProps) => {
const { resetFilter } = useFilter();
return (
<DropdownScope dropdownScopeId={ObjectFilterDropdownId}>
<Dropdown
onClose={resetFilter}
clickableComponent={<MultipleFiltersButton />}
dropdownComponents={<MultipleFiltersDropdownContent />}
dropdownHotkeyScope={hotkeyScope}

View File

@ -30,19 +30,19 @@ export const MultipleFiltersDropdownContent = () => {
<>
<ObjectFilterDropdownOperandButton />
<DropdownMenuSeparator />
{filterDefinitionUsedInDropdown.type === 'TEXT' && (
<ObjectFilterDropdownTextSearchInput />
)}
{['TEXT', 'EMAIL', 'PHONE', 'FULL_NAME', 'LINK'].includes(
filterDefinitionUsedInDropdown.type,
) && <ObjectFilterDropdownTextSearchInput />}
{['NUMBER', 'CURRENCY'].includes(
filterDefinitionUsedInDropdown.type,
) && <ObjectFilterDropdownNumberSearchInput />}
{filterDefinitionUsedInDropdown.type === 'DATE_TIME' && (
<ObjectFilterDropdownDateSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'ENTITY' && (
{filterDefinitionUsedInDropdown.type === 'RELATION' && (
<ObjectFilterDropdownEntitySearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'ENTITY' && (
{filterDefinitionUsedInDropdown.type === 'RELATION' && (
<ObjectFilterDropdownEntitySelect />
)}
</>

View File

@ -16,7 +16,7 @@ export const ObjectFilterDropdownButton = ({
const hasOnlyOneEntityFilter =
availableFilterDefinitions.length === 1 &&
availableFilterDefinitions[0].type === 'ENTITY';
availableFilterDefinitions[0].type === 'RELATION';
if (!availableFilterDefinitions.length) {
return <></>;

View File

@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useFilter } from '../hooks/useFilter';
@ -21,9 +22,11 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
selectFilter,
} = useFilter();
const { closeDropdown } = useDropdown();
const [isAllEntitySelected, setIsAllEntitySelected] = useState(false);
const handleUserSelected = (
const handleRecordSelected = (
selectedEntity: EntityForSelect | null | undefined,
) => {
if (
@ -39,6 +42,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
}
setObjectFilterDropdownSelectedEntityId(selectedEntity.id);
closeDropdown();
selectFilter?.({
displayValue: selectedEntity.name,
@ -69,6 +73,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
setIsAllEntitySelected(true);
setObjectFilterDropdownSelectedEntityId(null);
closeDropdown();
selectFilter?.({
displayValue: filterDefinitionUsedInDropdown.selectAllLabel,
@ -100,7 +105,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({
entitiesToSelect={entitiesForSelect.entitiesToSelect}
selectedEntity={entitiesForSelect.selectedEntities[0]}
loading={entitiesForSelect.loading}
onEntitySelected={handleUserSelected}
onEntitySelected={handleRecordSelected}
SelectAllIcon={filterDefinitionUsedInDropdown?.SelectAllIcon}
selectAllLabel={filterDefinitionUsedInDropdown?.selectAllLabel}
isAllEntitySelected={isAllEntitySelected}

View File

@ -1,21 +1,52 @@
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useQuery } from '@apollo/client';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
import { ObjectFilterDropdownEntitySearchSelect } from '@/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect';
import { useFilter } from '../hooks/useFilter';
export const ObjectFilterDropdownEntitySelect = () => {
const { filterDefinitionUsedInDropdown } = useFilter();
const {
filterDefinitionUsedInDropdown,
objectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
} = useFilter();
if (filterDefinitionUsedInDropdown?.type !== 'ENTITY') {
const { findManyQuery } = useObjectMetadataItem({
objectNameSingular: 'company',
});
const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
const { identifiersMapper, searchQuery } = useRelationPicker();
const filteredSearchEntityResults = useFilteredSearchEntityQuery({
queryHook: useFindManyQuery,
filters: [
{
fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
filter: objectFilterDropdownSearchInput,
},
],
orderByField: 'createdAt',
selectedIds: objectFilterDropdownSelectedEntityId
? [objectFilterDropdownSelectedEntityId]
: [],
mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
objectNamePlural: 'companies',
});
if (filterDefinitionUsedInDropdown?.type !== 'RELATION') {
return null;
}
return (
<>
<DropdownMenuSeparator />
<RecoilScope>
{filterDefinitionUsedInDropdown.entitySelectComponent}
</RecoilScope>
<ObjectFilterDropdownEntitySearchSelect
entitiesForSelect={filteredSearchEntityResults}
/>
</>
);
};

View File

@ -21,27 +21,29 @@ export const ObjectFilterDropdownFilterSelect = () => {
return (
<DropdownMenuItemsContainer>
{availableFilterDefinitions.map((availableFilterDefinition, index) => (
<MenuItem
key={`select-filter-${index}`}
testId={`select-filter-${index}`}
onClick={() => {
setFilterDefinitionUsedInDropdown(availableFilterDefinition);
{[...availableFilterDefinitions]
.sort((a, b) => a.label.localeCompare(b.label))
.map((availableFilterDefinition, index) => (
<MenuItem
key={`select-filter-${index}`}
testId={`select-filter-${index}`}
onClick={() => {
setFilterDefinitionUsedInDropdown(availableFilterDefinition);
if (availableFilterDefinition.type === 'ENTITY') {
setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
}
if (availableFilterDefinition.type === 'RELATION') {
setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
}
setSelectedOperandInDropdown(
getOperandsForFilterType(availableFilterDefinition.type)?.[0],
);
setSelectedOperandInDropdown(
getOperandsForFilterType(availableFilterDefinition.type)?.[0],
);
setObjectFilterDropdownSearchInput('');
}}
LeftIcon={icons[availableFilterDefinition.iconName]}
text={availableFilterDefinition.label}
/>
))}
setObjectFilterDropdownSearchInput('');
}}
LeftIcon={icons[availableFilterDefinition.iconName]}
text={availableFilterDefinition.label}
/>
))}
</DropdownMenuItemsContainer>
);
};

View File

@ -25,6 +25,7 @@ export const SingleEntityObjectFilterDropdownButton = ({
selectedFilter,
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
resetFilter,
} = useFilter();
const availableFilter = availableFilterDefinitions[0];

View File

@ -48,6 +48,18 @@ export const useFilter = (props?: UseFilterProps) => {
[setSelectedFilter, onFilterSelect],
);
const resetFilter = useCallback(() => {
setObjectFilterDropdownSearchInput('');
setObjectFilterDropdownSelectedEntityId(null);
setSelectedFilter(undefined);
setSelectedOperandInDropdown(null);
}, [
setObjectFilterDropdownSearchInput,
setObjectFilterDropdownSelectedEntityId,
setSelectedFilter,
setSelectedOperandInDropdown,
]);
return {
scopeId,
availableFilterDefinitions,
@ -67,5 +79,6 @@ export const useFilter = (props?: UseFilterProps) => {
selectedOperandInDropdown,
setSelectedOperandInDropdown,
selectFilter,
resetFilter,
};
};

View File

@ -1,6 +1,10 @@
export type FilterType =
| 'TEXT'
| 'PHONE'
| 'EMAIL'
| 'DATE_TIME'
| 'ENTITY'
| 'NUMBER'
| 'CURRENCY';
| 'CURRENCY'
| 'FULL_NAME'
| 'LINK'
| 'RELATION';

View File

@ -7,12 +7,15 @@ export const getOperandsForFilterType = (
): ViewFilterOperand[] => {
switch (filterType) {
case 'TEXT':
case 'EMAIL':
case 'FULL_NAME':
case 'LINK':
return [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain];
case 'CURRENCY':
case 'NUMBER':
case 'DATE_TIME':
return [ViewFilterOperand.GreaterThan, ViewFilterOperand.LessThan];
case 'ENTITY':
case 'RELATION':
return [ViewFilterOperand.Is, ViewFilterOperand.IsNot];
default:
return [];

View File

@ -13,7 +13,7 @@ export const turnFiltersIntoWhereClauseV2 = (
filters: FilterToTurnIntoWhereClause[],
fields: Pick<Field, 'id' | 'name'>[],
) => {
const whereClause: Record<string, any> = {};
const whereClause: any[] = [];
filters.forEach((filter) => {
const correspondingField = fields.find(
@ -26,53 +26,25 @@ export const turnFiltersIntoWhereClauseV2 = (
}
switch (filter.definition.type) {
case 'EMAIL':
case 'PHONE':
case 'TEXT':
switch (filter.operand) {
case ViewFilterOperand.Contains:
whereClause[correspondingField.name] = {
eq: filter.value,
};
whereClause.push({
[correspondingField.name]: {
ilike: `%${filter.value}%`,
},
});
return;
case ViewFilterOperand.DoesNotContain:
whereClause[correspondingField.name] = {
whereClause.push({
not: {
eq: filter.value,
[correspondingField.name]: {
ilike: `%${filter.value}%`,
},
},
};
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'NUMBER':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:
whereClause[correspondingField.name] = {
gte: parseFloat(filter.value),
};
return;
case ViewFilterOperand.LessThan:
whereClause[correspondingField.name] = {
lte: parseFloat(filter.value),
};
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'CURRENCY':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:
whereClause[correspondingField.name] = {
amountMicros: { gte: parseFloat(filter.value) * 1000000 },
};
return;
case ViewFilterOperand.LessThan:
whereClause[correspondingField.name] = {
amountMicros: { lte: parseFloat(filter.value) * 1000000 },
};
});
return;
default:
throw new Error(
@ -82,14 +54,159 @@ export const turnFiltersIntoWhereClauseV2 = (
case 'DATE_TIME':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:
whereClause[correspondingField.name] = {
gte: filter.value,
};
whereClause.push({
[correspondingField.name]: {
gte: filter.value,
},
});
return;
case ViewFilterOperand.LessThan:
whereClause[correspondingField.name] = {
lte: filter.value,
};
whereClause.push({
[correspondingField.name]: {
lte: filter.value,
},
});
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'NUMBER':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:
whereClause.push({
[correspondingField.name]: {
gte: parseFloat(filter.value),
},
});
return;
case ViewFilterOperand.LessThan:
whereClause.push({
[correspondingField.name]: {
lte: parseFloat(filter.value),
},
});
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'RELATION':
switch (filter.operand) {
case ViewFilterOperand.Is:
whereClause.push({
[correspondingField.name + 'Id']: {
eq: filter.value,
},
});
return;
case ViewFilterOperand.IsNot:
whereClause.push({
[correspondingField.name + 'Id']: {
neq: filter.value,
},
});
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'CURRENCY':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:
whereClause.push({
[correspondingField.name]: {
amountMicros: { gte: parseFloat(filter.value) * 1000000 },
},
});
return;
case ViewFilterOperand.LessThan:
whereClause.push({
[correspondingField.name]: {
amountMicros: { lte: parseFloat(filter.value) * 1000000 },
},
});
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'LINK':
switch (filter.operand) {
case ViewFilterOperand.Contains:
whereClause.push({
[correspondingField.name]: {
url: {
ilike: `%${filter.value}%`,
},
},
});
return;
case ViewFilterOperand.DoesNotContain:
whereClause.push({
not: {
[correspondingField.name]: {
url: {
ilike: `%${filter.value}%`,
},
},
},
});
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'FULL_NAME':
switch (filter.operand) {
case ViewFilterOperand.Contains:
whereClause.push({
or: [
{
[correspondingField.name]: {
firstName: {
ilike: `%${filter.value}%`,
},
},
},
{
[correspondingField.name]: {
firstName: {
ilike: `%${filter.value}%`,
},
},
},
],
});
return;
case ViewFilterOperand.DoesNotContain:
whereClause.push({
and: [
{
not: {
[correspondingField.name]: {
firstName: {
ilike: `%${filter.value}%`,
},
},
},
},
{
not: {
[correspondingField.name]: {
lastName: {
ilike: `%${filter.value}%`,
},
},
},
},
],
});
return;
default:
throw new Error(
@ -100,5 +217,6 @@ export const turnFiltersIntoWhereClauseV2 = (
throw new Error('Unknown filter type');
}
});
return whereClause;
return { and: whereClause };
};

View File

@ -166,7 +166,7 @@ export const useViewFilters = (viewScopeId: string) => {
filter.fieldMetadataId === filterToUpsert.fieldMetadataId,
);
if (existingFilterIndex === -1) {
if (existingFilterIndex === -1 && filterToUpsert.value !== '') {
filtersDraft.push({
...filterToUpsert,
id: existingSavedFilterId,
@ -174,6 +174,11 @@ export const useViewFilters = (viewScopeId: string) => {
return filtersDraft;
}
if (filterToUpsert.value === '') {
filtersDraft.splice(existingFilterIndex, 1);
return filtersDraft;
}
filtersDraft[existingFilterIndex] = {
...filterToUpsert,
id: existingSavedFilterId,

View File

@ -19,14 +19,12 @@ export const opportunityBoardFilterDefinitions: FilterDefinitionByEntity<Opportu
fieldMetadataId: 'companyId',
label: 'Company',
iconName: 'IconBuildingSkyscraper',
type: 'ENTITY',
// entitySelectComponent: <FilterDropdownCompanySearchSelect />,
type: 'RELATION',
},
{
fieldMetadataId: 'pointOfContactId',
label: 'Point of contact',
iconName: 'IconUser',
type: 'ENTITY',
//entitySelectComponent: <FilterDropdownPeopleSearchSelect />,
type: 'RELATION',
},
];

View File

@ -8,7 +8,7 @@ export const tasksFilterDefinitions: FilterDefinitionByEntity<Activity>[] = [
fieldMetadataId: 'assigneeId',
label: 'Assignee',
iconName: 'IconUser',
type: 'ENTITY',
type: 'RELATION',
entitySelectComponent: <FilterDropdownUserSearchSelect />,
selectAllLabel: 'All assignees',
SelectAllIcon: IconUserCircle,