diff --git a/src/bundle/Resources/config/universal_discovery_widget.yaml b/src/bundle/Resources/config/universal_discovery_widget.yaml index 32feca3396..10042a8ba1 100644 --- 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 index 9aa3a69fdd..76aa1e5af5 100644 --- 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 index b88750d063..457f33d8e1 100644 --- 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 index a8cde78da0..40c22f7ce9 100644 --- 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 index e4ef9a5178..99a740255b 100644 --- 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 index fff3ec71bd..8164a2f843 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 @@ -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,