admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Board V2 - Part 1 (#2619)

Browse Source 
* improve useComputeDefinitionsFromFieldMetadata to prevent infinit loops

* fix viewFields

* improve initial seeding

* fix height 100%

* fix filters and sorts

* allow filter on currency

* remove probability from filter

* fix opportunities count

* fix persist filters and sorts
This commit is contained in:
bosiraphael
2023-11-21 18:01:30 +01:00
committed by GitHub
parent 9912f7a336
commit ad8331aa89
12 changed files with 152 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
import { BoardContext } from '@/companies/states/contexts/BoardContext';
import { BoardOptionsDropdown } from '@/ui/layout/board/components/BoardOptionsDropdown';
@ -10,6 +11,7 @@ import {
import { EntityBoardActionBar } from '@/ui/layout/board/components/EntityBoardActionBar';
import { EntityBoardContextMenu } from '@/ui/layout/board/components/EntityBoardContextMenu';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { ViewScope } from '@/views/scopes/ViewScope';
import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
@ -35,8 +37,32 @@ export const CompanyBoard = ({
onEditColumnTitle,
}: CompanyBoardProps) => {
const viewScopeId = 'company-board-view';
const {
currentViewFieldsState,
currentViewFiltersState,
currentViewSortsState,
} = useViewScopedStates({
customViewScopeId: viewScopeId,
});
const setCurrentViewFields = useSetRecoilState(currentViewFieldsState);
const setCurrentViewFilters = useSetRecoilState(currentViewFiltersState);
const setCurrentViewSorts = useSetRecoilState(currentViewSortsState);
return (
<ViewScope viewScopeId={viewScopeId}>
<ViewScope
viewScopeId={viewScopeId}
onViewFieldsChange={(viewFields) => {
setCurrentViewFields(viewFields);
}}
onViewFiltersChange={(viewFilters) => {
setCurrentViewFilters(viewFilters);
}}
onViewSortsChange={(viewSorts) => {
setCurrentViewSorts(viewSorts);
}}
>
<StyledContainer>
<BoardContext.Provider
value={{

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

@ -1,6 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { useCallback, useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { Company } from '@/companies/types/Company';
import { useComputeDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useComputeDefinitionsFromFieldMetadata';
@ -16,13 +15,16 @@ import { useBoardContextMenuEntries } from '@/ui/layout/board/hooks/useBoardCont
import { availableBoardCardFieldsScopedState } from '@/ui/layout/board/states/availableBoardCardFieldsScopedState';
import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFieldsScopedState';
import { isBoardLoadedState } from '@/ui/layout/board/states/isBoardLoadedState';
import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { useView } from '@/views/hooks/useView';
import { ViewType } from '@/views/types/ViewType';
import { mapViewFieldsToBoardFieldDefinitions } from '@/views/utils/mapViewFieldsToBoardFieldDefinitions';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
@ -37,13 +39,19 @@ export const HooksCompanyBoardEffect = () => {
setViewType,
} = useView();
const { currentViewFieldsState } = useViewScopedStates();
const {
currentViewFieldsState,
currentViewFiltersState,
currentViewSortsState,
} = useViewScopedStates();
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);
const { objectMetadataItem } = useObjectMetadataItem({
objectNamePlural: 'opportunities',
@ -64,6 +72,11 @@ export const HooksCompanyBoardEffect = () => {
const updateCompanyBoardCardIds = useUpdateCompanyBoardCardIds();
const updateCompanyBoard = useUpdateCompanyBoard();
const setAvailableBoardCardFields = useSetRecoilScopedStateV2(
availableBoardCardFieldsScopedState,
'company-board-view',
);
useFindManyObjectRecords({
objectNamePlural: 'pipelineSteps',
filter: {},
@ -75,23 +88,21 @@ export const HooksCompanyBoardEffect = () => {
),
});
const whereFilters = useMemo(() => {
return {
and: [
{
pipelineStepId: {
in: pipelineSteps.map((pipelineStep) => pipelineStep.id),
},
},
...[],
],
};
}, [pipelineSteps]) as any;
const filter = turnFiltersIntoWhereClauseV2(
mapViewFiltersToFilters(currentViewFilters),
objectMetadataItem?.fields ?? [],
);
const orderBy = turnSortsIntoOrderByV2(
mapViewSortsToSorts(currentViewSorts),
objectMetadataItem?.fields ?? [],
);
useFindManyObjectRecords({
skip: !pipelineSteps.length,
objectNamePlural: 'opportunities',
filter: whereFilters,
filter: filter,
orderBy: orderBy,
onCompleted: useCallback(
(data: PaginatedObjectTypeResults<Opportunity>) => {
const pipelineProgresses: Array<Opportunity> = data.edges.map(
@ -137,39 +148,6 @@ export const HooksCompanyBoardEffect = () => {
sortDefinitions,
]);
const setAvailableBoardCardFields = useRecoilCallback(
({ snapshot, set }) =>
(availableBoardCardFields: any) => {
const availableBoardCardFieldsFromState = snapshot
.getLoadable(
availableBoardCardFieldsScopedState({
scopeId: 'company-board-view',
}),
)
.getValue();
if (
!isDeeplyEqual(
availableBoardCardFieldsFromState,
availableBoardCardFields,
)
) {
set(
availableBoardCardFieldsScopedState({
scopeId: 'company-board-view',
}),
availableBoardCardFields,
);
}
},
[],
);
useRecoilScopedStateV2(
availableBoardCardFieldsScopedState,
'company-board-view',
);
useEffect(() => {
const availableTableColumns = columnDefinitions.filter(
filterAvailableTableColumns,
@ -179,11 +157,12 @@ export const HooksCompanyBoardEffect = () => {
}, [columnDefinitions, setAvailableBoardCardFields]);
useEffect(() => {
setViewObjectMetadataId?.('company');
if (!objectMetadataItem) {
return;
}
setViewObjectMetadataId?.(objectMetadataItem.id);
setViewType?.(ViewType.Kanban);
}, [setViewObjectMetadataId, setViewType]);
const [searchParams] = useSearchParams();
}, [objectMetadataItem, setViewObjectMetadataId, setViewType]);
const loading = !companies;
@ -194,9 +173,8 @@ export const HooksCompanyBoardEffect = () => {
if (!loading && opportunities && companies) {
setActionBarEntries();
setContextMenuEntries();
updateCompanyBoard(pipelineSteps, opportunities, companies);
setEntityCountInCurrentView(companies.length);
setEntityCountInCurrentView(opportunities.length);
}
}, [
companies,
@ -212,10 +190,13 @@ export const HooksCompanyBoardEffect = () => {
useEffect(() => {
if (currentViewFields) {
setBoardCardFields(
mapViewFieldsToBoardFieldDefinitions(currentViewFields, []),
mapViewFieldsToBoardFieldDefinitions(
currentViewFields,
columnDefinitions,
),
);
}
}, [currentViewFields, setBoardCardFields]);
}, [columnDefinitions, currentViewFields, setBoardCardFields]);
return <></>;
};

35
front/src/modules/object-metadata/hooks/useComputeDefinitionsFromFieldMetadata.ts
View File

@ -1,3 +1,5 @@
import { useMemo } from 'react';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
@ -10,25 +12,24 @@ import { formatFieldMetadataItemsAsSortDefinitions } from '../utils/formatFieldM
export const useComputeDefinitionsFromFieldMetadata = (
objectMetadataItem?: Nullable<ObjectMetadataItem>,
) => {
if (!objectMetadataItem) {
return {
columnDefinitions: [],
filterDefinitions: [],
sortDefinitions: [],
};
}
const activeFieldMetadataItems = objectMetadataItem.fields.filter(
({ isActive }) => isActive,
const activeFieldMetadataItems = useMemo(
() =>
objectMetadataItem
? objectMetadataItem.fields.filter(({ isActive }) => isActive)
: [],
[objectMetadataItem],
);
const columnDefinitions: ColumnDefinition<FieldMetadata>[] =
activeFieldMetadataItems.map((field, index) =>
formatFieldMetadataItemAsColumnDefinition({
position: index,
field,
}),
);
const columnDefinitions: ColumnDefinition<FieldMetadata>[] = useMemo(
() =>
activeFieldMetadataItems.map((field, index) =>
formatFieldMetadataItemAsColumnDefinition({
position: index,
field,
}),
),
[activeFieldMetadataItems],
);
const filterDefinitions = formatFieldMetadataItemsAsFilterDefinitions({
fields: activeFieldMetadataItems,

6
front/src/modules/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions.ts
View File

@ -13,8 +13,10 @@ export const formatFieldMetadataItemsAsFilterDefinitions = ({
![
FieldMetadataType.DateTime,
FieldMetadataType.Number,
FieldMetadataType.Currency,
FieldMetadataType.Text,
].includes(field.type)
].includes(field.type) ||
field.name === 'probability'
) {
return acc;
}
@ -34,5 +36,7 @@ const formatFieldMetadataItemAsFilterDefinition = ({
? 'DATE_TIME'
: field.type === FieldMetadataType.Number
? 'NUMBER'
: field.type === FieldMetadataType.Currency
? 'CURRENCY'
: 'TEXT',
});

9
front/src/modules/settings/data-model/types/ObjectFieldDataType.ts
View File

@ -1,9 +0,0 @@
export type MetadataFieldDataType =
| 'BOOLEAN'
| 'DATE_TIME'
| 'ENUM'
| 'MONEY'
| 'NUMBER'
| 'RELATION'
| 'TEXT'
| 'URL';

3
front/src/modules/ui/object/field/types/FieldType.ts
View File

@ -9,9 +9,6 @@ export type FieldType =
| 'DOUBLE_TEXT'
| 'EMAIL'
| 'ENUM'
| 'MONEY_AMOUNT_'
| 'MONEY_AMOUNT'
| 'MONEY'
| 'NUMBER'
| 'PHONE'
| 'PROBABILITY'

6
front/src/modules/ui/object/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx
View File

@ -33,9 +33,9 @@ export const MultipleFiltersDropdownContent = () => {
{filterDefinitionUsedInDropdown.type === 'TEXT' && (
<ObjectFilterDropdownTextSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'NUMBER' && (
<ObjectFilterDropdownNumberSearchInput />
)}
{['NUMBER', 'CURRENCY'].includes(
filterDefinitionUsedInDropdown.type,
) && <ObjectFilterDropdownNumberSearchInput />}
{filterDefinitionUsedInDropdown.type === 'DATE_TIME' && (
<ObjectFilterDropdownDateSearchInput />
)}

7
front/src/modules/ui/object/object-filter-dropdown/types/FilterType.ts
View File

@ -1 +1,6 @@
export type FilterType = 'TEXT' | 'DATE_TIME' | 'ENTITY' | 'NUMBER';
export type FilterType =
| 'TEXT'
| 'DATE_TIME'
| 'ENTITY'
| 'NUMBER'
| 'CURRENCY';

1
front/src/modules/ui/object/object-filter-dropdown/utils/getOperandsForFilterType.ts
View File

@ -8,6 +8,7 @@ export const getOperandsForFilterType = (
switch (filterType) {
case 'TEXT':
return [ViewFilterOperand.Contains, ViewFilterOperand.DoesNotContain];
case 'CURRENCY':
case 'NUMBER':
case 'DATE_TIME':
return [ViewFilterOperand.GreaterThan, ViewFilterOperand.LessThan];

17
front/src/modules/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2.ts
View File

@ -62,6 +62,23 @@ export const turnFiltersIntoWhereClauseV2 = (
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'CURRENCY':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:
whereClause[correspondingField.name] = {
amountMicros: { gte: parseFloat(filter.value) * 1000000 },
};
return;
case ViewFilterOperand.LessThan:
whereClause[correspondingField.name] = {
amountMicros: { lte: parseFloat(filter.value) * 1000000 },
};
return;
default:
throw new Error(
`Unknown operand ${filter.operand} for ${filter.definition.type} filter`,
);
}
case 'DATE_TIME':
switch (filter.operand) {
case ViewFilterOperand.GreaterThan:

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

@ -19,6 +19,7 @@ import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBo
const StyledBoardContainer = styled.div`
display: flex;
height: 100%;
width: 100%;
`;