From 77525103166cba362dfca365f67e60c2ca8dc6b9 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Wed, 25 Sep 2024 22:00:39 +0530
Subject: [PATCH] Kanban card creation revamp (#7169)
fixes #6957
---
.../components/RecordBoardCard.tsx | 158 ++++++++++++------
.../RecordBoardColumnCardsContainer.tsx | 4 +-
.../components/RecordBoardColumnHeader.tsx | 18 +-
.../components/RecordBoardColumnNewButton.tsx | 32 +++-
.../hooks/useAddNewCard.ts | 131 ++++++++++++++-
.../hooks/useColumnNewCardActions.ts | 38 +++++
...NewRecordByColumnIdComponentFamilyState.ts | 19 +++
.../recordBoardNewRecordByColumnIdSelector.ts | 31 ++++
.../RecordIndexPageKanbanAddButton.tsx | 35 ++--
.../useRecordIndexPageKanbanAddButton.ts | 12 --
.../modules/ui/input/components/TextInput.tsx | 1 -
11 files changed, 384 insertions(+), 95 deletions(-)
create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useColumnNewCardActions.ts
create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/recordBoardNewRecordByColumnIdComponentFamilyState.ts
create mode 100644 packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector.ts
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index 89f8952e3..4bfb9f255 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -1,9 +1,3 @@
-import styled from '@emotion/styled';
-import { ReactNode, useContext, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { AvatarChipVariant, IconEye } from 'twenty-ui';
-
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
@@ -15,15 +9,24 @@ import {
import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip';
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
+import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode';
import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
+import { TextInput } from '@/ui/input/components/TextInput';
import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
+import styled from '@emotion/styled';
+import { ReactNode, useContext, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { AvatarChipVariant, IconEye } from 'twenty-ui';
+import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard';
const StyledBoardCard = styled.div<{ selected: boolean }>`
background-color: ${({ theme, selected }) =>
@@ -61,6 +64,14 @@ const StyledBoardCard = styled.div<{ selected: boolean }>`
}
`;
+const StyledTextInput = styled(TextInput)`
+ backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+ background: ${({ theme }) => theme.background.primary};
+ box-shadow: ${({ theme }) => theme.boxShadow.strong};
+ width: ${({ theme }) => theme.spacing(53)};
+ border-radius: ${({ theme }) => theme.border.radius.sm};
+`;
+
const StyledBoardCardWrapper = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(2)};
width: 100%;
@@ -130,7 +141,21 @@ const StyledRecordInlineCellPlaceholder = styled.div`
height: 24px;
`;
-export const RecordBoardCard = () => {
+const StyledRecordInlineCell = styled(RecordInlineCell)`
+ height: 24px;
+`;
+
+export const RecordBoardCard = ({
+ isCreating = false,
+ onCreateSuccess,
+ position,
+}: {
+ isCreating?: boolean;
+ onCreateSuccess?: () => void;
+ position?: 'first' | 'last';
+}) => {
+ const [newLabelValue, setNewLabelValue] = useState('');
+ const { handleBlur, handleInputEnter } = useAddNewCard();
const { recordId } = useContext(RecordBoardCardContext);
const { updateOneRecord, objectMetadataItem } =
useContext(RecordBoardContext);
@@ -139,7 +164,6 @@ export const RecordBoardCard = () => {
isRecordBoardCardSelectedFamilyState,
visibleFieldDefinitionsState,
} = useRecordBoardStates();
-
const isCompactModeActive = useRecoilValue(isCompactModeActiveState);
const [isCardInCompactMode, setIsCardInCompactMode] = useState(true);
@@ -205,66 +229,106 @@ export const RecordBoardCard = () => {
rootMargin: '1000px',
});
- if (!record) {
- return null;
- }
-
const visibleFieldDefinitionsFiltered = visibleFieldDefinitions.filter(
(boardField) => !boardField.isLabelIdentifier,
);
+ const labelIdentifierField = visibleFieldDefinitions.find(
+ (field) => field.isLabelIdentifier,
+ );
+
return (
-
+ {!isCreating && }
{
- setIsCurrentCardSelected(!isCurrentCardSelected);
+ if (!isCreating) {
+ setIsCurrentCardSelected(!isCurrentCardSelected);
+ }
}}
>
-
- {isCompactModeActive && (
-
- {
- e.stopPropagation();
- setIsCardInCompactMode(false);
- }}
+ {isCreating && position !== undefined ? (
+
+
+ handleInputEnter(
+ labelIdentifierField?.label ?? '',
+ newLabelValue,
+ position,
+ onCreateSuccess,
+ )
+ }
+ onBlur={() =>
+ handleBlur(
+ labelIdentifierField?.label ?? '',
+ newLabelValue,
+ position,
+ onCreateSuccess,
+ )
+ }
+ onChange={(text: string) => setNewLabelValue(text)}
+ placeholder={labelIdentifierField?.label}
/>
-
- )}
-
- setIsCurrentCardSelected(!isCurrentCardSelected)}
- variant={CheckboxVariant.Secondary}
+
+ ) : (
+
-
+ )}
+
+ {!isCreating && (
+ <>
+ {isCompactModeActive && (
+
+ {
+ e.stopPropagation();
+ setIsCardInCompactMode(false);
+ }}
+ />
+
+ )}
+
+
+
+ setIsCurrentCardSelected(!isCurrentCardSelected)
+ }
+ variant={CheckboxVariant.Secondary}
+ />
+
+ >
+ )}
-
-
+
+
+
{visibleFieldDefinitionsFiltered.map((fieldDefinition) => (
{
}}
>
{inView ? (
-
+
) : (
)}
))}
-
-
+
+
);
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
index 79c786df1..93a41e910 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardsContainer.tsx
@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
import styled from '@emotion/styled';
import { Draggable, DroppableProvided } from '@hello-pangea/dnd';
+import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -110,7 +110,7 @@ export const RecordBoardColumnCardsContainer = ({
CoreObjectNameSingular.Opportunity ? (
) : (
-
+
)}
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
index a730766c5..1b0747966 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
@@ -4,10 +4,11 @@ import { IconDotsVertical, IconPlus, Tag } from 'twenty-ui';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
+import { RecordBoardCard } from '@/object-record/record-board/record-board-card/components/RecordBoardCard';
import { RecordBoardColumnDropdownMenu } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
import { useAddNewOpportunity } from '@/object-record/record-board/record-board-column/hooks/useAddNewOpportunity';
+import { useColumnNewCardActions } from '@/object-record/record-board/record-board-column/hooks/useColumnNewCardActions';
import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope';
import { RecordBoardColumnDefinitionType } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
@@ -94,16 +95,16 @@ export const RecordBoardColumnHeader = () => {
handleCancel,
handleEntitySelect,
} = useAddNewOpportunity('first');
- const { handleAddNewCardClick } = useAddNewCard('first');
+
+ const { newRecord, handleNewButtonClick, handleCreateSuccess } =
+ useColumnNewCardActions(columnDefinition.id);
const isOpportunity =
objectMetadataItem.nameSingular === CoreObjectNameSingular.Opportunity;
const handleClick = isOpportunity
? handleAddNewOpportunityClick
- : () => {
- handleAddNewCardClick();
- };
+ : () => handleNewButtonClick('first');
return (
<>
@@ -164,6 +165,13 @@ export const RecordBoardColumnHeader = () => {
stageId={columnDefinition.id}
/>
)}
+ {newRecord?.isCreating && newRecord.position === 'first' && (
+ handleCreateSuccess('first')}
+ position="first"
+ />
+ )}
{isCreatingCard && (
theme.background.primary};
@@ -15,19 +15,35 @@ const StyledButton = styled.button`
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)};
-
&:hover {
background-color: ${({ theme }) => theme.background.tertiary};
}
`;
-export const RecordBoardColumnNewButton = () => {
+export const RecordBoardColumnNewButton = ({
+ columnId,
+}: {
+ columnId: string;
+}) => {
const theme = useTheme();
- const { handleAddNewCardClick } = useAddNewCard('last');
+
+ const { newRecord, handleNewButtonClick, handleCreateSuccess } =
+ useColumnNewCardActions(columnId);
+
+ if (newRecord.isCreating && newRecord.position === 'last') {
+ return (
+ handleCreateSuccess('last')}
+ position="last"
+ />
+ );
+ }
+
return (
-
+ handleNewButtonClick('last')}>
New
-
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAddNewCard.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAddNewCard.ts
index 24cb1e158..cbc3d2e6b 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAddNewCard.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useAddNewCard.ts
@@ -1,20 +1,135 @@
import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
-import { useContext } from 'react';
+import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
+import { useCallback, useContext } from 'react';
+import { useRecoilCallback } from 'recoil';
+import { v4 as uuidv4 } from 'uuid';
-export const useAddNewCard = (position: string) => {
- const { columnDefinition } = useContext(RecordBoardColumnContext);
+export const useAddNewCard = () => {
+ const columnContext = useContext(RecordBoardColumnContext);
const { createOneRecord, selectFieldMetadataItem } =
useContext(RecordBoardContext);
- const handleAddNewCardClick = () => {
- createOneRecord({
- [selectFieldMetadataItem.name]: columnDefinition.value,
- position: position,
- });
+ const getColumnDefinitionId = useCallback(
+ (columnId?: string) => {
+ const columnDefinitionId = columnId || columnContext?.columnDefinition.id;
+ if (!columnDefinitionId) {
+ throw new Error('Column ID is required');
+ }
+ return columnDefinitionId;
+ },
+ [columnContext],
+ );
+
+ const addNewCard = useCallback(
+ (set: any, columnDefinitionId: string, position: 'first' | 'last') => {
+ set(
+ recordBoardNewRecordByColumnIdSelector({
+ familyKey: columnDefinitionId,
+ scopeId: columnDefinitionId,
+ }),
+ {
+ id: uuidv4(),
+ columnId: columnDefinitionId,
+ isCreating: true,
+ position,
+ },
+ );
+ },
+ [],
+ );
+
+ const createRecord = useCallback(
+ (
+ labelIdentifier: string,
+ labelValue: string,
+ position: 'first' | 'last',
+ ) => {
+ if (labelValue !== '') {
+ createOneRecord({
+ [selectFieldMetadataItem.name]: columnContext?.columnDefinition.value,
+ position,
+ [labelIdentifier.toLowerCase()]: labelValue,
+ });
+ }
+ },
+ [createOneRecord, columnContext, selectFieldMetadataItem],
+ );
+
+ const handleAddNewCardClick = useRecoilCallback(
+ ({ set }) =>
+ (
+ labelIdentifier: string,
+ labelValue: string,
+ position: 'first' | 'last',
+ columnId?: string,
+ ): void => {
+ const columnDefinitionId = getColumnDefinitionId(columnId);
+ addNewCard(set, columnDefinitionId, position);
+ createRecord(labelIdentifier, labelValue, position);
+ },
+ [addNewCard, createRecord, getColumnDefinitionId],
+ );
+
+ const handleCreateSuccess = useRecoilCallback(
+ ({ set }) =>
+ (position: 'first' | 'last', columnId?: string): void => {
+ const columnDefinitionId = getColumnDefinitionId(columnId);
+ set(
+ recordBoardNewRecordByColumnIdSelector({
+ familyKey: columnDefinitionId,
+ scopeId: columnDefinitionId,
+ }),
+ {
+ id: '',
+ columnId: columnDefinitionId,
+ isCreating: false,
+ position,
+ },
+ );
+ },
+ [getColumnDefinitionId],
+ );
+
+ const handleCreate = (
+ labelIdentifier: string,
+ labelValue: string,
+ position: 'first' | 'last',
+ onCreateSuccess?: () => void,
+ ) => {
+ if (labelValue.trim() !== '' && position !== undefined) {
+ handleAddNewCardClick(labelIdentifier, labelValue.trim(), position);
+ onCreateSuccess?.();
+ }
+ };
+
+ const handleBlur = (
+ labelIdentifier: string,
+ labelValue: string,
+ position: 'first' | 'last',
+ onCreateSuccess?: () => void,
+ ) => {
+ if (labelValue.trim() === '') {
+ onCreateSuccess?.();
+ } else {
+ handleCreate(labelIdentifier, labelValue, position, onCreateSuccess);
+ }
+ };
+
+ const handleInputEnter = (
+ labelIdentifier: string,
+ labelValue: string,
+ position: 'first' | 'last',
+ onCreateSuccess?: () => void,
+ ) => {
+ handleCreate(labelIdentifier, labelValue, position, onCreateSuccess);
};
return {
handleAddNewCardClick,
+ handleCreateSuccess,
+ handleCreate,
+ handleBlur,
+ handleInputEnter,
};
};
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useColumnNewCardActions.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useColumnNewCardActions.ts
new file mode 100644
index 000000000..8fd3ab2f4
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/hooks/useColumnNewCardActions.ts
@@ -0,0 +1,38 @@
+import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
+import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
+import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
+import { useRecoilValue } from 'recoil';
+
+export const useColumnNewCardActions = (columnId: string) => {
+ const { visibleFieldDefinitionsState } = useRecordBoardStates();
+ const visibleFieldDefinitions = useRecoilValue(
+ visibleFieldDefinitionsState(),
+ );
+ const labelIdentifierField = visibleFieldDefinitions.find(
+ (field) => field.isLabelIdentifier,
+ );
+
+ const { handleAddNewCardClick, handleCreateSuccess } = useAddNewCard();
+
+ const newRecord = useRecoilValue(
+ recordBoardNewRecordByColumnIdSelector({
+ familyKey: columnId,
+ scopeId: columnId,
+ }),
+ );
+
+ const handleNewButtonClick = (position: 'first' | 'last') => {
+ handleAddNewCardClick(
+ labelIdentifierField?.label ?? '',
+ '',
+ position,
+ columnId,
+ );
+ };
+
+ return {
+ newRecord,
+ handleNewButtonClick,
+ handleCreateSuccess,
+ };
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardNewRecordByColumnIdComponentFamilyState.ts b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardNewRecordByColumnIdComponentFamilyState.ts
new file mode 100644
index 000000000..bc362d973
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/recordBoardNewRecordByColumnIdComponentFamilyState.ts
@@ -0,0 +1,19 @@
+import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
+
+export type NewCard = {
+ id: string;
+ columnId: string;
+ isCreating: boolean;
+ position: 'first' | 'last';
+};
+
+export const recordBoardNewRecordByColumnIdComponentFamilyState =
+ createComponentFamilyState({
+ key: 'recordBoardNewRecordByColumnIdComponentFamilyState',
+ defaultValue: {
+ id: '',
+ columnId: '',
+ isCreating: false,
+ position: 'last',
+ },
+ });
diff --git a/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector.ts b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector.ts
new file mode 100644
index 000000000..122daffa3
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector.ts
@@ -0,0 +1,31 @@
+import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector';
+import {
+ NewCard,
+ recordBoardNewRecordByColumnIdComponentFamilyState,
+} from '../recordBoardNewRecordByColumnIdComponentFamilyState';
+
+export const recordBoardNewRecordByColumnIdSelector =
+ createComponentFamilySelector({
+ key: 'recordBoardNewRecordByColumnIdSelector',
+ get:
+ ({ familyKey, scopeId }: { familyKey: string; scopeId: string }) =>
+ ({ get }) => {
+ return get(
+ recordBoardNewRecordByColumnIdComponentFamilyState({
+ familyKey,
+ scopeId,
+ }),
+ ) as NewCard;
+ },
+ set:
+ ({ familyKey, scopeId }: { familyKey: string; scopeId: string }) =>
+ ({ set }, newValue) => {
+ set(
+ recordBoardNewRecordByColumnIdComponentFamilyState({
+ familyKey,
+ scopeId,
+ }),
+ newValue as NewCard,
+ );
+ },
+ });
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
index 679896c32..ea224bda6 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddButton.tsx
@@ -1,5 +1,6 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
+import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
import { RecordIndexPageKanbanAddMenuItem } from '@/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
@@ -37,8 +38,15 @@ export const RecordIndexPageKanbanAddButton = () => {
RecordIndexRootPropsContext,
);
- const { columnIdsState } = useRecordBoardStates(recordIndexId);
+ const { columnIdsState, visibleFieldDefinitionsState } =
+ useRecordBoardStates(recordIndexId);
const columnIds = useRecoilValue(columnIdsState);
+ const visibleFieldDefinitions = useRecoilValue(
+ visibleFieldDefinitionsState(),
+ );
+ const labelIdentifierField = visibleFieldDefinitions.find(
+ (field) => field.isLabelIdentifier,
+ );
const {
setHotkeyScopeAndMemorizePreviousScope,
@@ -50,14 +58,12 @@ export const RecordIndexPageKanbanAddButton = () => {
const { closeDropdown } = useDropdown(dropdownId);
- const {
- selectFieldMetadataItem,
- isOpportunity,
- createOpportunity,
- createRecordWithoutCompany,
- } = useRecordIndexPageKanbanAddButton({
- objectNamePlural,
- });
+ const { selectFieldMetadataItem, isOpportunity, createOpportunity } =
+ useRecordIndexPageKanbanAddButton({
+ objectNamePlural,
+ });
+
+ const { handleAddNewCardClick } = useAddNewCard();
const handleItemClick = useCallback(
(columnDefinition: RecordBoardColumnDefinition) => {
@@ -68,18 +74,23 @@ export const RecordIndexPageKanbanAddButton = () => {
RelationPickerHotkeyScope.RelationPicker,
);
} else {
- createRecordWithoutCompany(columnDefinition);
+ handleAddNewCardClick(
+ labelIdentifierField?.label ?? '',
+ '',
+ 'first',
+ columnDefinition.id,
+ );
closeDropdown();
}
},
[
isOpportunity,
- createRecordWithoutCompany,
+ handleAddNewCardClick,
setHotkeyScopeAndMemorizePreviousScope,
closeDropdown,
+ labelIdentifierField,
],
);
-
const handleEntitySelect = useCallback(
(company?: EntityForSelect) => {
setIsSelectingCompany(false);
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts
index 1d64225bf..ad5754dec 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useRecordIndexPageKanbanAddButton.ts
@@ -45,21 +45,9 @@ export const useRecordIndexPageKanbanAddButton = ({
}
};
- const createRecordWithoutCompany = (
- columnDefinition: RecordBoardColumnDefinition,
- ) => {
- if (isDefined(selectFieldMetadataItem)) {
- createOneRecord({
- [selectFieldMetadataItem.name]: columnDefinition?.value,
- position: 'first',
- });
- }
- };
-
return {
selectFieldMetadataItem,
isOpportunity,
createOpportunity,
- createRecordWithoutCompany,
};
};
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
index fcd311e5b..b0841eaa7 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
@@ -89,7 +89,6 @@ export const TextInput = ({
onInputEnter?.();
if (isDefined(inputRef) && 'current' in inputRef) {
- inputRef.current?.blur();
setIsFocused(false);
}
},