From 8275c46b03dfa47b3e34be34a48b45db0911a0d7 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 2 Aug 2019 11:02:44 +0300
Subject: [PATCH] Add lazy loading demo for Tree

---
 src/components/tree/Tree.vue    | 52 ++++-------------------
 src/views/tree/TreeLazyDemo.vue | 75 +++++++++++++++++++++------------
 2 files changed, 56 insertions(+), 71 deletions(-)

diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index c966672bc..74120de5b 100644
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -1,5 +1,11 @@
 <template>
     <div :class="containerClass">
+        <template v-if="loading">
+            <div class="p-tree-loading-mask p-component-overlay"></div>
+            <div class="p-tree-loading-content">
+                <i :class="loadingIconClass" />
+            </div>
+        </template>
         <ul class="p-tree-container" role="tree">
             <TreeNode v-for="node of value" :key="node.key" :node="node" :templates="$scopedSlots" 
                 :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
@@ -149,49 +155,6 @@ export default {
 
             return _selectionKeys;
         },
-        /*handleCheckboxSelection(event) {
-            const node = event.node;
-            const checked = this.isChecked(node);
-            let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};    
-
-            if (checked) {
-                if (this.propagateSelectionDown)
-                    this.propagateDown(node, false, _selectionKeys);
-                else
-                    delete _selectionKeys[node.key];
-
-                if (this.propagateSelectionUp && this.props.onPropagateUp) {
-                    this.props.onPropagateUp({
-                        originalEvent: event,
-                        check: false,
-                        selectionKeys: selectionKeys
-                    });
-                }
-
-                this.$emit('node-unselect', node);
-            }
-            else {
-                if (this.props.propagateSelectionDown)
-                    this.propagateDown(this.props.node, true, selectionKeys);
-                else 
-                    selectionKeys[this.props.node.key] = {checked: true};
-
-                    if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-                        this.props.onPropagateUp({
-                            originalEvent: event,
-                            check: true,
-                            selectionKeys: selectionKeys
-                        });
-                    }
-
-                this.$emit('node-select', node);
-            }
-
-            return _selectionKeys;
-        },*/
-        isCheckboxSelectionMode() {
-            return this.selectionMode === 'checkbox';
-        },
         isSingleSelectionMode() {
             return this.selectionMode === 'single';
         },
@@ -211,6 +174,9 @@ export default {
                 'p-tree-selectable': this.selectionMode != null,
                 'p-tree-loading': this.loading
             }];
+        },
+        loadingIconClass() {
+            return ['p-tree-loading-icon pi-spin', this.loadingIcon];
         }
     },
     components: {
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index ebf374c58..03dd8bd84 100644
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -5,20 +5,12 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Tree - Lazy</h1>
-                <p>Tree is used to display hierarchical data.</p>
+                <p>Lazy loading is handy when dealing with huge datasets. This example imitates a lazy loading case with timeouts.</p>
             </div>
         </div>
 
         <div class="content-section implementation">
-            <h3>Basic</h3>
-            <Tree :value="nodes"></Tree>
-
-            <h3>Programmatic Control</h3>
-            <div style="margin-bottom: 1em">
-                <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
-            </div>
-            <Tree :value="nodes" :expandedKeys="expandedKeys"></Tree>            
+            <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>       
         </div>
 
         <TreeDoc />
@@ -32,8 +24,8 @@ import TreeSubMenu from './TreeSubMenu';
 export default {
     data() {
         return {
-            nodes: null,
-            expandedKeys: {}
+            loading: false,
+            nodes: null
         }
     },
     nodeService: null,
@@ -41,26 +33,53 @@ export default {
         this.nodeService = new NodeService();
     },
     mounted() {
-        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+        this.loading = true;
+
+        setTimeout(() => {
+            this.nodes = this.initateNodes();
+            this.loading = false;
+        }, 2000);
     },
     methods: {
-        expandAll() {
-            for (let node of this.nodes) {
-                this.expandNode(node);
+        onNodeExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+        
+                setTimeout(() => {
+                    let _node = {...node};
+                    _node.children = [];
+        
+                    for (let i = 0; i < 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+                    
+                    let _nodes = {...this.nodes}
+                    _nodes[parseInt(node.key, 10)] = _node; 
+                    
+                    this.nodes = _nodes;
+                    this.loading = false;
+                }, 500);  
             }
-
-            this.expandedKeys = {...this.expandedKeys};
         },
-        collapseAll() {
-            this.expandedKeys = {};
-        },
-        expandNode(node) {
-            this.expandedKeys[node.key] = true;
-            if (node.children && node.children.length) {
-                for (let child of node.children) {
-                    this.expandNode(child);
-                }
-            }
+        initateNodes() {
+            return [{
+                key: '0',
+                label: 'Node 0',
+                leaf: false
+            },
+            {
+                key: '1',
+                label: 'Node 1',
+                leaf: false
+            },
+            {
+                key: '2',
+                label: 'Node 2',
+                leaf: false
+            }];
         }
     },
     components: {