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

Fix/metadata object and settings post merge (#2269)

Browse Source 
* WIP

* WIP2

* Seed views standard objects

* Migrate views to the new data model

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Charles Bochet
2023-10-28 12:25:43 +02:00
committed by GitHub
parent afd4b7c634
commit b591023eb3
30 changed files with 609 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@ -10,7 +10,6 @@ import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
import { ViewBar } from '@/views/components/ViewBar';
import { ViewBarEffect } from '@/views/components/ViewBarEffect';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
@ -78,12 +77,7 @@ export const CompanyTable = () => {
`;
return (
<ViewScope
viewScopeId={tableViewScopeId}
onViewFieldsChange={() => {}}
onViewSortsChange={() => {}}
onViewFiltersChange={() => {}}
>
<ViewScope viewScopeId={tableViewScopeId}>
<StyledContainer>
<TableContext.Provider
value={{
@ -93,14 +87,11 @@ export const CompanyTable = () => {
},
}}
>
<ViewBarEffect />
<ViewBar
optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
optionsDropdownScopeId="table-dropdown-option"
/>
<CompanyTableEffect />
<DataTableEffect
getRequestResultKey="companies"
useGetRequest={useGetCompaniesQuery}

34
front/src/modules/metadata/components/ObjectDataTableEffect.tsx
View File

@ -1,10 +1,4 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { useFindManyObjects } from '../hooks/useFindManyObjects';
import { useSetObjectDataTableData } from '../hooks/useSetDataTableData';
@ -15,6 +9,7 @@ export type ObjectDataTableEffectProps = Pick<
'objectNamePlural'
>;
// TODO: merge in a single effect component
export const ObjectDataTableEffect = ({
objectNamePlural,
}: ObjectDataTableEffectProps) => {
@ -32,32 +27,5 @@ export const ObjectDataTableEffect = ({
}
}, [objects, setDataTableData, loading]);
const [searchParams] = useSearchParams();
const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);
const handleViewSelect = useRecoilCallback(
({ set, snapshot }) =>
(viewId: string) => {
const currentView = snapshot
.getLoadable(
currentViewIdScopedState({ scopeId: tableRecoilScopeId }),
)
.getValue();
if (currentView === viewId) {
return;
}
set(currentViewIdScopedState({ scopeId: tableRecoilScopeId }), viewId);
},
[tableRecoilScopeId],
);
useEffect(() => {
const viewId = searchParams.get('view');
if (viewId) {
handleViewSelect(viewId);
}
}, [handleViewSelect, searchParams, objectNamePlural]);
return <></>;
};

63
front/src/modules/metadata/components/ObjectTable.tsx
View File

@ -1,10 +1,29 @@
import styled from '@emotion/styled';
import { useRecoilCallback } from 'recoil';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
import { ObjectDataTableEffect } from './ObjectDataTableEffect';
import { ObjectTableEffect } from './ObjectTableEffect';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
`;
export type ObjectTableProps = Pick<
MetadataObjectIdentifier,
@ -16,6 +35,11 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
objectNamePlural,
});
const viewScopeId = objectNamePlural ?? '';
const { persistViewFields } = useViewFields(viewScopeId);
const { setCurrentViewFields } = useView({ viewScopeId: viewScopeId });
const updateEntity = ({
variables,
}: {
@ -32,17 +56,38 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
});
};
const updateTableColumns = useRecoilCallback(
({ set, snapshot }) =>
(viewFields: ColumnDefinition<FieldMetadata>[]) => {
set(tableColumnsScopedState(viewScopeId), viewFields);
},
);
return (
<TableContext.Provider
value={{
onColumnsChange: () => {
//
},
<ViewScope
viewScopeId={viewScopeId}
onViewFieldsChange={(viewFields) => {
// updateTableColumns(viewFields);
}}
>
<ObjectDataTableEffect objectNamePlural={objectNamePlural} />
<DataTable updateEntityMutation={updateEntity} />
</TableContext.Provider>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: (columns) => {
// setCurrentViewFields?.(columns);
// persistViewFields(columns);
},
}}
>
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId="table-dropdown-option"
/>
<ObjectTableEffect />
<ObjectDataTableEffect objectNamePlural={objectNamePlural} />
<DataTable updateEntityMutation={updateEntity} />
</TableContext.Provider>
</StyledContainer>
</ViewScope>
);
};

86
front/src/modules/metadata/components/ObjectTableEffect.tsx Normal file
View File

@ -0,0 +1,86 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
import { useView } from '@/views/hooks/useView';
import { ViewType } from '~/generated/graphql';
import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
export const ObjectTableEffect = () => {
console.log('ObjectTableEffect');
const {
setAvailableSorts,
setAvailableFilters,
setAvailableFields,
setViewType,
setViewObjectId,
} = useView();
// const [, setTableColumns] = useRecoilScopedState(
// tableColumnsScopedState,
// TableRecoilScopeContext,
// );
// const [, setTableSorts] = useRecoilScopedState(
// tableSortsScopedState,
// TableRecoilScopeContext,
// );
// const [, setTableFilters] = useRecoilScopedState(
// tableFiltersScopedState,
// TableRecoilScopeContext,
// );
const { columnDefinitions, objectNamePlural } = useMetadataObjectInContext();
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsScopedState(objectNamePlural ?? ''),
);
useEffect(() => {
setAvailableSorts?.([]); // TODO: extract from metadata fields
setAvailableFilters?.([]); // TODO: extract from metadata fields
setAvailableFields?.(columnDefinitions);
setViewObjectId?.(objectNamePlural);
setViewType?.(ViewType.Table);
setAvailableTableColumns(columnDefinitions);
}, [
setAvailableFields,
setAvailableFilters,
setAvailableSorts,
setAvailableTableColumns,
setViewObjectId,
setViewType,
columnDefinitions,
objectNamePlural,
]);
// useEffect(() => {
// if (currentViewFields) {
// setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
// }
// }, [currentViewFields, setTableColumns]);
// useEffect(() => {
// if (currentViewSorts) {
// setTableSorts(currentViewSorts);
// }
// }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
// useEffect(() => {
// if (currentViewFilters) {
// setTableFilters(currentViewFilters);
// }
// }, [
// currentViewFields,
// currentViewFilters,
// setTableColumns,
// setTableFilters,
// setTableSorts,
// ]);
return <></>;
};

4
front/src/modules/metadata/hooks/useFindManyMetadataObjects.ts
View File

@ -38,6 +38,10 @@ export const useFindManyMetadataObjects = () => {
},
);
},
onCompleted: (data) => {
// eslint-disable-next-line no-console
//console.log('useFindManyMetadataObjects data : ', data);
},
},
);

15
front/src/modules/metadata/hooks/useFindManyObjects.ts
View File

@ -15,7 +15,14 @@ export const useFindManyObjects = <
ObjectType extends { id: string } & Record<string, any>,
>({
objectNamePlural,
}: Pick<MetadataObjectIdentifier, 'objectNamePlural'>) => {
filter,
orderBy,
onCompleted,
}: Pick<MetadataObjectIdentifier, 'objectNamePlural'> & {
filter?: any;
orderBy?: any;
onCompleted?: (data: any) => void;
}) => {
const { foundMetadataObject, objectNotFoundInMetadata, findManyQuery } =
useFindOneMetadataObject({
objectNamePlural,
@ -27,6 +34,12 @@ export const useFindManyObjects = <
findManyQuery,
{
skip: !foundMetadataObject,
variables: {
filter: filter ?? {},
orderBy: orderBy ?? {},
},
onCompleted: (data) =>
objectNamePlural && onCompleted?.(data[objectNamePlural]),
onError: (error) => {
// eslint-disable-next-line no-console
console.error(

9
front/src/modules/metadata/types/PaginatedObjectType.ts
View File

@ -1,8 +1,5 @@
import { PaginatedObjectTypeResults } from './PaginatedObjectTypeResults';
export type PaginatedObjectType<ObjectType extends { id: string }> = {
[objectNamePlural: string]: {
edges: {
node: ObjectType;
cursor: string;
}[];
};
[objectNamePlural: string]: PaginatedObjectTypeResults<ObjectType>;
};

6
front/src/modules/metadata/types/PaginatedObjectTypeResults.ts Normal file
View File

@ -0,0 +1,6 @@
export type PaginatedObjectTypeResults<ObjectType extends { id: string }> = {
edges: {
node: ObjectType;
cursor: string;
}[];
};

8
front/src/modules/metadata/utils/generateFindManyCustomObjectsQuery.ts
View File

@ -1,5 +1,7 @@
import { gql } from '@apollo/client';
import { capitalize } from '~/utils/string/capitalize';
import { MetadataObject } from '../types/MetadataObject';
import { mapFieldMetadataToGraphQLQuery } from './mapFieldMetadataToGraphQLQuery';
@ -12,8 +14,10 @@ export const generateFindManyCustomObjectsQuery = ({
_fromCursor?: string;
}) => {
return gql`
query FindMany${metadataObject.namePlural} {
${metadataObject.namePlural}{
query FindMany${metadataObject.namePlural}($filter: ${capitalize(
metadataObject.nameSingular,
)}FilterInput, $orderBy: ${capitalize(metadataObject.nameSingular)}OrderBy) {
${metadataObject.namePlural}(filter: $filter, orderBy: $orderBy){
edges {
node {
id

2
front/src/modules/views/components/ViewBar.tsx
View File

@ -14,6 +14,7 @@ import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
import { ViewBarDetails } from './ViewBarDetails';
import { ViewBarEffect } from './ViewBarEffect';
import { ViewsDropdownButton } from './ViewsDropdownButton';
export type ViewBarProps = {
@ -43,6 +44,7 @@ export const ViewBar = ({
availableSorts={availableSorts}
onSortAdd={upsertViewSort}
>
<ViewBarEffect />
<TopBar
className={className}
leftComponent={

133
front/src/modules/views/components/ViewBarEffect.tsx
View File

@ -2,16 +2,15 @@ import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
import { PaginatedObjectTypeResults } from '@/metadata/types/PaginatedObjectTypeResults';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { Filter } from '@/ui/data/filter/types/Filter';
import { Sort } from '@/ui/data/sort/types/Sort';
import {
SortOrder,
useGetViewFieldsQuery,
useGetViewFiltersQuery,
useGetViewSortsQuery,
useGetViewsQuery,
} from '~/generated/graphql';
import { assertNotNull } from '~/utils/assert';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@ -25,6 +24,8 @@ import { savedViewFieldsScopedFamilyState } from '../states/savedViewFieldsScope
import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
import { viewsScopedState } from '../states/viewsScopedState';
import { View } from '../types/View';
import { ViewField } from '../types/ViewField';
export const ViewBarEffect = () => {
const {
@ -45,80 +46,78 @@ export const ViewBarEffect = () => {
const { viewType, viewObjectId } = useViewInternalStates(viewScopeId);
useGetViewFieldsQuery({
skip: !currentViewId,
variables: {
orderBy: { index: SortOrder.Asc },
where: {
viewId: { equals: currentViewId },
},
},
onCompleted: useRecoilCallback(({ snapshot }) => async (data) => {
const availableFields = snapshot
.getLoadable(availableFieldsScopedState({ scopeId: viewScopeId }))
.getValue();
useFindManyObjects({
objectNamePlural: 'viewFieldsV2',
filter: { viewId: { eq: currentViewId } },
onCompleted: useRecoilCallback(
({ snapshot }) =>
async (data: PaginatedObjectTypeResults<ViewField>) => {
const availableFields = snapshot
.getLoadable(availableFieldsScopedState({ scopeId: viewScopeId }))
.getValue();
if (!availableFields || !currentViewId) {
return;
}
if (!availableFields || !currentViewId) {
return;
}
const savedViewFields = snapshot
.getLoadable(
savedViewFieldsScopedFamilyState({
scopeId: viewScopeId,
familyKey: currentViewId,
}),
)
.getValue();
const savedViewFields = snapshot
.getLoadable(
savedViewFieldsScopedFamilyState({
scopeId: viewScopeId,
familyKey: currentViewId,
}),
)
.getValue();
const queriedViewFields = data.viewFields
.map<ColumnDefinition<FieldMetadata> | null>((viewField) => {
const columnDefinition = availableFields.find(
({ key }) => viewField.key === key,
);
const queriedViewFields = data.edges
.map<ColumnDefinition<FieldMetadata> | null>((viewField) => {
const columnDefinition = availableFields.find(
({ key }) => viewField.node.fieldId === key,
);
return columnDefinition
? {
...columnDefinition,
key: viewField.key,
name: viewField.name,
index: viewField.index,
size: viewField.size ?? columnDefinition.size,
isVisible: viewField.isVisible,
}
: null;
})
.filter<ColumnDefinition<FieldMetadata>>(assertNotNull);
return columnDefinition
? {
...columnDefinition,
key: viewField.node.fieldId,
name: viewField.node.fieldId,
index: viewField.node.position,
size: viewField.node.size ?? columnDefinition.size,
isVisible: viewField.node.isVisible,
}
: null;
})
.filter<ColumnDefinition<FieldMetadata>>(assertNotNull);
if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
setCurrentViewFields?.(queriedViewFields);
setSavedViewFields?.(queriedViewFields);
}
}),
if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
setCurrentViewFields?.(queriedViewFields);
setSavedViewFields?.(queriedViewFields);
}
},
),
});
useGetViewsQuery({
variables: {
where: {
objectId: { equals: viewObjectId },
type: { equals: viewType },
},
},
onCompleted: useRecoilCallback(({ snapshot }) => async (data) => {
const nextViews = data.views.map((view) => ({
id: view.id,
name: view.name,
}));
const views = snapshot
.getLoadable(viewsScopedState({ scopeId: viewScopeId }))
.getValue();
useFindManyObjects({
objectNamePlural: 'viewsV2',
filter: { type: { eq: viewType }, objectId: { eq: viewObjectId } },
onCompleted: useRecoilCallback(
({ snapshot }) =>
async (data: PaginatedObjectTypeResults<View>) => {
const nextViews = data.edges.map((view) => ({
id: view.node.id,
name: view.node.name,
objectId: view.node.objectId,
}));
const views = snapshot
.getLoadable(viewsScopedState({ scopeId: viewScopeId }))
.getValue();
if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
if (!nextViews.length) return;
if (!nextViews.length) return;
if (!currentViewId) return changeView(nextViews[0].id);
}),
if (!currentViewId) return setCurrentViewId(nextViews[0].id);
},
),
});
useGetViewSortsQuery({

43
front/src/modules/views/hooks/internal/useViews.ts
View File

@ -17,29 +17,32 @@ export const useViews = (scopeId: string) => {
const [updateViewMutation] = useUpdateViewMutation();
const [deleteViewMutation] = useDeleteViewMutation();
const createView = useRecoilCallback(({ snapshot }) => async (view: View) => {
const viewObjectId = await snapshot
.getLoadable(viewObjectIdScopeState({ scopeId }))
.getValue();
const createView = useRecoilCallback(
({ snapshot }) =>
async (view: Pick<View, 'id' | 'name'>) => {
const viewObjectId = await snapshot
.getLoadable(viewObjectIdScopeState({ scopeId }))
.getValue();
const viewType = await snapshot
.getLoadable(viewTypeScopedState({ scopeId }))
.getValue();
const viewType = await snapshot
.getLoadable(viewTypeScopedState({ scopeId }))
.getValue();
if (!viewObjectId || !viewType) {
return;
}
await createViewMutation({
variables: {
data: {
...view,
objectId: viewObjectId,
type: viewType,
},
if (!viewObjectId || !viewType) {
return;
}
await createViewMutation({
variables: {
data: {
...view,
objectId: viewObjectId,
type: viewType,
},
},
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
});
},
refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
});
});
);
const updateView = async (view: View) => {
await updateViewMutation({

2
front/src/modules/views/types/View.ts
View File

@ -1 +1 @@
export type View = { id: string; name: string };
export type View = { id: string; name: string; objectId: string };

9
front/src/modules/views/types/ViewField.ts Normal file
View File

@ -0,0 +1,9 @@
export type ViewField = {
id: string;
objectId: string;
fieldId: string;
viewId: string;
position: number;
isVisible: boolean;
size: number;
};