Improve viewbar api (#2233)
* create scopes * fix import bug * add useView hook * wip * wip * currentViewId is now retrieved via useView * working on sorts with useView * refactor in progress * refactor in progress * refactor in progress * refactor in progress * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * fix code * fix code * wip * push * Fix issue dependencies * Fix resize --------- Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
Charles Bochet
@ -3,12 +3,8 @@ import { useSearchParams } from 'react-router-dom';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
|
||||
import { savedFiltersFamilyState } from '@/ui/data/view-bar/states/savedFiltersFamilyState';
|
||||
import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamilyState';
|
||||
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
|
||||
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';
|
||||
@ -39,22 +35,13 @@ export const ObjectDataTableEffect = ({
|
||||
({ set, snapshot }) =>
|
||||
async (viewId: string) => {
|
||||
const currentView = await snapshot.getPromise(
|
||||
currentViewIdScopedState(tableRecoilScopeId),
|
||||
currentViewIdScopedState({ scopeId: tableRecoilScopeId }),
|
||||
);
|
||||
if (currentView === viewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const savedFilters = await snapshot.getPromise(
|
||||
savedFiltersFamilyState(viewId),
|
||||
);
|
||||
const savedSorts = await snapshot.getPromise(
|
||||
savedSortsFamilyState(viewId),
|
||||
);
|
||||
|
||||
set(filtersScopedState(tableRecoilScopeId), savedFilters);
|
||||
set(sortsScopedState(tableRecoilScopeId), savedSorts);
|
||||
set(currentViewIdScopedState(tableRecoilScopeId), viewId);
|
||||
set(currentViewIdScopedState({ scopeId: tableRecoilScopeId }), viewId);
|
||||
},
|
||||
[tableRecoilScopeId],
|
||||
);
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import { DataTable } from '@/ui/data/data-table/components/DataTable';
|
||||
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
|
||||
|
||||
import { useMetadataTableViews } from '../hooks/useMetadataTableViews';
|
||||
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
|
||||
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
|
||||
|
||||
@ -12,9 +9,6 @@ import { ObjectDataTableEffect } from './ObjectDataTableEffect';
|
||||
export type ObjectTableProps = MetadataObjectIdentifier;
|
||||
|
||||
export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
|
||||
const { createView, deleteView, submitCurrentView, updateView } =
|
||||
useMetadataTableViews();
|
||||
|
||||
const { updateOneObject } = useUpdateOneObject({
|
||||
objectNamePlural,
|
||||
});
|
||||
@ -44,18 +38,8 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
|
||||
}}
|
||||
>
|
||||
<ObjectDataTableEffect objectNamePlural={objectNamePlural} />
|
||||
<ViewBarContext.Provider
|
||||
value={{
|
||||
defaultViewName: `All ${objectNamePlural}`,
|
||||
onCurrentViewSubmit: submitCurrentView,
|
||||
onViewCreate: createView,
|
||||
onViewEdit: updateView,
|
||||
onViewRemove: deleteView,
|
||||
ViewBarRecoilScopeContext: TableRecoilScopeContext,
|
||||
}}
|
||||
>
|
||||
<DataTable updateEntityMutation={updateEntity} />
|
||||
</ViewBarContext.Provider>
|
||||
|
||||
<DataTable updateEntityMutation={updateEntity} />
|
||||
</TableContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,7 +6,7 @@ import { FieldType } from '@/ui/data/field/types/FieldType';
|
||||
import { IconBrandLinkedin } from '@/ui/display/icon';
|
||||
import { GET_VIEW_FIELDS } from '@/views/graphql/queries/getViewFields';
|
||||
import { GET_VIEWS } from '@/views/graphql/queries/getViews';
|
||||
import { toViewFieldInput } from '@/views/hooks/useTableViewFields';
|
||||
import { toViewFieldInput } from '@/views/hooks/internal/useViewFields';
|
||||
import {
|
||||
useCreateViewFieldsMutation,
|
||||
useCreateViewMutation,
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
|
||||
import { filtersScopedState } from '@/ui/data/view-bar/states/filtersScopedState';
|
||||
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import { useTableViewFields } from '@/views/hooks/useTableViewFields';
|
||||
import { useViewFilters } from '@/views/hooks/useViewFilters';
|
||||
import { useViews } from '@/views/hooks/useViews';
|
||||
import { useViewSorts } from '@/views/hooks/useViewSorts';
|
||||
import { ViewType } from '~/generated/graphql';
|
||||
|
||||
import { useMetadataObjectInContext } from './useMetadataObjectInContext';
|
||||
|
||||
export const useMetadataTableViews = () => {
|
||||
const { objectNamePlural, columnDefinitions } = useMetadataObjectInContext();
|
||||
|
||||
const tableColumns = useRecoilScopedValue(
|
||||
tableColumnsScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const filters = useRecoilScopedValue(
|
||||
filtersScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext);
|
||||
|
||||
const [_, setSearchParams] = useSearchParams();
|
||||
|
||||
const handleViewCreate = async (viewId: string) => {
|
||||
await createViewFields(tableColumns, viewId);
|
||||
await createViewFilters(filters, viewId);
|
||||
await createViewSorts(sorts, viewId);
|
||||
setSearchParams({ view: viewId });
|
||||
};
|
||||
|
||||
const objectId = objectNamePlural;
|
||||
|
||||
const { createView, deleteView, isFetchingViews, updateView } = useViews({
|
||||
objectId,
|
||||
onViewCreate: handleViewCreate,
|
||||
type: ViewType.Table,
|
||||
RecoilScopeContext: TableRecoilScopeContext,
|
||||
});
|
||||
|
||||
const { createViewFields, persistColumns } = useTableViewFields({
|
||||
objectId,
|
||||
columnDefinitions,
|
||||
skipFetch: isFetchingViews,
|
||||
});
|
||||
|
||||
const createDefaultViewFields = async () => {
|
||||
await createViewFields(tableColumns);
|
||||
};
|
||||
|
||||
const { createViewFilters, persistFilters } = useViewFilters({
|
||||
RecoilScopeContext: TableRecoilScopeContext,
|
||||
skipFetch: isFetchingViews,
|
||||
});
|
||||
|
||||
const { createViewSorts, persistSorts } = useViewSorts({
|
||||
RecoilScopeContext: TableRecoilScopeContext,
|
||||
skipFetch: isFetchingViews,
|
||||
});
|
||||
|
||||
const submitCurrentView = async () => {
|
||||
await persistFilters();
|
||||
await persistSorts();
|
||||
};
|
||||
|
||||
return {
|
||||
createView,
|
||||
deleteView,
|
||||
persistColumns,
|
||||
submitCurrentView,
|
||||
updateView,
|
||||
createDefaultViewFields,
|
||||
isFetchingViews,
|
||||
};
|
||||
};
|
||||
@ -6,10 +6,8 @@ import { numberOfTableRowsState } from '@/ui/data/data-table/states/numberOfTabl
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { tableRowIdsState } from '@/ui/data/data-table/states/tableRowIdsState';
|
||||
import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
|
||||
import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
|
||||
import { availableSortsScopedState } from '@/ui/data/view-bar/states/availableSortsScopedState';
|
||||
import { entityCountInCurrentViewState } from '@/ui/data/view-bar/states/entityCountInCurrentViewState';
|
||||
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
|
||||
import { availableSortsScopedState } from '@/views/states/availableSortsScopedState';
|
||||
|
||||
export const useSetObjectDataTableData = () => {
|
||||
const resetTableRowSelection = useResetTableRowSelection();
|
||||
@ -43,11 +41,7 @@ export const useSetObjectDataTableData = () => {
|
||||
|
||||
set(numberOfTableRowsState, entityIds.length);
|
||||
|
||||
set(entityCountInCurrentViewState, entityIds.length);
|
||||
|
||||
set(availableFiltersScopedState(tableContextScopeId), []);
|
||||
|
||||
set(availableSortsScopedState(tableContextScopeId), []);
|
||||
set(availableSortsScopedState({ scopeId: tableContextScopeId }), []);
|
||||
|
||||
set(isFetchingDataTableDataState, false);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user