IBX-10126: Added save selected view type for UDW

OstafinL · OstafinL · commit ed741fad90d9 · 2025-07-04T09:24:00.000+02:00
diff --git a/src/bundle/Resources/config/universal_discovery_widget.yaml b/src/bundle/Resources/config/universal_discovery_widget.yaml
@@ -4,6 +4,7 @@ system:
             configuration:
                 # Default UDW Configuration
                 _default:
+                    prefix: 'udw'
                     multiple: false
                     multiple_items_limit: 0
                     root_location_id: 1
diff --git a/src/bundle/Resources/public/js/scripts/admin.location.view.js b/src/bundle/Resources/public/js/scripts/admin.location.view.js
@@ -116,20 +116,19 @@
 
         bootstrap.Modal.getOrCreateInstance(doc.querySelector(SELECTOR_MODAL_BULK_ACTION_FAIL)).show();
     };
-    const getLocationActiveView = (parentLocationId) => {
-        const mediaLocationId = ibexa.adminUiConfig.locations.media;
-        const defaultActiveView = parentLocationId === mediaLocationId ? 'grid' : 'table';
-        const activeView = localStorage.getItem(`ibexa-subitems-active-view-location-${parentLocationId}`);
-
-        return activeView || defaultActiveView;
-    };
-
+    // const getLocationActiveView = (parentLocationId) => {
+    //     const mediaLocationId = ibexa.adminUiConfig.locations.media;
+    //     const defaultActiveView = parentLocationId === mediaLocationId ? 'grid' : 'table';
+    //     const activeView = localStorage.getItem(`ibexa-subitems-active-view-location-${parentLocationId}`);
+
+    //     return activeView || defaultActiveView;
+    // };
+console.log(listContainers)
     listContainers.forEach((container) => {
         const sortField = container.getAttribute('data-sort-field');
         const sortOrder = container.getAttribute('data-sort-order');
         const subitemsRoot = ReactDOM.createRoot(container);
         const parentLocationId = parseInt(container.dataset.location, 10);
-        const activeView = getLocationActiveView(parentLocationId);
         const subItemsList = JSON.parse(container.dataset.items).SubitemsList;
         const items = subItemsList.SubitemsRow.map((item) => ({
             content: item.Content,
@@ -169,7 +168,7 @@
             React.createElement(ibexa.modules.SubItems, {
                 handleEditItem,
                 generateLink,
-                activeView,
+                // activeView,
                 parentLocationId,
                 sortClauses: { [sortField]: sortOrder },
                 restInfo: { token, siteaccess },
diff --git a/src/bundle/ui-dev/src/modules/sub-items/constants.js b/src/bundle/ui-dev/src/modules/sub-items/constants.js
@@ -1,2 +1,5 @@
 export const VIEW_MODE_GRID = 'grid';
 export const VIEW_MODE_TABLE = 'table';
+export const VIEW_MODE_MEDIA_STORAGE_KEY = 'ibexa-subitems-active-view-mode-media';
+export const VIEW_MODE_CONTENT_STORAGE_KEY = 'ibexa-subitems-active-view-mode-content';
+
diff --git a/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js b/src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js
@@ -17,7 +17,12 @@ import deepClone from '../common/helpers/deep.clone.helper.js';
 import { createCssClassNames } from '../common/helpers/css.class.names';
 import { updateLocationPriority, loadLocation as loadLocationService } from './services/sub.items.service';
 import { bulkAddLocations, bulkDeleteItems, bulkHideLocations, bulkUnhideLocations, bulkMoveLocations } from './services/bulk.service.js';
-import { VIEW_MODE_GRID, VIEW_MODE_TABLE } from './constants.js';
+import {
+    VIEW_MODE_GRID,
+    VIEW_MODE_TABLE,
+    VIEW_MODE_MEDIA_STORAGE_KEY,
+    VIEW_MODE_CONTENT_STORAGE_KEY
+} from './constants.js';
 
 const { Translator, ibexa, Popper, document } = window;
 
@@ -61,7 +66,6 @@ export const columnsLabels = {
     'object-id': Translator.trans(/*@Desc("Object ID")*/ 'items_table.columns.object_id', {}, 'ibexa_sub_items'),
     'object-remote-id': Translator.trans(/*@Desc("Object remote ID")*/ 'items_table.columns.object_remote_id', {}, 'ibexa_sub_items'),
 };
-
 export default class SubItemsModule extends Component {
     constructor(props) {
         super(props);
@@ -112,7 +116,7 @@ export default class SubItemsModule extends Component {
         const sortClauseData = this.getDefaultSortClause(props.sortClauses);
 
         this.state = {
-            activeView: props.activeView,
+            activeView: this.getActiveViewMode(),
             activePageItems: null,
             pages: [],
             selectedItems: new Map(),
@@ -365,6 +369,31 @@ export default class SubItemsModule extends Component {
         });
     }
 
+    checkIsMediaLocation() {
+        return this.props.parentLocationId === ibexa.adminUiConfig.locations.media;
+    }
+
+    getDefaultViewMode() {
+        return this.checkIsMediaLocation() ? VIEW_MODE_GRID : VIEW_MODE_TABLE;
+    }
+
+    getActiveViewMode() {
+        if (this.props.activeView) {
+            return this.props.activeView
+        }
+
+        const storageKey = this.checkIsMediaLocation() ? VIEW_MODE_MEDIA_STORAGE_KEY : VIEW_MODE_CONTENT_STORAGE_KEY;
+        const defaultViewMode = this.getDefaultViewMode();
+
+        return localStorage.getItem(storageKey) || defaultViewMode;
+    }
+
+    setActiveViewMode(activeView) {
+        const storageKey = this.checkIsMediaLocation() ? VIEW_MODE_MEDIA_STORAGE_KEY : VIEW_MODE_CONTENT_STORAGE_KEY;
+
+        localStorage.setItem(storageKey, activeView);
+    }
+
     /**
      * Switches active view
      *
@@ -377,7 +406,7 @@ export default class SubItemsModule extends Component {
             () => ({ activeView }),
             () => {
                 ibexa.helpers.tooltips.hideAll();
-                window.localStorage.setItem(`ibexa-subitems-active-view-location-${this.props.parentLocationId}`, activeView);
+                this.setActiveViewMode(activeView);
             },
         );
     }
@@ -1343,7 +1372,7 @@ export default class SubItemsModule extends Component {
 
     updateTrashModal() {
         document.body.dispatchEvent(
-            new CustomEvent('ibexa-trash-modal-refresh', {
+            new CustomEvent('ibexa-trash-modal-rezresh', {
                 detail: {
                     numberOfSubitems: this.state.totalCount,
                 },
@@ -1594,7 +1623,7 @@ SubItemsModule.defaultProps = {
     loadLocation: loadLocationService,
     sortClauses: {},
     updateLocationPriority,
-    activeView: VIEW_MODE_TABLE,
+    activeView: '',
     extraActions: [],
     languages: window.ibexa.adminUiConfig.languages,
     items: [],
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js
@@ -3,15 +3,26 @@ import PropTypes from 'prop-types';
 
 import SimpleDropdown from '../../../common/simple-dropdown/simple.dropdown';
 import { getTranslator } from '../../../../../../Resources/public/js/scripts/helpers/context.helper';
-import { CurrentViewContext, ViewContext } from '../../universal.discovery.module';
+import {
+    ITEMS_VIEW_TYPE_STORAGE_KEY_PREFIX,
+    CurrentViewContext,
+    MarkedLocationIdContext,
+    ViewContext,
+    RootLocationIdContext,
+} from '../../universal.discovery.module';
 
 const ViewSwitcher = ({ isDisabled }) => {
     const Translator = getTranslator();
     const viewLabel = Translator.trans(/*@Desc("View")*/ 'view_switcher.view', {}, 'ibexa_universal_discovery_widget');
     const [currentView, setCurrentView] = useContext(CurrentViewContext);
     const { views } = useContext(ViewContext);
+    const rootLocationId = useContext(RootLocationIdContext);
+    const [markedLocationId] = useContext(MarkedLocationIdContext);
     const selectedOption = views.find((option) => option.value === currentView);
     const onOptionClick = ({ value }) => {
+        const itemsViewTypeStorageKey = `${ITEMS_VIEW_TYPE_STORAGE_KEY_PREFIX}-${markedLocationId ?? rootLocationId}`;
+
+        window.localStorage.setItem(itemsViewTypeStorageKey, value);
         setCurrentView(value);
     };
 
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
@@ -34,6 +34,10 @@ const defaultRestInfo = {
     token: document.querySelector('meta[name="CSRF-Token"]')?.content,
     siteaccess: document.querySelector('meta[name="SiteAccess"]')?.content,
 };
+const DEFAULT_ITEMS_VIEW_TYPE_MODE = 'grid';
+export const ITEMS_VIEW_TYPE_STORAGE_KEY = 'ibexa-subitems-active-view-mode-media';
+
+export const ITEMS_VIEW_TYPE_STORAGE_KEY_PREFIX = 'ibexa-udw-active-view-location'; // TO DO: delete !!!!!!!!
 
 export const SORTING_OPTIONS = [
     {
@@ -209,6 +213,10 @@ const UniversalDiscoveryModule = (props) => {
     const adminUiConfig = getAdminUiConfig();
     const { tabs } = adminUiConfig.universalDiscoveryWidget;
     const defaultMarkedLocationId = props.startingLocationId || props.rootLocationId;
+    const defaultActiveViewMode = props.activeView || localStorage.getItem(ITEMS_VIEW_TYPE_STORAGE_KEY) || DEFAULT_ITEMS_VIEW_TYPE_MODE;
+
+    console.log(defaultActiveViewMode, props.activeView, localStorage.getItem(ITEMS_VIEW_TYPE_STORAGE_KEY), DEFAULT_ITEMS_VIEW_TYPE_MODE);
+
     const abortControllerRef = useRef();
     const dropdownPortalRef = useRef();
     const [{ activeTab, previousActiveTab }, setActiveTabsData] = useState({
@@ -222,7 +230,7 @@ const UniversalDiscoveryModule = (props) => {
         }));
     const [sorting, setSorting] = useState(props.activeSortClause);
     const [sortOrder, setSortOrder] = useState(props.activeSortOrder);
-    const [currentView, setCurrentView] = useState(props.activeView);
+    const [currentView, setCurrentView] = useState(defaultActiveViewMode);
     const [markedLocationId, setMarkedLocationId] = useState(defaultMarkedLocationId !== 1 ? defaultMarkedLocationId : null);
     const [createContentVisible, setCreateContentVisible] = useState(false);
     const [contentOnTheFlyData, setContentOnTheFlyData] = useState({});
@@ -739,7 +747,7 @@ UniversalDiscoveryModule.defaultProps = {
     containersOnly: false,
     activeSortClause: 'date',
     activeSortOrder: 'ascending',
-    activeView: 'finder',
+    activeView: '',
     selectedLocations: [],
     initSelectedItems: [],
     isInitLocationsDeselectionBlocked: false,
