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

Refactor ObjectDataTable to work with new views system (#2274)

Browse Source 
Complete work
This commit is contained in:
Charles Bochet
2023-10-29 23:50:59 +01:00
committed by GitHub
parent 9bab28912d
commit d38497c46a
39 changed files with 578 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,14 @@
import { useEffect } from 'react';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
import { turnFiltersIntoWhereClauseV2 } from '@/ui/data/filter/utils/turnFiltersIntoWhereClauseV2';
import { turnSortsIntoOrderByV2 } from '@/ui/data/sort/utils/turnSortsIntoOrderByV2';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useFindManyObjects } from '../hooks/useFindManyObjects';
import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
import { useSetObjectDataTableData } from '../hooks/useSetDataTableData';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
@ -9,14 +17,33 @@ export type ObjectDataTableEffectProps = Pick<
'objectNamePlural'
>;
// TODO: merge in a single effect component
// This should be migrated to DataTable at some point
export const ObjectDataTableEffect = ({
objectNamePlural,
}: ObjectDataTableEffectProps) => {
const setDataTableData = useSetObjectDataTableData();
const { foundMetadataObject } = useMetadataObjectInContext();
const tableFilters = useRecoilScopedValue(
tableFiltersScopedState,
TableRecoilScopeContext,
);
const tableSorts = useRecoilScopedValue(
tableSortsScopedState,
TableRecoilScopeContext,
);
const { objects, loading } = useFindManyObjects({
objectNamePlural,
objectNamePlural: objectNamePlural,
filter: turnFiltersIntoWhereClauseV2(
tableFilters,
foundMetadataObject?.fields ?? [],
),
orderBy: turnSortsIntoOrderByV2(
tableSorts,
foundMetadataObject?.fields ?? [],
),
});
useEffect(() => {

4
front/src/modules/metadata/components/ObjectShowPage.tsx
View File

@ -9,6 +9,7 @@ import { InlineCell } from '@/ui/data/inline-cell/components/InlineCell';
import { PropertyBox } from '@/ui/data/inline-cell/property-box/components/PropertyBox';
import { InlineCellHotkeyScope } from '@/ui/data/inline-cell/types/InlineCellHotkeyScope';
import { IconBuildingSkyscraper } from '@/ui/display/icon';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton';
@ -33,6 +34,8 @@ export const ObjectShowPage = () => {
objectId: string;
}>();
const { icons } = useLazyLoadIcons();
const { foundMetadataObject } = useFindOneMetadataObject({
objectNameSingular,
});
@ -130,6 +133,7 @@ export const ObjectShowPage = () => {
field: metadataField,
position: index,
metadataObject: foundMetadataObject,
icons,
}),
useUpdateEntityMutation: useUpdateOneObjectMutation,
hotkeyScope: InlineCellHotkeyScope.InlineCell,

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

@ -1,11 +1,23 @@
import styled from '@emotion/styled';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
import { TableOptionsDropdownId } from '@/ui/data/data-table/constants/TableOptionsDropdownId';
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 { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
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 { columnDefinitionsToViewFields } from '@/views/utils/columnDefinitionToViewField';
import { viewFieldsToColumnDefinitions } from '@/views/utils/viewFieldsToColumnDefinitions';
import { viewFiltersToFilters } from '@/views/utils/viewFiltersToFilters';
import { viewSortsToSorts } from '@/views/utils/viewSortsToSorts';
import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
@ -28,9 +40,26 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
const { updateOneObject } = useUpdateOneObject({
objectNamePlural,
});
const { columnDefinitions, foundMetadataObject } =
useMetadataObjectInContext();
const tableScopeId = foundMetadataObject?.namePlural ?? '';
const viewScopeId = objectNamePlural ?? '';
const { persistViewFields } = useViewFields(viewScopeId);
const { setCurrentViewFields } = useView({
viewScopeId,
});
const setTableColumns = useSetRecoilState(
tableColumnsScopedState(tableScopeId),
);
const setTableFilters = useSetRecoilState(
tableFiltersScopedState(tableScopeId),
);
const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
const updateEntity = ({
variables,
}: {
@ -48,16 +77,32 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
};
return (
<ViewScope viewScopeId={viewScopeId} onViewFieldsChange={() => {}}>
<ViewScope
viewScopeId={viewScopeId}
onViewFieldsChange={(viewFields) => {
setTableColumns(
viewFieldsToColumnDefinitions(viewFields, columnDefinitions),
);
}}
onViewFiltersChange={(viewFilters) => {
setTableFilters(viewFiltersToFilters(viewFilters));
}}
onViewSortsChange={(viewSorts) => {
setTableSorts(viewSortsToSorts(viewSorts));
}}
>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: () => {},
onColumnsChange: useRecoilCallback(() => (columns) => {
setCurrentViewFields?.(columnDefinitionsToViewFields(columns));
persistViewFields(columnDefinitionsToViewFields(columns));
}),
}}
>
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId="table-dropdown-option"
optionsDropdownScopeId={TableOptionsDropdownId}
/>
<ObjectTableEffect />
<ObjectDataTableEffect objectNamePlural={objectNamePlural} />

64
front/src/modules/metadata/components/ObjectTableEffect.tsx
View File

@ -16,69 +16,43 @@ export const ObjectTableEffect = () => {
setViewObjectId,
} = useView();
// const [, setTableColumns] = useRecoilScopedState(
// tableColumnsScopedState,
// TableRecoilScopeContext,
// );
const {
columnDefinitions,
filterDefinitions,
sortDefinitions,
foundMetadataObject,
} = useMetadataObjectInContext();
// const [, setTableSorts] = useRecoilScopedState(
// tableSortsScopedState,
// TableRecoilScopeContext,
// );
// const [, setTableFilters] = useRecoilScopedState(
// tableFiltersScopedState,
// TableRecoilScopeContext,
// );
const { columnDefinitions, objectNamePlural } = useMetadataObjectInContext();
const tableScopeId = foundMetadataObject?.namePlural ?? '';
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsScopedState(objectNamePlural ?? ''),
availableTableColumnsScopedState(tableScopeId),
);
useEffect(() => {
setAvailableSortDefinitions?.([]); // TODO: extract from metadata fields
setAvailableFilterDefinitions?.([]); // TODO: extract from metadata fields
setAvailableFieldDefinitions?.(columnDefinitions);
setViewObjectId?.(objectNamePlural);
if (!foundMetadataObject) {
return;
}
setViewObjectId?.(foundMetadataObject.id);
setViewType?.(ViewType.Table);
setAvailableSortDefinitions?.(sortDefinitions);
setAvailableFilterDefinitions?.(filterDefinitions);
setAvailableFieldDefinitions?.(columnDefinitions);
setAvailableTableColumns(columnDefinitions);
}, [
setAvailableTableColumns,
setViewObjectId,
setViewType,
columnDefinitions,
objectNamePlural,
setAvailableSortDefinitions,
setAvailableFilterDefinitions,
setAvailableFieldDefinitions,
foundMetadataObject,
sortDefinitions,
filterDefinitions,
]);
// 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/components/ObjectTablePage.tsx
View File

@ -49,9 +49,7 @@ export const ObjectTablePage = () => {
});
const handleAddButtonClick = async () => {
createOneObject?.({
name: 'Test',
});
createOneObject?.({});
};
return (