twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-07 09:17:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

2426 timebox refactor board with the new scope architecture (#2789)

Browse Source 
* scoped states: wip

* scoped states: wip

* wip

* wip

* create boardFiltersScopedState and boardSortsScopedState

* wip

* reorganize hooks

* update hooks

* wip

* wip

* fix options dropdown

* clean unused selectors

* fields are working

* fix filter an sort

* fix entity count

* rename hooks

* rename states

* clean unused context

* fix recoil scope bug

* objectNameSingular instead of objectNamePlural
This commit is contained in:
bosiraphael 2023-12-05 12:15:20 +01:00 committed by GitHub
parent 5c0ad30186
commit 95a1cfeec3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 1204 additions and 765 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/modules/companies/__stories__/Board.stories.tsx
View File

@ -5,17 +5,12 @@ import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { CompanyBoard } from '../board/components/CompanyBoard';
import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
const meta: Meta<typeof CompanyBoard> = {
title: 'Modules/Companies/Board',
component: CompanyBoard,
decorators: [
(Story) => (
<CompanyBoardRecoilScopeContext.Provider value="opportunities">
<Story />
</CompanyBoardRecoilScopeContext.Provider>
),
(Story) => <Story />,
ComponentWithRouterDecorator,
SnackBarDecorator,
],

56
front/src/modules/companies/board/components/CompanyBoard.tsx
View File

@ -1,21 +1,17 @@
import styled from '@emotion/styled';
import { BoardContext } from '@/companies/states/contexts/BoardContext';
import { mapBoardFieldDefinitionsToViewFields } from '@/companies/utils/mapBoardFieldDefinitionsToViewFields';
import { RecordBoardActionBar } from '@/ui/object/record-board/action-bar/components/RecordBoardActionBar';
import { BoardOptionsDropdownId } from '@/ui/object/record-board/components/constants/BoardOptionsDropdownId';
import {
RecordBoard,
RecordBoardProps,
} from '@/ui/object/record-board/components/RecordBoard';
import { RecordBoardContextMenu } from '@/ui/object/record-board/context-menu/components/RecordBoardContextMenu';
import { BoardOptionsDropdown } from '@/ui/object/record-board/options/components/BoardOptionsDropdown';
import { RecordBoardEffect } from '@/ui/object/record-board/components/RecordBoardEffect';
import { RecordBoardOptionsDropdown } from '@/ui/object/record-board/options/components/RecordBoardOptionsDropdown';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
import { HooksCompanyBoardEffect } from '../../components/HooksCompanyBoardEffect';
import { CompanyBoardRecoilScopeContext } from '../../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
const StyledContainer = styled.div`
display: flex;
@ -36,34 +32,38 @@ export const CompanyBoard = ({
onEditColumnTitle,
}: CompanyBoardProps) => {
const viewBarId = 'company-board-view';
const recordBoardId = 'company-board';
const { persistViewFields } = useViewFields(viewBarId);
return (
<StyledContainer>
<BoardContext.Provider
value={{
BoardRecoilScopeContext: CompanyBoardRecoilScopeContext,
onFieldsChange: (fields) => {
persistViewFields(mapBoardFieldDefinitionsToViewFields(fields));
},
<ViewBar
viewBarId={viewBarId}
optionsDropdownButton={
<RecordBoardOptionsDropdown recordBoardId={recordBoardId} />
}
optionsDropdownScopeId={recordBoardId}
/>
<HooksCompanyBoardEffect
viewBarId={viewBarId}
recordBoardId={recordBoardId}
/>
<RecordBoardEffect
recordBoardId={recordBoardId}
onFieldsChange={(fields) => {
persistViewFields(mapBoardFieldDefinitionsToViewFields(fields));
}}
>
<ViewBar
viewBarId={viewBarId}
optionsDropdownButton={<BoardOptionsDropdown />}
optionsDropdownScopeId={BoardOptionsDropdownId}
/>
<HooksCompanyBoardEffect viewBarId={viewBarId} />
<RecordBoard
boardOptions={opportunitiesBoardOptions}
onColumnAdd={onColumnAdd}
onColumnDelete={onColumnDelete}
onEditColumnTitle={onEditColumnTitle}
/>
<RecordBoardActionBar />
<RecordBoardContextMenu />
</BoardContext.Provider>
/>
<RecordBoard
recordBoardId={recordBoardId}
boardOptions={opportunitiesBoardOptions}
onColumnAdd={onColumnAdd}
onColumnDelete={onColumnDelete}
onEditColumnTitle={onEditColumnTitle}
/>
</StyledContainer>
);
};

25
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode, useContext } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { EntityChipVariant } from '@/ui/display/chip/components/EntityChip';
@ -9,15 +9,12 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext';
import { useBoardContext } from '@/ui/object/record-board/hooks/useBoardContext';
import { useCurrentCardSelected } from '@/ui/object/record-board/hooks/useCurrentCardSelected';
import { isCardInCompactViewState } from '@/ui/object/record-board/states/isCardInCompactViewState';
import { isCompactViewEnabledState } from '@/ui/object/record-board/states/isCompactViewEnabledState';
import { visibleBoardCardFieldsScopedSelector } from '@/ui/object/record-board/states/selectors/visibleBoardCardFieldsScopedSelector';
import { useCurrentRecordBoardCardSelectedInternal } from '@/ui/object/record-board/hooks/internal/useCurrentRecordBoardCardSelectedInternal';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { isRecordBoardCardInCompactViewFamilyState } from '@/ui/object/record-board/states/isRecordBoardCardInCompactViewFamilyState';
import { RecordInlineCell } from '@/ui/object/record-inline-cell/components/RecordInlineCell';
import { InlineCellHotkeyScope } from '@/ui/object/record-inline-cell/types/InlineCellHotkeyScope';
import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { getLogoUrlFromDomainName } from '~/utils';
import { companyProgressesFamilyState } from '../states/companyProgressesFamilyState';
@ -125,30 +122,28 @@ const StyledCompactIconContainer = styled.div`
`;
export const CompanyBoardCard = () => {
const { BoardRecoilScopeContext } = useBoardContext();
const { isCurrentCardSelected, setCurrentCardSelected } =
useCurrentCardSelected();
useCurrentRecordBoardCardSelectedInternal();
const boardCardId = useContext(BoardCardIdContext);
const [companyProgress] = useRecoilState(
companyProgressesFamilyState(boardCardId ?? ''),
);
const { isCompactViewEnabledState, visibleBoardCardFieldsSelector } =
useRecordBoardScopedStates();
const [isCompactViewEnabled] = useRecoilState(isCompactViewEnabledState);
const [isCardInCompactView, setIsCardInCompactView] = useRecoilState(
isCardInCompactViewState(boardCardId ?? ''),
isRecordBoardCardInCompactViewFamilyState(boardCardId ?? ''),
);
const showCompactView = isCompactViewEnabled && isCardInCompactView;
const { opportunity, company } = companyProgress ?? {};
const visibleBoardCardFields = useRecoilScopedValue(
visibleBoardCardFieldsScopedSelector,
BoardRecoilScopeContext,
);
const visibleBoardCardFields = useRecoilValue(visibleBoardCardFieldsSelector);
const useUpdateOneRecordMutation: () => [(params: any) => any, any] = () => {
const { updateOneRecord: updateOneOpportunity } = useUpdateOneRecord({

191
front/src/modules/companies/components/HooksCompanyBoardEffect.tsx
View File

@ -1,64 +1,36 @@
import { useCallback, useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { Company } from '@/companies/types/Company';
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { PaginatedRecordTypeResults } from '@/object-record/types/PaginatedRecordTypeResults';
import { filterAvailableTableColumns } from '@/object-record/utils/filterAvailableTableColumns';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { PipelineStep } from '@/pipeline/types/PipelineStep';
import { turnFiltersIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClause';
import { turnSortsIntoOrderBy } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { useBoardActionBarEntries } from '@/ui/object/record-board/hooks/useBoardActionBarEntries';
import { useBoardContext } from '@/ui/object/record-board/hooks/useBoardContext';
import { useBoardContextMenuEntries } from '@/ui/object/record-board/hooks/useBoardContextMenuEntries';
import { availableBoardCardFieldsScopedState } from '@/ui/object/record-board/states/availableBoardCardFieldsScopedState';
import { boardCardFieldsScopedState } from '@/ui/object/record-board/states/boardCardFieldsScopedState';
import { isBoardLoadedState } from '@/ui/object/record-board/states/isBoardLoadedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { availableRecordBoardCardFieldsScopedState } from '@/ui/object/record-board/states/availableRecordBoardCardFieldsScopedState';
import { recordBoardCardFieldsScopedState } from '@/ui/object/record-board/states/recordBoardCardFieldsScopedState';
import { recordBoardFiltersScopedState } from '@/ui/object/record-board/states/recordBoardFiltersScopedState';
import { recordBoardSortsScopedState } from '@/ui/object/record-board/states/recordBoardSortsScopedState';
import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { useViewBar } from '@/views/hooks/useViewBar';
import { ViewType } from '@/views/types/ViewType';
import { mapViewFieldsToBoardFieldDefinitions } from '@/views/utils/mapViewFieldsToBoardFieldDefinitions';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { isDefined } from '~/utils/isDefined';
import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
type HooksCompanyBoardEffectProps = {
viewBarId: string;
recordBoardId: string;
};
export const HooksCompanyBoardEffect = ({
viewBarId,
recordBoardId,
}: HooksCompanyBoardEffectProps) => {
const {
setAvailableFilterDefinitions,
setAvailableSortDefinitions,
setAvailableFieldDefinitions,
setEntityCountInCurrentView,
setViewObjectMetadataId,
setViewType,
} = useViewBar({ viewBarId: viewBarId });
const {
currentViewFieldsState,
currentViewFiltersState,
currentViewSortsState,
} = useViewScopedStates({ viewScopeId: viewBarId });
const [pipelineSteps, setPipelineSteps] = useState<PipelineStep[]>([]);
const [opportunities, setOpportunities] = useState<Opportunity[]>([]);
const [companies, setCompanies] = useState<Company[]>([]);
const currentViewFields = useRecoilValue(currentViewFieldsState);
const currentViewFilters = useRecoilValue(currentViewFiltersState);
const currentViewSorts = useRecoilValue(currentViewSortsState);
} = useViewBar({ viewBarId });
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular: 'opportunity',
@ -67,88 +39,11 @@ export const HooksCompanyBoardEffect = ({
const { columnDefinitions, filterDefinitions, sortDefinitions } =
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);
const { BoardRecoilScopeContext } = useBoardContext();
const [, setBoardCardFields] = useRecoilScopedState(
boardCardFieldsScopedState,
BoardRecoilScopeContext,
);
const updateCompanyBoardCardIds = useUpdateCompanyBoardCardIds();
const updateCompanyBoard = useUpdateCompanyBoard();
const setAvailableBoardCardFields = useSetRecoilScopedStateV2(
availableBoardCardFieldsScopedState,
availableRecordBoardCardFieldsScopedState,
'company-board-view',
);
useFindManyRecords({
objectNameSingular: 'pipelineStep',
filter: {},
onCompleted: useCallback(
(data: PaginatedRecordTypeResults<PipelineStep>) => {
setPipelineSteps(data.edges.map((edge) => edge.node));
},
[],
),
});
const filter = turnFiltersIntoWhereClause(
mapViewFiltersToFilters(currentViewFilters),
objectMetadataItem?.fields ?? [],
);
const orderBy = turnSortsIntoOrderBy(
mapViewSortsToSorts(currentViewSorts),
objectMetadataItem?.fields ?? [],
);
const { fetchMoreRecords: fetchMoreOpportunities } = useFindManyRecords({
skip: !pipelineSteps.length,
objectNameSingular: 'opportunity',
filter: filter,
orderBy: orderBy,
onCompleted: useCallback(
(data: PaginatedRecordTypeResults<Opportunity>) => {
const pipelineProgresses: Array<Opportunity> = data.edges.map(
(edge) => edge.node,
);
updateCompanyBoardCardIds(pipelineProgresses);
setOpportunities(pipelineProgresses);
setIsBoardLoaded(true);
},
[setIsBoardLoaded, updateCompanyBoardCardIds],
),
});
useEffect(() => {
if (isDefined(fetchMoreOpportunities)) {
fetchMoreOpportunities();
}
}, [fetchMoreOpportunities]);
const { fetchMoreRecords: fetchMoreCompanies } = useFindManyRecords({
skip: !opportunities.length,
objectNameSingular: 'company',
filter: {
id: {
in: opportunities.map((opportunity) => opportunity.companyId || ''),
},
},
onCompleted: useCallback((data: PaginatedRecordTypeResults<Company>) => {
setCompanies(data.edges.map((edge) => edge.node));
}, []),
});
useEffect(() => {
if (isDefined(fetchMoreCompanies)) {
fetchMoreCompanies();
}
}, [fetchMoreCompanies]);
useEffect(() => {
if (!objectMetadataItem) {
return;
@ -182,26 +77,30 @@ export const HooksCompanyBoardEffect = ({
setViewType?.(ViewType.Kanban);
}, [objectMetadataItem, setViewObjectMetadataId, setViewType]);
const { setActionBarEntries } = useBoardActionBarEntries();
const { setContextMenuEntries } = useBoardContextMenuEntries();
const {
currentViewFieldsState,
currentViewFiltersState,
currentViewSortsState,
} = useViewScopedStates({ viewScopeId: viewBarId });
useEffect(() => {
if (opportunities && companies) {
setActionBarEntries();
setContextMenuEntries();
const currentViewFields = useRecoilValue(currentViewFieldsState);
const currentViewFilters = useRecoilValue(currentViewFiltersState);
const currentViewSorts = useRecoilValue(currentViewSortsState);
updateCompanyBoard(pipelineSteps, opportunities, companies);
setEntityCountInCurrentView(opportunities.length);
}
}, [
companies,
opportunities,
pipelineSteps,
setActionBarEntries,
setContextMenuEntries,
setEntityCountInCurrentView,
updateCompanyBoard,
]);
//TODO: Modify to use scopeId
const setBoardCardFields = useSetRecoilScopedStateV2(
recordBoardCardFieldsScopedState,
'company-board',
);
const setBoardCardFilters = useSetRecoilScopedStateV2(
recordBoardFiltersScopedState,
'company-board',
);
const setBoardCardSorts = useSetRecoilScopedStateV2(
recordBoardSortsScopedState,
'company-board',
);
useEffect(() => {
if (currentViewFields) {
@ -214,5 +113,29 @@ export const HooksCompanyBoardEffect = ({
}
}, [columnDefinitions, currentViewFields, setBoardCardFields]);
useEffect(() => {
if (currentViewFilters) {
setBoardCardFilters(currentViewFilters);
}
}, [currentViewFilters, setBoardCardFilters]);
useEffect(() => {
if (currentViewSorts) {
setBoardCardSorts(currentViewSorts);
}
}, [currentViewSorts, setBoardCardSorts]);
const { setEntityCountInCurrentView } = useViewBar({ viewBarId });
const { savedOpportunitiesState } = useRecordBoardScopedStates({
recordBoardScopeId: recordBoardId,
});
const savedOpportunities = useRecoilValue(savedOpportunitiesState);
useEffect(() => {
setEntityCountInCurrentView(savedOpportunities.length);
}, [savedOpportunities.length, setEntityCountInCurrentView]);
return <></>;
};

4
front/src/modules/companies/components/NewOpportunityButton.tsx
View File

@ -1,7 +1,6 @@
import { useCallback, useContext, useState } from 'react';
import { useQuery } from '@apollo/client';
import { useCreateOpportunity } from '@/companies/hooks/useCreateOpportunity';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -11,6 +10,7 @@ import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picke
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { NewButton } from '@/ui/object/record-board/components/NewButton';
import { BoardColumnContext } from '@/ui/object/record-board/contexts/BoardColumnContext';
import { useCreateOpportunity } from '@/ui/object/record-board/hooks/internal/useCreateOpportunity';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@ -21,7 +21,7 @@ export const NewOpportunityButton = () => {
const pipelineStepId = column?.columnDefinition.id || '';
const { enqueueSnackBar } = useSnackBar();
const { createOpportunity } = useCreateOpportunity();
const createOpportunity = useCreateOpportunity();
const {
goBackToPreviousHotkeyScope,

27
front/src/modules/companies/hooks/useUpdateBoardCardIds.ts
View File

@ -1,27 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState';
import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
export const useUpdateCompanyBoardCardIds = () =>
useRecoilCallback(
({ snapshot, set }) =>
(pipelineProgresses: Pick<Opportunity, 'pipelineStepId' | 'id'>[]) => {
const boardColumns = snapshot
.getLoadable(boardColumnsState)
.valueOrThrow();
for (const boardColumn of boardColumns) {
const boardCardIds = pipelineProgresses
.filter(
(pipelineProgressToFilter) =>
pipelineProgressToFilter.pipelineStepId === boardColumn.id,
)
.map((pipelineProgress) => pipelineProgress.id);
set(boardCardIdsByColumnIdFamilyState(boardColumn.id), boardCardIds);
}
},
[],
);

13
front/src/modules/companies/states/contexts/BoardContext.ts
View File

@ -1,13 +0,0 @@
import { createContext } from 'react';
import { RecoilScopeContext } from '@/types/RecoilScopeContext';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
export const BoardContext = createContext<{
BoardRecoilScopeContext: RecoilScopeContext;
onFieldsChange: (fields: BoardFieldDefinition<FieldMetadata>[]) => void;
}>({
BoardRecoilScopeContext: createContext<string | null>(null),
onFieldsChange: () => {},
});

5
front/src/modules/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext.ts
View File

@ -1,5 +0,0 @@
import { createContext } from 'react';
export const CompanyBoardRecoilScopeContext = createContext<string | null>(
null,
);

118
front/src/modules/object-record/hooks/useObjectRecordBoard.ts Normal file
View File

@ -0,0 +1,118 @@
import { useCallback } from 'react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { Company } from '@/companies/types/Company';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { PaginatedRecordTypeResults } from '@/object-record/types/PaginatedRecordTypeResults';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { PipelineStep } from '@/pipeline/types/PipelineStep';
import { turnFiltersIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClause';
import { turnSortsIntoOrderBy } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderBy';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { useUpdateCompanyBoardCardIdsInternal } from '@/ui/object/record-board/hooks/internal/useUpdateCompanyBoardCardIdsInternal';
import { useFindManyRecords } from './useFindManyRecords';
export const useObjectRecordBoard = () => {
const objectNameSingular = 'opportunity';
const updateCompanyBoardCardIds = useUpdateCompanyBoardCardIdsInternal();
const { objectMetadataItem: foundObjectMetadataItem } = useObjectMetadataItem(
{
objectNameSingular,
},
);
const {
isBoardLoadedState,
boardFiltersState,
boardSortsState,
savedCompaniesState,
savedOpportunitiesState,
savedPipelineStepsState,
} = useRecordBoardScopedStates();
const setIsBoardLoaded = useSetRecoilState(isBoardLoadedState);
const boardFilters = useRecoilValue(boardFiltersState);
const boardSorts = useRecoilValue(boardSortsState);
const setSavedCompanies = useSetRecoilState(savedCompaniesState);
const [savedOpportunities, setSavedOpportunities] = useRecoilState(
savedOpportunitiesState,
);
const [savedPipelineSteps, setSavedPipelineSteps] = useRecoilState(
savedPipelineStepsState,
);
const filter = turnFiltersIntoWhereClause(
boardFilters,
foundObjectMetadataItem?.fields ?? [],
);
const orderBy = turnSortsIntoOrderBy(
boardSorts,
foundObjectMetadataItem?.fields ?? [],
);
useFindManyRecords({
objectNameSingular: 'pipelineStep',
filter: {},
onCompleted: useCallback(
(data: PaginatedRecordTypeResults<PipelineStep>) => {
setSavedPipelineSteps(data.edges.map((edge) => edge.node));
},
[setSavedPipelineSteps],
),
});
const {
records: opportunities,
loading,
fetchMoreRecords: fetchMoreOpportunities,
} = useFindManyRecords({
skip: !savedPipelineSteps.length,
objectNameSingular: 'opportunity',
filter: filter,
orderBy: orderBy,
onCompleted: useCallback(
(data: PaginatedRecordTypeResults<Opportunity>) => {
const pipelineProgresses: Array<Opportunity> = data.edges.map(
(edge) => edge.node,
);
updateCompanyBoardCardIds(pipelineProgresses);
setSavedOpportunities(pipelineProgresses);
setIsBoardLoaded(true);
},
[setIsBoardLoaded, setSavedOpportunities, updateCompanyBoardCardIds],
),
});
const { fetchMoreRecords: fetchMoreCompanies } = useFindManyRecords({
skip: !savedOpportunities.length,
objectNameSingular: 'company',
filter: {
id: {
in: savedOpportunities.map(
(opportunity) => opportunity.companyId || '',
),
},
},
onCompleted: useCallback(
(data: PaginatedRecordTypeResults<Company>) => {
setSavedCompanies(data.edges.map((edge) => edge.node));
},
[setSavedCompanies],
),
});
return {
opportunities,
loading,
fetchMoreOpportunities,
fetchMoreCompanies,
};
};

4
front/src/modules/pipeline/components/PipelineAddButton.tsx
View File

@ -1,5 +1,4 @@
import { OpportunityPicker } from '@/companies/components/OpportunityPicker';
import { useCreateOpportunity } from '@/companies/hooks/useCreateOpportunity';
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
import { IconPlus } from '@/ui/display/icon/index';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@ -9,6 +8,7 @@ import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/Rela
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useCreateOpportunity } from '@/ui/object/record-board/hooks/internal/useCreateOpportunity';
import { logError } from '~/utils/logError';
export const PipelineAddButton = () => {
@ -18,7 +18,7 @@ export const PipelineAddButton = () => {
dropdownScopeId: 'add-pipeline-progress',
});
const { createOpportunity } = useCreateOpportunity();
const createOpportunity = useCreateOpportunity();
const handleCompanySelected = (
selectedCompany: EntityForSelect | null,

5
front/src/modules/ui/input/relation-picker/hooks/useEntitySelectSearch.ts
View File

@ -13,7 +13,10 @@ export const useEntitySelectSearch = () => {
);
const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
useRecoilScopedState(relationPickerSearchFilterScopedState);
useRecoilScopedState(
relationPickerSearchFilterScopedState,
RelationPickerRecoilScopeContext,
);
const debouncedSetSearchFilter = debounce(
setRelationPickerSearchFilter,

4
front/src/modules/ui/object/record-board/action-bar/components/RecordBoardActionBar.tsx
View File

@ -2,10 +2,10 @@ import React from 'react';
import { useRecoilValue } from 'recoil';
import { ActionBar } from '@/ui/navigation/action-bar/components/ActionBar';
import { selectedCardIdsSelector } from '../../states/selectors/selectedCardIdsSelector';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
export const RecordBoardActionBar = () => {
const { selectedCardIdsSelector } = useRecordBoardScopedStates();
const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
return <ActionBar selectedIds={selectedCardIds}></ActionBar>;
};

91
front/src/modules/ui/object/record-board/components/RecordBoard.tsx
View File

@ -6,24 +6,26 @@ import { useRecoilValue } from 'recoil';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
import { BoardColumnContext } from '@/ui/object/record-board/contexts/BoardColumnContext';
import { useSetCardSelected } from '@/ui/object/record-board/hooks/useSetCardSelected';
import { useUpdateBoardCardIds } from '@/ui/object/record-board/hooks/useUpdateBoardCardIds';
import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
import { RecordBoardActionBar } from '@/ui/object/record-board/action-bar/components/RecordBoardActionBar';
import { RecordBoardInternalEffect } from '@/ui/object/record-board/components/RecordBoardInternalEffect';
import { RecordBoardContextMenu } from '@/ui/object/record-board/context-menu/components/RecordBoardContextMenu';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { useSetRecordBoardCardSelectedInternal } from '@/ui/object/record-board/hooks/internal/useSetRecordBoardCardSelectedInternal';
import { useUpdateRecordBoardCardIdsInternal } from '@/ui/object/record-board/hooks/internal/useUpdateRecordBoardCardIdsInternal';
import { RecordBoardScope } from '@/ui/object/record-board/scopes/RecordBoardScope';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { logError } from '~/utils/logError';
import { BoardColumnRecoilScopeContext } from '../states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardOptions } from '../types/BoardOptions';
import { RecordBoardColumn } from './RecordBoardColumn';
export type RecordBoardProps = {
recordBoardId: string;
boardOptions: BoardOptions;
onColumnAdd?: (boardColumn: BoardColumnDefinition) => void;
onColumnDelete?: (boardColumnId: string) => void;
@ -54,10 +56,16 @@ const StyledBoardHeader = styled.div`
`;
export const RecordBoard = ({
recordBoardId,
boardOptions,
onColumnDelete,
onEditColumnTitle,
}: RecordBoardProps) => {
const recordBoardScopeId = recordBoardId;
const { boardColumnsState } = useRecordBoardScopedStates({
recordBoardScopeId,
});
const boardColumns = useRecoilValue(boardColumnsState);
const { updateOneRecord: updateOneOpportunity } =
@ -65,7 +73,8 @@ export const RecordBoard = ({
objectNameSingular: 'opportunity',
});
const { unselectAllActiveCards, setCardSelected } = useSetCardSelected();
const { unselectAllActiveCards, setCardSelected } =
useSetRecordBoardCardSelectedInternal({ recordBoardScopeId });
const updatePipelineProgressStageInDB = useCallback(
async (pipelineProgressId: string, pipelineStepId: string) => {
@ -85,7 +94,9 @@ export const RecordBoard = ({
callback: unselectAllActiveCards,
});
const updateBoardCardIds = useUpdateBoardCardIds();
const updateBoardCardIds = useUpdateRecordBoardCardIdsInternal({
recordBoardScopeId,
});
const onDragEnd: OnDragEndResponder = useCallback(
async (result) => {
@ -128,41 +139,35 @@ export const RecordBoard = ({
);
return (
<StyledWrapper>
<StyledBoardHeader />
<ScrollWrapper>
<StyledBoard ref={boardRef}>
<DragDropContext onDragEnd={onDragEnd}>
{sortedBoardColumns.map((column) => (
<BoardColumnContext.Provider
key={column.id}
value={{
id: column.id,
columnDefinition: column,
isFirstColumn: column.position === 0,
isLastColumn:
column.position === sortedBoardColumns.length - 1,
}}
>
<RecoilScope
CustomRecoilScopeContext={BoardColumnRecoilScopeContext}
<RecordBoardScope recordBoardScopeId={recordBoardId}>
<RecordBoardContextMenu />
<RecordBoardActionBar />
<RecordBoardInternalEffect />
<StyledWrapper>
<StyledBoardHeader />
<ScrollWrapper>
<StyledBoard ref={boardRef}>
<DragDropContext onDragEnd={onDragEnd}>
{sortedBoardColumns.map((column) => (
<RecordBoardColumn
key={column.id}
>
<RecordBoardColumn
boardOptions={boardOptions}
onDelete={onColumnDelete}
onTitleEdit={onEditColumnTitle}
/>
</RecoilScope>
</BoardColumnContext.Provider>
))}
</DragDropContext>
</StyledBoard>
</ScrollWrapper>
<DragSelect
dragSelectable={boardRef}
onDragSelectionChange={setCardSelected}
/>
</StyledWrapper>
recordBoardColumnId={column.id}
columnDefinition={column}
recordBoardColumnTotal={sortedBoardColumns.length}
recordBoardOptions={boardOptions}
onDelete={onColumnDelete}
onTitleEdit={onEditColumnTitle}
/>
))}
</DragDropContext>
</StyledBoard>
</ScrollWrapper>
<DragSelect
dragSelectable={boardRef}
onDragSelectionChange={setCardSelected}
/>
</StyledWrapper>
</RecordBoardScope>
);
};

11
front/src/modules/ui/object/record-board/components/RecordBoardCard.tsx
View File

@ -4,22 +4,23 @@ import { useSetRecoilState } from 'recoil';
import { contextMenuIsOpenState } from '@/ui/navigation/context-menu/states/contextMenuIsOpenState';
import { contextMenuPositionState } from '@/ui/navigation/context-menu/states/contextMenuPositionState';
import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
import { useCurrentRecordBoardCardSelectedInternal } from '../hooks/internal/useCurrentRecordBoardCardSelectedInternal';
import { BoardOptions } from '../types/BoardOptions';
export const RecordBoardCard = ({
boardOptions,
recordBoardOptions,
cardId,
index,
}: {
boardOptions: BoardOptions;
recordBoardOptions: BoardOptions;
cardId: string;
index: number;
}) => {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const { setCurrentCardSelected } = useCurrentCardSelected();
const { setCurrentCardSelected } =
useCurrentRecordBoardCardSelectedInternal();
const handleContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
@ -45,7 +46,7 @@ export const RecordBoardCard = ({
data-select-disable
onContextMenu={handleContextMenu}
>
{<boardOptions.CardComponent />}
{<recordBoardOptions.CardComponent />}
</div>
)}
</Draggable>

184
front/src/modules/ui/object/record-board/components/RecordBoardColumn.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useState } from 'react';
import React, { useState } from 'react';
import styled from '@emotion/styled';
import { Draggable, Droppable, DroppableProvided } from '@hello-pangea/dnd';
import { useRecoilValue } from 'recoil';
@ -8,12 +8,12 @@ import { Tag } from '@/ui/display/tag/components/Tag';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { RecordBoardCard } from '@/ui/object/record-board/components/RecordBoardCard';
import { BoardCardIdContext } from '@/ui/object/record-board/contexts/BoardCardIdContext';
import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { BoardColumnContext } from '../contexts/BoardColumnContext';
import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
import { boardColumnTotalsFamilySelector } from '../states/selectors/boardColumnTotalsFamilySelector';
import { recordBoardCardIdsByColumnIdFamilyState } from '../states/recordBoardCardIdsByColumnIdFamilyState';
import { recordBoardColumnTotalsFamilySelector } from '../states/selectors/recordBoardColumnTotalsFamilySelector';
import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
import { BoardOptions } from '../types/BoardOptions';
@ -87,7 +87,10 @@ type BoardColumnCardsContainerProps = {
};
type RecordBoardColumnProps = {
boardOptions: BoardOptions;
recordBoardColumnId: string;
columnDefinition: BoardColumnDefinition;
recordBoardOptions: BoardOptions;
recordBoardColumnTotal: number;
onDelete?: (columnId: string) => void;
onTitleEdit: (columnId: string, title: string, color: string) => void;
};
@ -109,12 +112,13 @@ const BoardColumnCardsContainer = ({
};
export const RecordBoardColumn = ({
boardOptions,
recordBoardColumnId,
columnDefinition,
recordBoardOptions,
recordBoardColumnTotal,
onDelete,
onTitleEdit,
}: RecordBoardColumnProps) => {
const column = useContext(BoardColumnContext);
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false);
const [isHeaderHovered, setIsHeaderHovered] = useState(false);
@ -135,96 +139,110 @@ export const RecordBoardColumn = ({
setIsBoardColumnMenuOpen(false);
};
const boardColumnId = column?.id || '';
const boardColumnTotal = useRecoilValue(
boardColumnTotalsFamilySelector(boardColumnId),
recordBoardColumnTotalsFamilySelector(recordBoardColumnId),
);
const cardIds = useRecoilValue(
boardCardIdsByColumnIdFamilyState(boardColumnId),
recordBoardCardIdsByColumnIdFamilyState(recordBoardColumnId),
);
const handleTitleEdit = (title: string, color: string) => {
onTitleEdit(boardColumnId, title, color);
onTitleEdit(recordBoardColumnId, title, color);
};
if (!column) return <></>;
const { isFirstColumn, columnDefinition } = column;
const isFirstColumn = columnDefinition.position === 0;
return (
<Droppable droppableId={column.id}>
{(droppableProvided) => (
<StyledColumn isFirstColumn={isFirstColumn}>
<StyledHeader
onMouseEnter={() => setIsHeaderHovered(true)}
onMouseLeave={() => setIsHeaderHovered(false)}
>
<Tag
onClick={handleBoardColumnMenuOpen}
color={columnDefinition.colorCode ?? 'gray'}
text={columnDefinition.title}
/>
{!!boardColumnTotal && (
<StyledAmount>${boardColumnTotal}</StyledAmount>
)}
{!isHeaderHovered && (
<StyledNumChildren>{cardIds.length}</StyledNumChildren>
)}
{isHeaderHovered && (
<StyledHeaderActions>
<LightIconButton
accent="tertiary"
Icon={IconDotsVertical}
onClick={handleBoardColumnMenuOpen}
/>
{/* <LightIconButton
<BoardColumnContext.Provider
value={{
id: recordBoardColumnId,
columnDefinition: columnDefinition,
isFirstColumn: columnDefinition.position === 0,
isLastColumn: columnDefinition.position === recordBoardColumnTotal - 1,
}}
>
<Droppable droppableId={recordBoardColumnId}>
{(droppableProvided) => (
<StyledColumn isFirstColumn={isFirstColumn}>
<StyledHeader
onMouseEnter={() => setIsHeaderHovered(true)}
onMouseLeave={() => setIsHeaderHovered(false)}
>
<Tag
onClick={handleBoardColumnMenuOpen}
color={columnDefinition.colorCode ?? 'gray'}
text={columnDefinition.title}
/>
{!!boardColumnTotal && (
<StyledAmount>${boardColumnTotal}</StyledAmount>
)}
{!isHeaderHovered && (
<StyledNumChildren>{cardIds.length}</StyledNumChildren>
)}
{isHeaderHovered && (
<StyledHeaderActions>
<LightIconButton
accent="tertiary"
Icon={IconDotsVertical}
onClick={handleBoardColumnMenuOpen}
/>
{/* <LightIconButton
accent="tertiary"
Icon={IconPlus}
onClick={() => {}}
/> */}
</StyledHeaderActions>
)}
</StyledHeader>
{isBoardColumnMenuOpen && (
<RecordBoardColumnDropdownMenu
onClose={handleBoardColumnMenuClose}
onDelete={onDelete}
onTitleEdit={handleTitleEdit}
stageId={boardColumnId}
/>
)}
<BoardColumnCardsContainer droppableProvided={droppableProvided}>
{cardIds.map((cardId, index) => (
<BoardCardIdContext.Provider value={cardId} key={cardId}>
<RecordBoardCard
index={index}
cardId={cardId}
boardOptions={boardOptions}
/>
</BoardCardIdContext.Provider>
))}
<Draggable
draggableId={`new-${column.id}`}
index={cardIds.length}
isDragDisabled={true}
>
{(draggableProvided) => (
<div
ref={draggableProvided?.innerRef}
// eslint-disable-next-line react/jsx-props-no-spreading
{...draggableProvided?.draggableProps}
>
<StyledNewCardButtonContainer>
<RecoilScope>{boardOptions.newCardComponent}</RecoilScope>
</StyledNewCardButtonContainer>
</div>
</StyledHeaderActions>
)}
</Draggable>
</BoardColumnCardsContainer>
</StyledColumn>
)}
</Droppable>
</StyledHeader>
{isBoardColumnMenuOpen && (
<RecordBoardColumnDropdownMenu
onClose={handleBoardColumnMenuClose}
onDelete={onDelete}
onTitleEdit={handleTitleEdit}
stageId={recordBoardColumnId}
/>
)}
{isBoardColumnMenuOpen && (
<RecordBoardColumnDropdownMenu
onClose={handleBoardColumnMenuClose}
onDelete={onDelete}
onTitleEdit={handleTitleEdit}
stageId={recordBoardColumnId}
/>
)}
<BoardColumnCardsContainer droppableProvided={droppableProvided}>
{cardIds.map((cardId, index) => (
<BoardCardIdContext.Provider value={cardId} key={cardId}>
<RecordBoardCard
index={index}
cardId={cardId}
recordBoardOptions={recordBoardOptions}
/>
</BoardCardIdContext.Provider>
))}
<Draggable
draggableId={`new-${recordBoardColumnId}`}
index={cardIds.length}
isDragDisabled={true}
>
{(draggableProvided) => (
<div
ref={draggableProvided?.innerRef}
// eslint-disable-next-line react/jsx-props-no-spreading
{...draggableProvided?.draggableProps}
>
<StyledNewCardButtonContainer>
{recordBoardOptions.newCardComponent}
</StyledNewCardButtonContainer>
</div>
)}
</Draggable>
</BoardColumnCardsContainer>
</StyledColumn>
)}
</Droppable>
</BoardColumnContext.Provider>
);
};

4
front/src/modules/ui/object/record-board/components/RecordBoardColumnDropdownMenu.tsx
View File

@ -12,7 +12,7 @@ import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { BoardColumnContext } from '../contexts/BoardColumnContext';
import { useBoardColumns } from '../hooks/useBoardColumns';
import { useBoardColumnsInternal } from '../hooks/internal/useRecordBoardColumnsInternal';
import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
import { RecordBoardColumnEditTitleMenu } from './RecordBoardColumnEditTitleMenu';
@ -43,7 +43,7 @@ export const RecordBoardColumnDropdownMenu = ({
const boardColumnMenuRef = useRef<HTMLDivElement>(null);
const { handleMoveBoardColumn } = useBoardColumns();
const { handleMoveBoardColumn } = useBoardColumnsInternal();
const {
setHotkeyScopeAndMemorizePreviousScope,

8
front/src/modules/ui/object/record-board/components/RecordBoardColumnEditTitleMenu.tsx
View File

@ -1,18 +1,16 @@
import { ChangeEvent, useCallback, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { IconTrash } from '@/ui/display/icon';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { useRecordBoard } from '@/ui/object/record-board/hooks/useRecordBoard';
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
import { textInputStyle } from '@/ui/theme/constants/effects';
import { debounce } from '~/utils/debounce';
import { boardColumnsState } from '../states/boardColumnsState';
const StyledEditTitleContainer = styled.div`
--vertical-padding: ${({ theme }) => theme.spacing(1)};
@ -58,7 +56,9 @@ export const RecordBoardColumnEditTitleMenu = ({
color,
}: RecordBoardColumnEditTitleMenuProps) => {
const [internalValue, setInternalValue] = useState(title);
const [, setBoardColumns] = useRecoilState(boardColumnsState);
const { setBoardColumns } = useRecordBoard();
const debouncedOnUpdateTitle = debounce(
(newTitle) => onTitleEdit(newTitle, color),
200,

25
front/src/modules/ui/object/record-board/components/RecordBoardEffect.tsx Normal file
View File

@ -0,0 +1,25 @@
import { useEffect } from 'react';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { useRecordBoard } from '@/ui/object/record-board/hooks/useRecordBoard';
import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
type RecordBoardEffectProps = {
recordBoardId: string;
onFieldsChange: (fields: BoardFieldDefinition<FieldMetadata>[]) => void;
};
export const RecordBoardEffect = ({
recordBoardId,
onFieldsChange,
}: RecordBoardEffectProps) => {
const { setOnFieldsChange } = useRecordBoard({
recordBoardScopeId: recordBoardId,
});
useEffect(() => {
setOnFieldsChange(() => onFieldsChange);
}, [onFieldsChange, setOnFieldsChange]);
return <></>;
};

66
front/src/modules/ui/object/record-board/components/RecordBoardInternalEffect.tsx Normal file
View File

@ -0,0 +1,66 @@
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { useObjectRecordBoard } from '@/object-record/hooks/useObjectRecordBoard';
import { useRecordBoardActionBarEntriesInternal } from '@/ui/object/record-board/hooks/internal/useRecordBoardActionBarEntriesInternal';
import { useRecordBoardContextMenuEntriesInternal } from '@/ui/object/record-board/hooks/internal/useRecordBoardContextMenuEntriesInternal';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { useUpdateCompanyBoardColumnsInternal } from '@/ui/object/record-board/hooks/internal/useUpdateCompanyBoardColumnsInternal';
import { isDefined } from '~/utils/isDefined';
export type RecordBoardInternalEffectProps = {
onFieldsChange: (fields: any) => void;
};
export const RecordBoardInternalEffect = ({}) => {
const updateCompanyColumnsBoardInternal =
useUpdateCompanyBoardColumnsInternal();
const { setActionBarEntries } = useRecordBoardActionBarEntriesInternal();
const { setContextMenuEntries } = useRecordBoardContextMenuEntriesInternal();
const { fetchMoreOpportunities, fetchMoreCompanies } = useObjectRecordBoard();
useEffect(() => {
if (isDefined(fetchMoreOpportunities)) {
fetchMoreOpportunities();
}
}, [fetchMoreOpportunities]);
useEffect(() => {
if (isDefined(fetchMoreCompanies)) {
fetchMoreCompanies();
}
}, [fetchMoreCompanies]);
const {
savedPipelineStepsState,
savedOpportunitiesState,
savedCompaniesState,
} = useRecordBoardScopedStates();
const savedPipelineSteps = useRecoilValue(savedPipelineStepsState);
const savedOpportunities = useRecoilValue(savedOpportunitiesState);
const savedCompanies = useRecoilValue(savedCompaniesState);
useEffect(() => {
if (savedOpportunities && savedCompanies) {
setActionBarEntries();
setContextMenuEntries();
updateCompanyColumnsBoardInternal(
savedPipelineSteps,
savedOpportunities,
savedCompanies,
);
}
}, [
savedCompanies,
savedOpportunities,
savedPipelineSteps,
setActionBarEntries,
setContextMenuEntries,
updateCompanyColumnsBoardInternal,
]);
return <></>;
};

5
front/src/modules/ui/object/record-board/context-menu/components/RecordBoardContextMenu.tsx
View File

@ -1,11 +1,10 @@
import React from 'react';
import { useRecoilValue } from 'recoil';
import { ContextMenu } from '@/ui/navigation/context-menu/components/ContextMenu';
import { selectedCardIdsSelector } from '../../states/selectors/selectedCardIdsSelector';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
export const RecordBoardContextMenu = () => {
const { selectedCardIdsSelector } = useRecordBoardScopedStates();
const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
return <ContextMenu selectedIds={selectedCardIds}></ContextMenu>;
};

5
front/src/modules/ui/object/record-board/contexts/BoardOptionsContext.ts
View File

@ -1,5 +0,0 @@
import { createContext } from 'react';
import { BoardOptions } from '@/ui/object/record-board/types/BoardOptions';
export const BoardOptionsContext = createContext<BoardOptions | null>(null);

12
front/src/modules/companies/hooks/useCreateOpportunity.ts → front/src/modules/ui/object/record-board/hooks/internal/useCreateOpportunity.ts
View File

@ -3,7 +3,7 @@ import { v4 } from 'uuid';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState';
import { recordBoardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/recordBoardCardIdsByColumnIdFamilyState';
export const useCreateOpportunity = () => {
const { createOneRecord: createOneOpportunity } =
@ -16,10 +16,10 @@ export const useCreateOpportunity = () => {
async (companyId: string, pipelineStepId: string) => {
const newUuid = v4();
set(boardCardIdsByColumnIdFamilyState(pipelineStepId), (oldValue) => [
...oldValue,
newUuid,
]);
set(
recordBoardCardIdsByColumnIdFamilyState(pipelineStepId),
(oldValue) => [...oldValue, newUuid],
);
await createOneOpportunity?.({
id: newUuid,
@ -30,5 +30,5 @@ export const useCreateOpportunity = () => {
[createOneOpportunity],
);
return { createOpportunity };
return createOpportunity;
};

14
front/src/modules/ui/object/record-board/hooks/useCurrentCardSelected.ts → front/src/modules/ui/object/record-board/hooks/internal/useCurrentRecordBoardCardSelectedInternal.ts
View File

@ -2,18 +2,20 @@ import { useContext } from 'react';
import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
import { activeCardIdsState } from '@/ui/object/record-board/states/activeCardIdsState';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { BoardCardIdContext } from '../contexts/BoardCardIdContext';
import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
import { BoardCardIdContext } from '../../contexts/BoardCardIdContext';
import { isRecordBoardCardSelectedFamilyState } from '../../states/isRecordBoardCardSelectedFamilyState';
export const useCurrentCardSelected = () => {
export const useCurrentRecordBoardCardSelectedInternal = () => {
const currentCardId = useContext(BoardCardIdContext);
const isCurrentCardSelected = useRecoilValue(
isCardSelectedFamilyState(currentCardId ?? ''),
isRecordBoardCardSelectedFamilyState(currentCardId ?? ''),
);
const { activeCardIdsState } = useRecordBoardScopedStates();
const setActiveCardIds = useSetRecoilState(activeCardIdsState);
const setCurrentCardSelected = useRecoilCallback(
@ -21,7 +23,7 @@ export const useCurrentCardSelected = () => {
(selected: boolean) => {
if (!currentCardId) return;
set(isCardSelectedFamilyState(currentCardId), selected);
set(isRecordBoardCardSelectedFamilyState(currentCardId), selected);
set(actionBarOpenState, selected);
if (selected) {

18
front/src/modules/ui/object/record-board/hooks/useDeleteSelectedBoardCards.ts → front/src/modules/ui/object/record-board/hooks/internal/useDeleteSelectedRecordBoardCardsInternal.ts
View File

@ -3,13 +3,12 @@ import { useRecoilCallback } from 'recoil';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
import { useRemoveRecordBoardCardIdsInternal } from './useRemoveRecordBoardCardIdsInternal';
import { useRemoveCardIds } from './useRemoveCardIds';
export const useDeleteSelectedBoardCards = () => {
const removeCardIds = useRemoveCardIds();
export const useDeleteSelectedRecordBoardCardsInternal = () => {
const removeCardIds = useRemoveRecordBoardCardIdsInternal();
const apolloClient = useApolloClient();
const { deleteOneRecord: deleteOneOpportunity } =
@ -17,6 +16,8 @@ export const useDeleteSelectedBoardCards = () => {
objectNameSingular: 'opportunity',
});
const { selectedCardIdsSelector } = useRecordBoardScopedStates();
const deleteSelectedBoardCards = useRecoilCallback(
({ snapshot }) =>
async () => {
@ -34,7 +35,12 @@ export const useDeleteSelectedBoardCards = () => {
apolloClient.cache.evict({ id: `Opportunity:${id}` });
});
},
[apolloClient.cache, removeCardIds, deleteOneOpportunity],
[
selectedCardIdsSelector,
removeCardIds,
deleteOneOpportunity,
apolloClient.cache,
],
);
return deleteSelectedBoardCards;

6
front/src/modules/ui/object/record-board/hooks/useBoardActionBarEntries.tsx → front/src/modules/ui/object/record-board/hooks/internal/useRecordBoardActionBarEntriesInternal.ts
View File

@ -3,12 +3,12 @@ import { useSetRecoilState } from 'recoil';
import { IconTrash } from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { useDeleteSelectedBoardCards } from '@/ui/object/record-board/hooks/useDeleteSelectedBoardCards';
import { useDeleteSelectedRecordBoardCardsInternal } from '@/ui/object/record-board/hooks/internal/useDeleteSelectedRecordBoardCardsInternal';
export const useBoardActionBarEntries = () => {
export const useRecordBoardActionBarEntriesInternal = () => {
const setActionBarEntriesRecoil = useSetRecoilState(actionBarEntriesState);
const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
const deleteSelectedBoardCards = useDeleteSelectedRecordBoardCardsInternal();
const setActionBarEntries = useCallback(() => {
setActionBarEntriesRecoil([

73
front/src/modules/ui/object/record-board/hooks/internal/useRecordBoardCardFieldsInternal.ts Normal file
View File

@ -0,0 +1,73 @@
import { useCallback } from 'react';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { RecordBoardScopeInternalContext } from '@/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
import { onFieldsChangeScopedState } from '@/ui/object/record-board/states/onFieldsChangeScopedState';
import { recordBoardCardFieldsScopedState } from '@/ui/object/record-board/states/recordBoardCardFieldsScopedState';
import { savedRecordBoardCardFieldsScopedState } from '@/ui/object/record-board/states/savedRecordBoardCardFieldsScopedState';
import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type useRecordBoardCardFieldsInternalProps = {
recordBoardScopeId?: string;
};
export const useRecordBoardCardFieldsInternal = (
props?: useRecordBoardCardFieldsInternalProps,
) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordBoardScopeInternalContext,
props?.recordBoardScopeId,
);
const setBoardCardFields = useSetRecoilState(
recordBoardCardFieldsScopedState({ scopeId }),
);
const setSavedBoardCardFields = useSetRecoilState(
savedRecordBoardCardFieldsScopedState({ scopeId }),
);
const handleFieldVisibilityChange = (
field: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
) => {
setBoardCardFields((previousFields) =>
previousFields.map((previousField) =>
previousField.fieldMetadataId === field.fieldMetadataId
? { ...previousField, isVisible: !field.isVisible }
: previousField,
),
);
};
const handleFieldsChange = useRecoilCallback(
({ snapshot }) =>
async (fields: BoardFieldDefinition<FieldMetadata>[]) => {
setSavedBoardCardFields(fields);
setBoardCardFields(fields);
const onFieldsChange = snapshot
.getLoadable(onFieldsChangeScopedState({ scopeId }))
.getValue();
await onFieldsChange?.(fields);
},
[scopeId, setBoardCardFields, setSavedBoardCardFields],
);
const handleFieldsReorder = useCallback(
async (fields: BoardFieldDefinition<FieldMetadata>[]) => {
const updatedFields = fields.map((column, index) => ({
...column,
position: index,
}));
await handleFieldsChange(updatedFields);
},
[handleFieldsChange],
);
return { handleFieldVisibilityChange, handleFieldsReorder };
};

7
front/src/modules/ui/object/record-board/hooks/useBoardColumns.ts → front/src/modules/ui/object/record-board/hooks/internal/useRecordBoardColumnsInternal.ts
View File

@ -2,12 +2,13 @@ import { useRecoilState } from 'recoil';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { PipelineStep } from '@/pipeline/types/PipelineStep';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { boardColumnsState } from '../states/boardColumnsState';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { BoardColumnDefinition } from '../../types/BoardColumnDefinition';
export const useBoardColumns = () => {
export const useBoardColumnsInternal = () => {
const { boardColumnsState } = useRecordBoardScopedStates();
const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
const { handleColumnMove } = useMoveViewColumns();

6
front/src/modules/ui/object/record-board/hooks/useBoardContextMenuEntries.tsx → front/src/modules/ui/object/record-board/hooks/internal/useRecordBoardContextMenuEntriesInternal.ts
View File

@ -3,14 +3,14 @@ import { useSetRecoilState } from 'recoil';
import { IconTrash } from '@/ui/display/icon';
import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
import { useDeleteSelectedBoardCards } from '@/ui/object/record-board/hooks/useDeleteSelectedBoardCards';
import { useDeleteSelectedRecordBoardCardsInternal } from '@/ui/object/record-board/hooks/internal/useDeleteSelectedRecordBoardCardsInternal';
export const useBoardContextMenuEntries = () => {
export const useRecordBoardContextMenuEntriesInternal = () => {
const setContextMenuEntriesRecoil = useSetRecoilState(
contextMenuEntriesState,
);
const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
const deleteSelectedBoardCards = useDeleteSelectedRecordBoardCardsInternal();
const setContextMenuEntries = useCallback(() => {
setContextMenuEntriesRecoil([

59
front/src/modules/ui/object/record-board/hooks/internal/useRecordBoardScopedStates.ts Normal file
View File

@ -0,0 +1,59 @@
import { RecordBoardScopeInternalContext } from '@/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
import { getRecordBoardScopedStates } from '@/ui/object/record-board/utils/getRecordBoardScopedStates';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type useRecordBoardScopedStates = {
recordBoardScopeId?: string;
};
export const useRecordBoardScopedStates = (
args?: useRecordBoardScopedStates,
) => {
const { recordBoardScopeId } = args ?? {};
const scopeId = useAvailableScopeIdOrThrow(
RecordBoardScopeInternalContext,
recordBoardScopeId,
);
const {
activeCardIdsState,
availableBoardCardFieldsState,
boardColumnsState,
isBoardLoadedState,
isCompactViewEnabledState,
savedBoardColumnsState,
boardFiltersState,
boardSortsState,
onFieldsChangeState,
boardCardFieldsByKeySelector,
hiddenBoardCardFieldsSelector,
selectedCardIdsSelector,
visibleBoardCardFieldsSelector,
savedCompaniesState,
savedOpportunitiesState,
savedPipelineStepsState,
} = getRecordBoardScopedStates({
recordBoardScopeId: scopeId,
});
return {
scopeId,
activeCardIdsState,
availableBoardCardFieldsState,
boardColumnsState,
isBoardLoadedState,
isCompactViewEnabledState,
savedBoardColumnsState,
boardFiltersState,
boardSortsState,
onFieldsChangeState,
boardCardFieldsByKeySelector,
hiddenBoardCardFieldsSelector,
selectedCardIdsSelector,
visibleBoardCardFieldsSelector,
savedCompaniesState,
savedOpportunitiesState,
savedPipelineStepsState,
};
};

20
front/src/modules/ui/object/record-board/hooks/useRemoveCardIds.ts → front/src/modules/ui/object/record-board/hooks/internal/useRemoveRecordBoardCardIdsInternal.ts
View File

@ -1,11 +1,14 @@
// 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 { useRecoilCallback } from 'recoil';
import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
import { boardColumnsState } from '../states/boardColumnsState';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
export const useRemoveCardIds = () =>
useRecoilCallback(
import { recordBoardCardIdsByColumnIdFamilyState } from '../../states/recordBoardCardIdsByColumnIdFamilyState';
export const useRemoveRecordBoardCardIdsInternal = () => {
const { boardColumnsState } = useRecordBoardScopedStates();
return useRecoilCallback(
({ snapshot, set }) =>
(cardIdToRemove: string[]) => {
const boardColumns = snapshot
@ -14,13 +17,16 @@ export const useRemoveCardIds = () =>
boardColumns.forEach((boardColumn) => {
const columnCardIds = snapshot
.getLoadable(boardCardIdsByColumnIdFamilyState(boardColumn.id))
.getLoadable(
recordBoardCardIdsByColumnIdFamilyState(boardColumn.id),
)
.valueOrThrow();
set(
boardCardIdsByColumnIdFamilyState(boardColumn.id),
recordBoardCardIdsByColumnIdFamilyState(boardColumn.id),
columnCardIds.filter((cardId) => !cardIdToRemove.includes(cardId)),
);
});
},
[],
[boardColumnsState],
);
};

23
front/src/modules/ui/object/record-board/hooks/useSetCardSelected.ts → front/src/modules/ui/object/record-board/hooks/internal/useSetRecordBoardCardSelectedInternal.ts
View File

@ -1,17 +1,27 @@
import { useRecoilCallback } from 'recoil';
import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { RecordBoardScopeInternalContext } from '@/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { activeCardIdsState } from '../states/activeCardIdsState';
import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
import { isRecordBoardCardSelectedFamilyState } from '../../states/isRecordBoardCardSelectedFamilyState';
export const useSetRecordBoardCardSelectedInternal = (props: any) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordBoardScopeInternalContext,
props?.recordBoardScopeId,
);
const { activeCardIdsState } = useRecordBoardScopedStates({
recordBoardScopeId: scopeId,
});
export const useSetCardSelected = () => {
const setCardSelected = useRecoilCallback(
({ set, snapshot }) =>
(cardId: string, selected: boolean) => {
const activeCardIds = snapshot.getLoadable(activeCardIdsState).contents;
set(isCardSelectedFamilyState(cardId), selected);
set(isRecordBoardCardSelectedFamilyState(cardId), selected);
set(actionBarOpenState, selected || activeCardIds.length > 0);
if (selected) {
@ -23,6 +33,7 @@ export const useSetCardSelected = () => {
);
}
},
[activeCardIdsState],
);
const unselectAllActiveCards = useRecoilCallback(
@ -31,13 +42,13 @@ export const useSetCardSelected = () => {
const activeCardIds = snapshot.getLoadable(activeCardIdsState).contents;
activeCardIds.forEach((cardId: string) => {
set(isCardSelectedFamilyState(cardId), false);
set(isRecordBoardCardSelectedFamilyState(cardId), false);
});
set(activeCardIdsState, []);
set(actionBarOpenState, false);
},
[],
[activeCardIdsState],
);
return {

32
front/src/modules/ui/object/record-board/hooks/internal/useUpdateCompanyBoardCardIdsInternal.ts Normal file
View File

@ -0,0 +1,32 @@
import { useRecoilCallback } from 'recoil';
import { Opportunity } from '@/pipeline/types/Opportunity';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { recordBoardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/recordBoardCardIdsByColumnIdFamilyState';
export const useUpdateCompanyBoardCardIdsInternal = () => {
const { boardColumnsState } = useRecordBoardScopedStates();
return useRecoilCallback(
({ snapshot, set }) =>
(pipelineProgresses: Pick<Opportunity, 'pipelineStepId' | 'id'>[]) => {
const boardColumns = snapshot
.getLoadable(boardColumnsState)
.valueOrThrow();
for (const boardColumn of boardColumns) {
const boardCardIds = pipelineProgresses
.filter((pipelineProgressToFilter) => {
return pipelineProgressToFilter.pipelineStepId === boardColumn.id;
})
.map((pipelineProgress) => pipelineProgress.id);
set(
recordBoardCardIdsByColumnIdFamilyState(boardColumn.id),
boardCardIds,
);
}
},
[boardColumnsState],
);
};

28
front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts → front/src/modules/ui/object/record-board/hooks/internal/useUpdateCompanyBoardColumnsInternal.ts
View File

@ -4,19 +4,24 @@ import { currentPipelineStepsState } from '@/pipeline/states/currentPipelineStep
import { Opportunity } from '@/pipeline/types/Opportunity';
import { PipelineStep } from '@/pipeline/types/PipelineStep';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
import { boardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState';
import { boardColumnsState } from '@/ui/object/record-board/states/boardColumnsState';
import { savedBoardColumnsState } from '@/ui/object/record-board/states/savedBoardColumnsState';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { recordBoardCardIdsByColumnIdFamilyState } from '@/ui/object/record-board/states/recordBoardCardIdsByColumnIdFamilyState';
import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { logError } from '~/utils/logError';
import { companyProgressesFamilyState } from '../states/companyProgressesFamilyState';
import { CompanyForBoard, CompanyProgressDict } from '../types/CompanyProgress';
import { companyProgressesFamilyState } from '../../../../../companies/states/companyProgressesFamilyState';
import {
CompanyForBoard,
CompanyProgressDict,
} from '../../../../../companies/types/CompanyProgress';
export const useUpdateCompanyBoard = () =>
useRecoilCallback(
export const useUpdateCompanyBoardColumnsInternal = () => {
const { boardColumnsState, savedBoardColumnsState } =
useRecordBoardScopedStates();
return useRecoilCallback(
({ set, snapshot }) =>
(
pipelineSteps: PipelineStep[],
@ -125,16 +130,19 @@ export const useUpdateCompanyBoard = () =>
.map((opportunity) => opportunity.id);
const currentBoardCardIds = snapshot
.getLoadable(boardCardIdsByColumnIdFamilyState(boardColumn.id))
.getLoadable(
recordBoardCardIdsByColumnIdFamilyState(boardColumn.id),
)
.valueOrThrow();
if (!isDeeplyEqual(currentBoardCardIds, boardCardIds)) {
set(
boardCardIdsByColumnIdFamilyState(boardColumn.id),
recordBoardCardIdsByColumnIdFamilyState(boardColumn.id),
boardCardIds,
);
}
}
},
[],
[boardColumnsState, savedBoardColumnsState],
);
};

43
front/src/modules/ui/object/record-board/hooks/useUpdateBoardCardIds.ts → front/src/modules/ui/object/record-board/hooks/internal/useUpdateRecordBoardCardIdsInternal.ts
View File

@ -1,12 +1,30 @@
import { DropResult } 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 { useRecoilCallback } from 'recoil';
import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
import { boardColumnsState } from '../states/boardColumnsState';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { RecordBoardScopeInternalContext } from '@/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
export const useUpdateBoardCardIds = () =>
useRecoilCallback(
import { recordBoardCardIdsByColumnIdFamilyState } from '../../states/recordBoardCardIdsByColumnIdFamilyState';
import { BoardColumnDefinition } from '../../types/BoardColumnDefinition';
type useUpdateRecordBoardCardIdsInternalProps = {
recordBoardScopeId?: string;
};
export const useUpdateRecordBoardCardIdsInternal = (
props: useUpdateRecordBoardCardIdsInternalProps,
) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordBoardScopeInternalContext,
props?.recordBoardScopeId,
);
const { boardColumnsState } = useRecordBoardScopedStates({
recordBoardScopeId: scopeId,
});
return useRecoilCallback(
({ snapshot, set }) =>
(result: DropResult) => {
const currentBoardColumns = snapshot
@ -37,14 +55,16 @@ export const useUpdateBoardCardIds = () =>
const sourceCardIds = [
...snapshot
.getLoadable(boardCardIdsByColumnIdFamilyState(sourceColumn.id))
.getLoadable(
recordBoardCardIdsByColumnIdFamilyState(sourceColumn.id),
)
.valueOrThrow(),
];
const destinationCardIds = [
...snapshot
.getLoadable(
boardCardIdsByColumnIdFamilyState(destinationColumn.id),
recordBoardCardIdsByColumnIdFamilyState(destinationColumn.id),
)
.valueOrThrow(),
];
@ -60,7 +80,7 @@ export const useUpdateBoardCardIds = () =>
sourceCardIds.splice(destinationIndex, 0, deletedCardId);
set(
boardCardIdsByColumnIdFamilyState(sourceColumn.id),
recordBoardCardIdsByColumnIdFamilyState(sourceColumn.id),
sourceCardIds,
);
} else {
@ -69,17 +89,18 @@ export const useUpdateBoardCardIds = () =>
destinationCardIds.splice(destinationIndex, 0, removedCardId);
set(
boardCardIdsByColumnIdFamilyState(sourceColumn.id),
recordBoardCardIdsByColumnIdFamilyState(sourceColumn.id),
sourceCardIds,
);
set(
boardCardIdsByColumnIdFamilyState(destinationColumn.id),
recordBoardCardIdsByColumnIdFamilyState(destinationColumn.id),
destinationCardIds,
);
}
return newBoardColumns;
},
[],
[boardColumnsState],
);
};

61
front/src/modules/ui/object/record-board/hooks/useBoardCardFields.ts
View File

@ -1,61 +0,0 @@
import { useCallback } from 'react';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { savedBoardCardFieldsFamilyState } from '@/ui/object/record-board/states/savedBoardCardFieldsFamilyState';
import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState';
import { useBoardContext } from './useBoardContext';
export const useBoardCardFields = () => {
const { BoardRecoilScopeContext, onFieldsChange } = useBoardContext();
const [, setBoardCardFields] = useRecoilScopedState(
boardCardFieldsScopedState,
BoardRecoilScopeContext,
);
const [, setSavedBoardCardFields] = useRecoilScopedState(
savedBoardCardFieldsFamilyState,
BoardRecoilScopeContext,
);
const handleFieldVisibilityChange = (
field: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
) => {
setBoardCardFields((previousFields) =>
previousFields.map((previousField) =>
previousField.fieldMetadataId === field.fieldMetadataId
? { ...previousField, isVisible: !field.isVisible }
: previousField,
),
);
};
const handleFieldsChange = useCallback(
async (fields: BoardFieldDefinition<FieldMetadata>[]) => {
setSavedBoardCardFields(fields);
setBoardCardFields(fields);
await onFieldsChange?.(fields);
},
[setBoardCardFields, setSavedBoardCardFields, onFieldsChange],
);
const handleFieldsReorder = useCallback(
async (fields: BoardFieldDefinition<FieldMetadata>[]) => {
const updatedFields = fields.map((column, index) => ({
...column,
position: index,
}));
await handleFieldsChange(updatedFields);
},
[handleFieldsChange],
);
return { handleFieldVisibilityChange, handleFieldsReorder };
};

7
front/src/modules/ui/object/record-board/hooks/useBoardContext.ts
View File

@ -1,7 +0,0 @@
import { useContext } from 'react';
import { BoardContext } from '@/companies/states/contexts/BoardContext';
export const useBoardContext = () => {
return useContext(BoardContext);
};

37
front/src/modules/ui/object/record-board/hooks/useRecordBoard.ts Normal file
View File

@ -0,0 +1,37 @@
import { useSetRecoilState } from 'recoil';
import { useCreateOpportunity } from '@/ui/object/record-board/hooks/internal/useCreateOpportunity';
import { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { RecordBoardScopeInternalContext } from '@/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type useRecordBoardProps = {
recordBoardScopeId?: string;
};
export const useRecordBoard = (props?: useRecordBoardProps) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordBoardScopeInternalContext,
props?.recordBoardScopeId,
);
const { isBoardLoadedState, boardColumnsState, onFieldsChangeState } =
useRecordBoardScopedStates({
recordBoardScopeId: scopeId,
});
const setIsBoardLoaded = useSetRecoilState(isBoardLoadedState);
const setBoardColumns = useSetRecoilState(boardColumnsState);
const createOpportunity = useCreateOpportunity();
const setOnFieldsChange = useSetRecoilState(onFieldsChangeState);
return {
scopeId,
setIsBoardLoaded,
setBoardColumns,
createOpportunity,
setOnFieldsChange,
};
};

26
front/src/modules/ui/object/record-board/options/components/BoardOptionsDropdown.tsx → front/src/modules/ui/object/record-board/options/components/RecordBoardOptionsDropdown.tsx
View File

@ -5,28 +5,32 @@ import { DropdownScope } from '../../../../layout/dropdown/scopes/DropdownScope'
import { BoardOptionsDropdownId } from '../../components/constants/BoardOptionsDropdownId';
import { BoardOptionsHotkeyScope } from '../../types/BoardOptionsHotkeyScope';
import { BoardOptionsDropdownButton } from './BoardOptionsDropdownButton';
import { RecordBoardOptionsDropdownButton } from './RecordBoardOptionsDropdownButton';
import {
BoardOptionsDropdownContent,
BoardOptionsDropdownContentProps,
} from './BoardOptionsDropdownContent';
RecordBoardOptionsDropdownContent,
RecordBoardOptionsDropdownContentProps,
} from './RecordBoardOptionsDropdownContent';
type BoardOptionsDropdownProps = Pick<
BoardOptionsDropdownContentProps,
'onStageAdd'
type RecordBoardOptionsDropdownProps = Pick<
RecordBoardOptionsDropdownContentProps,
'onStageAdd' | 'recordBoardId'
>;
export const BoardOptionsDropdown = ({
export const RecordBoardOptionsDropdown = ({
onStageAdd,
}: BoardOptionsDropdownProps) => {
recordBoardId,
}: RecordBoardOptionsDropdownProps) => {
const { setViewEditMode } = useViewBar();
return (
<DropdownScope dropdownScopeId={BoardOptionsDropdownId}>
<Dropdown
clickableComponent={<BoardOptionsDropdownButton />}
clickableComponent={<RecordBoardOptionsDropdownButton />}
dropdownComponents={
<BoardOptionsDropdownContent onStageAdd={onStageAdd} />
<RecordBoardOptionsDropdownContent
onStageAdd={onStageAdd}
recordBoardId={recordBoardId}
/>
}
dropdownHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }}
onClickOutside={() => setViewEditMode('none')}

2
front/src/modules/ui/object/record-board/options/components/BoardOptionsDropdownButton.tsx → front/src/modules/ui/object/record-board/options/components/RecordBoardOptionsDropdownButton.tsx
View File

@ -1,7 +1,7 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
export const BoardOptionsDropdownButton = () => {
export const RecordBoardOptionsDropdownButton = () => {
const { isDropdownOpen, toggleDropdown } = useDropdown();
const handleClick = () => {

43
front/src/modules/ui/object/record-board/options/components/BoardOptionsDropdownContent.tsx → front/src/modules/ui/object/record-board/options/components/RecordBoardOptionsDropdownContent.tsx
View File

@ -1,10 +1,9 @@
import { useCallback, useContext, useRef, useState } from 'react';
import { useCallback, useRef, useState } from 'react';
import { OnDragEndResponder } from '@hello-pangea/dnd';
import { useRecoilState, useRecoilValue } from 'recoil';
import { Key } from 'ts-key-enum';
import { v4 } from 'uuid';
import { BoardContext } from '@/companies/states/contexts/BoardContext';
import {
IconBaselineDensitySmall,
IconChevronLeft,
@ -21,23 +20,20 @@ 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 { useRecordBoardScopedStates } from '@/ui/object/record-board/hooks/internal/useRecordBoardScopedStates';
import { ThemeColor } from '@/ui/theme/constants/colors';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { useViewBar } from '@/views/hooks/useViewBar';
import { useBoardCardFields } from '../../hooks/useBoardCardFields';
import { boardColumnsState } from '../../states/boardColumnsState';
import { isCompactViewEnabledState } from '../../states/isCompactViewEnabledState';
import { hiddenBoardCardFieldsScopedSelector } from '../../states/selectors/hiddenBoardCardFieldsScopedSelector';
import { visibleBoardCardFieldsScopedSelector } from '../../states/selectors/visibleBoardCardFieldsScopedSelector';
import { useRecordBoardCardFieldsInternal } from '../../hooks/internal/useRecordBoardCardFieldsInternal';
import { BoardColumnDefinition } from '../../types/BoardColumnDefinition';
import { BoardOptionsHotkeyScope } from '../../types/BoardOptionsHotkeyScope';
export type BoardOptionsDropdownContentProps = {
export type RecordBoardOptionsDropdownContentProps = {
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
recordBoardId: string;
};
type BoardOptionsMenu = 'fields' | 'stage-creation' | 'stages';
@ -49,12 +45,12 @@ type ColumnForCreate = {
title: string;
};
export const BoardOptionsDropdownContent = ({
export const RecordBoardOptionsDropdownContent = ({
onStageAdd,
}: BoardOptionsDropdownContentProps) => {
recordBoardId,
}: RecordBoardOptionsDropdownContentProps) => {
const { setViewEditMode, handleViewNameSubmit } = useViewBar();
const { viewEditModeState, currentViewSelector } = useViewScopedStates();
const { BoardRecoilScopeContext } = useContext(BoardContext);
const viewEditMode = useRecoilValue(viewEditModeState);
const currentView = useRecoilValue(currentViewSelector);
@ -66,21 +62,22 @@ export const BoardOptionsDropdownContent = ({
BoardOptionsMenu | undefined
>();
const {
boardColumnsState,
isCompactViewEnabledState,
hiddenBoardCardFieldsSelector,
visibleBoardCardFieldsSelector,
} = useRecordBoardScopedStates({ recordBoardScopeId: recordBoardId });
const [boardColumns, setBoardColumns] = useRecoilState(boardColumnsState);
const [isCompactViewEnabled, setIsCompactViewEnabled] = useRecoilState(
isCompactViewEnabledState,
);
const hiddenBoardCardFields = useRecoilScopedValue(
hiddenBoardCardFieldsScopedSelector,
BoardRecoilScopeContext,
);
const hiddenBoardCardFields = useRecoilValue(hiddenBoardCardFieldsSelector);
const hasHiddenFields = hiddenBoardCardFields.length > 0;
const visibleBoardCardFields = useRecoilScopedValue(
visibleBoardCardFieldsScopedSelector,
BoardRecoilScopeContext,
);
const visibleBoardCardFields = useRecoilValue(visibleBoardCardFieldsSelector);
const hasVisibleFields = visibleBoardCardFields.length > 0;
const handleStageSubmit = () => {
@ -109,7 +106,9 @@ export const BoardOptionsDropdownContent = ({
};
const { handleFieldVisibilityChange, handleFieldsReorder } =
useBoardCardFields();
useRecordBoardCardFieldsInternal({
recordBoardScopeId: recordBoardId,
});
const { closeDropdown } = useDropdown();

23
front/src/modules/ui/object/record-board/scopes/RecordBoardScope.tsx Normal file
View File

@ -0,0 +1,23 @@
import { ReactNode } from 'react';
import { RecordBoardScopeInternalContext } from '@/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext';
type RecordBoardScopeProps = {
children: ReactNode;
recordBoardScopeId: string;
};
export const RecordBoardScope = ({
children,
recordBoardScopeId,
}: RecordBoardScopeProps) => {
return (
<RecordBoardScopeInternalContext.Provider
value={{
scopeId: recordBoardScopeId,
}}
>
{children}
</RecordBoardScopeInternalContext.Provider>
);
};

7
front/src/modules/ui/object/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts Normal file
View File

@ -0,0 +1,7 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type RecordBoardScopeInternalContext = ScopedStateKey;
export const RecordBoardScopeInternalContext =
createScopeInternalContext<RecordBoardScopeInternalContext>();

6
front/src/modules/ui/object/record-board/states/activeCardIdsState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const activeCardIdsState = atom<string[]>({
key: 'activeCardIdsState',
default: [],
});

6
front/src/modules/ui/object/record-board/states/activeRecordBoardCardIdsScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const activeRecordBoardCardIdsScopedState = createScopedState<string[]>({
key: 'activeRecordBoardCardIdsScopedState',
defaultValue: [],
});

11
front/src/modules/ui/object/record-board/states/availableRecordBoardCardFieldsScopedState.ts Normal file
View File

@ -0,0 +1,11 @@
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
export const availableRecordBoardCardFieldsScopedState = createScopedState<
BoardFieldDefinition<FieldMetadata>[]
>({
key: 'availableRecordBoardCardFieldsScopedState',
defaultValue: [],
});

13
front/src/modules/ui/object/record-board/states/boardCardFieldsScopedState.ts
View File

@ -1,13 +0,0 @@
import { atomFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
export const boardCardFieldsScopedState = atomFamily<
BoardFieldDefinition<FieldMetadata>[],
string
>({
key: 'boardCardFieldsScopedState',
default: [],
});

6
front/src/modules/ui/object/record-board/states/boardCardIdsByColumnIdFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const boardCardIdsByColumnIdFamilyState = atomFamily<string[], string>({
key: 'boardCardIdsByColumnIdFamilyState',
default: [],
});

8
front/src/modules/ui/object/record-board/states/boardColumnsState.ts
View File

@ -1,8 +0,0 @@
import { atom } from 'recoil';
import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
export const boardColumnsState = atom<BoardColumnDefinition[]>({
key: 'boardColumnsState',
default: [],
});

6
front/src/modules/ui/object/record-board/states/isBoardLoadedState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const isBoardLoadedState = atom<boolean>({
key: 'isBoardLoadedState',
default: false,
});

6
front/src/modules/ui/object/record-board/states/isCardInCompactViewState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const isCardInCompactViewState = atomFamily<boolean, string>({
key: 'isCardInCompactViewState',
default: true,
});

6
front/src/modules/ui/object/record-board/states/isCardSelectedFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const isCardSelectedFamilyState = atomFamily<boolean, string>({
key: 'isCardSelectedFamilyState',
default: false,
});

6
front/src/modules/ui/object/record-board/states/isCompactViewEnabledScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isCompactViewEnabledScopedState = createScopedState<boolean>({
key: 'isCompactViewEnabledScopedState',
defaultValue: false,
});

6
front/src/modules/ui/object/record-board/states/isCompactViewEnabledState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const isCompactViewEnabledState = atom<boolean>({
key: 'isCompactViewEnabledState',
default: false,
});

9
front/src/modules/ui/object/record-board/states/isRecordBoardCardInCompactViewFamilyState.ts Normal file
View File

@ -0,0 +1,9 @@
import { atomFamily } from 'recoil';
export const isRecordBoardCardInCompactViewFamilyState = atomFamily<
boolean,
string
>({
key: 'isRecordBoardCardInCompactViewFamilyState',
default: true,
});

8
front/src/modules/ui/object/record-board/states/isRecordBoardCardSelectedFamilyState.ts Normal file
View File

@ -0,0 +1,8 @@
import { atomFamily } from 'recoil';
export const isRecordBoardCardSelectedFamilyState = atomFamily<boolean, string>(
{
key: 'isRecordBoardCardSelectedFamilyState',
default: false,
},
);

6
front/src/modules/ui/object/record-board/states/isRecordBoardLoadedScopedState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isRecordBoardLoadedScopedState = createScopedState<boolean>({
key: 'isRecordBoardLoadedScopedState',
defaultValue: false,
});

10
front/src/modules/ui/object/record-board/states/onFieldsChangeScopedState.ts Normal file
View File

@ -0,0 +1,10 @@
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { BoardFieldDefinition } from '@/ui/object/record-board/types/BoardFieldDefinition';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const onFieldsChangeScopedState = createScopedState<
(fields: BoardFieldDefinition<FieldMetadata>[]) => void
>({
key: 'onFieldsChangeScopedState',
defaultValue: () => {},
});

3
front/src/modules/ui/object/record-board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext.ts
View File

@ -1,3 +0,0 @@
import { createContext } from 'react';
export const BoardColumnRecoilScopeContext = createContext<string | null>(null);

4
front/src/modules/ui/object/record-board/states/availableBoardCardFieldsScopedState.ts → front/src/modules/ui/object/record-board/states/recordBoardCardFieldsScopedState.ts
View File

@ -3,9 +3,9 @@ import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScope
import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
export const availableBoardCardFieldsScopedState = createScopedState<
export const recordBoardCardFieldsScopedState = createScopedState<
BoardFieldDefinition<FieldMetadata>[]
>({
key: 'availableBoardCardFieldsScopedState',
key: 'recordBoardCardFieldsScopedState',
defaultValue: [],
});

9
front/src/modules/ui/object/record-board/states/recordBoardCardIdsByColumnIdFamilyState.ts Normal file
View File

@ -0,0 +1,9 @@
import { atomFamily } from 'recoil';
export const recordBoardCardIdsByColumnIdFamilyState = atomFamily<
string[],
string
>({
key: 'recordBoardCardIdsByColumnIdFamilyState',
default: [],
});

9
front/src/modules/ui/object/record-board/states/recordBoardColumnsScopedState.ts Normal file
View File

@ -0,0 +1,9 @@
import { BoardColumnDefinition } from '@/ui/object/record-board/types/BoardColumnDefinition';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const recordBoardColumnsScopedState = createScopedState<
BoardColumnDefinition[]
>({
key: 'recordBoardColumnsScopedState',
defaultValue: [],
});

7
front/src/modules/ui/object/record-board/states/recordBoardFiltersScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const recordBoardFiltersScopedState = createScopedState<Filter[]>({
key: 'recordBoardFiltersScopedState',
defaultValue: [],
});

8
front/src/modules/ui/object/record-board/states/recordBoardSortsScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { Sort } from '../../object-sort-dropdown/types/Sort';
export const recordBoardSortsScopedState = createScopedState<Sort[]>({
key: 'recordBoardSortsScopedState',
defaultValue: [],
});

13
front/src/modules/ui/object/record-board/states/savedBoardCardFieldsFamilyState.ts
View File

@ -1,13 +0,0 @@
import { atomFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
export const savedBoardCardFieldsFamilyState = atomFamily<
BoardFieldDefinition<FieldMetadata>[],
string | undefined
>({
key: 'savedBoardCardFieldsFamilyState',
default: [],
});

8
front/src/modules/ui/object/record-board/states/savedBoardColumnsState.ts
View File

@ -1,8 +0,0 @@
import { atom } from 'recoil';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
export const savedBoardColumnsState = atom<BoardColumnDefinition[]>({
key: 'savedBoardColumnsState',
default: [],
});

7
front/src/modules/ui/object/record-board/states/savedOpportunitiesScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { Opportunity } from '@/pipeline/types/Opportunity';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const savedOpportunitiesScopedState = createScopedState<Opportunity[]>({
key: 'savedOpportunitiesScopedState',
defaultValue: [],
});

7
front/src/modules/ui/object/record-board/states/savedPipelineStepsScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { PipelineStep } from '@/pipeline/types/PipelineStep';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const savedPipelineStepsScopedState = createScopedState<PipelineStep[]>({
key: 'savedPipelineStepsScopedState',
defaultValue: [],
});

11
front/src/modules/ui/object/record-board/states/savedRecordBoardCardFieldsScopedState.ts Normal file
View File

@ -0,0 +1,11 @@
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
export const savedRecordBoardCardFieldsScopedState = createScopedState<
BoardFieldDefinition<FieldMetadata>[]
>({
key: 'savedRecordBoardCardFieldsScopedState',
defaultValue: [],
});

10
front/src/modules/ui/object/record-board/states/savedRecordBoardColumnsScopedState.ts Normal file
View File

@ -0,0 +1,10 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
export const savedRecordBoardColumnsScopedState = createScopedState<
BoardColumnDefinition[]
>({
key: 'savedRecordBoardColumnsScopedState',
defaultValue: [],
});

7
front/src/modules/ui/object/record-board/states/savedRecordsScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { Company } from '@/companies/types/Company';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const savedRecordsScopedState = createScopedState<Company[]>({
key: 'savedRecordsScopedState',
defaultValue: [],
});

23
front/src/modules/ui/object/record-board/states/selectors/canPersistBoardCardFieldsScopedFamilySelector.ts
View File

@ -1,23 +0,0 @@
import { selectorFamily } from 'recoil';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
import { savedBoardCardFieldsFamilyState } from '../savedBoardCardFieldsFamilyState';
export const canPersistBoardCardFieldsScopedFamilySelector = selectorFamily({
key: 'canPersistBoardCardFieldsScopedFamilySelector',
get:
({
recoilScopeId,
viewId,
}: {
recoilScopeId: string;
viewId: string | undefined;
}) =>
({ get }) =>
!isDeeplyEqual(
get(savedBoardCardFieldsFamilyState(viewId)),
get(boardCardFieldsScopedState(recoilScopeId)),
),
});

12
front/src/modules/ui/object/record-board/states/selectors/canPersistBoardColumnsSelector.ts
View File

@ -1,12 +0,0 @@
import { selector } from 'recoil';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { boardColumnsState } from '../boardColumnsState';
import { savedBoardColumnsState } from '../savedBoardColumnsState';
export const canPersistBoardColumnsSelector = selector<boolean>({
key: 'canPersistBoardCardFieldsScopedFamilySelector',
get: ({ get }) =>
!isDeeplyEqual(get(boardColumnsState), get(savedBoardColumnsState)),
});

22
front/src/modules/ui/object/record-board/states/selectors/hiddenBoardCardFieldsScopedSelector.ts
View File

@ -1,22 +0,0 @@
import { selectorFamily } from 'recoil';
import { availableBoardCardFieldsScopedState } from '../availableBoardCardFieldsScopedState';
import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
export const hiddenBoardCardFieldsScopedSelector = selectorFamily({
key: 'hiddenBoardCardFieldsScopedSelector',
get:
(scopeId: string) =>
({ get }) => {
const fields = get(boardCardFieldsScopedState(scopeId));
const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
const otherAvailableKeys = get(
availableBoardCardFieldsScopedState({ scopeId }),
).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));
return [
...fields.filter((field) => !field.isVisible),
...otherAvailableKeys,
];
},
});

22
front/src/modules/ui/object/record-board/states/selectors/hiddenRecordBoardCardFieldsScopedSelector.ts Normal file
View File

@ -0,0 +1,22 @@
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { availableRecordBoardCardFieldsScopedState } from '../availableRecordBoardCardFieldsScopedState';
import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';
export const hiddenRecordBoardCardFieldsScopedSelector = createScopedSelector({
key: 'hiddenRecordBoardCardFieldsScopedSelector',
get:
({ scopeId }) =>
({ get }) => {
const fields = get(recordBoardCardFieldsScopedState({ scopeId }));
const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
const otherAvailableKeys = get(
availableRecordBoardCardFieldsScopedState({ scopeId }),
).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));
return [
...fields.filter((field) => !field.isVisible),
...otherAvailableKeys,
];
},
});

8
front/src/modules/ui/object/record-board/states/selectors/boardCardFieldsByKeyScopedSelector.ts → front/src/modules/ui/object/record-board/states/selectors/recordBoardCardFieldsByKeyScopedSelector.ts
View File

@ -3,14 +3,14 @@ import { selectorFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { BoardFieldDefinition } from '../../types/BoardFieldDefinition';
import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';
export const boardCardFieldsByKeyScopedSelector = selectorFamily({
key: 'boardCardFieldsByKeyScopedSelector',
export const recordBoardCardFieldsByKeyScopedSelector = selectorFamily({
key: 'recordBoardCardFieldsByKeyScopedSelector',
get:
(scopeId: string) =>
({ get }) =>
get(boardCardFieldsScopedState(scopeId)).reduce<
get(recordBoardCardFieldsScopedState({ scopeId })).reduce<
Record<string, BoardFieldDefinition<FieldMetadata>>
>((result, field) => ({ ...result, [field.fieldMetadataId]: field }), {}),
});

10
front/src/modules/ui/object/record-board/states/selectors/boardColumnTotalsFamilySelector.ts → front/src/modules/ui/object/record-board/states/selectors/recordBoardColumnTotalsFamilySelector.ts
View File

@ -2,16 +2,18 @@ import { selectorFamily } from 'recoil';
import { companyProgressesFamilyState } from '@/companies/states/companyProgressesFamilyState';
import { boardCardIdsByColumnIdFamilyState } from '../boardCardIdsByColumnIdFamilyState';
import { recordBoardCardIdsByColumnIdFamilyState } from '../recordBoardCardIdsByColumnIdFamilyState';
// TODO: this state should be computed during the synchronization web-hook and put in a generic
// boardColumnTotalsFamilyState indexed by columnId.
export const boardColumnTotalsFamilySelector = selectorFamily({
key: 'boardColumnTotalsFamilySelector',
export const recordBoardColumnTotalsFamilySelector = selectorFamily({
key: 'recordBoardColumnTotalsFamilySelector',
get:
(pipelineStepId: string) =>
({ get }) => {
const cardIds = get(boardCardIdsByColumnIdFamilyState(pipelineStepId));
const cardIds = get(
recordBoardCardIdsByColumnIdFamilyState(pipelineStepId),
);
const opportunities = cardIds.map((opportunityId: string) =>
get(companyProgressesFamilyState(opportunityId)),

16
front/src/modules/ui/object/record-board/states/selectors/savedBoardCardFieldsByKeyFamilySelector.ts
View File

@ -1,16 +0,0 @@
import { selectorFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { BoardFieldDefinition } from '../../types/BoardFieldDefinition';
import { savedBoardCardFieldsFamilyState } from '../savedBoardCardFieldsFamilyState';
export const savedBoardCardFieldsByKeyFamilySelector = selectorFamily({
key: 'savedBoardCardFieldsByKeyFamilySelector',
get:
(viewId: string | undefined) =>
({ get }) =>
get(savedBoardCardFieldsFamilyState(viewId)).reduce<
Record<string, BoardFieldDefinition<FieldMetadata>>
>((result, field) => ({ ...result, [field.fieldMetadataId]: field }), {}),
});

22
front/src/modules/ui/object/record-board/states/selectors/selectedCardIdsSelector.ts
View File

@ -1,22 +0,0 @@
import { selector } from 'recoil';
import { boardCardIdsByColumnIdFamilyState } from '../boardCardIdsByColumnIdFamilyState';
import { boardColumnsState } from '../boardColumnsState';
import { isCardSelectedFamilyState } from '../isCardSelectedFamilyState';
export const selectedCardIdsSelector = selector<string[]>({
key: 'selectedCardIdsSelector',
get: ({ get }) => {
const boardColumns = get(boardColumnsState);
const cardIds = boardColumns.flatMap((boardColumn) =>
get(boardCardIdsByColumnIdFamilyState(boardColumn.id)),
);
const selectedCardIds = cardIds.filter(
(cardId) => get(isCardSelectedFamilyState(cardId)) === true,
);
return selectedCardIds;
},
});

26
front/src/modules/ui/object/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector.ts Normal file
View File

@ -0,0 +1,26 @@
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { isRecordBoardCardSelectedFamilyState } from '../isRecordBoardCardSelectedFamilyState';
import { recordBoardCardIdsByColumnIdFamilyState } from '../recordBoardCardIdsByColumnIdFamilyState';
import { recordBoardColumnsScopedState } from '../recordBoardColumnsScopedState';
export const selectedRecordBoardCardIdsScopedSelector = createScopedSelector<
string[]
>({
key: 'selectedRecordBoardCardIdsScopedSelector',
get:
({ scopeId }) =>
({ get }) => {
const boardColumns = get(recordBoardColumnsScopedState({ scopeId }));
const cardIds = boardColumns.flatMap((boardColumn) =>
get(recordBoardCardIdsByColumnIdFamilyState(boardColumn.id)),
);
const selectedCardIds = cardIds.filter(
(cardId) => get(isRecordBoardCardSelectedFamilyState(cardId)) === true,
);
return selectedCardIds;
},
});

13
front/src/modules/ui/object/record-board/states/selectors/visibleBoardCardFieldsScopedSelector.ts
View File

@ -1,13 +0,0 @@
import { selectorFamily } from 'recoil';
import { boardCardFieldsScopedState } from '../boardCardFieldsScopedState';
export const visibleBoardCardFieldsScopedSelector = selectorFamily({
key: 'visibleBoardCardFieldsScopedSelector',
get:
(scopeId: string) =>
({ get }) =>
get(boardCardFieldsScopedState(scopeId))
.filter((field) => field.isVisible)
.sort((a, b) => a.position - b.position),
});

13
front/src/modules/ui/object/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector.ts Normal file
View File

@ -0,0 +1,13 @@
import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';
export const visibleRecordBoardCardFieldsScopedSelector = createScopedSelector({
key: 'visibleRecordBoardCardFieldsScopedSelector',
get:
({ scopeId }) =>
({ get }) =>
get(recordBoardCardFieldsScopedState({ scopeId }))
.filter((field) => field.isVisible)
.sort((a, b) => a.position - b.position),
});

120
front/src/modules/ui/object/record-board/utils/getRecordBoardScopedStates.ts Normal file
View File

@ -0,0 +1,120 @@
import { activeRecordBoardCardIdsScopedState } from '@/ui/object/record-board/states/activeRecordBoardCardIdsScopedState';
import { availableRecordBoardCardFieldsScopedState } from '@/ui/object/record-board/states/availableRecordBoardCardFieldsScopedState';
import { isCompactViewEnabledScopedState } from '@/ui/object/record-board/states/isCompactViewEnabledScopedState';
import { isRecordBoardLoadedScopedState } from '@/ui/object/record-board/states/isRecordBoardLoadedScopedState';
import { onFieldsChangeScopedState } from '@/ui/object/record-board/states/onFieldsChangeScopedState';
import { recordBoardColumnsScopedState } from '@/ui/object/record-board/states/recordBoardColumnsScopedState';
import { recordBoardFiltersScopedState } from '@/ui/object/record-board/states/recordBoardFiltersScopedState';
import { recordBoardSortsScopedState } from '@/ui/object/record-board/states/recordBoardSortsScopedState';
import { savedOpportunitiesScopedState } from '@/ui/object/record-board/states/savedOpportunitiesScopedState';
import { savedPipelineStepsScopedState } from '@/ui/object/record-board/states/savedPipelineStepsScopedState';
import { savedRecordBoardColumnsScopedState } from '@/ui/object/record-board/states/savedRecordBoardColumnsScopedState';
import { savedRecordsScopedState } from '@/ui/object/record-board/states/savedRecordsScopedState';
import { hiddenRecordBoardCardFieldsScopedSelector } from '@/ui/object/record-board/states/selectors/hiddenRecordBoardCardFieldsScopedSelector';
import { recordBoardCardFieldsByKeyScopedSelector } from '@/ui/object/record-board/states/selectors/recordBoardCardFieldsByKeyScopedSelector';
import { selectedRecordBoardCardIdsScopedSelector } from '@/ui/object/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector';
import { visibleRecordBoardCardFieldsScopedSelector } from '@/ui/object/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
export const getRecordBoardScopedStates = ({
recordBoardScopeId,
}: {
recordBoardScopeId: string;
}) => {
const activeCardIdsState = getScopedState(
activeRecordBoardCardIdsScopedState,
recordBoardScopeId,
);
const availableBoardCardFieldsState = getScopedState(
availableRecordBoardCardFieldsScopedState,
recordBoardScopeId,
);
const boardColumnsState = getScopedState(
recordBoardColumnsScopedState,
recordBoardScopeId,
);
const isBoardLoadedState = getScopedState(
isRecordBoardLoadedScopedState,
recordBoardScopeId,
);
const isCompactViewEnabledState = getScopedState(
isCompactViewEnabledScopedState,
recordBoardScopeId,
);
const savedBoardColumnsState = getScopedState(
savedRecordBoardColumnsScopedState,
recordBoardScopeId,
);
const boardFiltersState = getScopedState(
recordBoardFiltersScopedState,
recordBoardScopeId,
);
const boardSortsState = getScopedState(
recordBoardSortsScopedState,
recordBoardScopeId,
);
const savedCompaniesState = getScopedState(
savedRecordsScopedState,
recordBoardScopeId,
);
const savedOpportunitiesState = getScopedState(
savedOpportunitiesScopedState,
recordBoardScopeId,
);
const savedPipelineStepsState = getScopedState(
savedPipelineStepsScopedState,
recordBoardScopeId,
);
const onFieldsChangeState = getScopedState(
onFieldsChangeScopedState,
recordBoardScopeId,
);
// TODO: Family scoped selector
const boardCardFieldsByKeySelector =
recordBoardCardFieldsByKeyScopedSelector(recordBoardScopeId);
const hiddenBoardCardFieldsSelector =
hiddenRecordBoardCardFieldsScopedSelector({
scopeId: recordBoardScopeId,
});
const selectedCardIdsSelector = selectedRecordBoardCardIdsScopedSelector({
scopeId: recordBoardScopeId,
});
const visibleBoardCardFieldsSelector =
visibleRecordBoardCardFieldsScopedSelector({
scopeId: recordBoardScopeId,
});
return {
activeCardIdsState,
availableBoardCardFieldsState,
boardColumnsState,
isBoardLoadedState,
isCompactViewEnabledState,
savedBoardColumnsState,
boardFiltersState,
boardSortsState,
onFieldsChangeState,
boardCardFieldsByKeySelector,
hiddenBoardCardFieldsSelector,
selectedCardIdsSelector,
visibleBoardCardFieldsSelector,
savedCompaniesState,
savedOpportunitiesState,
savedPipelineStepsState,
};
};

34
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import { CompanyBoard } from '@/companies/board/components/CompanyBoard';
import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { PipelineAddButton } from '@/pipeline/components/PipelineAddButton';
import { usePipelineSteps } from '@/pipeline/hooks/usePipelineSteps';
@ -10,9 +9,6 @@ import { IconTargetArrow } from '@/ui/display/icon';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageHeader } from '@/ui/layout/page/PageHeader';
import { BoardOptionsContext } from '@/ui/object/record-board/contexts/BoardOptionsContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
const StyledBoardContainer = styled.div`
display: flex;
@ -45,24 +41,18 @@ export const Opportunities = () => {
return (
<PageContainer>
<RecoilScope>
<PageHeader title="Opportunities" Icon={IconTargetArrow}>
<PipelineAddButton />
</PageHeader>
<PageBody>
<BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
<CompanyBoardRecoilScopeContext.Provider value="opportunities">
<StyledBoardContainer>
<CompanyBoard
onColumnAdd={handlePipelineStepAdd}
onColumnDelete={handlePipelineStepDelete}
onEditColumnTitle={handleEditColumnTitle}
/>
</StyledBoardContainer>
</CompanyBoardRecoilScopeContext.Provider>
</BoardOptionsContext.Provider>
</PageBody>
</RecoilScope>
<PageHeader title="Opportunities" Icon={IconTargetArrow}>
<PipelineAddButton />
</PageHeader>
<PageBody>
<StyledBoardContainer>
<CompanyBoard
onColumnAdd={handlePipelineStepAdd}
onColumnDelete={handlePipelineStepDelete}
onEditColumnTitle={handleEditColumnTitle}
/>
</StyledBoardContainer>
</PageBody>
</PageContainer>
);
};

7
front/src/pages/opportunities/opportunitiesBoardOptions.tsx
View File

@ -1,8 +1,13 @@
import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
import { NewOpportunityButton } from '@/companies/components/NewOpportunityButton';
import { BoardOptions } from '@/ui/object/record-board/types/BoardOptions';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
export const opportunitiesBoardOptions: BoardOptions = {
newCardComponent: <NewOpportunityButton />,
newCardComponent: (
<RecoilScope>
<NewOpportunityButton />
</RecoilScope>
),
CardComponent: CompanyBoardCard,
};