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

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 <></>;
};