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

fix-dropdown-sort-icons (#2656)

Browse Source
This commit is contained in:
bosiraphael
2023-11-22 18:49:25 +01:00
committed by GitHub
parent 7eea150d16
commit 7954a2b6c2
3 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
import { IconChevronDown } from '@/ui/display/icon'; import { IconChevronDown } from '@/ui/display/icon';
import { LightButton } from '@/ui/input/button/components/LightButton'; import { LightButton } from '@/ui/input/button/components/LightButton';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@ -60,6 +61,8 @@ export const ObjectSortDropdownButton = ({
resetState(); resetState();
}; };
const { icons } = useLazyLoadIcons();
return ( return (
<DropdownScope dropdownScopeId={ObjectSortDropdownId}> <DropdownScope dropdownScopeId={ObjectSortDropdownId}>
<Dropdown <Dropdown
@ -97,15 +100,17 @@ export const ObjectSortDropdownButton = ({
</DropdownMenuHeader> </DropdownMenuHeader>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer>
{availableSortDefinitions.map((availableSort, index) => ( {availableSortDefinitions.map(
<MenuItem (availableSortDefinition, index) => (
testId={`select-sort-${index}`} <MenuItem
key={index} testId={`select-sort-${index}`}
onClick={() => handleAddSort(availableSort)} key={index}
LeftIcon={availableSort.Icon} onClick={() => handleAddSort(availableSortDefinition)}
text={availableSort.label} LeftIcon={icons[availableSortDefinition.iconName]}
/> text={availableSortDefinition.label}
))} />
),
)}
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
</> </>
)} )}

4
front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts
View File

@ -1,10 +1,8 @@
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { SortDirection } from './SortDirection'; import { SortDirection } from './SortDirection';
export type SortDefinition = { export type SortDefinition = {
fieldMetadataId: string; fieldMetadataId: string;
label: string; label: string;
Icon?: IconComponent; iconName: string;
getOrderByTemplate?: (direction: SortDirection) => any[]; getOrderByTemplate?: (direction: SortDirection) => any[];
}; };

7
front/src/pages/opportunities/constants/opportunityBoardSortDefinitions.tsx
View File

@ -1,20 +1,19 @@
import { IconCalendarEvent, IconCurrencyDollar } from '@/ui/display/icon/index';
import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition'; import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
export const opportunityBoardSortDefinitions: SortDefinition[] = [ export const opportunityBoardSortDefinitions: SortDefinition[] = [
{ {
fieldMetadataId: 'createdAt', fieldMetadataId: 'createdAt',
label: 'Creation', label: 'Creation',
Icon: IconCalendarEvent, iconName: 'IconCalendarEvent',
}, },
{ {
fieldMetadataId: 'amount', fieldMetadataId: 'amount',
label: 'Amount', label: 'Amount',
Icon: IconCurrencyDollar, iconName: 'IconCurrencyDollar',
}, },
{ {
fieldMetadataId: 'closeDate', fieldMetadataId: 'closeDate',
label: 'Expected close date', label: 'Expected close date',
Icon: IconCalendarEvent, iconName: 'IconCalendarEvent',
}, },
]; ];