From dfe2943280476c4627298eeada53f8fd6e46dcf0 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 6 Aug 2019 10:42:02 +0300
Subject: [PATCH] Templating demo for TreeTable

---
 src/router.js                                 |  5 +
 src/views/treetable/TreeTableSubMenu.vue      |  1 +
 .../treetable/TreeTableTemplatingDemo.vue     | 93 +++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/views/treetable/TreeTableTemplatingDemo.vue

diff --git a/src/router.js b/src/router.js
index 897f252f5..ed48ca4a9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -385,6 +385,11 @@ export default new Router({
 			path: '/treetable',
 			name: 'treetable',
 			component: () => import('./views/treetable/TreeTableDemo.vue')
+        },
+        {
+			path: '/treetable/templating',
+			name: 'treetabletemplating',
+			component: () => import('./views/treetable/TreeTableTemplatingDemo.vue')
         },
 		{
 			path: '/tristatecheckbox',
diff --git a/src/views/treetable/TreeTableSubMenu.vue b/src/views/treetable/TreeTableSubMenu.vue
index b7b2eb8d1..d2ddb966a 100644
--- a/src/views/treetable/TreeTableSubMenu.vue
+++ b/src/views/treetable/TreeTableSubMenu.vue
@@ -2,6 +2,7 @@
     <div class="content-section content-submenu p-clearfix">
         <ul>
             <li><router-link to="/treetable">&#9679; Documentation</router-link></li>
+            <li><router-link to="/treetable/templating">&#9679; Templating</router-link></li>
         </ul>
     </div>    
 </template>
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
new file mode 100644
index 000000000..ef7d1caa4
--- /dev/null
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <TreeTableSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TreeTable - Templating</h1>
+                <p>Custom content at header, body and footer sections are supported via templating.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <TreeTable :value="nodes">
+                <template #header>
+                    FileSystem
+                </template>
+                <Column field="name" header="Name" :expander="true"></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+                <Column headerStyle="width: 8em" bodyStyle="text-align: center">
+                    <template #header>
+                        <Button type="button" icon="pi pi-cog"></Button>
+                    </template>
+                    <template #body="slotProps">
+                        <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
+                        <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
+                    </template>
+                </Column>
+                <template #footer>
+                    <div style="text-align:left">
+                        <Button icon="pi pi-refresh" />
+                    </div>
+                </template>
+            </TreeTable>
+        </div>
+
+        <TreeTableDoc />
+    </div>
+</template>
+
+<script>
+import NodeService from '../../service/NodeService';
+import TreeTableDoc from './TreeTableDoc';
+import TreeTableSubMenu from './TreeTableSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            columns: null,
+            expandedKeys: {}
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+
+        this.columns = [
+            {field: 'name', header: 'Vin', expander: true},
+            {field: 'size', header: 'Size'},
+            {field: 'type', header: 'Type'}
+        ];
+    },
+    mounted() {
+        this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {...this.expandedKeys};
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            if (node.children && node.children.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    },
+    components: {
+        'TreeTableDoc': TreeTableDoc,
+        'TreeTableSubMenu': TreeTableSubMenu
+    }
+}
+</script>
\ No newline at end of file