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

feat: table record group (#8781)

Browse Source 
Fix #8401 #8402

This PR is only taking care or displaying properly the record group on
the table.
Record-reorder within group has also been prepared.
Start of collapsible animation has been done, but not working for now.

<img width="1381" alt="Screenshot 2024-11-28 at 2 52 07 PM"
src="https://github.com/user-attachments/assets/514bb3e6-3475-4c47-a91c-64f7d20bbe73">
This commit is contained in:
Jérémy M
2024-11-29 13:04:27 +01:00
committed by GitHub
parent 05149feb00
commit a2d55a8694
41 changed files with 671 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,18 @@ import {
IconChevronLeft,
IconSettings,
MenuItem,
MenuItemSelect,
UndecoratedLink,
useIcons,
} from 'twenty-ui';
import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { StyledInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect';
import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useOptionsDropdown';
import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField';
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
import { hiddenRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/hiddenRecordGroupIdsComponentSelector';
import { useHandleRecordGroupField } from '@/object-record/record-index/hooks/useHandleRecordGroupField';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -23,6 +26,7 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useLocation } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
import { isDefined } from '~/utils/isDefined';
export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
const { getIcon } = useIcons();
@ -43,16 +47,22 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
hiddenRecordGroupIdsComponentSelector,
);
const recordGroupFieldMetadataItem = useRecoilComponentValueV2(
recordGroupFieldMetadataComponentState,
);
const {
recordGroupFieldSearchInput,
setRecordGroupFieldSearchInput,
filteredRecordGroupFieldMetadataItems,
} = useSearchRecordGroupField();
const { handleRecordGroupFieldChange, resetRecordGroupField } =
useHandleRecordGroupField({
viewBarComponentId: recordIndexId,
});
const {
handleRecordGroupFieldChange: setRecordGroupField,
resetRecordGroupField,
} = useHandleRecordGroupField({
viewBarComponentId: recordIndexId,
});
const newFieldSettingsUrl = getSettingsPagePath(
SettingsPath.ObjectNewFieldSelect,
@ -66,6 +76,18 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
navigationMemorizedUrlState,
);
const handleResetRecordGroupField = () => {
resetRecordGroupField();
closeDropdown();
};
const handleRecordGroupFieldChange = (
fieldMetadataItem: FieldMetadataItem,
) => {
setRecordGroupField(fieldMetadataItem);
closeDropdown();
};
useEffect(() => {
if (
currentContentId === 'hiddenRecordGroups' &&
@ -90,13 +112,16 @@ export const ObjectOptionsDropdownRecordGroupFieldsContent = () => {
onChange={(event) => setRecordGroupFieldSearchInput(event.target.value)}
/>
<DropdownMenuItemsContainer>
<MenuItem text="None" onClick={resetRecordGroupField} />
<MenuItemSelect
text="None"
selected={!isDefined(recordGroupFieldMetadataItem)}
onClick={handleResetRecordGroupField}
/>
{filteredRecordGroupFieldMetadataItems.map((fieldMetadataItem) => (
<MenuItem
<MenuItemSelect
key={fieldMetadataItem.id}
onClick={() => {
handleRecordGroupFieldChange(fieldMetadataItem);
}}
selected={fieldMetadataItem.id === recordGroupFieldMetadataItem?.id}
onClick={() => handleRecordGroupFieldChange(fieldMetadataItem)}
LeftIcon={getIcon(fieldMetadataItem.icon)}
text={fieldMetadataItem.label}
/>