diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx deleted file mode 100644 index 209cca35b5c..00000000000 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { RecordCalendarCardBody } from '@/object-record/record-calendar/card/components/RecordCalendarCardBody'; -import { RecordCalendarCardHeader } from '@/object-record/record-calendar/card/components/RecordCalendarCardHeader'; -import { RecordCard } from '@/object-record/record-card/components/RecordCard'; -import styled from '@emotion/styled'; - -const StyledContainer = styled.div` - display: flex; -`; - -const StyledRecordCard = styled(RecordCard)` - margin-bottom: ${({ theme }) => theme.spacing(1)}; -`; - -type RecordCalendarMonthBodyCardProps = { - recordId: string; -}; - -export const RecordCalendarMonthBodyCard = ({ - recordId, -}: RecordCalendarMonthBodyCardProps) => { - return ( - - - - - - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx index 4f71392e00c..0decc73f9e0 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx @@ -1,4 +1,4 @@ -import { RecordCalendarMonthBodyCard } from '@/object-record/record-calendar/month/components/RecordCalendarMonthBodyCard'; +import { RecordCalendarCard } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard'; import { calendarDayRecordIdsComponentFamilySelector } from '@/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector'; import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue'; import styled from '@emotion/styled'; @@ -39,7 +39,7 @@ export const RecordCalendarMonthBodyDay = ({ {day.getDate()} {recordIds.slice(0, 5).map((recordId) => ( - + ))} diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal.tsx new file mode 100644 index 00000000000..9463af2fb17 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal.tsx @@ -0,0 +1,48 @@ +import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; + +import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { RecordCalendarCardInputContextProvider } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardInputContextProvider'; +import { RECORD_CALENDAR_CARD_INPUT_ID_PREFIX } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix'; +import { useRecordCalendarCardMetadataFromPosition } from '@/object-record/record-calendar/record-calendar-card/hooks/useRecordCalendarCardMetadataFromPosition'; +import { recordCalendarCardEditModePositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState'; +import { FieldInput } from '@/object-record/record-field/ui/components/FieldInput'; +import { RecordInlineCellAnchoredPortal } from '@/object-record/record-inline-cell/components/RecordInlineCellAnchoredPortal'; +import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode'; +import { isDefined } from 'twenty-shared/utils'; + +type RecordCalendarCardCellEditModePortalProps = { + recordId: string; +}; + +export const RecordCalendarCardCellEditModePortal = ({ + recordId, +}: RecordCalendarCardCellEditModePortalProps) => { + const { objectMetadataItem } = useRecordCalendarContextOrThrow(); + + const editModePosition = useRecoilComponentValue( + recordCalendarCardEditModePositionComponentState, + ); + + const { editedFieldMetadataItem } = + useRecordCalendarCardMetadataFromPosition(); + + if (!isDefined(editModePosition) || !isDefined(editedFieldMetadataItem)) { + return null; + } + + return ( + + + + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal.tsx new file mode 100644 index 00000000000..754a3f3e7f7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal.tsx @@ -0,0 +1,45 @@ +import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; + +import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { RecordCalendarCardCellHoveredPortalContent } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortalContent'; +import { RecordCalendarCardInputContextProvider } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardInputContextProvider'; +import { RECORD_CALENDAR_CARD_INPUT_ID_PREFIX } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix'; +import { useRecordCalendarCardMetadataFromPosition } from '@/object-record/record-calendar/record-calendar-card/hooks/useRecordCalendarCardMetadataFromPosition'; +import { recordCalendarCardHoverPositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState'; +import { RecordInlineCellAnchoredPortal } from '@/object-record/record-inline-cell/components/RecordInlineCellAnchoredPortal'; +import { isDefined } from 'twenty-shared/utils'; + +type RecordCalendarCardCellHoveredPortalProps = { + recordId: string; +}; + +export const RecordCalendarCardCellHoveredPortal = ({ + recordId, +}: RecordCalendarCardCellHoveredPortalProps) => { + const { objectMetadataItem } = useRecordCalendarContextOrThrow(); + + const hoverPosition = useRecoilComponentValue( + recordCalendarCardHoverPositionComponentState, + ); + + const { hoveredFieldMetadataItem } = + useRecordCalendarCardMetadataFromPosition(); + + if (!isDefined(hoverPosition) || !isDefined(hoveredFieldMetadataItem)) { + return null; + } + + return ( + + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortalContent.tsx new file mode 100644 index 00000000000..37d75a06b9b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortalContent.tsx @@ -0,0 +1,70 @@ +import { RECORD_CALENDAR_CARD_INPUT_ID_PREFIX } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix'; +import { recordCalendarCardEditModePositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState'; +import { recordCalendarCardHoverPositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState'; +import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay'; +import { FieldInput } from '@/object-record/record-field/ui/components/FieldInput'; +import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext'; +import { useOpenFieldInputEditMode } from '@/object-record/record-field/ui/hooks/useOpenFieldInputEditMode'; +import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext'; +import { RecordInlineCellDisplayMode } from '@/object-record/record-inline-cell/components/RecordInlineCellDisplayMode'; +import { RecordInlineCellHoveredPortalContent } from '@/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent'; +import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell'; +import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; +import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState'; +import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; +import { useContext } from 'react'; + +export const RecordCalendarCardCellHoveredPortalContent = () => { + const { editModeContentOnly, isCentered } = useRecordInlineCellContext(); + + const { isRecordFieldReadOnly, recordId, fieldDefinition } = + useContext(FieldContext); + + const { openInlineCell } = useInlineCell( + getRecordFieldInputInstanceId({ + recordId, + fieldName: fieldDefinition.metadata.fieldName, + prefix: RECORD_CALENDAR_CARD_INPUT_ID_PREFIX, + }), + ); + + const shouldContainerBeClickable = + !isRecordFieldReadOnly && !editModeContentOnly; + + const [recordCalendarCardHoverPosition, setRecordCalendarCardHoverPosition] = + useRecoilComponentState(recordCalendarCardHoverPositionComponentState); + + const setRecordCalendarCardEditModePosition = useSetRecoilComponentState( + recordCalendarCardEditModePositionComponentState, + ); + const { openFieldInput } = useOpenFieldInputEditMode(); + + const handleClick = () => { + if (shouldContainerBeClickable) { + openInlineCell(); + setRecordCalendarCardEditModePosition(recordCalendarCardHoverPosition); + + openFieldInput({ + fieldDefinition, + recordId, + prefix: RECORD_CALENDAR_CARD_INPUT_ID_PREFIX, + }); + } + }; + + const handleMouseLeave = () => { + setRecordCalendarCardHoverPosition(null); + }; + + return ( + + + {editModeContentOnly ? : } + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardInputContextProvider.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardInputContextProvider.tsx new file mode 100644 index 00000000000..86363307663 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardInputContextProvider.tsx @@ -0,0 +1,126 @@ +import { usePersistFieldFromFieldInputContext } from '@/object-record/record-field/ui/hooks/usePersistFieldFromFieldInputContext'; +import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext'; + +import { recordCalendarCardEditModePositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState'; +import { + FieldInputEventContext, + type FieldInputClickOutsideEvent, + type FieldInputEvent, +} from '@/object-record/record-field/ui/contexts/FieldInputEventContext'; +import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell'; +import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector'; +import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId'; +import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; +import { useCallback } from 'react'; +import { useRecoilCallback } from 'recoil'; + +type RecordCalendarCardInputContextProviderProps = { + children: React.ReactNode; +}; + +export const RecordCalendarCardInputContextProvider = ({ + children, +}: RecordCalendarCardInputContextProviderProps) => { + const { closeInlineCell } = useInlineCell(); + const setRecordCalendarCardEditModePosition = useSetRecoilComponentState( + recordCalendarCardEditModePositionComponentState, + ); + + const closeInlineCellAndResetEditModePosition = useCallback(() => { + setRecordCalendarCardEditModePosition(null); + closeInlineCell(); + }, [closeInlineCell, setRecordCalendarCardEditModePosition]); + + const instanceId = useAvailableComponentInstanceId( + RecordFieldComponentInstanceContext, + ); + + const { persistFieldFromFieldInputContext } = + usePersistFieldFromFieldInputContext(); + + const handleEnter: FieldInputEvent = ({ newValue, skipPersist }) => { + if (skipPersist !== true) { + persistFieldFromFieldInputContext(newValue); + } + + closeInlineCellAndResetEditModePosition(); + }; + + const handleSubmit: FieldInputEvent = ({ newValue, skipPersist }) => { + if (skipPersist !== true) { + persistFieldFromFieldInputContext(newValue); + } + + closeInlineCellAndResetEditModePosition(); + }; + + const handleCancel = () => { + closeInlineCellAndResetEditModePosition(); + }; + + const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback( + ({ snapshot }) => + ({ newValue, event, skipPersist }) => { + const currentFocusId = snapshot + .getLoadable(currentFocusIdSelector) + .getValue(); + + if (currentFocusId !== instanceId) { + return; + } + event?.preventDefault(); + event?.stopImmediatePropagation(); + + if (skipPersist !== true) { + persistFieldFromFieldInputContext(newValue); + } + + closeInlineCellAndResetEditModePosition(); + }, + [ + closeInlineCellAndResetEditModePosition, + instanceId, + persistFieldFromFieldInputContext, + ], + ); + + const handleEscape: FieldInputEvent = ({ newValue, skipPersist }) => { + if (skipPersist !== true) { + persistFieldFromFieldInputContext(newValue); + } + + closeInlineCellAndResetEditModePosition(); + }; + + const handleTab: FieldInputEvent = ({ newValue, skipPersist }) => { + if (skipPersist !== true) { + persistFieldFromFieldInputContext(newValue); + } + + closeInlineCellAndResetEditModePosition(); + }; + + const handleShiftTab: FieldInputEvent = ({ newValue, skipPersist }) => { + if (skipPersist !== true) { + persistFieldFromFieldInputContext(newValue); + } + + closeInlineCellAndResetEditModePosition(); + }; + + return ( + + {children} + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx new file mode 100644 index 00000000000..c4f0bf41ea4 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCard.tsx @@ -0,0 +1,41 @@ +import { RecordCalendarCardCellEditModePortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellEditModePortal'; +import { RecordCalendarCardCellHoveredPortal } from '@/object-record/record-calendar/record-calendar-card/anchored-portal/components/RecordCalendarCardCellHoveredPortal'; +import { RecordCalendarCardBody } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody'; +import { RecordCalendarCardHeader } from '@/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader'; +import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext'; +import { RecordCard } from '@/object-record/record-card/components/RecordCard'; +import styled from '@emotion/styled'; + +const StyledContainer = styled.div` + display: flex; +`; + +const StyledRecordCard = styled(RecordCard)` + margin-bottom: ${({ theme }) => theme.spacing(1)}; +`; + +type RecordCalendarCardProps = { + recordId: string; +}; + +export const RecordCalendarCard = ({ recordId }: RecordCalendarCardProps) => { + return ( + + + + + + + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx similarity index 78% rename from packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardBody.tsx rename to packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx index 69019631a62..46f5695a28c 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardBody.tsx @@ -1,7 +1,8 @@ import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly'; import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; -import { RECORD_BOARD_CARD_INPUT_ID_PREFIX } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix'; import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { RECORD_CALENDAR_CARD_INPUT_ID_PREFIX } from '@/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix'; +import { recordCalendarCardHoverPositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState'; import { RecordCardBodyContainer } from '@/object-record/record-card/components/RecordCardBodyContainer'; import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector'; import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext'; @@ -10,6 +11,7 @@ import { useRecordIndexContextOrThrow } from '@/object-record/record-index/conte import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState'; type RecordCalendarCardBodyProps = { recordId: string; @@ -36,9 +38,17 @@ export const RecordCalendarCardBody = ({ recordField.fieldMetadataItemId !== labelIdentifierFieldMetadataItem?.id, ); + const setRecordCalendarCardHoverPosition = useSetRecoilComponentState( + recordCalendarCardHoverPositionComponentState, + ); + + const handleMouseEnter = (index: number) => { + setRecordCalendarCardHoverPosition(index); + }; + return ( - {visibleRecordFieldsExceptLabelIdentifier.map((recordField) => { + {visibleRecordFieldsExceptLabelIdentifier.map((recordField, index) => { const correspondingFieldDefinition = fieldDefinitionByFieldMetadataItemId[recordField.fieldMetadataItemId]; @@ -63,8 +73,8 @@ export const RecordCalendarCardBody = ({ useUpdateRecord: () => [() => undefined, { loading: false }], isDisplayModeFixHeight: true, triggerEvent: 'CLICK', - anchorId: `${RECORD_BOARD_CARD_INPUT_ID_PREFIX}-${recordId}-${correspondingFieldDefinition.metadata.fieldName}`, - onMouseEnter: () => {}, + anchorId: `${RECORD_CALENDAR_CARD_INPUT_ID_PREFIX}-${recordId}-${correspondingFieldDefinition.metadata.fieldName}`, + onMouseEnter: () => handleMouseEnter(index), }} > diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader.tsx similarity index 100% rename from packages/twenty-front/src/modules/object-record/record-calendar/card/components/RecordCalendarCardHeader.tsx rename to packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/components/RecordCalendarCardHeader.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix.ts b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix.ts new file mode 100644 index 00000000000..5490e1e1c26 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/constants/RecordCalendarCardInputIdPrefix.ts @@ -0,0 +1 @@ +export const RECORD_CALENDAR_CARD_INPUT_ID_PREFIX = 'record-calendar-card'; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/hooks/useRecordCalendarCardMetadataFromPosition.ts b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/hooks/useRecordCalendarCardMetadataFromPosition.ts new file mode 100644 index 00000000000..4242dc2675d --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/hooks/useRecordCalendarCardMetadataFromPosition.ts @@ -0,0 +1,57 @@ +import { useRecordCalendarContextOrThrow } from '@/object-record/record-calendar/contexts/RecordCalendarContext'; +import { recordCalendarCardEditModePositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState'; +import { recordCalendarCardHoverPositionComponentState } from '@/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState'; +import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector'; +import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; +import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; +import { isDefined } from 'twenty-shared/utils'; + +export const useRecordCalendarCardMetadataFromPosition = () => { + const { objectMetadataItem } = useRecordCalendarContextOrThrow(); + + const hoverPosition = useRecoilComponentValue( + recordCalendarCardHoverPositionComponentState, + ); + + const editModePosition = useRecoilComponentValue( + recordCalendarCardEditModePositionComponentState, + ); + + const visibleRecordFields = useRecoilComponentValue( + visibleRecordFieldsComponentSelector, + ); + + const { labelIdentifierFieldMetadataItem } = useRecordIndexContextOrThrow(); + + const visibleRecordFieldsFiltered = visibleRecordFields.filter( + (recordField) => + labelIdentifierFieldMetadataItem?.id !== recordField.fieldMetadataItemId, + ); + + const hoveredRecordField = isDefined(hoverPosition) + ? visibleRecordFieldsFiltered.at(hoverPosition) + : undefined; + + const editedRecordField = isDefined(editModePosition) + ? visibleRecordFieldsFiltered.at(editModePosition) + : undefined; + + const hoveredFieldMetadataItem = isDefined(hoveredRecordField) + ? objectMetadataItem.fields.find( + (fieldMetadataItem) => + fieldMetadataItem.id === hoveredRecordField.fieldMetadataItemId, + ) + : undefined; + + const editedFieldMetadataItem = isDefined(editedRecordField) + ? objectMetadataItem.fields.find( + (fieldMetadataItem) => + fieldMetadataItem.id === editedRecordField.fieldMetadataItemId, + ) + : undefined; + + return { + hoveredFieldMetadataItem, + editedFieldMetadataItem, + }; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext.ts b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext.ts new file mode 100644 index 00000000000..b7637590743 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext.ts @@ -0,0 +1,4 @@ +import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext'; + +export const RecordCalendarCardComponentInstanceContext = + createComponentInstanceContext(); diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState.ts b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState.ts new file mode 100644 index 00000000000..bf43d7a97a6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/recordCalendarCardEditModePositionComponentState.ts @@ -0,0 +1,9 @@ +import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordCalendarCardEditModePositionComponentState = + createComponentState({ + key: 'recordCalendarCardEditModePositionComponentState', + defaultValue: null, + componentInstanceContext: RecordCalendarCardComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState.ts b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState.ts new file mode 100644 index 00000000000..45313e219a6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/record-calendar-card/states/recordCalendarCardHoverPositionComponentState.ts @@ -0,0 +1,9 @@ +import { RecordCalendarCardComponentInstanceContext } from '@/object-record/record-calendar/record-calendar-card/states/contexts/RecordCalendarCardComponentInstanceContext'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordCalendarCardHoverPositionComponentState = + createComponentState({ + key: 'recordCalendarCardHoverPositionComponentState', + defaultValue: null, + componentInstanceContext: RecordCalendarCardComponentInstanceContext, + }); diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx index 632a022e6f3..24900ba5d11 100644 --- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCardBodyContainer.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -const StyledBoardCardBody = styled.div` +const StyledCardBodyContainer = styled.div` display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(0.5)}; @@ -18,4 +18,4 @@ const StyledBoardCardBody = styled.div` } `; -export { StyledBoardCardBody as RecordCardBodyContainer }; +export { StyledCardBodyContainer as RecordCardBodyContainer };