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,24 +1,11 @@
|
||||
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';
|
||||
|
||||
import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
|
||||
|
||||
export const FilterDropdownCompanySearchSelect = () => {
|
||||
const { ViewBarRecoilScopeContext } = useViewBarContext();
|
||||
|
||||
const filterDropdownSearchInput = useRecoilScopedValue(
|
||||
filterDropdownSearchInputScopedState,
|
||||
ViewBarRecoilScopeContext,
|
||||
);
|
||||
|
||||
const [filterDropdownSelectedEntityId] = useRecoilScopedState(
|
||||
filterDropdownSelectedEntityIdScopedState,
|
||||
ViewBarRecoilScopeContext,
|
||||
);
|
||||
const { filterDropdownSearchInput, filterDropdownSelectedEntityId } =
|
||||
useFilter();
|
||||
|
||||
const usersForSelect = useFilteredSearchCompanyQuery({
|
||||
searchFilter: filterDropdownSearchInput,
|
||||
|
||||
@ -1,23 +1,13 @@
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useRecoilCallback, useRecoilState } from 'recoil';
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
|
||||
import { availableSortsScopedState } from '@/ui/data/view-bar/states/availableSortsScopedState';
|
||||
import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
|
||||
import { entityCountInCurrentViewState } from '@/ui/data/view-bar/states/entityCountInCurrentViewState';
|
||||
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 { sortsOrderByScopedSelector } from '@/ui/data/view-bar/states/selectors/sortsOrderByScopedSelector';
|
||||
import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
|
||||
import { turnFilterIntoWhereClause } from '@/ui/data/view-bar/utils/turnFilterIntoWhereClause';
|
||||
import { turnFilterIntoWhereClause } from '@/ui/data/filter/utils/turnFilterIntoWhereClause';
|
||||
import { useBoardActionBarEntries } from '@/ui/layout/board/hooks/useBoardActionBarEntries';
|
||||
import { useBoardContextMenuEntries } from '@/ui/layout/board/hooks/useBoardContextMenuEntries';
|
||||
import { isBoardLoadedState } from '@/ui/layout/board/states/isBoardLoadedState';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
|
||||
import { useView } from '@/views/hooks/useView';
|
||||
import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
|
||||
import {
|
||||
Pipeline,
|
||||
PipelineProgressableType,
|
||||
@ -29,35 +19,25 @@ import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBo
|
||||
|
||||
import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
|
||||
import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
|
||||
import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
|
||||
|
||||
export const HooksCompanyBoardEffect = () => {
|
||||
const [, setAvailableFilters] = useRecoilScopedState(
|
||||
availableFiltersScopedState,
|
||||
CompanyBoardRecoilScopeContext,
|
||||
);
|
||||
const {
|
||||
setAvailableFilters,
|
||||
setAvailableSorts,
|
||||
setEntityCountInCurrentView,
|
||||
setCurrentViewId,
|
||||
} = useView();
|
||||
|
||||
const [, setAvailableSorts] = useRecoilScopedState(
|
||||
availableSortsScopedState,
|
||||
CompanyBoardRecoilScopeContext,
|
||||
);
|
||||
|
||||
const [, setEntityCountInCurrentView] = useRecoilState(
|
||||
entityCountInCurrentViewState,
|
||||
);
|
||||
const { currentViewFilters, currentViewSortsOrderBy } =
|
||||
useViewInternalStates();
|
||||
|
||||
useEffect(() => {
|
||||
setAvailableFilters(opportunitiesBoardOptions.filters);
|
||||
setAvailableSorts(opportunitiesBoardOptions.sorts);
|
||||
});
|
||||
setAvailableSorts?.(opportunitiesBoardOptions.sorts);
|
||||
}, [setAvailableFilters, setAvailableSorts]);
|
||||
|
||||
const [, setIsBoardLoaded] = useRecoilState(isBoardLoadedState);
|
||||
|
||||
const filters = useRecoilScopedValue(
|
||||
filtersScopedState,
|
||||
CompanyBoardRecoilScopeContext,
|
||||
);
|
||||
|
||||
const updateCompanyBoard = useUpdateCompanyBoard();
|
||||
|
||||
const { data: pipelineData, loading: loadingGetPipelines } =
|
||||
@ -77,18 +57,14 @@ export const HooksCompanyBoardEffect = () => {
|
||||
?.map((pipelineStage) => pipelineStage.id)
|
||||
.flat();
|
||||
|
||||
const sortsOrderBy = useRecoilScopedValue(
|
||||
sortsOrderByScopedSelector,
|
||||
CompanyBoardRecoilScopeContext,
|
||||
);
|
||||
const whereFilters = useMemo(() => {
|
||||
return {
|
||||
AND: [
|
||||
{ pipelineStageId: { in: pipelineStageIds } },
|
||||
...filters.map(turnFilterIntoWhereClause),
|
||||
...(currentViewFilters?.map(turnFilterIntoWhereClause) || []),
|
||||
],
|
||||
};
|
||||
}, [filters, pipelineStageIds]) as any;
|
||||
}, [currentViewFilters, pipelineStageIds]) as any;
|
||||
|
||||
const updateCompanyBoardCardIds = useUpdateCompanyBoardCardIds();
|
||||
|
||||
@ -96,7 +72,7 @@ export const HooksCompanyBoardEffect = () => {
|
||||
useGetPipelineProgressQuery({
|
||||
variables: {
|
||||
where: whereFilters,
|
||||
orderBy: sortsOrderBy,
|
||||
orderBy: currentViewSortsOrderBy,
|
||||
},
|
||||
onCompleted: (data) => {
|
||||
const pipelineProgresses = data?.findManyPipelineProgress || [];
|
||||
@ -123,30 +99,6 @@ export const HooksCompanyBoardEffect = () => {
|
||||
});
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
const boardRecoilScopeId = useRecoilScopeId(CompanyBoardRecoilScopeContext);
|
||||
const handleViewSelect = useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
async (viewId: string) => {
|
||||
const currentView = await snapshot.getPromise(
|
||||
currentViewIdScopedState(boardRecoilScopeId),
|
||||
);
|
||||
if (currentView === viewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const savedFilters = await snapshot.getPromise(
|
||||
savedFiltersFamilyState(viewId),
|
||||
);
|
||||
const savedSorts = await snapshot.getPromise(
|
||||
savedSortsFamilyState(viewId),
|
||||
);
|
||||
|
||||
set(filtersScopedState(boardRecoilScopeId), savedFilters);
|
||||
set(sortsScopedState(boardRecoilScopeId), savedSorts);
|
||||
set(currentViewIdScopedState(boardRecoilScopeId), viewId);
|
||||
},
|
||||
[boardRecoilScopeId],
|
||||
);
|
||||
|
||||
const loading =
|
||||
loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;
|
||||
@ -158,7 +110,7 @@ export const HooksCompanyBoardEffect = () => {
|
||||
if (!loading && pipeline && pipelineProgresses && companiesData) {
|
||||
const viewId = searchParams.get('view');
|
||||
if (viewId) {
|
||||
handleViewSelect(viewId);
|
||||
//setCurrentViewId(viewId);
|
||||
}
|
||||
setActionBarEntries();
|
||||
setContextMenuEntries();
|
||||
@ -174,8 +126,8 @@ export const HooksCompanyBoardEffect = () => {
|
||||
setActionBarEntries,
|
||||
setContextMenuEntries,
|
||||
searchParams,
|
||||
handleViewSelect,
|
||||
setEntityCountInCurrentView,
|
||||
setCurrentViewId,
|
||||
]);
|
||||
|
||||
return <></>;
|
||||
|
||||
Reference in New Issue
Block a user