From 28794d02e55b1727731e5f034c3017f98c201669 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Grabowski?= Date: Tue, 12 Mar 2024 12:22:36 +0100 Subject: [PATCH] IBX-7030: moved activeLocationId outside grid view so that it is saved on entering and exiting cotf --- .../components/breadcrumbs/breadcrumbs.js | 9 +- .../components/grid-view/grid.view.item.js | 6 +- .../components/grid-view/grid.view.js | 21 ++-- .../universal.discovery.module.js | 109 ++++++++++-------- 4 files changed, 76 insertions(+), 69 deletions(-) diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js index 2199d81a64..8091ca6cd2 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js @@ -3,8 +3,7 @@ import React, { useContext, useState, useMemo, useEffect, useCallback } from 're import Icon from '../../../common/icon/icon'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; -import { LoadedLocationsMapContext, MarkedLocationIdContext } from '../../universal.discovery.module'; -import { ActiveLocationIdContext } from '../grid-view/grid.view'; +import { LoadedLocationsMapContext, MarkedLocationIdContext, GridActiveLocationIdContext } from '../../universal.discovery.module'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; const getLoadedLocationsLimitedMap = (loadedLocationsFullMap, activeLocationId) => { @@ -16,9 +15,9 @@ const getLoadedLocationsLimitedMap = (loadedLocationsFullMap, activeLocationId) const Breadcrumbs = () => { const Translator = getTranslator(); const [, setMarkedLocationId] = useContext(MarkedLocationIdContext); - const [activeLocationId, setActiveLocationId] = useContext(ActiveLocationIdContext); + const [gridActiveLocationId, setGridActiveLocationId] = useContext(GridActiveLocationIdContext); const [loadedLocationsFullMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext); - const loadedLocationsMap = getLoadedLocationsLimitedMap(loadedLocationsFullMap, activeLocationId); + const loadedLocationsMap = getLoadedLocationsLimitedMap(loadedLocationsFullMap, gridActiveLocationId); const [hiddenListVisible, setHiddenListVisible] = useState(false); const { visibleItems, hiddenItems } = useMemo(() => { return loadedLocationsMap.reduce( @@ -42,7 +41,7 @@ const Breadcrumbs = () => { dispatchLoadedLocationsAction({ type: 'SET_LOCATIONS', data: updatedLoadedLocations }); setMarkedLocationId(locationId); - setActiveLocationId(locationId); + setGridActiveLocationId(locationId); }; const toggleHiddenListVisible = useCallback(() => { setHiddenListVisible(!hiddenListVisible); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js index a52aa25ae2..8752c8c1ad 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js @@ -13,15 +13,15 @@ import { MultipleConfigContext, ContainersOnlyContext, AllowedContentTypesContext, + GridActiveLocationIdContext, } from '../../universal.discovery.module'; -import { ActiveLocationIdContext } from './grid.view'; const isSelectionButtonClicked = (event) => { return event.target.closest('.c-udw-toggle-selection'); }; const GridViewItem = ({ location, version }) => { - const [, setActiveLocationId] = useContext(ActiveLocationIdContext); + const [, setGridActiveLocationId] = useContext(GridActiveLocationIdContext); const [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext); const [, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext); const contentTypesMap = useContext(ContentTypesMapContext); @@ -63,7 +63,7 @@ const GridViewItem = ({ location, version }) => { } dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } }); - setActiveLocationId(location.id); + setGridActiveLocationId(location.id); }; const renderToggleSelection = () => { return ( diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js index 396ddc422f..d8d3d96ba0 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.js @@ -10,22 +10,19 @@ import { LoadedLocationsMapContext, SortingContext, SortOrderContext, - MarkedLocationIdContext, + GridActiveLocationIdContext } from '../../universal.discovery.module'; -export const ActiveLocationIdContext = createContext(); - const SCROLL_OFFSET = 200; const GridView = ({ itemsPerPage }) => { const [offset, setOffset] = useState(0); - const [markedLocationId] = useContext(MarkedLocationIdContext); const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext); const [sorting] = useContext(SortingContext); const [sortOrder] = useContext(SortOrderContext); - const [activeLocationId, setActiveLocationId] = useState(markedLocationId ?? loadedLocationsMap[0]?.parentLocationId); + const [gridActiveLocationId] = useContext(GridActiveLocationIdContext); const sortingOptions = SORTING_OPTIONS.find((option) => option.sortClause === sorting); - const locationData = loadedLocationsMap.find(({ parentLocationId }) => parentLocationId === activeLocationId); + const locationData = loadedLocationsMap.find(({ parentLocationId }) => parentLocationId === gridActiveLocationId); const locationDataToLoad = loadedLocationsMap.length ? loadedLocationsMap[loadedLocationsMap.length - 1] : { subitems: [] }; const [loadedLocations, isLoading] = useFindLocationsByParentLocationIdFetch( locationDataToLoad, @@ -64,14 +61,12 @@ const GridView = ({ itemsPerPage }) => { }, [loadedLocations, dispatchLoadedLocationsAction, isLoading]); return ( - -
- -
- {locationData.subitems.map(renderItem)} -
+
+ +
+ {locationData?.subitems.map(renderItem)}
- +
); }; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js index 37a5d1684c..c508eef799 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js @@ -182,6 +182,7 @@ export const BlockFetchLocationHookContext = createContext(); export const SearchTextContext = createContext(); export const DropdownPortalRefContext = createContext(); export const SuggestionsStorageContext = createContext(); +export const GridActiveLocationIdContext = createContext(); const UniversalDiscoveryModule = (props) => { const { restInfo } = props; @@ -212,6 +213,7 @@ const UniversalDiscoveryModule = (props) => { ); const [searchText, setSearchText] = useState(''); const [suggestionsStorage, setSuggestionsStorage] = useState({}); + const [gridActiveLocationId, setGridActiveLocationId] = useState(markedLocationId); const [loadedLocationsMap, dispatchLoadedLocationsAction] = useLoadedLocationsReducer([ { parentLocationId: props.rootLocationId, subitems: [] }, ]); @@ -438,6 +440,13 @@ const UniversalDiscoveryModule = (props) => { dispatchLoadedLocationsAction({ type: 'SET_LOCATIONS', data: locationsMap }); }, [sorting, sortOrder]); + useEffect(() => { + if (currentView === 'grid') { + setGridActiveLocationId(markedLocationId); + + } + }, [currentView]); + return (
@@ -468,72 +477,76 @@ const UniversalDiscoveryModule = (props) => { - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + +