diff --git a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx index effe58897..bec648078 100644 --- a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx +++ b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx @@ -1,6 +1,8 @@ +import { useCallback } from 'react'; import styled from '@emotion/styled'; import { mapBoardFieldDefinitionsToViewFields } from '@/companies/utils/mapBoardFieldDefinitionsToViewFields'; +import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord'; import { RecordBoard, RecordBoardProps, @@ -8,6 +10,7 @@ import { import { RecordBoardEffect } from '@/object-record/record-board/components/RecordBoardEffect'; import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId'; import { RecordBoardOptionsDropdown } from '@/object-record/record-board/options/components/RecordBoardOptionsDropdown'; +import { BoardColumnDefinition } from '@/object-record/record-board/types/BoardColumnDefinition'; import { ViewBar } from '@/views/components/ViewBar'; import { useViewFields } from '@/views/hooks/internal/useViewFields'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; @@ -37,12 +40,31 @@ export const CompanyBoard = ({ const { persistViewFields } = useViewFields(viewBarId); + const { createOneRecord } = useCreateOneRecord({ + objectNameSingular: 'pipelineStep', + }); + + const onStageAdd = useCallback( + (stage: BoardColumnDefinition) => { + createOneRecord({ + name: stage.title, + color: stage.colorCode, + position: stage.position, + id: stage.id, + }); + }, + [createOneRecord], + ); + return ( + } optionsDropdownScopeId={BoardOptionsDropdownId} /> diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts index f706d9e63..6cc39a24f 100644 --- a/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts +++ b/packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts @@ -21,6 +21,7 @@ export const getObjectRecordIdentifier = ({ name: record?.company?.name, avatarUrl: record.avatarUrl, avatarType: 'rounded', + linkToShowPage: `/opportunities/${record.id}`, }; } @@ -64,13 +65,13 @@ export const getObjectRecordIdentifier = ({ objectMetadataItem, }); - const linkToEntity = `${basePathToShowPage}${record.id}`; + const linkToShowPage = `${basePathToShowPage}${record.id}`; return { id: record.id, name: labelIdentifierFieldValue, avatarUrl, avatarType, - linkToEntity, + linkToShowPage, }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx index 237469edd..40b09e085 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx @@ -22,7 +22,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate'; import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle'; -import { ThemeColor } from '@/ui/theme/constants/colors'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection'; import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates'; @@ -39,13 +38,6 @@ export type RecordBoardOptionsDropdownContentProps = { type BoardOptionsMenu = 'fields' | 'stage-creation' | 'stages'; -type ColumnForCreate = { - id: string; - colorCode: ThemeColor; - position: number; - title: string; -}; - export const RecordBoardOptionsDropdownContent = ({ onStageAdd, recordBoardId, @@ -85,7 +77,7 @@ export const RecordBoardOptionsDropdownContent = ({ if (currentMenu !== 'stage-creation' || !stageInputRef?.current?.value) return; - const columnToCreate: ColumnForCreate = { + const columnToCreate: BoardColumnDefinition = { id: v4(), colorCode: 'gray', position: boardColumns.length, @@ -143,7 +135,6 @@ export const RecordBoardOptionsDropdownContent = ({ const name = viewEditInputRef.current?.value; resetMenu(); setViewEditMode('none'); - closeDropdown(); handleStageSubmit(); handleViewNameSubmit(name); closeDropdown(); diff --git a/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts b/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts index 6e860d20b..50856064c 100644 --- a/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts +++ b/packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts @@ -5,6 +5,5 @@ export type ObjectRecordIdentifier = { name: string; avatarUrl?: string | null; avatarType?: AvatarType | null; - linkToEntity?: string; linkToShowPage?: string; }; diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index bd6d27866..633a669ec 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -98,30 +98,38 @@ export const IconPicker = ({ const { getIcons, getIcon } = useIcons(); const icons = getIcons(); - - const iconKeys = useMemo(() => { + const matchingSearchIconKeys = useMemo(() => { const filteredIconKeys = icons ? Object.keys(icons).filter((iconKey) => { - return ( - iconKey !== selectedIconKey && - (!searchString || - [iconKey, convertIconKeyToLabel(iconKey)].some((label) => - label.toLowerCase().includes(searchString.toLowerCase()), - )) + if (searchString === '') { + return true; + } + + const isMatchingSearchString = [ + iconKey, + convertIconKeyToLabel(iconKey), + ].some((label) => + label.toLowerCase().includes(searchString.toLowerCase()), ); + + return isMatchingSearchString; }) : []; - return ( - selectedIconKey - ? [selectedIconKey, ...filteredIconKeys] - : filteredIconKeys - ).slice(0, 25); + const uniqueFilteredIconKeys = [ + ...new Set( + selectedIconKey + ? [selectedIconKey, ...filteredIconKeys] + : filteredIconKeys, + ), + ]; + + return uniqueFilteredIconKeys.slice(0, 25); }, [icons, searchString, selectedIconKey]); const iconKeys2d = useMemo( - () => arrayToChunks(iconKeys.slice(), 5), - [iconKeys], + () => arrayToChunks(matchingSearchIconKeys.slice(), 5), + [matchingSearchIconKeys], ); return ( @@ -151,7 +159,9 @@ export const IconPicker = ({ setSearchString(event.target.value)} + onChange={(event) => { + setSearchString(event.target.value); + }} />
- {iconKeys.map((iconKey) => ( + {matchingSearchIconKeys.map((iconKey) => ( { const { @@ -10,7 +11,7 @@ export const useDropdown = (dropdownId?: string) => { dropdownWidthState, isDropdownOpenState, } = useDropdownStates({ - dropdownScopeId: `${dropdownId}-scope`, + dropdownScopeId: getScopeIdFromComponentId(dropdownId), }); const {