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

add multiple filters of same FieldMetadataType (#5892)

Browse Source 
fixes: #5378
This commit is contained in:
Aditya Pimpalkar
2024-06-18 09:49:33 +01:00
committed by GitHub
parent de2b0527a3
commit 14abd99bb7
19 changed files with 91 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,8 +16,8 @@ export const EditableFilterChip = ({
const { getIcon } = useIcons();
return (
<SortOrFilterChip
key={viewFilter.fieldMetadataId}
testId={viewFilter.fieldMetadataId}
key={viewFilter.id}
testId={viewFilter.id}
labelKey={viewFilter.definition.label}
labelValue={`${getOperandLabelShort(viewFilter.operand)} ${
viewFilter.displayValue

6
packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
View File

@ -62,13 +62,13 @@ export const EditableFilterDropdownButton = ({
const handleRemove = () => {
closeDropdown();
removeCombinedViewFilter(viewFilter.fieldMetadataId);
removeCombinedViewFilter(viewFilter.id);
};
const handleDropdownClickOutside = useCallback(() => {
const { value, fieldMetadataId } = viewFilter;
const { id: fieldId, value } = viewFilter;
if (!value) {
removeCombinedViewFilter(fieldMetadataId);
removeCombinedViewFilter(fieldId);
}
}, [viewFilter, removeCombinedViewFilter]);

14
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
View File

@ -153,19 +153,17 @@ export const ViewBarDetails = ({
availableFilterDefinitions,
).map((viewFilter) => (
<ObjectFilterDropdownScope
key={viewFilter.fieldMetadataId}
filterScopeId={viewFilter.fieldMetadataId}
key={viewFilter.id}
filterScopeId={viewFilter.id}
>
<DropdownScope dropdownScopeId={viewFilter.fieldMetadataId}>
<ViewBarFilterEffect
filterDropdownId={viewFilter.fieldMetadataId}
/>
<DropdownScope dropdownScopeId={viewFilter.id}>
<ViewBarFilterEffect filterDropdownId={viewFilter.id} />
<EditableFilterDropdownButton
viewFilter={viewFilter}
hotkeyScope={{
scope: viewFilter.fieldMetadataId,
scope: viewFilter.id,
}}
viewFilterDropdownId={viewFilter.fieldMetadataId}
viewFilterDropdownId={viewFilter.id}
/>
</DropdownScope>
</ObjectFilterDropdownScope>

46
packages/twenty-front/src/modules/views/components/ViewBarFilterEffect.tsx
View File

@ -6,6 +6,7 @@ import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { useViewStates } from '@/views/hooks/internal/useViewStates';
import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
import { isDefined } from '~/utils/isDefined';
type ViewBarFilterEffectProps = {
@ -15,11 +16,12 @@ type ViewBarFilterEffectProps = {
export const ViewBarFilterEffect = ({
filterDropdownId,
}: ViewBarFilterEffectProps) => {
const { availableFilterDefinitionsState, unsavedToUpsertViewFiltersState } =
useViewStates();
const { availableFilterDefinitionsState } = useViewStates();
const { upsertCombinedViewFilter } = useCombinedViewFilters();
const { currentViewWithCombinedFiltersAndSorts } = useGetCurrentView();
const availableFilterDefinitions = useRecoilValue(
availableFilterDefinitionsState,
);
@ -51,47 +53,41 @@ export const ViewBarFilterEffect = ({
upsertCombinedViewFilter,
]);
const unsavedToUpsertViewFilters = useRecoilValue(
unsavedToUpsertViewFiltersState,
);
useEffect(() => {
if (filterDefinitionUsedInDropdown?.type === 'RELATION') {
const viewFilterUsedInDropdown = unsavedToUpsertViewFilters.find(
(filter) =>
filter.fieldMetadataId ===
filterDefinitionUsedInDropdown.fieldMetadataId,
);
const viewFilterUsedInDropdown =
currentViewWithCombinedFiltersAndSorts?.viewFilters.find(
(filter) =>
filter.fieldMetadataId ===
filterDefinitionUsedInDropdown?.fieldMetadataId,
);
const viewFilterSelectedRecordIds = isNonEmptyString(
const viewFilterSelectedRecords = isNonEmptyString(
viewFilterUsedInDropdown?.value,
)
? JSON.parse(viewFilterUsedInDropdown.value)
: [];
setObjectFilterDropdownSelectedRecordIds(viewFilterSelectedRecordIds);
setObjectFilterDropdownSelectedRecordIds(viewFilterSelectedRecords);
} else if (filterDefinitionUsedInDropdown?.type === 'SELECT') {
const viewFilterUsedInDropdown = unsavedToUpsertViewFilters.find(
(filter) =>
filter.fieldMetadataId ===
filterDefinitionUsedInDropdown.fieldMetadataId,
);
const viewFilterUsedInDropdown =
currentViewWithCombinedFiltersAndSorts?.viewFilters.find(
(filter) =>
filter.fieldMetadataId ===
filterDefinitionUsedInDropdown?.fieldMetadataId,
);
const viewFilterSelectedOptionValues = isNonEmptyString(
const viewFilterSelectedRecords = isNonEmptyString(
viewFilterUsedInDropdown?.value,
)
? JSON.parse(viewFilterUsedInDropdown.value)
: [];
setObjectFilterDropdownSelectedOptionValues(
viewFilterSelectedOptionValues,
);
setObjectFilterDropdownSelectedOptionValues(viewFilterSelectedRecords);
}
}, [
filterDefinitionUsedInDropdown,
setObjectFilterDropdownSelectedRecordIds,
setObjectFilterDropdownSelectedOptionValues,
unsavedToUpsertViewFilters,
currentViewWithCombinedFiltersAndSorts,
]);
return <></>;

16
packages/twenty-front/src/modules/views/hooks/useCombinedViewFilters.ts
View File

@ -1,5 +1,4 @@
import { useRecoilCallback } from 'recoil';
import { v4 } from 'uuid';
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
@ -43,13 +42,11 @@ export const useCombinedViewFilters = (viewBarComponentId?: string) => {
}
const matchingFilterInCurrentView = currentView.viewFilters.find(
(viewFilter) =>
viewFilter.fieldMetadataId === upsertedFilter.fieldMetadataId,
(viewFilter) => viewFilter.id === upsertedFilter.id,
);
const matchingFilterInUnsavedFilters = unsavedToUpsertViewFilters.find(
(viewFilter) =>
viewFilter.fieldMetadataId === upsertedFilter.fieldMetadataId,
(viewFilter) => viewFilter.id === upsertedFilter.id,
);
if (isDefined(matchingFilterInUnsavedFilters)) {
@ -81,7 +78,6 @@ export const useCombinedViewFilters = (viewBarComponentId?: string) => {
...unsavedToUpsertViewFilters,
{
...upsertedFilter,
id: v4(),
__typename: 'ViewFilter',
} satisfies ViewFilter,
]);
@ -95,7 +91,7 @@ export const useCombinedViewFilters = (viewBarComponentId?: string) => {
);
const removeCombinedViewFilter = useRecoilCallback(
({ snapshot, set }) =>
async (fieldMetadataId: string) => {
async (fieldId: string) => {
const unsavedToUpsertViewFilters = getSnapshotValue(
snapshot,
unsavedToUpsertViewFiltersState,
@ -119,18 +115,18 @@ export const useCombinedViewFilters = (viewBarComponentId?: string) => {
}
const matchingFilterInCurrentView = currentView.viewFilters.find(
(viewFilter) => viewFilter.fieldMetadataId === fieldMetadataId,
(viewFilter) => viewFilter.id === fieldId,
);
const matchingFilterInUnsavedFilters = unsavedToUpsertViewFilters.find(
(viewFilter) => viewFilter.fieldMetadataId === fieldMetadataId,
(viewFilter) => viewFilter.id === fieldId,
);
if (isDefined(matchingFilterInUnsavedFilters)) {
set(
unsavedToUpsertViewFiltersState,
unsavedToUpsertViewFilters.filter(
(viewFilter) => viewFilter.fieldMetadataId !== fieldMetadataId,
(viewFilter) => viewFilter.id !== fieldId,
),
);
}

1
packages/twenty-front/src/modules/views/utils/__tests__/viewMapFunctions.test.ts
View File

@ -55,6 +55,7 @@ describe('mapViewFiltersToFilters', () => {
];
const expectedFilters: Filter[] = [
{
id: 'id',
fieldMetadataId: '05731f68-6e7a-4903-8374-c0b6a9063482',
value: 'testValue',
displayValue: 'Test Display Value',

5
packages/twenty-front/src/modules/views/utils/combinedViewFilters.ts
View File

@ -28,9 +28,6 @@ export const combinedViewFilters = (
.concat(toCreateViewFilters);
return Object.values(
combinedViewFilters.reduce(
(acc, obj) => ({ ...acc, [obj.fieldMetadataId]: obj }),
{},
),
combinedViewFilters.reduce((acc, obj) => ({ ...acc, [obj.id]: obj }), {}),
);
};

1
packages/twenty-front/src/modules/views/utils/mapViewFiltersToFilters.ts
View File

@ -18,6 +18,7 @@ export const mapViewFiltersToFilters = (
if (!availableFilterDefinition) return null;
return {
id: viewFilter.id,
fieldMetadataId: viewFilter.fieldMetadataId,
value: viewFilter.value,
displayValue: viewFilter.displayValue,