From f9ece9287fcb19b08497e69f57e3779adeac64ff Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 7 Aug 2019 14:51:42 +0300
Subject: [PATCH] Lazy demo for TreeTable

---
 src/components/treetable/TreeTable.vue    |  55 ++++++----
 src/router.js                             |   5 +
 src/views/treetable/TreeTableLazyDemo.vue | 126 ++++++++++++++++++++++
 3 files changed, 163 insertions(+), 23 deletions(-)
 create mode 100644 src/views/treetable/TreeTableLazyDemo.vue

diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 362cbfad2..aae41cef0 100644
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -1,6 +1,12 @@
 <template>
     <div :class="containerClass">
         <slot></slot>
+        <div class="p-treetable-loading" v-if="loading">
+            <div class="p-treetable-loading-overlay p-component-overlay"></div>
+            <div class="p-treetable-loading-content">
+                <i :class="loadingIconClass"></i>
+            </div>
+        </div>
         <div class="p-treetable-header" v-if="$scopedSlots.header">
             <slot name="header"></slot>
         </div>
@@ -698,6 +704,9 @@ export default {
                 const data = this.processedData;
                 return data ? data.length : 0;
             }
+        },
+        loadingIconClass() {
+            return ['p-treetable-loading-icon pi-spin', this.loadingIcon];
         }
     },
     components: {
@@ -885,6 +894,29 @@ export default {
     display: none;
 }
 
+/* Loader */
+.p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+    opacity: 0.1;
+    z-index: 1;
+}
+
+.p-treetable .p-treetable-loading-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 2;
+    margin-top: -1em;
+    margin-left: -1em;
+}
+
+.p-treetable .p-treetable-loading-icon {
+    font-size: 2em;
+}
+
 @media screen and (max-width: 40em) {
     .p-treetable-responsive .p-treetable-thead > tr > th,
     .p-treetable-responsive .p-treetable-tfoot > tr > td {
@@ -908,27 +940,4 @@ export default {
         font-weight: bold;
     }
 }
-
-/* Loader */
-.p-treetable-loading-overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-treetable-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-treetable .p-treetable-loading-icon {
-    font-size: 2em;
-}
 </style>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 5d33b37a7..8a827907e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -410,6 +410,11 @@ export default new Router({
 			path: '/treetable/selection',
 			name: 'treetableselection',
 			component: () => import('./views/treetable/TreeTableSelectionDemo.vue')
+        },
+        {
+			path: '/treetable/lazy',
+			name: 'treetablelazy',
+			component: () => import('./views/treetable/TreeTableLazyDemo.vue')
         },
 		{
 			path: '/tristatecheckbox',
diff --git a/src/views/treetable/TreeTableLazyDemo.vue b/src/views/treetable/TreeTableLazyDemo.vue
new file mode 100644
index 000000000..e01e3b9b6
--- /dev/null
+++ b/src/views/treetable/TreeTableLazyDemo.vue
@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <TreeTableSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TreeTable - Lazy</h1>
+                <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting. In addition, 
+                    children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list..</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
+                @node-expand="onExpand" @page="onPage" :totalRecords="totalRecords">
+                <Column field="name" header="Name" :expander="true"></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+
+        <TreeTableDoc />
+    </div>
+</template>
+
+<script>
+import TreeTableDoc from './TreeTableDoc';
+import TreeTableSubMenu from './TreeTableSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            rows: 10,
+            loading: false,
+            totalRecords: 0
+        }
+    },
+    mounted() {
+        this.loading = true;
+
+        setTimeout(() => {
+            this.loading = false;
+            this.nodes = this.loadNodes(0, this.rows);
+            this.totalRecords = 1000;
+        }, 1000);
+    },
+    methods: {
+        onExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+                
+                setTimeout(() => {
+                    let lazyNode = {...node};
+        
+                    lazyNode.children = [
+                        {
+                            data: { 
+                                name: lazyNode.data.name + ' - 0',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            },
+                        },
+                        {
+                            data: {
+                                name: lazyNode.data.name + ' - 1',
+                                size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                                type: 'File'
+                            }
+                        }
+                    ];
+
+                    let nodes = this.nodes.map(n => {
+                        if (n.key === node.key) {
+                            n = lazyNode;
+                        }
+
+                        return n;
+                    });
+
+                    this.loading = false;
+                    this.nodes = nodes;
+                }, 250);
+            }
+        },
+        onPage(event) {
+            this.loading = true;
+
+            //imitate delay of a backend call
+            setTimeout(() => {    
+                this.loading = false;
+                this.nodes = this.loadNodes(event.first, this.rows);
+            }, 1000);
+        },
+        loadNodes(first, rows) {
+            let nodes = [];
+
+            for(let i = 0; i < rows; i++) {
+                let node = {
+                    key: (first + i),
+                    data: { 
+                        name: 'Item ' + (first + i),
+                        size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                        type: 'Type ' + (first + i)
+                    },
+                    leaf: false
+                };
+
+                nodes.push(node);
+            }
+            
+            return nodes;
+        }
+    },
+    components: {
+        'TreeTableDoc': TreeTableDoc,
+        'TreeTableSubMenu': TreeTableSubMenu
+    }
+}
+</script>
+
+<style scoped>
+button {
+    margin-right: .5em;
+}
+</style>
\ No newline at end of file