diff --git a/web/components/gantt-chart/chart/main-content.tsx b/web/components/gantt-chart/chart/main-content.tsx index e3b972237..e5bd7afbf 100644 --- a/web/components/gantt-chart/chart/main-content.tsx +++ b/web/components/gantt-chart/chart/main-content.tsx @@ -162,7 +162,7 @@ export const GanttChartMainContent: React.FC = observer((props) => { )} - + )} diff --git a/web/components/issues/bulk-operations/root.tsx b/web/components/issues/bulk-operations/root.tsx index 957f18609..f92e02279 100644 --- a/web/components/issues/bulk-operations/root.tsx +++ b/web/components/issues/bulk-operations/root.tsx @@ -3,9 +3,11 @@ import { observer } from "mobx-react"; import { BulkOperationsUpgradeBanner } from "@/components/issues"; // hooks import { useMultipleSelectStore } from "@/hooks/store"; +import { TSelectionHelper } from "@/hooks/use-multiple-select"; type Props = { className?: string; + selectionHelpers: TSelectionHelper; }; export const IssueBulkOperationsRoot: React.FC = observer((props) => { diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx index c527276ef..daddc572f 100644 --- a/web/components/issues/issue-layouts/list/default.tsx +++ b/web/components/issues/issue-layouts/list/default.tsx @@ -170,7 +170,7 @@ const GroupByList: React.FC = observer((props) => { ) )} - + )} diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx index c4b6e7d69..8287ea746 100644 --- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx @@ -107,7 +107,7 @@ export const SpreadsheetView: React.FC = observer((props) => { )} - + )} diff --git a/web/hooks/use-multiple-select.ts b/web/hooks/use-multiple-select.ts index 9dcc0e17c..47f673624 100644 --- a/web/hooks/use-multiple-select.ts +++ b/web/hooks/use-multiple-select.ts @@ -33,6 +33,7 @@ export const useMultipleSelect = (props: Props) => { const router = useRouter(); // store hooks const { + selectedEntityIds, updateSelectedEntityDetails, bulkUpdateSelectedEntityDetails, getActiveEntityDetails, @@ -45,6 +46,7 @@ export const useMultipleSelect = (props: Props) => { clearSelection, getIsEntitySelected, getIsEntityActive, + getEntityDetailsFromEntityID, } = useMultipleSelectStore(); const groups = useMemo(() => Object.keys(entities), [entities]); @@ -248,10 +250,6 @@ export const useMultipleSelect = (props: Props) => { (groupID: string) => { const groupEntities = entitiesList.filter((entity) => entity.groupID === groupID); const groupSelectionStatus = isGroupSelected(groupID); - // groupEntities.map((entity) => { - // console.log("group click"); - // handleEntitySelection(entity, false, groupSelectionStatus === "empty" ? "force-add" : "force-remove"); - // }); handleEntitySelection(groupEntities, false, groupSelectionStatus === "empty" ? "force-add" : "force-remove"); }, [entitiesList, handleEntitySelection, isGroupSelected] @@ -346,6 +344,19 @@ export const useMultipleSelect = (props: Props) => { }; }, [clearSelection, router.events]); + // when entities list change, remove entityIds from the selected entities array, which are not present in the new list + useEffect(() => { + selectedEntityIds.map((entityID) => { + const isEntityPresent = entitiesList.find((en) => en.entityID === entityID); + if (!isEntityPresent) { + const entityDetails = getEntityDetailsFromEntityID(entityID); + if (entityDetails) { + handleEntitySelection(entityDetails); + } + } + }); + }, [entitiesList, getEntityDetailsFromEntityID, handleEntitySelection, selectedEntityIds]); + /** * @description helper functions for selection */ diff --git a/web/store/multiple_select.store.ts b/web/store/multiple_select.store.ts index 14750f31a..c573cec5b 100644 --- a/web/store/multiple_select.store.ts +++ b/web/store/multiple_select.store.ts @@ -19,6 +19,7 @@ export type IMultipleSelectStore = { getPreviousActiveEntity: () => TEntityDetails | null; getNextActiveEntity: () => TEntityDetails | null; getActiveEntityDetails: () => TEntityDetails | null; + getEntityDetailsFromEntityID: (entityID: string) => TEntityDetails | null; // entity actions updateSelectedEntityDetails: (entityDetails: TEntityDetails, action: "add" | "remove") => void; bulkUpdateSelectedEntityDetails: (entitiesList: TEntityDetails[], action: "add" | "remove") => void; @@ -119,6 +120,16 @@ export class MultipleSelectStore implements IMultipleSelectStore { */ getActiveEntityDetails = computedFn(() => this.activeEntityDetails); + /** + * @description get the entity details from entityID + * @param {string} entityID + * @returns {TEntityDetails | null} + */ + getEntityDetailsFromEntityID = computedFn( + (entityID: string): TEntityDetails | null => + this.selectedEntityDetails.find((en) => en.entityID === entityID) ?? null + ); + // entity actions /** * @description add or remove entities @@ -159,8 +170,11 @@ export class MultipleSelectStore implements IMultipleSelectStore { if (entitiesList.length > 0) this.updateLastSelectedEntityDetails(entitiesList[entitiesList.length - 1]); }); } else { + const newEntities = differenceWith(this.selectedEntityDetails, entitiesList, (obj1, obj2) => + isEqual(obj1.entityID, obj2.entityID) + ); runInAction(() => { - this.selectedEntityDetails = differenceWith(this.selectedEntityDetails, entitiesList, isEqual); + this.selectedEntityDetails = newEntities; }); } };