IBX-7030: [UDW] Inactive edit button in grid view

ibexa · Feb 15, 2024 · d2a0770 · d2a0770
1 parent 526fc99
commit d2a0770
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 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
@@ -3,12 +3,22 @@ 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 } from '../../universal.discovery.module';
+import { LoadedLocationsMapContext, MarkedLocationIdContext } from '../../universal.discovery.module';
+import { ActiveLocationIdContext } from '../grid-view/grid.view';
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
+const getLoadedLocationsLimitedMap = (loadedLocationsFullMap, activeLocationId) => {
+    const itemIndex = loadedLocationsFullMap.findIndex(({ parentLocationId }) => parentLocationId === activeLocationId);
+
+    return loadedLocationsFullMap.slice(0, itemIndex + 1);
+};
+
 const Breadcrumbs = () => {
     const Translator = getTranslator();
-    const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
+    const [, setMarkedLocationId] = useContext(MarkedLocationIdContext);
+    const [activeLocationId, setActiveLocationId] = useContext(ActiveLocationIdContext);
+    const [loadedLocationsFullMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
+    const loadedLocationsMap = getLoadedLocationsLimitedMap(loadedLocationsFullMap, activeLocationId);
     const [hiddenListVisible, setHiddenListVisible] = useState(false);
     const { visibleItems, hiddenItems } = useMemo(() => {
         return loadedLocationsMap.reduce(
@@ -31,6 +41,8 @@ const Breadcrumbs = () => {
         updatedLoadedLocations[updatedLoadedLocations.length - 1].subitems = [];
 
         dispatchLoadedLocationsAction({ type: 'SET_LOCATIONS', data: updatedLoadedLocations });
+        setMarkedLocationId(locationId);
+        setActiveLocationId(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
@@ -14,12 +14,14 @@ import {
     ContainersOnlyContext,
     AllowedContentTypesContext,
 } 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 [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext);
     const [, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
     const contentTypesMap = useContext(ContentTypesMapContext);
@@ -44,6 +46,8 @@ const GridViewItem = ({ location, version }) => {
         }
 
         setMarkedLocationId(location.id);
+        dispatchLoadedLocationsAction({ type: 'CUT_LOCATIONS', locationId: location.id });
+        dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
 
         if (!multiple) {
             dispatchSelectedLocationsAction({ type: 'CLEAR_SELECTED_LOCATIONS' });
@@ -59,6 +63,7 @@ const GridViewItem = ({ location, version }) => {
         }
 
         dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
+        setActiveLocationId(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
@@ -1,23 +1,34 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, createContext } from 'react';
 import PropTypes from 'prop-types';
 
 import GridViewItem from './grid.view.item';
 import Breadcrumbs from '../breadcrumbs/breadcrumbs';
 
 import { useFindLocationsByParentLocationIdFetch } from '../../hooks/useFindLocationsByParentLocationIdFetch';
-import { SORTING_OPTIONS, LoadedLocationsMapContext, SortingContext, SortOrderContext } from '../../universal.discovery.module';
+import {
+    SORTING_OPTIONS,
+    LoadedLocationsMapContext,
+    SortingContext,
+    SortOrderContext,
+    MarkedLocationIdContext,
+} 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 sortingOptions = SORTING_OPTIONS.find((option) => option.sortClause === sorting);
-    const locationData = loadedLocationsMap.length ? loadedLocationsMap[loadedLocationsMap.length - 1] : { subitems: [] };
+    const locationData = loadedLocationsMap.find(({ parentLocationId }) => parentLocationId === activeLocationId);
+    const locationDataToLoad = loadedLocationsMap.length ? loadedLocationsMap[loadedLocationsMap.length - 1] : { subitems: [] };
     const [loadedLocations, isLoading] = useFindLocationsByParentLocationIdFetch(
-        locationData,
+        locationDataToLoad,
         { sortClause: sortingOptions.sortClause, sortOrder },
         itemsPerPage,
         offset,
@@ -53,12 +64,14 @@ const GridView = ({ itemsPerPage }) => {
     }, [loadedLocations, dispatchLoadedLocationsAction, isLoading]);
 
     return (
-        <div className="c-grid">
-            <Breadcrumbs />
-            <div className="ibexa-grid-view c-grid__items-wrapper" onScroll={loadMore}>
-                {locationData.subitems.map(renderItem)}
+        <ActiveLocationIdContext.Provider value={[activeLocationId, setActiveLocationId]}>
+            <div className="c-grid">
+                <Breadcrumbs />
+                <div className="ibexa-grid-view c-grid__items-wrapper" onScroll={loadMore}>
+                    {locationData.subitems.map(renderItem)}
+                </div>
             </div>
-        </div>
+        </ActiveLocationIdContext.Provider>
     );
 };