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

fix: group by sort options should have a checkmark when selected (#9038)

Browse Source 
Fix #8966 

This PR is adding a checkmark beside the selected sort option in the
`Options` dropdown menu.

<img width="225" alt="Screenshot 2024-12-12 at 12 03 18 PM"
src="https://github.com/user-attachments/assets/81783bc0-5aea-4f0d-9327-c70f3e70edb6"
/>
This commit is contained in:
Jérémy M
2024-12-12 12:18:53 +01:00
committed by GitHub
parent d7da73f0ec
commit 5f2a39d9e9
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupSortContent.tsx
View File

@ -4,7 +4,7 @@ import {
IconHandMove, IconHandMove,
IconSortAZ, IconSortAZ,
IconSortZA, IconSortZA,
MenuItem, MenuItemSelect,
} from 'twenty-ui'; } from 'twenty-ui';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown'; import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
@ -13,8 +13,8 @@ import { RecordGroupSort } from '@/object-record/record-group/types/RecordGroupS
import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState'; import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState';
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';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
export const ObjectOptionsDropdownRecordGroupSortContent = () => { export const ObjectOptionsDropdownRecordGroupSortContent = () => {
const { currentContentId, onContentChange, closeDropdown } = const { currentContentId, onContentChange, closeDropdown } =
@ -24,7 +24,7 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
hiddenRecordGroupIdsComponentSelector, hiddenRecordGroupIdsComponentSelector,
); );
const setRecordGroupSort = useSetRecoilComponentStateV2( const [recordGroupSort, setRecordGroupSort] = useRecoilComponentStateV2(
recordIndexRecordGroupSortComponentState, recordIndexRecordGroupSortComponentState,
); );
@ -51,24 +51,27 @@ export const ObjectOptionsDropdownRecordGroupSortContent = () => {
Sort Sort
</DropdownMenuHeader> </DropdownMenuHeader>
<DropdownMenuItemsContainer> <DropdownMenuItemsContainer>
<MenuItem <MenuItemSelect
onClick={() => handleRecordGroupSortChange(RecordGroupSort.Manual)} onClick={() => handleRecordGroupSortChange(RecordGroupSort.Manual)}
LeftIcon={IconHandMove} LeftIcon={IconHandMove}
text={RecordGroupSort.Manual} text={RecordGroupSort.Manual}
selected={recordGroupSort === RecordGroupSort.Manual}
/> />
<MenuItem <MenuItemSelect
onClick={() => onClick={() =>
handleRecordGroupSortChange(RecordGroupSort.Alphabetical) handleRecordGroupSortChange(RecordGroupSort.Alphabetical)
} }
LeftIcon={IconSortAZ} LeftIcon={IconSortAZ}
text={RecordGroupSort.Alphabetical} text={RecordGroupSort.Alphabetical}
selected={recordGroupSort === RecordGroupSort.Alphabetical}
/> />
<MenuItem <MenuItemSelect
onClick={() => onClick={() =>
handleRecordGroupSortChange(RecordGroupSort.ReverseAlphabetical) handleRecordGroupSortChange(RecordGroupSort.ReverseAlphabetical)
} }
LeftIcon={IconSortZA} LeftIcon={IconSortZA}
text={RecordGroupSort.ReverseAlphabetical} text={RecordGroupSort.ReverseAlphabetical}
selected={recordGroupSort === RecordGroupSort.ReverseAlphabetical}
/> />
</DropdownMenuItemsContainer> </DropdownMenuItemsContainer>
</> </>