EZP-30072: As an editor I would like to see the content tree state restored after reloading a page

Resources/public/scss/modules/content-tree/_list.item.scss

@@ -73,7 +73,7 @@ $list-item-height: calculateRem(20px);
         padding: 0;
         background: none;
         text-align: center;
-        color: $ez-color-base-light;
+        color: $ez-color-base-dark;
         border-radius: calculateRem(4px);
         margin-left: calculateRem(26px);
         transition: background 0.3s $ez-admin-transition, color 0.3s $ez-admin-transition;
@@ -85,7 +85,7 @@ $list-item-height: calculateRem(20px);
         }
 
         &:hover {
-            color: $ez-color-base-light;
+            color: $ez-color-base-dark;
         }
 
         .ez-icon {
@@ -101,7 +101,6 @@ $list-item-height: calculateRem(20px);
         opacity: 0;
         list-style: none;
         max-height: 0;
-        overflow: hidden;
     }
 
     &--has-sub-items {

Resources/public/scss/modules/content-tree/_main.scss

@@ -3,6 +3,8 @@
     min-width: calculateRem(250px);
     width: calculateRem(250px);
     max-width: 33vw;
+    height: 100%;
+    overflow: auto;
 
     &__resize-handler {
         width: calculateRem(3px);

src/modules/content-tree/components/content-tree/content.tree.js

@@ -62,12 +62,19 @@ export default class ContentTree extends Component {
 
     render() {
         const { isResizing, containerWidth, resizedContainerWidth } = this.state;
-        const { items, loadMoreSubitems, currentLocationId, subitemsLoadLimit } = this.props;
+        const { items, loadMoreSubitems, currentLocationId, subitemsLoadLimit, afterItemToggle } = this.props;
         const width = isResizing ? resizedContainerWidth : containerWidth;
         const rootLocationSubitems = items.length ? items[0].subitems : [];
         const rootLocationPath = items.length ? '' + items[0].locationId : '';
         const containerAttrs = { className: 'm-tree', ref: this._refTreeContainer };
-        const listAttrs = { items: rootLocationSubitems, path: rootLocationPath, loadMoreSubitems, currentLocationId, subitemsLoadLimit };
+        const listAttrs = {
+            items: rootLocationSubitems,
+            path: rootLocationPath,
+            loadMoreSubitems,
+            currentLocationId,
+            subitemsLoadLimit,
+            afterItemToggle,
+        };
 
         if (width) {
             containerAttrs.style = { width: `${width}px` };
@@ -87,4 +94,5 @@ ContentTree.propTypes = {
     loadMoreSubitems: PropTypes.func.isRequired,
     currentLocationId: PropTypes.number.isRequired,
     subitemsLoadLimit: PropTypes.number,
+    afterItemToggle: PropTypes.func.isRequired,
 };

src/modules/content-tree/components/list-item/list.item.component.js

@@ -12,7 +12,7 @@ class ListItem extends Component {
         this.handleAfterExpandedStateChange = this.handleAfterExpandedStateChange.bind(this);
 
         this.state = {
-            isExpanded: false,
+            isExpanded: !!props.subitems.length,
             isLoading: false,
         };
     }
@@ -22,22 +22,30 @@ class ListItem extends Component {
     }
 
     toggleExpandedState() {
-        this.setState((state, props) => {
-            const isLoading = !state.isExpanded && !props.subitems.length;
+        this.setState(
+            (state) => ({ isExpanded: !state.isExpanded }),
+            () => {
+                const { afterItemToggle, path } = this.props;
 
-            return { isExpanded: !state.isExpanded, isLoading };
-        }, this.handleAfterExpandedStateChange);
+                afterItemToggle(path, this.state.isExpanded);
+                this.handleAfterExpandedStateChange();
+            }
+        );
     }
 
     handleAfterExpandedStateChange() {
-        if (!this.state.isLoading) {
-            return;
-        }
+        const loadInitialItems = this.state.isExpanded && !this.props.subitems.length;
 
-        this.loadMoreSubitems();
+        if (loadInitialItems) {
+            this.loadMoreSubitems();
+        }
     }
 
     loadMoreSubitems() {
+        if (this.state.isLoading) {
+            return;
+        }
+
         const { subitems, path, locationId, loadMoreSubitems } = this.props;
 
         this.setState(
@@ -175,6 +183,7 @@ ListItem.propTypes = {
     isInvisible: PropTypes.bool.isRequired,
     loadMoreSubitems: PropTypes.func.isRequired,
     subitemsLoadLimit: PropTypes.number,
+    afterItemToggle: PropTypes.func.isRequired,
 };
 
 ListItem.defaultProps = {

src/modules/content-tree/components/list/list.component.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '../list-item/list.item.component';
 
-const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLimit }) => {
-    const listAttrs = { loadMoreSubitems, currentLocationId };
-    const listItemAttrs = { loadMoreSubitems };
+const List = ({ items, loadMoreSubitems, currentLocationId, path, subitemsLoadLimit, afterItemToggle }) => {
+    const listAttrs = { loadMoreSubitems, currentLocationId, subitemsLoadLimit, afterItemToggle };
+    const listItemAttrs = { loadMoreSubitems, afterItemToggle };
 
     return (
         <ul className="c-list">
@@ -37,6 +37,7 @@ List.propTypes = {
     loadMoreSubitems: PropTypes.func.isRequired,
     currentLocationId: PropTypes.number.isRequired,
     subitemsLoadLimit: PropTypes.number,
+    afterItemToggle: PropTypes.func.isRequired,
 };
 
 export default List;

src/modules/content-tree/content.tree.module.js

@@ -1,34 +1,50 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ContentTree from './components/content-tree/content.tree';
-import { loadLocationItems } from './services/content.tree.service';
+import { loadLocationItems, loadSubtree } from './services/content.tree.service';
+
+const KEY_CONTENT_TREE_SUBTREE = 'ez-content-tree-subtree';
 
 export default class ContentTreeModule extends Component {
     constructor(props) {
         super(props);
 
         this.setInitialItemsState = this.setInitialItemsState.bind(this);
         this.loadMoreSubitems = this.loadMoreSubitems.bind(this);
+        this.updateSubtreeAfterItemToggle = this.updateSubtreeAfterItemToggle.bind(this);
+
+        const savedSubtree = localStorage.getItem(KEY_CONTENT_TREE_SUBTREE);
 
         this.items = props.preloadedLocations;
+        this.subtree = savedSubtree ? JSON.parse(savedSubtree) : null;
     }
 
     componentDidMount() {
         if (this.items.length) {
             return;
         }
 
-        loadLocationItems(this.props.rootLocationId, this.setInitialItemsState);
+        if (this.subtree) {
+            loadSubtree(this.props.restInfo, this.subtree, (loadedSubtree) => {
+                this.setInitialItemsState(loadedSubtree[0]);
+            });
+
+            return;
+        }
+
+        loadLocationItems(this.props.restInfo, this.props.rootLocationId, this.setInitialItemsState);
     }
 
     setInitialItemsState(location) {
         this.items = [location];
+        this.subtree = this.generateSubtree(this.items);
 
         this.forceUpdate();
     }
 
     loadMoreSubitems({ parentLocationId, offset, limit, path }, successCallback) {
         loadLocationItems(
+            this.props.restInfo,
             parentLocationId,
             this.updateLocationsStateAfterLoadingMoreItems.bind(this, path, successCallback),
             limit,
@@ -45,10 +61,115 @@ export default class ContentTreeModule extends Component {
 
         item.subitems = [...item.subitems, ...location.subitems];
 
+        this.updateSubtreeAfterLoadMoreItems(path);
         successCallback();
         this.forceUpdate();
     }
 
+    updateSubtreeAfterLoadMoreItems(path) {
+        const item = this.findItem(this.items, path.split(','));
+
+        this.updateItemInSubtree(this.subtree[0], item, path.split(','));
+        this.saveSubtree();
+    }
+
+    updateSubtreeAfterItemToggle(path, isExpanded) {
+        const item = this.findItem(this.items, path.split(','));
+
+        if (isExpanded) {
+            this.addItemToSubtree(this.subtree[0], item, path.split(','));
+        } else {
+            this.removeItemFromSubtree(this.subtree[0], item, path.split(','));
+        }
+
+        this.saveSubtree();
+    }
+
+    addItemToSubtree(subtree, item, path) {
+        const parentSubtree = this.findParentSubtree(subtree, path);
+
+        if (!parentSubtree) {
+            return;
+        }
+
+        const { subitemsLoadLimit } = this.props;
+
+        parentSubtree.children.push({
+            '_media-type': 'application/vnd.ez.api.ContentTreeLoadSubtreeRequestNode',
+            locationId: item.locationId,
+            limit: Math.ceil(item.subitems.length / subitemsLoadLimit) * subitemsLoadLimit,
+            offset: 0,
+            children: [],
+        });
+    }
+
+    removeItemFromSubtree(subtree, item, path) {
+        const parentSubtree = this.findParentSubtree(subtree, path);
+
+        if (!parentSubtree) {
+            return;
+        }
+
+        const index = parentSubtree.children.findIndex((element) => element.locationId === item.locationId);
+
+        if (index > -1) {
+            parentSubtree.children.splice(index, 1);
+        }
+    }
+
+    updateItemInSubtree(subtree, item, path) {
+        const parentSubtree = this.findParentSubtree(subtree, path);
+
+        if (!parentSubtree) {
+            return;
+        }
+
+        const index = parentSubtree.children.findIndex((element) => element.locationId === item.locationId);
+
+        if (index > -1) {
+            parentSubtree.children[index].limit = item.subitems.length;
+        }
+    }
+
+    saveSubtree() {
+        localStorage.setItem(KEY_CONTENT_TREE_SUBTREE, JSON.stringify(this.subtree));
+    }
+
+    findParentSubtree(subtree, path) {
+        if (path.length < 2) {
+            return;
+        }
+
+        path.shift();
+        path.pop();
+
+        return path.reduce(
+            (subtree, locationId) => subtree.children.find((element) => element.locationId === parseInt(locationId, 10)),
+            subtree
+        );
+    }
+
+    generateSubtree(items) {
+        const itemsWithoutLeafs = [];
+        const { subitemsLoadLimit } = this.props;
+
+        for (const item of items) {
+            const isLeaf = !item.subitems.length;
+
+            if (!isLeaf) {
+                itemsWithoutLeafs.push({
+                    '_media-type': 'application/vnd.ez.api.ContentTreeLoadSubtreeRequestNode',
+                    locationId: item.locationId,
+                    limit: Math.ceil(item.subitems.length / subitemsLoadLimit) * subitemsLoadLimit,
+                    offset: 0,
+                    children: this.generateSubtree(item.subitems),
+                });
+            }
+        }
+
+        return itemsWithoutLeafs;
+    }
+
     findItem(items, path) {
         const isLast = path.length === 1;
         const item = items.find((element) => element.locationId === parseInt(path[0], 10));
@@ -77,6 +198,7 @@ export default class ContentTreeModule extends Component {
             currentLocationId,
             subitemsLoadLimit,
             loadMoreSubitems: this.loadMoreSubitems,
+            afterItemToggle: this.updateSubtreeAfterItemToggle,
         };
 
         return <ContentTree {...attrs} />;
@@ -90,6 +212,10 @@ ContentTreeModule.propTypes = {
     currentLocationId: PropTypes.number.isRequired,
     preloadedLocations: PropTypes.arrayOf(PropTypes.object),
     subitemsLoadLimit: PropTypes.number,
+    restInfo: PropTypes.shape({
+        token: PropTypes.string.isRequired,
+        siteaccess: PropTypes.string.isRequired,
+    }).isRequired,
 };
 
 ContentTreeModule.defaultProps = {