feat(portal): lazily load content tree children (#12218) (#12279)

* feat(portal): lazily load content tree children (#12218)

* fix(portal): opt in tickets tree lazy loading (#12218)

* fix(tree): await accordion folder toggles (#12218)

---------

Co-authored-by: tobiu <tobiasuhlig78@gmail.com>

Author: neo-gpt

apps/portal/model/Ticket.mjs

@@ -15,9 +15,21 @@ class Ticket extends Model {
          * @member {Object[]} fields
          */
         fields: [{
+            name: 'childCount',
+            type: 'Integer'
+        }, {
+            name: 'childrenUrl',
+            type: 'String'
+        }, {
             name        : 'collapsed',
             type        : 'Boolean',
             defaultValue: true
+        }, {
+            name: 'contentDir',
+            type: 'String'
+        }, {
+            name: 'filePrefix',
+            type: 'String'
         }, {
             name: 'id',
             type: 'String'

apps/portal/view/news/tickets/MainContainer.mjs

@@ -43,10 +43,12 @@ class MainContainer extends SharedContainer {
          */
         stateProvider: StateProvider,
         /**
-         * @member {Object} treeConfig={displayField:'treeNodeName'}
+         * @member {Object} treeConfig
          */
         treeConfig: {
-            displayField: 'treeNodeName'
+            displayField       : 'treeNodeName',
+            lazyChildLoad      : true,
+            lazyChildUrlPrefix : '../../apps/portal/resources/data/'
         }
     }
 }

src/app/content/TreeList.mjs

@@ -33,6 +33,19 @@ class TreeList extends BaseTreeList {
          * @member {Object} currentPageRecord=null
          */
         currentPageRecord_: null,
+        /**
+         * @member {Boolean} lazyChildLoad=false
+         */
+        lazyChildLoad: false,
+        /**
+         * Optional URL prefix for relative child chunk URLs.
+         * @member {String|null} lazyChildUrlPrefix=null
+         */
+        lazyChildUrlPrefix: null,
+        /**
+         * @member {String} lazyChildUrlField='childrenUrl'
+         */
+        lazyChildUrlField: 'childrenUrl',
         /**
          * Optional prefix for the route (e.g. '/learn' or '/releases')
          * @member {String|null} routePrefix=null
@@ -90,6 +103,109 @@ class TreeList extends BaseTreeList {
         }
     }
 
+    /**
+     * @summary Resolves the URL used to fetch a folder node's deferred children.
+     * @param {Object} record
+     * @returns {String|null}
+     */
+    getLazyChildUrl(record) {
+        let me  = this,
+            url = record?.[me.lazyChildUrlField];
+
+        if (!url) {
+            return null
+        }
+
+        if (/^(?:[a-z]+:)?\/\//i.test(url) || url.startsWith('/') || url.startsWith('./') || url.startsWith('../')) {
+            return url
+        }
+
+        return (me.lazyChildUrlPrefix || '') + url
+    }
+
+    /**
+     * @summary Adds content paths to chunk leaves whose compact index payload omits them.
+     * @param {Object[]} records
+     * @param {Object} parentRecord
+     * @returns {Object[]}
+     */
+    normalizeLazyChildRecords(records, parentRecord) {
+        let {contentDir, filePrefix} = parentRecord;
+
+        if (!contentDir) {
+            return records
+        }
+
+        filePrefix ??= '';
+
+        return records.map(record => {
+            if (!record.path && record.id) {
+                return {
+                    ...record,
+                    path: `${contentDir}/${filePrefix}${record.id}.md`
+                }
+            }
+
+            return record
+        })
+    }
+
+    /**
+     * @summary Loads a folder node's child chunk on first expand when `lazyChildLoad` is enabled.
+     * @param {Object} record
+     * @returns {Promise<Boolean|void>} false cancels the folder toggle.
+     */
+    async onFolderItemClick(record) {
+        let me = this;
+
+        if (!me.lazyChildLoad || record.isLeaf || record.isChildrenLoaded) {
+            return
+        }
+
+        if (me.store.find('parentId', record.id).length > 0) {
+            record.isChildrenLoaded = true;
+            return
+        }
+
+        if (record.isLoading) {
+            return false
+        }
+
+        let url = me.getLazyChildUrl(record);
+
+        if (!url) {
+            return
+        }
+
+        record.isLoading = true;
+
+        try {
+            let response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`Failed to load tree children from ${url}: ${response.status}`)
+            }
+
+            let records = await response.json();
+
+            if (!Array.isArray(records)) {
+                records = records?.data || []
+            }
+
+            if (records.length > 0) {
+                me.store.add(me.normalizeLazyChildRecords(records, record))
+            }
+
+            record.isChildrenLoaded = true
+        } catch (error) {
+            record.hasError = true;
+            console.error('TreeList lazy child load failed', {error, record, url});
+            return false
+        } finally {
+            record.isLoading = false
+        }
+    }
+
     /**
      * @param {Object} record
      */
@@ -110,7 +226,11 @@ class TreeList extends BaseTreeList {
     onStoreLoad() {
         super.onStoreLoad();
 
-        this.getStateProvider().data.countPages = this.store.getCount()
+        let stateProvider = this.getStateProvider();
+
+        if (stateProvider) {
+            stateProvider.data.countPages = this.store.getCount()
+        }
     }
 }
 

src/tree/Accordion.mjs

@@ -319,9 +319,12 @@ class AccordionTree extends TreeList {
     /**
      * @param {Object} item
      * @param {Object} data
+     * @returns {Promise<Boolean|void>}
      */
-    onItemClick(item, data) {
-        super.onItemClick(item, data);
+    async onItemClick(item, data) {
+        if (await super.onItemClick(item, data) === false) {
+            return false
+        }
 
         let me               = this,
             {selectionModel} = me,
@@ -339,8 +342,6 @@ class AccordionTree extends TreeList {
              * @returns {Object} record
              */
             me.fire('folderItemClick', {record});
-
-            record.collapsed = !record.collapsed
         }
     }
 

src/tree/List.mjs

@@ -575,7 +575,7 @@ class Tree extends Base {
      * @param {Object} node
      * @param {Object} data
      */
-    onItemClick(node, data) {
+    async onItemClick(node, data) {
         let me          = this,
             {items}     = me.store,
             i           = 0,
@@ -597,12 +597,28 @@ class Tree extends Base {
 
         if (item) {
             if (item.cls?.includes(me.folderCls)) {
+                if (await me.onFolderItemClick(record, item, data) === false) {
+                    return false
+                }
+
+                item = me.getVdomChild(vnodeId);
+
+                if (!item) {
+                    return false
+                }
+
                 NeoArray.toggle(item.cls, 'neo-folder-open');
 
                 let isOpen              = item.cls.includes('neo-folder-open'),
                     {parentNode, index} = VDomUtil.find(me.vdom, item.id),
                     nextSibling         = parentNode.cn[index + 1];
 
+                if (record.isRecord) {
+                    record.setSilent({collapsed: !isOpen})
+                } else {
+                    record.collapsed = !isOpen
+                }
+
                 item.style.position = isOpen ? 'sticky' : null;
                 item.style.top      = isOpen ? (item.level * 38) + 'px' : null;
 
@@ -635,6 +651,18 @@ class Tree extends Base {
 
     }
 
+    /**
+     * @summary Extension hook for subclasses that need to prepare a folder before its
+     * open state is toggled, e.g. by loading children on demand.
+     * @param {Object} record
+     * @param {Object} item
+     * @param {Object} data
+     * @returns {Boolean|Promise<Boolean>|void} Return false to cancel the toggle.
+     */
+    onFolderItemClick(record, item, data) {
+
+    }
+
     /**
      * Gets triggered by clicks on the collapse or expand all icons
      * @param {Array} cls