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

Fixed filter dropdown on task page (#3469)

Browse Source 
* Fixed filter dropdown on task page

* Fixed ts in test

* Change avatarUrl to nullable in ObjectRecordIdentifier
This commit is contained in:
Lucas Bordeau
2024-01-23 16:59:26 +01:00
committed by GitHub
parent 2b6d66f1bc
commit 23a3614b54
11 changed files with 93 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx Normal file
View File

@ -0,0 +1,27 @@
import { MenuItem } from 'tsup.ui.index';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { IconFilterOff } from '@/ui/display/icon';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => {
const { emptyFilterButKeepDefinition } = useFilterDropdown();
const { closeDropdown } = useDropdown();
const handleRemoveFilter = () => {
emptyFilterButKeepDefinition();
closeDropdown();
};
return (
<DropdownMenuItemsContainer>
<MenuItem
onClick={handleRemoveFilter}
LeftIcon={IconFilterOff}
text={'Remove filter'}
/>
</DropdownMenuItemsContainer>
);
};

8
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordSelect.tsx
View File

@ -3,7 +3,7 @@ import { MultipleRecordSelectDropdown } from '@/object-record/select/components/
import { useRecordsForSelect } from '@/object-record/select/hooks/useRecordsForSelect';
import { SelectableRecord } from '@/object-record/select/types/SelectableRecord';
export const EMPTY_FILTER_VALUE = '';
export const EMPTY_FILTER_VALUE = '[]';
export const MAX_RECORDS_TO_DISPLAY = 3;
export const ObjectFilterDropdownRecordSelect = () => {
@ -14,6 +14,7 @@ export const ObjectFilterDropdownRecordSelect = () => {
setObjectFilterDropdownSelectedRecordIds,
objectFilterDropdownSelectedRecordIds,
selectFilter,
emptyFilterButKeepDefinition,
} = useFilterDropdown();
const objectNameSingular =
@ -41,6 +42,11 @@ export const ObjectFilterDropdownRecordSelect = () => {
(id) => id !== recordToSelect.id,
);
if (newSelectedRecordIds.length === 0) {
emptyFilterButKeepDefinition();
return;
}
setObjectFilterDropdownSelectedRecordIds(newSelectedRecordIds);
const selectedRecordNames = [

4
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import { ObjectFilterDropdownRecordRemoveFilterMenuItem } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { IconChevronDown } from '@/ui/display/icon/index';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
@ -65,6 +67,8 @@ export const SingleEntityObjectFilterDropdownButton = ({
dropdownComponents={
<>
<ObjectFilterDropdownRecordSearchInput />
<DropdownMenuSeparator />
<ObjectFilterDropdownRecordRemoveFilterMenuItem />
<ObjectFilterDropdownRecordSelect />
</>
}

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx
View File

@ -59,7 +59,7 @@ describe('useFilterDropdown', () => {
act(() => {
result.current.setOnFilterSelect(
(_currVal?: Filter) => (_filter: Filter) => {},
(_currVal?: Filter | null) => (_filter: Filter | null) => {},
);
});
await waitFor(() => {

15
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useFilterDropdown.ts
View File

@ -40,13 +40,25 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => {
} = useFilterDropdownStates(scopeId);
const selectFilter = useCallback(
(filter: Filter) => {
(filter: Filter | null) => {
setSelectedFilter(filter);
onFilterSelect?.(filter);
},
[setSelectedFilter, onFilterSelect],
);
const emptyFilterButKeepDefinition = useCallback(() => {
setObjectFilterDropdownSearchInput('');
setObjectFilterDropdownSelectedEntityId(null);
setObjectFilterDropdownSelectedRecordIds([]);
setSelectedFilter(undefined);
}, [
setSelectedFilter,
setObjectFilterDropdownSelectedRecordIds,
setObjectFilterDropdownSelectedEntityId,
setObjectFilterDropdownSearchInput,
]);
const resetFilter = useCallback(() => {
setObjectFilterDropdownSearchInput('');
setObjectFilterDropdownSelectedEntityId(null);
@ -87,5 +99,6 @@ export const useFilterDropdown = (props?: UseFilterDropdownProps) => {
resetFilter,
onFilterSelect,
setOnFilterSelect,
emptyFilterButKeepDefinition,
};
};

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts
View File

@ -3,7 +3,7 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
import { Filter } from '../types/Filter';
export const onFilterSelectScopedState = createStateScopeMap<
((filter: Filter) => void) | undefined
((filter: Filter | null) => void) | undefined
>({
key: 'onFilterSelectScopedState',
defaultValue: undefined,

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts
View File

@ -3,7 +3,7 @@ import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createSta
import { Filter } from '../types/Filter';
export const selectedFilterScopedState = createStateScopeMap<
Filter | undefined
Filter | undefined | null
>({
key: 'selectedFilterScopedState',
defaultValue: undefined,

2
packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts
View File

@ -3,7 +3,7 @@ import { AvatarType } from '@/users/components/Avatar';
export type ObjectRecordIdentifier = {
id: string;
name: string;
avatarUrl: string;
avatarUrl?: string;
avatarType?: AvatarType | null;
linkToShowPage?: string;
};