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

30
packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts
View File

@ -4,6 +4,7 @@ import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShow
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
@ -14,14 +15,27 @@ export const getObjectRecordIdentifier = ({
objectMetadataItem: ObjectMetadataItem;
record: ObjectRecord;
}): ObjectRecordIdentifier => {
if (objectMetadataItem.nameSingular === CoreObjectNameSingular.Opportunity) {
return {
id: record.id,
name: record?.company?.name ?? record.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
linkToShowPage: `/opportunities/${record.id}`,
};
switch (objectMetadataItem.nameSingular) {
case CoreObjectNameSingular.Opportunity: {
return {
id: record.id,
name: record?.company?.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
linkToShowPage: `/opportunities/${record.id}`,
};
}
case CoreObjectNameSingular.WorkspaceMember: {
const workspaceMember = record as WorkspaceMember;
return {
id: workspaceMember.id,
name:
workspaceMember.name.firstName + ' ' + workspaceMember.name.lastName,
avatarUrl: workspaceMember.avatarUrl ?? undefined,
avatarType: 'rounded',
};
}
}
const labelIdentifierFieldMetadataItem =

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;
};

1
packages/twenty-front/src/modules/ui/display/icon/index.ts
View File

@ -57,6 +57,7 @@ export {
IconFileText,
IconFileUpload,
IconFileZip,
IconFilterOff,
IconForbid,
IconGripVertical,
IconHeadphones,

19
packages/twenty-front/src/pages/tasks/TasksEffect.tsx
View File

@ -13,10 +13,13 @@ type TasksEffectProps = {
export const TasksEffect = ({ filterDropdownId }: TasksEffectProps) => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { setSelectedFilter, setAvailableFilterDefinitions } =
useFilterDropdown({
filterDropdownId: filterDropdownId,
});
const {
setSelectedFilter,
setAvailableFilterDefinitions,
setObjectFilterDropdownSelectedRecordIds,
} = useFilterDropdown({
filterDropdownId: filterDropdownId,
});
useEffect(() => {
setAvailableFilterDefinitions(tasksFilterDefinitions);
@ -35,7 +38,13 @@ export const TasksEffect = ({ filterDropdownId }: TasksEffectProps) => {
displayAvatarUrl: currentWorkspaceMember.avatarUrl ?? undefined,
definition: tasksFilterDefinitions[0],
});
setObjectFilterDropdownSelectedRecordIds([currentWorkspaceMember.id]);
}
}, [currentWorkspaceMember, setSelectedFilter]);
}, [
currentWorkspaceMember,
setSelectedFilter,
setObjectFilterDropdownSelectedRecordIds,
]);
return <></>;
};