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

Store compact view status (#3850)

Browse Source 
* Store compact view status

* Rename to isCompact

* Fixes

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thomas Trompette
2024-02-08 16:33:52 +01:00
committed by GitHub
parent 6ee179442a
commit 719da29795
16 changed files with 110 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
View File

@ -14,6 +14,7 @@ import { RecordIndexOptionsDropdown } from '@/object-record/record-index/options
import { RECORD_INDEX_OPTIONS_DROPDOWN_ID } from '@/object-record/record-index/options/constants/RecordIndexOptionsDropdownId';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
@ -62,6 +63,9 @@ export const RecordIndexContainer = ({
const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState);
const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState);
const setRecordIndexIsCompactModeActive = useSetRecoilState(
recordIndexIsCompactModeActiveState,
);
const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
recordTableId: recordIndexId,
@ -118,6 +122,9 @@ export const RecordIndexContainer = ({
onViewTypeChange={(viewType: ViewType) => {
setRecordIndexViewType(viewType);
}}
onViewCompactModeChange={(isCompactModeActive: boolean) => {
setRecordIndexIsCompactModeActive(isCompactModeActive);
}}
/>
<RecordIndexViewBarEffect
objectNamePlural={objectNamePlural}

22
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts
View File

@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
@ -8,6 +8,7 @@ import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoar
import { turnObjectDropdownFilterIntoQueryFilter } from '@/object-record/record-filter/utils/turnObjectDropdownFilterIntoQueryFilter';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
import { useViewBar } from '@/views/hooks/useViewBar';
@ -26,8 +27,11 @@ export const useLoadRecordIndexBoard = ({
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const { setRecordIds: setRecordIdsInBoard, setFieldDefinitions } =
useRecordBoard(recordBoardId);
const {
setRecordIds: setRecordIdsInBoard,
setFieldDefinitions,
getIsCompactModeActiveState,
} = useRecordBoard(recordBoardId);
const { setRecords: setRecordsInStore } = useSetRecordInStore();
const recordIndexFieldDefinitions = useRecoilValue(
@ -48,6 +52,10 @@ export const useLoadRecordIndexBoard = ({
objectMetadataItem?.fields ?? [],
);
const recordIndexIsCompactModeActive = useRecoilValue(
recordIndexIsCompactModeActiveState,
);
const { records, loading, fetchMoreRecords, queryStateIdentifier } =
useFindManyRecords({
objectNameSingular,
@ -59,6 +67,10 @@ export const useLoadRecordIndexBoard = ({
viewBarId,
});
const setIsCompactModeActive = useSetRecoilState(
getIsCompactModeActiveState(),
);
useEffect(() => {
setRecordIdsInBoard(records);
}, [records, setRecordIdsInBoard]);
@ -71,6 +83,10 @@ export const useLoadRecordIndexBoard = ({
setEntityCountInCurrentView(records.length);
}, [records.length, setEntityCountInCurrentView]);
useEffect(() => {
setIsCompactModeActive(recordIndexIsCompactModeActive);
}, [recordIndexIsCompactModeActive, setIsCompactModeActive]);
return {
records,
loading,

9
packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx
View File

@ -93,7 +93,7 @@ export const RecordIndexOptionsDropdownContent = ({
handleReorderBoardFields,
handleBoardFieldVisibilityChange,
isCompactModeActive,
setIsCompactModeActive,
setAndPersistIsCompactModeActive,
} = useRecordIndexOptionsForBoard({
objectNameSingular,
recordBoardId: recordIndexId,
@ -184,7 +184,12 @@ export const RecordIndexOptionsDropdownContent = ({
<DropdownMenuItemsContainer>
<MenuItemToggle
LeftIcon={IconBaselineDensitySmall}
onToggleChange={setIsCompactModeActive}
onToggleChange={() =>
setAndPersistIsCompactModeActive(
!isCompactModeActive,
currentView,
)
}
toggled={isCompactModeActive}
text="Compact view"
toggleSize="small"

17
packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts
View File

@ -11,6 +11,8 @@ import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/s
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useViews } from '@/views/hooks/internal/useViews';
import { GraphQLView } from '@/views/types/GraphQLView';
type useRecordIndexOptionsForBoardParams = {
objectNameSingular: string;
@ -27,6 +29,7 @@ export const useRecordIndexOptionsForBoard = ({
useRecoilState(recordIndexFieldDefinitionsState);
const { persistViewFields } = useViewFields(viewBarId);
const { updateView } = useViews(viewBarId);
const { getIsCompactModeActiveState } = useRecordBoard(recordBoardId);
const [isCompactModeActive, setIsCompactModeActive] = useRecoilState(
@ -164,12 +167,24 @@ export const useRecordIndexOptionsForBoard = ({
],
);
const setAndPersistIsCompactModeActive = useCallback(
(isCompactModeActive: boolean, view: GraphQLView | undefined) => {
if (!view) return;
setIsCompactModeActive(isCompactModeActive);
updateView({
...view,
isCompact: isCompactModeActive,
});
},
[setIsCompactModeActive, updateView],
);
return {
handleReorderBoardFields,
handleBoardFieldVisibilityChange,
visibleBoardFields,
hiddenBoardFields,
isCompactModeActive,
setIsCompactModeActive,
setAndPersistIsCompactModeActive,
};
};

6
packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil';
export const recordIndexIsCompactModeActiveState = atom<boolean>({
key: 'recordIndexIsCompactModeActiveState',
default: false,
});