Skip to content

Commit

Permalink
Fix for reference selection bug
Browse files Browse the repository at this point in the history
  • Loading branch information
fgatti675 committed Jan 30, 2024
1 parent ac2aa6c commit 8537bf8
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 39 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
unhighlightEntity,
actions = [],
hideId,
selectionController
selectionController,
}:
{
entity: Entity<any>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>(
function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
({
debugKey,
forceFilter,
actionsStart,
actions,
Expand Down Expand Up @@ -150,10 +151,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
setItemCount?.(pageSize);
}, [pageSize]);

const onRowClick = useCallback(({ rowData }: {
const onRowClickCallback = useCallback(({ rowData }: {
rowData: Entity<M>
}) => {
console.debug("EntityCollectionTable click");
if (inlineEditing)
return;
return onEntityClick && onEntityClick(rowData);
Expand Down Expand Up @@ -388,6 +388,8 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
// createFilterField,
// });

const onRowClick = inlineEditing ? undefined : (onEntityClick ? onRowClickCallback : undefined);

return (

<EntityCollectionTableContext.Provider
Expand Down Expand Up @@ -421,7 +423,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
data={data}
columns={columns}
cellRenderer={cellRenderer}
onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
onRowClick={onRowClick}
onEndReached={loadNextPage}
onResetPagination={resetPagination}
error={dataLoadingError}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export type OnColumnResizeParams = { width: number, key: string };
export type EntityCollectionTableProps<M extends Record<string, any>,
UserType extends User = User> = {

debugKey?: string;
/**
* Display these entities as selected
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,6 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
const onRowClick = useCallback(({ rowData }: {
rowData: Entity<M>
}) => {
console.debug("EntityCollectionTable click");
if (inlineEditing)
return;
return onEntityClick && onEntityClick(rowData);
Expand Down Expand Up @@ -231,7 +230,6 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
setSelectedCell(undefined);
}, []);


const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
}, [forceFilter]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ import {
saveEntityWithCallbacks,
useAuthController,
useCustomizationController,
useDataSource, useFireCMSContext,
useDataSource,
useFireCMSContext,
useLargeLayout,
useNavigationController,
useSideEntityController
Expand Down Expand Up @@ -701,15 +702,19 @@ export const EntityCollectionView = React.memo(
equal(a.forceFilter, b.forceFilter);
}) as React.FunctionComponent<EntityCollectionViewProps<any>>

export function useSelectionController<M extends Record<string, any> = any>(): SelectionController<M> {
export function useSelectionController<M extends Record<string, any> = any>(
onSelectionChange?: (entity: Entity<M>, selected: boolean) => void
): SelectionController<M> {

const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);

const toggleEntitySelection = useCallback((entity: Entity<M>) => {
let newValue;
if (selectedEntities.map(e => e.id).includes(entity.id)) {
onSelectionChange?.(entity, false);
newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
} else {
onSelectionChange?.(entity, true);
newValue = [...selectedEntities, entity];
}
setSelectedEntities(newValue);
Expand Down
4 changes: 1 addition & 3 deletions packages/firecms_core/src/components/EntityPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function EntityPreview<M extends Record<string, any>>(
className
}: EntityPreviewProps<M>) {

const context = useFireCMSContext();
const customizationController: CustomizationController = useCustomizationController();
const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
collection,
path,
Expand All @@ -34,8 +34,6 @@ export function EntityPreview<M extends Record<string, any>>(
fields: customizationController.propertyConfigs
}), [collection, path, entity]);

const customizationController: CustomizationController = useCustomizationController();

const properties: ResolvedProperties = resolvedCollection.properties;

return (
Expand Down
54 changes: 26 additions & 28 deletions packages/firecms_core/src/components/ReferenceSelectionInner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,31 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(

const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);

const selectionController = useSelectionController();
const toggleEntitySelection = (entity: Entity<any>) => {
let newValue;
const selectedEntities = selectionController.selectedEntities;

analyticsController.onAnalyticsEvent?.("reference_selection_toggle", {
path: fullPath,
entityId: entity.id
});
if (selectedEntities) {

if (selectedEntities.map((e) => e.id).indexOf(entity.id) > -1) {
newValue = selectedEntities.filter((item: Entity<any>) => item.id !== entity.id);
} else {
if (maxSelection && selectedEntities.length >= maxSelection)
return;
newValue = [...selectedEntities, entity];
}
selectionController.setSelectedEntities(newValue);

if (onMultipleEntitiesSelected)
onMultipleEntitiesSelected(newValue);
}
};

const selectionController = useSelectionController(toggleEntitySelection);

/**
* Fetch initially selected ids
Expand Down Expand Up @@ -157,34 +181,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
}
};

const toggleEntitySelection = (entity: Entity<any>) => {
console.debug("ReferenceSelectionInner toggleEntitySelection", entity);
let newValue;
const selectedEntities = selectionController.selectedEntities;

analyticsController.onAnalyticsEvent?.("reference_selection_toggle", {
path: fullPath,
entityId: entity.id
});
if (selectedEntities) {

if (selectedEntities.map((e) => e.id).indexOf(entity.id) > -1) {
newValue = selectedEntities.filter((item: Entity<any>) => item.id !== entity.id);
} else {
if (maxSelection && selectedEntities.length >= maxSelection)
return;
newValue = [...selectedEntities, entity];
}
selectionController.setSelectedEntities(newValue);

if (onMultipleEntitiesSelected)
onMultipleEntitiesSelected(newValue);
}
};

const onEntityClick = (entity: Entity<any>) => {
console.debug("ReferenceSelectionInner onEntityClick", entity);

if (!multiselect && onSingleEntitySelected) {
analyticsController.onAnalyticsEvent?.("reference_selected_single", {
path: fullPath,
Expand Down Expand Up @@ -276,6 +273,7 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
<div className="flex-grow">
{entitiesDisplayedFirst &&
<EntityCollectionTable
debugKey={"reference_selection_table"}
displayedColumnIds={displayedColumnIds}
onEntityClick={onEntityClick}
tableController={tableController}
Expand Down

0 comments on commit 8537bf8

Please sign in to comment.