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
@ -1,23 +1,10 @@
|
||||
import { useFilteredSearchPeopleQuery } from '@/people/hooks/useFilteredSearchPeopleQuery';
|
||||
import { FilterDropdownEntitySearchSelect } from '@/ui/data/view-bar/components/FilterDropdownEntitySearchSelect';
|
||||
import { useViewBarContext } from '@/ui/data/view-bar/hooks/useViewBarContext';
|
||||
import { filterDropdownSearchInputScopedState } from '@/ui/data/view-bar/states/filterDropdownSearchInputScopedState';
|
||||
import { filterDropdownSelectedEntityIdScopedState } from '@/ui/data/view-bar/states/filterDropdownSelectedEntityIdScopedState';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import { FilterDropdownEntitySearchSelect } from '@/ui/data/filter/components/FilterDropdownEntitySearchSelect';
|
||||
import { useFilter } from '@/ui/data/filter/hooks/useFilter';
|
||||
|
||||
export const FilterDropdownPeopleSearchSelect = () => {
|
||||
const { ViewBarRecoilScopeContext } = useViewBarContext();
|
||||
|
||||
const filterDropdownSearchInput = useRecoilScopedValue(
|
||||
filterDropdownSearchInputScopedState,
|
||||
ViewBarRecoilScopeContext,
|
||||
);
|
||||
|
||||
const [filterDropdownSelectedEntityId] = useRecoilScopedState(
|
||||
filterDropdownSelectedEntityIdScopedState,
|
||||
ViewBarRecoilScopeContext,
|
||||
);
|
||||
const { filterDropdownSearchInput, filterDropdownSelectedEntityId } =
|
||||
useFilter();
|
||||
|
||||
const peopleForSelect = useFilteredSearchPeopleQuery({
|
||||
searchFilter: filterDropdownSearchInput,
|
||||
|
||||
@ -4,13 +4,9 @@ import { useRecoilCallback } from 'recoil';
|
||||
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
|
||||
import { isFetchingDataTableDataState } from '@/ui/data/data-table/states/isFetchingDataTableDataState';
|
||||
import { numberOfTableRowsState } from '@/ui/data/data-table/states/numberOfTableRowsState';
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { tableRowIdsState } from '@/ui/data/data-table/states/tableRowIdsState';
|
||||
import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
|
||||
import { currentPageLocationState } from '@/ui/utilities/loading-state/states/currentPageLocationState';
|
||||
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
|
||||
import { GetPeopleQuery } from '~/generated/graphql';
|
||||
import { peopleFilters } from '~/pages/people/people-filters';
|
||||
|
||||
import { peopleCityFamilyState } from '../states/peopleCityFamilyState';
|
||||
import { peopleCompanyFamilyState } from '../states/peopleCompanyFamilyState';
|
||||
@ -24,8 +20,6 @@ import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
|
||||
export const useSetPeopleDataTable = () => {
|
||||
const resetTableRowSelection = useResetTableRowSelection();
|
||||
|
||||
const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
|
||||
|
||||
const currentLocation = useLocation().pathname;
|
||||
|
||||
return useRecoilCallback(
|
||||
@ -126,12 +120,10 @@ export const useSetPeopleDataTable = () => {
|
||||
|
||||
set(numberOfTableRowsState, peopleIds.length);
|
||||
|
||||
set(availableFiltersScopedState(tableContextScopeId), peopleFilters);
|
||||
|
||||
set(currentPageLocationState, currentLocation);
|
||||
|
||||
set(isFetchingDataTableDataState, false);
|
||||
},
|
||||
[currentLocation, resetTableRowSelection, tableContextScopeId],
|
||||
[currentLocation, resetTableRowSelection],
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import { peopleAvailableColumnDefinitions } from '@/people/constants/peopleAvailableColumnDefinitions';
|
||||
import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
|
||||
import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
|
||||
import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
|
||||
import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
|
||||
import { DataTable } from '@/ui/data/data-table/components/DataTable';
|
||||
import { DataTableEffect } from '@/ui/data/data-table/components/DataTableEffect';
|
||||
import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
|
||||
import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
|
||||
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
|
||||
import { useTableViews } from '@/views/hooks/useTableViews';
|
||||
import { SortScope } from '@/ui/data/sort/scopes/SortScope';
|
||||
import { ViewScope } from '@/views/scopes/ViewScope';
|
||||
import {
|
||||
UpdateOnePersonMutationVariables,
|
||||
useGetPeopleQuery,
|
||||
@ -21,68 +18,54 @@ import { peopleAvailableSorts } from '~/pages/people/people-sorts';
|
||||
export const PeopleTable = () => {
|
||||
const [updateEntityMutation] = useUpdateOnePersonMutation();
|
||||
const upsertDataTableItem = useUpsertDataTableItem();
|
||||
const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
|
||||
|
||||
const {
|
||||
createView,
|
||||
deleteView,
|
||||
persistColumns,
|
||||
submitCurrentView,
|
||||
updateView,
|
||||
} = useTableViews({
|
||||
objectId: 'person',
|
||||
columnDefinitions: peopleAvailableColumnDefinitions,
|
||||
});
|
||||
const tableViewScopeId = 'people-table';
|
||||
|
||||
const { setContextMenuEntries } = usePersonTableContextMenuEntries();
|
||||
const { setActionBarEntries } = usePersonTableActionBarEntries();
|
||||
|
||||
const handleImport = () => {
|
||||
openPersonSpreadsheetImport();
|
||||
};
|
||||
|
||||
return (
|
||||
<TableContext.Provider value={{ onColumnsChange: persistColumns }}>
|
||||
<DataTableEffect
|
||||
getRequestResultKey="people"
|
||||
useGetRequest={useGetPeopleQuery}
|
||||
getRequestOptimisticEffectDefinition={
|
||||
getPeopleOptimisticEffectDefinition
|
||||
}
|
||||
filterDefinitionArray={peopleFilters}
|
||||
setContextMenuEntries={setContextMenuEntries}
|
||||
setActionBarEntries={setActionBarEntries}
|
||||
sortDefinitionArray={peopleAvailableSorts}
|
||||
/>
|
||||
<ViewBarContext.Provider
|
||||
value={{
|
||||
defaultViewName: 'All People',
|
||||
onCurrentViewSubmit: submitCurrentView,
|
||||
onViewCreate: createView,
|
||||
onViewEdit: updateView,
|
||||
onViewRemove: deleteView,
|
||||
onImport: handleImport,
|
||||
ViewBarRecoilScopeContext: TableRecoilScopeContext,
|
||||
}}
|
||||
>
|
||||
<DataTable
|
||||
updateEntityMutation={({
|
||||
variables,
|
||||
}: {
|
||||
variables: UpdateOnePersonMutationVariables;
|
||||
}) =>
|
||||
updateEntityMutation({
|
||||
<ViewScope viewScopeId={tableViewScopeId}>
|
||||
<SortScope sortScopeId={tableViewScopeId}>
|
||||
<TableContext.Provider
|
||||
value={{
|
||||
onColumnsChange: () => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('persist columns');
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DataTableEffect
|
||||
getRequestResultKey="people"
|
||||
useGetRequest={useGetPeopleQuery}
|
||||
getRequestOptimisticEffectDefinition={
|
||||
getPeopleOptimisticEffectDefinition
|
||||
}
|
||||
filterDefinitionArray={peopleFilters}
|
||||
setContextMenuEntries={setContextMenuEntries}
|
||||
setActionBarEntries={setActionBarEntries}
|
||||
sortDefinitionArray={peopleAvailableSorts}
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
updateEntityMutation={({
|
||||
variables,
|
||||
onCompleted: (data) => {
|
||||
if (!data.updateOnePerson) {
|
||||
return;
|
||||
}
|
||||
upsertDataTableItem(data.updateOnePerson);
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</ViewBarContext.Provider>
|
||||
</TableContext.Provider>
|
||||
}: {
|
||||
variables: UpdateOnePersonMutationVariables;
|
||||
}) =>
|
||||
updateEntityMutation({
|
||||
variables,
|
||||
onCompleted: (data) => {
|
||||
if (!data.updateOnePerson) {
|
||||
return;
|
||||
}
|
||||
upsertDataTableItem(data.updateOnePerson);
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</TableContext.Provider>
|
||||
</SortScope>
|
||||
</ViewScope>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user