Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remap items in board #3643

Merged
merged 2 commits into from
Jan 26, 2024
Merged

Remap items in board #3643

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2022cbd
Remap items in board
charlesBochet Jan 26, 2024
f3d15f1
Fix according to review
charlesBochet Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { DragDropContext } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
import { useRecoilValue } from 'recoil';

import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { RecordBoardColumn } from '@/object-record/record-board/record-board-column/components/RecordBoardColumn';
import { RecordBoardScope } from '@/object-record/record-board/scopes/RecordBoardScope';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
Expand Down Expand Up @@ -40,7 +40,7 @@ const StyledBoardHeader = styled.div`
export const RecordBoard = ({ recordBoardId }: RecordBoardProps) => {
const boardRef = useRef<HTMLDivElement>(null);

const { getColumnIdsState } = useRecordBoard(recordBoardId);
const { getColumnIdsState } = useRecordBoardStates(recordBoardId);

const columnIds = useRecoilValue(getColumnIdsState());

Expand Down
21 changes: 21 additions & 0 deletions ...wenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import { RecordBoardScopeInternalContext } from '@/object-record/record-board/sc
import { isFirstRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isFirstRecordBoardColumnFamilyStateScopeMap';
import { isLastRecordBoardColumnFamilyStateScopeMap } from '@/object-record/record-board/states/isLastRecordBoardColumnFamilyStateScopeMap';
import { recordBoardColumnIdsStateScopeMap } from '@/object-record/record-board/states/recordBoardColumnIdsStateScopeMap';
import { recordBoardFieldDefinitionsStateScopeMap } from '@/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap';
import { recordBoardFiltersStateScopeMap } from '@/object-record/record-board/states/recordBoardFiltersStateScopeMap';
import { recordBoardObjectMetadataSingularNameStateScopeMap } from '@/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap';
import { recordBoardRecordIdsByColumnIdFamilyStateScopeMap } from '@/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap';
import { recordBoardSortsStateScopeMap } from '@/object-record/record-board/states/recordBoardSortsStateScopeMap';
import { recordBoardColumnsFamilySelectorScopeMap } from '@/object-record/record-board/states/selectors/recordBoardColumnsFamilySelectorScopeMap';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState';
Expand All @@ -16,6 +21,10 @@ export const useRecordBoardStates = (recordBoardId?: string) => {

return {
scopeId,
getObjectMetadataSingularNameState: getState(
recordBoardObjectMetadataSingularNameStateScopeMap,
scopeId,
),
getColumnIdsState: getState(recordBoardColumnIdsStateScopeMap, scopeId),
isFirstColumnFamilyState: getFamilyState(
isFirstRecordBoardColumnFamilyStateScopeMap,
Expand All @@ -29,5 +38,17 @@ export const useRecordBoardStates = (recordBoardId?: string) => {
recordBoardColumnsFamilySelectorScopeMap,
scopeId,
),

getFiltersState: getState(recordBoardFiltersStateScopeMap, scopeId),
getSortsState: getState(recordBoardSortsStateScopeMap, scopeId),
getFieldDefinitionsState: getState(
recordBoardFieldDefinitionsStateScopeMap,
scopeId,
),

recordBoardRecordIdsByColumnIdFamilyState: getFamilyState(
recordBoardRecordIdsByColumnIdFamilyStateScopeMap,
scopeId,
),
};
};
4 changes: 2 additions & 2 deletions ...y-front/src/modules/object-record/record-board/hooks/internal/useSetRecordBoardColumns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const useSetRecordBoardColumns = (recordBoardId?: string) => {
const { scopeId, getColumnIdsState, columnsFamilySelector } =
useRecordBoardStates(recordBoardId);

const setRecordBoardColumns = useRecoilCallback(
const setColumns = useRecoilCallback(
({ set, snapshot }) =>
(columns: RecordBoardColumnDefinition[]) => {
const currentColumnsIds = snapshot
Expand Down Expand Up @@ -43,6 +43,6 @@ export const useSetRecordBoardColumns = (recordBoardId?: string) => {

return {
scopeId,
setRecordBoardColumns,
setColumns,
};
};
44 changes: 44 additions & 0 deletions ...front/src/modules/object-record/record-board/hooks/internal/useSetRecordBoardRecordIds.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useRecoilCallback } from 'recoil';

import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';

export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
const {
scopeId,
recordBoardRecordIdsByColumnIdFamilyState,
columnsFamilySelector,
getColumnIdsState,
} = useRecordBoardStates(recordBoardId);

const setRecordIds = useRecoilCallback(
({ set, snapshot }) =>
(records: ObjectRecord[]) => {
const columnIds = snapshot.getLoadable(getColumnIdsState()).getValue();

columnIds.forEach((columnId) => {
const column = snapshot
.getLoadable(columnsFamilySelector(columnId))
.getValue();

const columnRecordIds = records
.filter((record) => record.stage === column?.value)
.map((record) => record.id);
set(
recordBoardRecordIdsByColumnIdFamilyState(columnId),
columnRecordIds,
);
});
},
[
columnsFamilySelector,
getColumnIdsState,
recordBoardRecordIdsByColumnIdFamilyState,
],
);

return {
scopeId,
setRecordIds,
};
};
15 changes: 10 additions & 5 deletions packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
import { useSetRecoilState } from 'recoil';

import { useRecordBoardStates } from '@/object-record/record-board/hooks/internal/useRecordBoardStates';
import { useSetRecordBoardColumns } from '@/object-record/record-board/hooks/internal/useSetRecordBoardColumns';
import { useSetRecordBoardRecordIds } from '@/object-record/record-board/hooks/internal/useSetRecordBoardRecordIds';

export const useRecordBoard = (recordBoardId?: string) => {
const { scopeId, getColumnIdsState, columnsFamilySelector } =
const { scopeId, getFieldDefinitionsState } =
useRecordBoardStates(recordBoardId);

const { setRecordBoardColumns } = useSetRecordBoardColumns(recordBoardId);
const { setColumns } = useSetRecordBoardColumns(recordBoardId);
const { setRecordIds } = useSetRecordBoardRecordIds(recordBoardId);
const setFieldDefinitions = useSetRecoilState(getFieldDefinitionsState());

return {
scopeId,
getColumnIdsState,
columnsFamilySelector,
setRecordBoardColumns,
setColumns,
setRecordIds,
setFieldDefinitions,
};
};
16 changes: 10 additions & 6 deletions ...c/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export const RecordBoardColumn = ({
isFirstColumnFamilyState,
isLastColumnFamilyState,
columnsFamilySelector,
recordBoardRecordIdsByColumnIdFamilyState,
} = useRecordBoardStates();
const columnDefinition = useRecoilValue(
columnsFamilySelector(recordBoardColumnId),
Expand All @@ -46,7 +47,11 @@ export const RecordBoardColumn = ({
isLastColumnFamilyState(recordBoardColumnId),
);

if (!columnDefinition) {
const recordIds = useRecoilValue(
recordBoardRecordIdsByColumnIdFamilyState(recordBoardColumnId),
);

if (!columnDefinition || !recordIds) {
return null;
}

Expand All @@ -65,11 +70,10 @@ export const RecordBoardColumn = ({
<RecordBoardColumnCardsContainer
droppableProvided={droppableProvided}
>
{[].map((cardId, _index) => (
<BoardCardIdContext.Provider
value={cardId}
key={cardId}
></BoardCardIdContext.Provider>
{recordIds.map((recordId) => (
<BoardCardIdContext.Provider value={recordId} key={recordId}>
<div>Card</div>
</BoardCardIdContext.Provider>
))}
</RecordBoardColumnCardsContainer>
</StyledColumn>
Expand Down
10 changes: 10 additions & 0 deletions ...src/modules/object-record/record-board/states/recordBoardFieldDefinitionsStateScopeMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
import { RecordBoardFieldDefinition } from '@/object-record/record-board/types/RecordBoardFieldDefinition';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

export const recordBoardFieldDefinitionsStateScopeMap = createStateScopeMap<
RecordBoardFieldDefinition<FieldMetadata>[]
>({
key: 'recordBoardFieldDefinitionsStateScopeMap',
defaultValue: [],
});
7 changes: 7 additions & 0 deletions ...ty-front/src/modules/object-record/record-board/states/recordBoardFiltersStateScopeMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

export const recordBoardFiltersStateScopeMap = createStateScopeMap<Filter[]>({
key: 'recordBoardFiltersStateScopeMap',
defaultValue: [],
});
7 changes: 7 additions & 0 deletions ...s/object-record/record-board/states/recordBoardObjectMetadataSingularNameStateScopeMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

export const recordBoardObjectMetadataSingularNameStateScopeMap =
createStateScopeMap<string | undefined>({
key: 'recordBoardObjectMetadataSingularNameStateScopeMap',
defaultValue: undefined,
});
7 changes: 7 additions & 0 deletions ...es/object-record/record-board/states/recordBoardRecordIdsByColumnIdFamilyStateScopeMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';

export const recordBoardRecordIdsByColumnIdFamilyStateScopeMap =
createFamilyStateScopeMap<string[], string>({
key: 'recordBoardRecordIdsByColumnIdFamilyStateScopeMap',
defaultValue: [],
});
7 changes: 7 additions & 0 deletions ...enty-front/src/modules/object-record/record-board/states/recordBoardSortsStateScopeMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

export const recordBoardSortsStateScopeMap = createStateScopeMap<Sort[]>({
key: 'recordBoardSortsStateScopeMap',
defaultValue: [],
});
1 change: 1 addition & 0 deletions .../twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ThemeColor } from '@/ui/theme/constants/colors';
export type RecordBoardColumnDefinition = {
id: string;
title: string;
value: string;
position: number;
color: ThemeColor;
actions: RecordBoardColumnAction[];
Expand Down
9 changes: 9 additions & 0 deletions ...s/twenty-front/src/modules/object-record/record-board/types/RecordBoardFieldDefinition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { FieldDefinition } from '@/object-record/field/types/FieldDefinition';
import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';

export type RecordBoardFieldDefinition<T extends FieldMetadata> =
FieldDefinition<T> & {
viewFieldId?: string;
position: number;
isVisible?: boolean;
};
4 changes: 2 additions & 2 deletions ...nty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { RecordBoard } from '@/object-record/record-board/components/RecordBoard
type RecordIndexBoardContainerProps = {
recordBoardId: string;
viewBarId: string;
objectNamePlural: string;
objectNameSingular: string;
createRecord: () => Promise<void>;
};

export const RecordIndexBoardContainer = ({
recordBoardId,
}: RecordIndexBoardContainerProps) => {
return <RecordBoard recordBoardId={recordBoardId}></RecordBoard>;
return <RecordBoard recordBoardId={recordBoardId} />;
};
22 changes: 10 additions & 12 deletions ...ont/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,36 @@ import { useCallback, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
import { useLoadRecordIndexBoard } from '@/object-record/record-index/hooks/useLoadRecordIndexBoard';
import { computeRecordBoardColumnDefinitionsFromObjectMetadata } from '@/object-record/utils/computeRecordBoardColumnDefinitionsFromObjectMetadata';

type RecordIndexBoardContainerEffectProps = {
objectNamePlural: string;
objectNameSingular: string;
recordBoardId: string;
viewBarId: string;
};

export const RecordIndexBoardContainerEffect = ({
objectNamePlural,
objectNameSingular,
recordBoardId,
}: RecordIndexBoardContainerEffectProps) => {
const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});

const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});

useLoadRecordIndexBoard(objectNameSingular, recordBoardId);

const navigate = useNavigate();

const navigateToSelectSettings = useCallback(() => {
navigate(`/settings/objects/${objectNamePlural}`);
}, [navigate, objectNamePlural]);
navigate(`/settings/objects/${objectNameSingular}`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? I think the URL is using plural form as of today, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right!

}, [navigate, objectNameSingular]);

const { setRecordBoardColumns } = useRecordBoard(recordBoardId);
const { setColumns } = useRecordBoard(recordBoardId);

useEffect(() => {
setRecordBoardColumns(
setColumns(
computeRecordBoardColumnDefinitionsFromObjectMetadata(
objectMetadataItem,
navigateToSelectSettings,
Expand All @@ -43,7 +41,7 @@ export const RecordIndexBoardContainerEffect = ({
navigateToSelectSettings,
objectMetadataItem,
objectNameSingular,
setRecordBoardColumns,
setColumns,
]);

return <></>;
Expand Down
23 changes: 19 additions & 4 deletions ...s/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState } from 'react';
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';

import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
Expand All @@ -10,6 +11,9 @@ import { RecordIndexBoardContainerEffect } from '@/object-record/record-index/co
import { RecordIndexTableContainer } from '@/object-record/record-index/components/RecordIndexTableContainer';
import { RecordIndexTableContainerEffect } from '@/object-record/record-index/components/RecordIndexTableContainerEffect';
import { RecordIndexViewBarEffect } from '@/object-record/record-index/components/RecordIndexViewBarEffect';
import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/states/recordIndexFieldDefinitionsState';
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { TableOptionsDropdown } from '@/object-record/record-table/options/components/TableOptionsDropdown';
Expand Down Expand Up @@ -56,6 +60,12 @@ export const RecordIndexContainer = ({
const { columnDefinitions } =
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);

const setRecordIndexFieldDefinitions = useSetRecoilState(
recordIndexFieldDefinitionsState,
);
const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState);
const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState);

const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();

Expand Down Expand Up @@ -91,12 +101,17 @@ export const RecordIndexContainer = ({
setTableColumns(
mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
);
setRecordIndexFieldDefinitions(
mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
);
}}
onViewFiltersChange={(viewFilters) => {
setTableFilters(mapViewFiltersToFilters(viewFilters));
setRecordIndexFilters(mapViewFiltersToFilters(viewFilters));
}}
onViewSortsChange={(viewSorts) => {
setTableSorts(mapViewSortsToSorts(viewSorts));
setRecordIndexSorts(mapViewSortsToSorts(viewSorts));
}}
onViewTypeChange={(viewType: ViewType) => {
setRecordIndexViewType(viewType);
Expand All @@ -112,11 +127,11 @@ export const RecordIndexContainer = ({
<RecordIndexTableContainer
recordTableId={recordIndexId}
viewBarId={recordIndexId}
objectNamePlural={objectNamePlural}
objectNameSingular={objectNameSingular}
createRecord={createRecord}
/>
<RecordIndexTableContainerEffect
objectNamePlural={objectNamePlural}
objectNameSingular={objectNameSingular}
recordTableId={recordIndexId}
viewBarId={recordIndexId}
/>
Expand All @@ -127,11 +142,11 @@ export const RecordIndexContainer = ({
<RecordIndexBoardContainer
recordBoardId={recordIndexId}
viewBarId={recordIndexId}
objectNamePlural={objectNamePlural}
objectNameSingular={objectNameSingular}
createRecord={createRecord}
/>
<RecordIndexBoardContainerEffect
objectNamePlural={objectNamePlural}
objectNameSingular={objectNameSingular}
recordBoardId={recordIndexId}
viewBarId={recordIndexId}
/>
Expand Down
Loading
Loading