Add compact view to calendar (#14527)
<img width="1263" height="785" alt="Screenshot 2025-09-16 at 11 44 44" src="https://github.com/user-attachments/assets/dc61e69f-b887-4a4d-9f9c-e50ffa076082" /> <img width="1263" height="785" alt="Screenshot 2025-09-16 at 11 43 45" src="https://github.com/user-attachments/assets/2dd917b3-6e6d-40f2-bb10-6c82de83c15d" />
This commit is contained in:
+61
-57
@@ -1,6 +1,5 @@
|
||||
import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId';
|
||||
import { useObjectOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsDropdown';
|
||||
import { useObjectOptionsForBoard } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsForBoard';
|
||||
import { useSetViewTypeFromLayoutOptionsMenu } from '@/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu';
|
||||
import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
|
||||
import { recordIndexCalendarLayoutState } from '@/object-record/record-index/states/recordIndexCalendarLayoutState';
|
||||
@@ -16,12 +15,15 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
|
||||
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
|
||||
import { useUpdateCurrentView } from '@/views/hooks/useUpdateCurrentView';
|
||||
import { type GraphQLView } from '@/views/types/GraphQLView';
|
||||
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
|
||||
import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
|
||||
import { useGetAvailableFieldsForCalendar } from '@/views/view-picker/hooks/useGetAvailableFieldsForCalendar';
|
||||
import { useGetAvailableFieldsForKanban } from '@/views/view-picker/hooks/useGetAvailableFieldsForKanban';
|
||||
import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
|
||||
import { useLingui } from '@lingui/react/macro';
|
||||
import { useCallback } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import {
|
||||
@@ -40,22 +42,24 @@ import { FeatureFlagKey, ViewCalendarLayout } from '~/generated/graphql';
|
||||
|
||||
export const ObjectOptionsDropdownLayoutContent = () => {
|
||||
const { t } = useLingui();
|
||||
|
||||
const { objectMetadataItem, resetContent, onContentChange, dropdownId } =
|
||||
useObjectOptionsDropdown();
|
||||
|
||||
const { currentView } = useGetCurrentViewOnly();
|
||||
const { updateCurrentView } = useUpdateCurrentView();
|
||||
|
||||
const {
|
||||
recordIndexId,
|
||||
objectMetadataItem,
|
||||
resetContent,
|
||||
onContentChange,
|
||||
dropdownId,
|
||||
} = useObjectOptionsDropdown();
|
||||
const isCompactModeActive = currentView?.isCompact ?? false;
|
||||
|
||||
const { isCompactModeActive, setAndPersistIsCompactModeActive } =
|
||||
useObjectOptionsForBoard({
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
recordBoardId: recordIndexId,
|
||||
viewBarId: recordIndexId,
|
||||
});
|
||||
const setAndPersistIsCompactModeActive = useCallback(
|
||||
(isCompactModeActive: boolean, view: GraphQLView | undefined) => {
|
||||
if (!view) return;
|
||||
updateCurrentView({
|
||||
isCompact: isCompactModeActive,
|
||||
});
|
||||
},
|
||||
[updateCurrentView],
|
||||
);
|
||||
|
||||
const recordIndexOpenRecordIn = useRecoilValue(recordIndexOpenRecordInState);
|
||||
const recordIndexCalendarLayout = useRecoilValue(
|
||||
@@ -116,10 +120,11 @@ export const ObjectOptionsDropdownLayoutContent = () => {
|
||||
...(isDefaultView ? [] : [ViewType.Kanban]),
|
||||
...(!isDefaultView && hasCalendarViewEnabled ? [ViewType.Calendar] : []),
|
||||
ViewOpenRecordInType.SIDE_PANEL,
|
||||
...(currentView?.type === ViewType.Kanban ? ['Group', 'Compact view'] : []),
|
||||
...(currentView?.type === ViewType.Kanban ? ['Group'] : []),
|
||||
...(currentView?.type === ViewType.Calendar
|
||||
? ['CalendarView', 'CalendarDateField']
|
||||
: []),
|
||||
...(currentView?.type !== ViewType.Table ? ['Compact view'] : []),
|
||||
];
|
||||
|
||||
const selectedItemId = useRecoilComponentValue(
|
||||
@@ -273,53 +278,52 @@ export const ObjectOptionsDropdownLayoutContent = () => {
|
||||
/>
|
||||
</SelectableListItem>
|
||||
{currentView?.type === ViewType.Kanban && (
|
||||
<>
|
||||
<SelectableListItem
|
||||
itemId="Group"
|
||||
onEnter={() => {
|
||||
<SelectableListItem
|
||||
itemId="Group"
|
||||
onEnter={() => {
|
||||
isDefined(recordGroupFieldMetadata)
|
||||
? onContentChange('recordGroups')
|
||||
: onContentChange('recordGroupFields');
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
focused={selectedItemId === 'Group'}
|
||||
onClick={() =>
|
||||
isDefined(recordGroupFieldMetadata)
|
||||
? onContentChange('recordGroups')
|
||||
: onContentChange('recordGroupFields');
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
focused={selectedItemId === 'Group'}
|
||||
onClick={() =>
|
||||
isDefined(recordGroupFieldMetadata)
|
||||
? onContentChange('recordGroups')
|
||||
: onContentChange('recordGroupFields')
|
||||
}
|
||||
LeftIcon={IconLayoutList}
|
||||
text={t`Group`}
|
||||
contextualText={recordGroupFieldMetadata?.label}
|
||||
hasSubMenu
|
||||
/>
|
||||
</SelectableListItem>
|
||||
|
||||
<SelectableListItem
|
||||
itemId="Compact view"
|
||||
onEnter={() => {
|
||||
: onContentChange('recordGroupFields')
|
||||
}
|
||||
LeftIcon={IconLayoutList}
|
||||
text={t`Group`}
|
||||
contextualText={recordGroupFieldMetadata?.label}
|
||||
hasSubMenu
|
||||
/>
|
||||
</SelectableListItem>
|
||||
)}
|
||||
{currentView?.type !== ViewType.Table && (
|
||||
<SelectableListItem
|
||||
itemId="Compact view"
|
||||
onEnter={() => {
|
||||
setAndPersistIsCompactModeActive(
|
||||
!isCompactModeActive,
|
||||
currentView,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<MenuItemToggle
|
||||
focused={selectedItemId === 'Compact view'}
|
||||
LeftIcon={IconBaselineDensitySmall}
|
||||
onToggleChange={() =>
|
||||
setAndPersistIsCompactModeActive(
|
||||
!isCompactModeActive,
|
||||
currentView,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<MenuItemToggle
|
||||
focused={selectedItemId === 'Compact view'}
|
||||
LeftIcon={IconBaselineDensitySmall}
|
||||
onToggleChange={() =>
|
||||
setAndPersistIsCompactModeActive(
|
||||
!isCompactModeActive,
|
||||
currentView,
|
||||
)
|
||||
}
|
||||
toggled={isCompactModeActive}
|
||||
text={t`Compact view`}
|
||||
toggleSize="small"
|
||||
/>
|
||||
</SelectableListItem>
|
||||
</>
|
||||
)
|
||||
}
|
||||
toggled={isCompactModeActive}
|
||||
text={t`Compact view`}
|
||||
toggleSize="small"
|
||||
/>
|
||||
</SelectableListItem>
|
||||
)}
|
||||
</DropdownMenuItemsContainer>
|
||||
</SelectableList>
|
||||
|
||||
-23
@@ -4,7 +4,6 @@ import { useRecoilState } from 'recoil';
|
||||
|
||||
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
|
||||
import { useReorderVisibleRecordFields } from '@/object-record/record-field/hooks/useReorderVisibleRecordFields';
|
||||
import { useUpdateRecordField } from '@/object-record/record-field/hooks/useUpdateRecordField';
|
||||
import { useUpsertRecordField } from '@/object-record/record-field/hooks/useUpsertRecordField';
|
||||
@@ -13,11 +12,8 @@ import { type RecordField } from '@/object-record/record-field/types/RecordField
|
||||
import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
|
||||
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
|
||||
import { type ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
|
||||
import { useUpdateCurrentView } from '@/views/hooks/useUpdateCurrentView';
|
||||
import { type GraphQLView } from '@/views/types/GraphQLView';
|
||||
import { mapRecordFieldToViewField } from '@/views/utils/mapRecordFieldToViewField';
|
||||
import { produce } from 'immer';
|
||||
import { findByProperty, isDefined } from 'twenty-shared/utils';
|
||||
@@ -39,12 +35,6 @@ export const useObjectOptionsForBoard = ({
|
||||
useRecoilState(recordIndexFieldDefinitionsState);
|
||||
|
||||
const { saveViewFields } = useSaveCurrentViewFields();
|
||||
const { updateCurrentView } = useUpdateCurrentView();
|
||||
|
||||
const [isCompactModeActive, setIsCompactModeActive] = useRecoilComponentState(
|
||||
isRecordBoardCompactModeActiveComponentState,
|
||||
recordBoardId,
|
||||
);
|
||||
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
objectNameSingular,
|
||||
@@ -252,23 +242,10 @@ export const useObjectOptionsForBoard = ({
|
||||
],
|
||||
);
|
||||
|
||||
const setAndPersistIsCompactModeActive = useCallback(
|
||||
(isCompactModeActive: boolean, view: GraphQLView | undefined) => {
|
||||
if (!view) return;
|
||||
setIsCompactModeActive(isCompactModeActive);
|
||||
updateCurrentView({
|
||||
isCompact: isCompactModeActive,
|
||||
});
|
||||
},
|
||||
[setIsCompactModeActive, updateCurrentView],
|
||||
);
|
||||
|
||||
return {
|
||||
handleReorderBoardFields,
|
||||
handleBoardFieldVisibilityChange,
|
||||
visibleBoardFields,
|
||||
hiddenBoardFields,
|
||||
isCompactModeActive,
|
||||
setAndPersistIsCompactModeActive,
|
||||
};
|
||||
};
|
||||
|
||||
+4
-5
@@ -5,7 +5,6 @@ import { RecordBoardCardContext } from '@/object-record/record-board/record-boar
|
||||
import { isRecordBoardCardActiveComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardActiveComponentFamilyState';
|
||||
import { isRecordBoardCardFocusedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardFocusedComponentFamilyState';
|
||||
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
|
||||
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
|
||||
import { useRecordDragState } from '@/object-record/record-drag/shared/hooks/useRecordDragState';
|
||||
|
||||
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
|
||||
@@ -26,8 +25,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
|
||||
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
|
||||
import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
|
||||
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
|
||||
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
|
||||
import styled from '@emotion/styled';
|
||||
import { useContext } from 'react';
|
||||
import { InView, useInView } from 'react-intersection-observer';
|
||||
@@ -82,9 +81,9 @@ export const RecordBoardCard = () => {
|
||||
multiDragState.originalSelection.includes(recordId) &&
|
||||
recordId !== multiDragState.primaryDraggedRecordId;
|
||||
|
||||
const isCompactModeActive = useRecoilComponentValue(
|
||||
isRecordBoardCompactModeActiveComponentState,
|
||||
);
|
||||
const { currentView } = useGetCurrentViewOnly();
|
||||
|
||||
const isCompactModeActive = currentView?.isCompact ?? false;
|
||||
|
||||
const [isCardExpanded, setIsCardExpanded] = useRecoilComponentState(
|
||||
recordBoardCardIsExpandedComponentState,
|
||||
|
||||
+4
-5
@@ -2,7 +2,6 @@ import { RecordBoardContext } from '@/object-record/record-board/contexts/Record
|
||||
import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection';
|
||||
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
|
||||
import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
|
||||
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
|
||||
|
||||
import { RecordChip } from '@/object-record/components/RecordChip';
|
||||
import { useActiveRecordBoardCard } from '@/object-record/record-board/hooks/useActiveRecordBoardCard';
|
||||
@@ -15,7 +14,7 @@ import { recordIndexOpenRecordInState } from '@/object-record/record-index/state
|
||||
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
||||
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
|
||||
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
|
||||
import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
|
||||
import styled from '@emotion/styled';
|
||||
import { useContext } from 'react';
|
||||
@@ -50,9 +49,9 @@ export const RecordBoardCardHeader = () => {
|
||||
const { activateBoardCard } = useActiveRecordBoardCard(recordBoardId);
|
||||
const { unfocusBoardCard } = useFocusedRecordBoardCard(recordBoardId);
|
||||
|
||||
const isCompactModeActive = useRecoilComponentValue(
|
||||
isRecordBoardCompactModeActiveComponentState,
|
||||
);
|
||||
const { currentView } = useGetCurrentViewOnly();
|
||||
|
||||
const isCompactModeActive = currentView?.isCompact ?? false;
|
||||
|
||||
const [isCardExpanded, setIsCardExpanded] = useRecoilComponentState(
|
||||
recordBoardCardIsExpandedComponentState,
|
||||
|
||||
+4
-4
@@ -9,10 +9,10 @@ import { RecordBoardColumnFetchMoreLoader } from '@/object-record/record-board/r
|
||||
import { RecordBoardColumnNewRecordButton } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnNewRecordButton';
|
||||
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
|
||||
import { getNumberOfCardsPerColumnForSkeletonLoading } from '@/object-record/record-board/record-board-column/utils/getNumberOfCardsPerColumnForSkeletonLoading';
|
||||
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
|
||||
import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
|
||||
import { isRecordIndexBoardColumnLoadingFamilyState } from '@/object-record/states/isRecordBoardColumnLoadingFamilyState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
|
||||
|
||||
const StyledColumnCardsContainer = styled.div`
|
||||
display: flex;
|
||||
@@ -58,9 +58,9 @@ export const RecordBoardColumnCardsContainer = ({
|
||||
|
||||
const numberOfFields = visibleRecordFields.length;
|
||||
|
||||
const isCompactModeActive = useRecoilComponentValue(
|
||||
isRecordBoardCompactModeActiveComponentState,
|
||||
);
|
||||
const { currentView } = useGetCurrentViewOnly();
|
||||
|
||||
const isCompactModeActive = currentView?.isCompact ?? false;
|
||||
|
||||
return (
|
||||
<StyledColumnCardsContainer
|
||||
|
||||
-9
@@ -1,9 +0,0 @@
|
||||
import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
|
||||
export const isRecordBoardCompactModeActiveComponentState =
|
||||
createComponentState<boolean>({
|
||||
key: 'isRecordBoardCompactModeActiveComponentState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordBoardComponentInstanceContext,
|
||||
});
|
||||
+2
@@ -38,6 +38,7 @@ const StyledDayHeader = styled.div<{ isToday: boolean }>`
|
||||
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(1)};
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
|
||||
margin-bottom: ${({ theme }) => theme.spacing(0.5)};
|
||||
${({ isToday, theme }) =>
|
||||
isToday &&
|
||||
css`
|
||||
@@ -51,6 +52,7 @@ const StyledDayHeader = styled.div<{ isToday: boolean }>`
|
||||
const StyledCardsContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(0.5)};
|
||||
`;
|
||||
|
||||
type RecordCalendarMonthBodyDayProps = {
|
||||
|
||||
+12
-5
@@ -5,14 +5,15 @@ import { RecordCalendarCardHeader } from '@/object-record/record-calendar/record
|
||||
import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext';
|
||||
import { RecordCard } from '@/object-record/record-card/components/RecordCard';
|
||||
import { useOpenRecordFromIndexView } from '@/object-record/record-index/hooks/useOpenRecordFromIndexView';
|
||||
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
|
||||
import styled from '@emotion/styled';
|
||||
import { AnimatedEaseInOut } from 'twenty-ui/utilities';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const StyledRecordCard = styled(RecordCard)`
|
||||
margin-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
width: calc(100% - 2px);
|
||||
`;
|
||||
|
||||
@@ -23,6 +24,10 @@ type RecordCalendarCardProps = {
|
||||
export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
|
||||
const { openRecordFromIndexView } = useOpenRecordFromIndexView();
|
||||
|
||||
const { currentView } = useGetCurrentViewOnly();
|
||||
|
||||
const isCompactModeActive = currentView?.isCompact ?? false;
|
||||
|
||||
const handleCardClick = () => {
|
||||
openRecordFromIndexView({ recordId });
|
||||
};
|
||||
@@ -36,10 +41,12 @@ export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => {
|
||||
<StyledContainer>
|
||||
<StyledRecordCard onClick={handleCardClick}>
|
||||
<RecordCalendarCardHeader recordId={recordId} />
|
||||
<RecordCalendarCardBody
|
||||
recordId={recordId}
|
||||
isRecordReadOnly={false}
|
||||
/>
|
||||
<AnimatedEaseInOut isOpen={!isCompactModeActive} initial={false}>
|
||||
<RecordCalendarCardBody
|
||||
recordId={recordId}
|
||||
isRecordReadOnly={false}
|
||||
/>
|
||||
</AnimatedEaseInOut>
|
||||
</StyledRecordCard>
|
||||
<RecordCalendarCardCellHoveredPortal recordId={recordId} />
|
||||
<RecordCalendarCardCellEditModePortal recordId={recordId} />
|
||||
|
||||
+6
-1
@@ -3,6 +3,7 @@ import { StopPropagationContainer } from '@/object-record/record-board/record-bo
|
||||
import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext';
|
||||
import { RecordCardHeaderContainer } from '@/object-record/record-card/components/RecordCardHeaderContainer';
|
||||
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
||||
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
|
||||
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
@@ -30,12 +31,16 @@ export const RecordCalendarCardHeader = ({
|
||||
const { objectMetadataItem } = useRecordCalendarContextOrThrow();
|
||||
const record = useRecoilValue(recordStoreFamilyState(recordId));
|
||||
|
||||
const { currentView } = useGetCurrentViewOnly();
|
||||
|
||||
const isCompactModeActive = currentView?.isCompact ?? false;
|
||||
|
||||
if (!isDefined(record)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<RecordCardHeaderContainer isCompact={true}>
|
||||
<RecordCardHeaderContainer isCompact={isCompactModeActive}>
|
||||
<StyledRecordChipContainer>
|
||||
<StopPropagationContainer>
|
||||
<RecordChip
|
||||
|
||||
-16
@@ -1,10 +1,7 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
|
||||
import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState';
|
||||
import { recordBoardSelectedRecordIdsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector';
|
||||
import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
|
||||
|
||||
@@ -15,24 +12,11 @@ type RecordIndexBoardDataLoaderEffectProps = {
|
||||
export const RecordIndexBoardDataLoaderEffect = ({
|
||||
recordBoardId,
|
||||
}: RecordIndexBoardDataLoaderEffectProps) => {
|
||||
const recordIndexIsCompactModeActive = useRecoilValue(
|
||||
recordIndexIsCompactModeActiveState,
|
||||
);
|
||||
|
||||
const selectedRecordIds = useRecoilComponentValue(
|
||||
recordBoardSelectedRecordIdsComponentSelector,
|
||||
recordBoardId,
|
||||
);
|
||||
|
||||
const setIsCompactModeActive = useSetRecoilComponentState(
|
||||
isRecordBoardCompactModeActiveComponentState,
|
||||
recordBoardId,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setIsCompactModeActive(recordIndexIsCompactModeActive);
|
||||
}, [recordIndexIsCompactModeActive, setIsCompactModeActive]);
|
||||
|
||||
const setContextStoreTargetedRecords = useSetRecoilComponentState(
|
||||
contextStoreTargetedRecordsRuleComponentState,
|
||||
);
|
||||
|
||||
-6
@@ -7,7 +7,6 @@ import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldM
|
||||
import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
|
||||
import { recordIndexCalendarFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexCalendarFieldMetadataIdState';
|
||||
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
|
||||
import { recordIndexIsCompactModeActiveState } from '@/object-record/record-index/states/recordIndexIsCompactModeActiveState';
|
||||
import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState';
|
||||
import { recordIndexKanbanFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState';
|
||||
import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
|
||||
@@ -29,9 +28,6 @@ export const useLoadRecordIndexStates = () => {
|
||||
const setContextStoreTargetedRecordsRuleComponentState =
|
||||
useSetRecoilComponentState(contextStoreTargetedRecordsRuleComponentState);
|
||||
|
||||
const setRecordIndexIsCompactModeActive = useSetRecoilState(
|
||||
recordIndexIsCompactModeActiveState,
|
||||
);
|
||||
const setRecordIndexViewType = useSetRecoilState(recordIndexViewTypeState);
|
||||
const setRecordIndexOpenRecordIn = useSetRecoilState(
|
||||
recordIndexOpenRecordInState,
|
||||
@@ -204,7 +200,6 @@ export const useLoadRecordIndexStates = () => {
|
||||
: view.kanbanAggregateOperation,
|
||||
fieldMetadataId: view.kanbanAggregateOperationFieldMetadataId,
|
||||
});
|
||||
setRecordIndexIsCompactModeActive(view.isCompact);
|
||||
},
|
||||
[
|
||||
onViewFieldsChange,
|
||||
@@ -215,7 +210,6 @@ export const useLoadRecordIndexStates = () => {
|
||||
setRecordIndexViewKanbanFieldMetadataIdState,
|
||||
setRecordIndexCalendarFieldMetadataIdState,
|
||||
setRecordIndexViewKanbanAggregateOperationState,
|
||||
setRecordIndexIsCompactModeActive,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
-5
@@ -1,5 +0,0 @@
|
||||
import { createState } from 'twenty-ui/utilities';
|
||||
export const recordIndexIsCompactModeActiveState = createState<boolean>({
|
||||
key: 'recordIndexIsCompactModeActiveState',
|
||||
defaultValue: false,
|
||||
});
|
||||
@@ -23,7 +23,7 @@ export const convertUpdateViewInputToCore = (
|
||||
...(view.name && { name: view.name }),
|
||||
...(view.icon && { icon: view.icon }),
|
||||
...(view.position && { position: view.position }),
|
||||
...(view.isCompact && { isCompact: view.isCompact }),
|
||||
...(isDefined(view.isCompact) && { isCompact: view.isCompact }),
|
||||
...(view.kanbanAggregateOperation && {
|
||||
kanbanAggregateOperation: view.kanbanAggregateOperation,
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user