Complete Fix view work (#2272)
* Fix views * Make view sorts and view filters functional * Complete Company table view fix * Fix model creation * Start fixing board * Complete work
This commit is contained in:
Charles Bochet
@ -8,28 +8,65 @@ import { assertNotNull } from '~/utils/assert';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
import { useView } from '../hooks/useView';
|
||||
import { useViewInternalStates } from '../hooks/useViewInternalStates';
|
||||
import { availableFieldsScopedState } from '../states/availableFieldsScopedState';
|
||||
import { useViewGetStates } from '../hooks/useViewGetStates';
|
||||
import { availableFieldDefinitionsScopedState } from '../states/availableFieldDefinitionsScopedState';
|
||||
import { availableFilterDefinitionsScopedState } from '../states/availableFilterDefinitionsScopedState';
|
||||
import { availableSortDefinitionsScopedState } from '../states/availableSortDefinitionsScopedState';
|
||||
import { onViewFieldsChangeScopedState } from '../states/onViewFieldsChangeScopedState';
|
||||
import { onViewFiltersChangeScopedState } from '../states/onViewFiltersChangeScopedState';
|
||||
import { onViewSortsChangeScopedState } from '../states/onViewSortsChangeScopedState';
|
||||
import { savedViewFieldsScopedFamilyState } from '../states/savedViewFieldsScopedFamilyState';
|
||||
import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
|
||||
import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
|
||||
import { viewsScopedState } from '../states/viewsScopedState';
|
||||
import { View } from '../types/View';
|
||||
import { ViewField } from '../types/ViewField';
|
||||
import { ViewFilter } from '../types/ViewFilter';
|
||||
import { ViewSort } from '../types/ViewSort';
|
||||
|
||||
export const ViewBarEffect = () => {
|
||||
const {
|
||||
scopeId: viewScopeId,
|
||||
setCurrentViewFields,
|
||||
setSavedViewFields,
|
||||
setCurrentViewFilters,
|
||||
setSavedViewFilters,
|
||||
setCurrentViewSorts,
|
||||
setSavedViewSorts,
|
||||
currentViewId,
|
||||
setViews,
|
||||
changeView,
|
||||
loadView,
|
||||
changeViewInUrl,
|
||||
setCurrentViewId,
|
||||
} = useView();
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const { viewType, viewObjectId } = useViewInternalStates(viewScopeId);
|
||||
const { viewType, viewObjectId } = useViewGetStates(viewScopeId);
|
||||
|
||||
useFindManyObjects({
|
||||
objectNamePlural: 'viewsV2',
|
||||
filter: { type: { eq: viewType }, objectId: { eq: viewObjectId } },
|
||||
onCompleted: useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async (data: PaginatedObjectTypeResults<View>) => {
|
||||
const nextViews = data.edges.map((view) => ({
|
||||
id: view.node.id,
|
||||
name: view.node.name,
|
||||
objectId: view.node.objectId,
|
||||
}));
|
||||
const views = snapshot
|
||||
.getLoadable(viewsScopedState({ scopeId: viewScopeId }))
|
||||
.getValue();
|
||||
|
||||
if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
|
||||
|
||||
if (!nextViews.length) return;
|
||||
|
||||
if (!currentViewId) return changeViewInUrl(nextViews[0].id);
|
||||
},
|
||||
),
|
||||
});
|
||||
|
||||
useFindManyObjects({
|
||||
objectNamePlural: 'viewFieldsV2',
|
||||
@ -38,7 +75,9 @@ export const ViewBarEffect = () => {
|
||||
({ snapshot }) =>
|
||||
async (data: PaginatedObjectTypeResults<ViewField>) => {
|
||||
const availableFields = snapshot
|
||||
.getLoadable(availableFieldsScopedState({ scopeId: viewScopeId }))
|
||||
.getLoadable(
|
||||
availableFieldDefinitionsScopedState({ scopeId: viewScopeId }),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const onViewFieldsChange = snapshot
|
||||
@ -74,133 +113,122 @@ export const ViewBarEffect = () => {
|
||||
});
|
||||
|
||||
useFindManyObjects({
|
||||
objectNamePlural: 'viewsV2',
|
||||
filter: { type: { eq: viewType }, objectId: { eq: viewObjectId } },
|
||||
objectNamePlural: 'viewFiltersV2',
|
||||
filter: { viewId: { eq: currentViewId } },
|
||||
onCompleted: useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async (data: PaginatedObjectTypeResults<View>) => {
|
||||
const nextViews = data.edges.map((view) => ({
|
||||
id: view.node.id,
|
||||
name: view.node.name,
|
||||
objectId: view.node.objectId,
|
||||
}));
|
||||
const views = snapshot
|
||||
.getLoadable(viewsScopedState({ scopeId: viewScopeId }))
|
||||
async (data: PaginatedObjectTypeResults<Required<ViewFilter>>) => {
|
||||
const availableFilterDefinitions = snapshot
|
||||
.getLoadable(
|
||||
availableFilterDefinitionsScopedState({ scopeId: viewScopeId }),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
|
||||
if (!availableFilterDefinitions || !currentViewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!nextViews.length) return;
|
||||
const savedViewFilters = snapshot
|
||||
.getLoadable(
|
||||
savedViewFiltersScopedFamilyState({
|
||||
scopeId: viewScopeId,
|
||||
familyKey: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
if (!currentViewId) return changeView(nextViews[0].id);
|
||||
const onViewFiltersChange = snapshot
|
||||
.getLoadable(
|
||||
onViewFiltersChangeScopedState({ scopeId: viewScopeId }),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
const queriedViewFilters = data.edges
|
||||
.map(({ node }) => {
|
||||
const availableFilterDefinition = availableFilterDefinitions.find(
|
||||
(filterDefinition) => filterDefinition.fieldId === node.fieldId,
|
||||
);
|
||||
|
||||
if (!availableFilterDefinition) return null;
|
||||
|
||||
return {
|
||||
...node,
|
||||
displayValue: node.displayValue ?? node.value,
|
||||
definition: availableFilterDefinition,
|
||||
};
|
||||
})
|
||||
.filter(assertNotNull);
|
||||
|
||||
if (!isDeeplyEqual(savedViewFilters, queriedViewFilters)) {
|
||||
setSavedViewFilters?.(queriedViewFilters);
|
||||
setCurrentViewFilters?.(queriedViewFilters);
|
||||
onViewFiltersChange?.(queriedViewFilters);
|
||||
}
|
||||
},
|
||||
),
|
||||
});
|
||||
|
||||
// useGetViewSortsQuery({
|
||||
// skip: !currentViewId,
|
||||
// variables: {
|
||||
// where: {
|
||||
// viewId: { equals: currentViewId },
|
||||
// },
|
||||
// },
|
||||
// onCompleted: useRecoilCallback(({ snapshot }) => async (data) => {
|
||||
// const availableSorts = snapshot
|
||||
// .getLoadable(availableSortsScopedState({ scopeId: viewScopeId }))
|
||||
// .getValue();
|
||||
useFindManyObjects({
|
||||
objectNamePlural: 'viewSortsV2',
|
||||
filter: { viewId: { eq: currentViewId } },
|
||||
onCompleted: useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async (data: PaginatedObjectTypeResults<Required<ViewSort>>) => {
|
||||
const availableSortDefinitions = snapshot
|
||||
.getLoadable(
|
||||
availableSortDefinitionsScopedState({ scopeId: viewScopeId }),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
// if (!availableSorts || !currentViewId) {
|
||||
// return;
|
||||
// }
|
||||
if (!availableSortDefinitions || !currentViewId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// const savedViewSorts = snapshot
|
||||
// .getLoadable(
|
||||
// savedViewSortsScopedFamilyState({
|
||||
// scopeId: viewScopeId,
|
||||
// familyKey: currentViewId,
|
||||
// }),
|
||||
// )
|
||||
// .getValue();
|
||||
const savedViewSorts = snapshot
|
||||
.getLoadable(
|
||||
savedViewSortsScopedFamilyState({
|
||||
scopeId: viewScopeId,
|
||||
familyKey: currentViewId,
|
||||
}),
|
||||
)
|
||||
.getValue();
|
||||
|
||||
// const queriedViewSorts = data.viewSorts
|
||||
// .map((viewSort) => {
|
||||
// const foundCorrespondingSortDefinition = availableSorts.find(
|
||||
// (sort) => sort.key === viewSort.key,
|
||||
// );
|
||||
const onViewSortsChange = snapshot
|
||||
.getLoadable(onViewSortsChangeScopedState({ scopeId: viewScopeId }))
|
||||
.getValue();
|
||||
|
||||
// if (foundCorrespondingSortDefinition) {
|
||||
// return {
|
||||
// key: viewSort.key,
|
||||
// definition: foundCorrespondingSortDefinition,
|
||||
// direction: viewSort.direction.toLowerCase(),
|
||||
// } as Sort;
|
||||
// } else {
|
||||
// return undefined;
|
||||
// }
|
||||
// })
|
||||
// .filter((sort): sort is Sort => !!sort);
|
||||
const queriedViewSorts = data.edges
|
||||
.map(({ node }) => {
|
||||
const availableSortDefinition = availableSortDefinitions.find(
|
||||
(sort) => sort.fieldId === node.fieldId,
|
||||
);
|
||||
|
||||
// if (!isDeeplyEqual(savedViewSorts, queriedViewSorts)) {
|
||||
// setSavedViewSorts?.(queriedViewSorts);
|
||||
// setCurrentViewSorts?.(queriedViewSorts);
|
||||
// }
|
||||
// }),
|
||||
// });
|
||||
if (!availableSortDefinition) return null;
|
||||
|
||||
// useGetViewFiltersQuery({
|
||||
// skip: !currentViewId,
|
||||
// variables: {
|
||||
// where: {
|
||||
// viewId: { equals: currentViewId },
|
||||
// },
|
||||
// },
|
||||
// onCompleted: useRecoilCallback(({ snapshot }) => (data) => {
|
||||
// const availableFilters = snapshot
|
||||
// .getLoadable(availableFiltersScopedState({ scopeId: viewScopeId }))
|
||||
// .getValue();
|
||||
return {
|
||||
id: node.id,
|
||||
fieldId: node.fieldId,
|
||||
direction: node.direction,
|
||||
definition: availableSortDefinition,
|
||||
};
|
||||
})
|
||||
.filter(assertNotNull);
|
||||
|
||||
// if (!availableFilters || !currentViewId) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const savedViewFilters = snapshot
|
||||
// .getLoadable(
|
||||
// savedViewFiltersScopedFamilyState({
|
||||
// scopeId: viewScopeId,
|
||||
// familyKey: currentViewId,
|
||||
// }),
|
||||
// )
|
||||
// .getValue();
|
||||
|
||||
// const queriedViewFilters = data.viewFilters
|
||||
// .map(({ __typename, name: _name, ...viewFilter }) => {
|
||||
// const availableFilter = availableFilters.find(
|
||||
// (filter) => filter.key === viewFilter.key,
|
||||
// );
|
||||
|
||||
// return availableFilter
|
||||
// ? {
|
||||
// ...viewFilter,
|
||||
// displayValue: viewFilter.displayValue ?? viewFilter.value,
|
||||
// type: availableFilter.type,
|
||||
// }
|
||||
// : undefined;
|
||||
// })
|
||||
// .filter((filter): filter is Filter => !!filter);
|
||||
|
||||
// if (!isDeeplyEqual(savedViewFilters, queriedViewFilters)) {
|
||||
// setSavedViewFilters?.(queriedViewFilters);
|
||||
// setCurrentViewFilters?.(queriedViewFilters);
|
||||
// }
|
||||
// }),
|
||||
// });
|
||||
if (!isDeeplyEqual(savedViewSorts, queriedViewSorts)) {
|
||||
setSavedViewSorts?.(queriedViewSorts);
|
||||
setCurrentViewSorts?.(queriedViewSorts);
|
||||
onViewSortsChange?.(queriedViewSorts);
|
||||
}
|
||||
},
|
||||
),
|
||||
});
|
||||
|
||||
const currentViewIdFromUrl = searchParams.get('view');
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentViewIdFromUrl) return;
|
||||
setCurrentViewId(currentViewIdFromUrl);
|
||||
}, [currentViewIdFromUrl, setCurrentViewId]);
|
||||
loadView(currentViewIdFromUrl);
|
||||
}, [currentViewIdFromUrl, loadView, setCurrentViewId]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user