tree virtual scroll added

primefaces · Feb 26, 2024 · be077eb · be077eb
1 parent fc8747b
commit be077eb
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 1 deletion.
diff --git a/src/app/showcase/doc/tree/treedoc.module.ts b/src/app/showcase/doc/tree/treedoc.module.ts
@@ -22,10 +22,12 @@ import { MultipleDoc } from './multipledoc';
 import { SingleDoc } from './singledoc';
 import { StyleDoc } from './styledoc';
 import { TemplateDoc } from './templatedoc';
+import { VirtualScrollDoc } from './virtualscrolldoc';
+import { LazyVirtualScrollDoc } from './virtualscrolllazydoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, TreeModule, ButtonModule, InputSwitchModule, FormsModule, ToastModule, ContextMenuModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, ControlledDoc, SingleDoc, MultipleDoc, CheckboxDoc, EventDoc, LazyDoc, TemplateDoc, DragDropDoc, ContextMenuDoc, FilterDoc, StyleDoc, AccessibilityDoc]
+    declarations: [ImportDoc, BasicDoc, ControlledDoc, SingleDoc, MultipleDoc, CheckboxDoc, EventDoc, LazyDoc, VirtualScrollDoc, LazyVirtualScrollDoc, TemplateDoc, DragDropDoc, ContextMenuDoc, FilterDoc, StyleDoc, AccessibilityDoc]
 })
 export class TreeDocModule {}
diff --git a/src/app/showcase/doc/tree/virtualscrolldoc.ts b/src/app/showcase/doc/tree/virtualscrolldoc.ts
@@ -0,0 +1,80 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'virtual-scroll-doc',
+    template: `
+        <app-docsectiontext>
+            <p>VirtualScroller is a performance-approach to handle huge data efficiently. Setting <i>virtualScroll</i> property as true and providing a <i>virtualScrollItemSize</i> in pixels would be enough to enable this functionality.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46" [value]="files"></p-tree>
+        </div>
+        <app-code [code]="code" selector="tree-virtual-scroll-demo"></app-code>
+    `
+})
+export class VirtualScrollDoc implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.nodeService.getFiles().then((data) => {
+            this.files = this.duplicateData(data, 50);
+            this.cd.markForCheck();
+        });
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+    code: Code = {
+        basic: `<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46" [value]="files"></p-tree>`,
+
+        html: `
+<div class="card flex justify-content-center">
+<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46" [value]="files"></p-tree>
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+    selector: 'tree-template-demo',
+    templateUrl: './tree-template-demo.html'
+})
+export class TreeTemplateDemo implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.nodeService.getFiles().then((data) => {
+            this.files = this.duplicateData(data, 50);
+            this.cd.markForCheck();
+        });
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+}`
+    };
+}
diff --git a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts
@@ -0,0 +1,114 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'lazy-virtual-scroll-doc',
+    template: `
+        <app-docsectiontext>
+            <p>VirtualScroller is a performance-approach to handle huge data efficiently. Setting <i>virtualScroll</i> property as true and providing a <i>virtualScrollItemSize</i> in pixels would be enough to enable this functionality.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [lazy]="true" [virtualScrollItemSize]="46" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>
+        </div>
+        <app-code [code]="code" selector="tree-virtual-scroll-lazy-demo"></app-code>
+    `
+})
+export class LazyVirtualScrollDoc implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    virtualFiles!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.loading = true;
+        setTimeout(() => {
+            this.nodeService.getLazyFiles().then((files) => (this.files = this.duplicateData(files, 50)));
+            this.loading = false;
+            this.cd.markForCheck();
+        }, 1000);
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+    nodeExpand(event: any) {
+        if (event.node) {
+            this.loading = true;
+            setTimeout(() => {
+                this.nodeService.getLazyFiles().then((nodes) => {
+                    event.node.children = nodes;
+                    this.files = [...this.files, event.node.children];
+                });
+                this.loading = false;
+                this.cd.markForCheck();
+            }, 200);
+        }
+    }
+
+    code: Code = {
+        basic: `<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [lazy]="true" [virtualScrollItemSize]="46" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>`,
+
+        html: `<div class="card flex justify-content-center">
+<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [lazy]="true" [virtualScrollItemSize]="46" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+    selector: 'tree-template-demo',
+    templateUrl: './tree-template-demo.html'
+})
+export class TreeTemplateDemo implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    virtualFiles!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.loading = true;
+        setTimeout(() => {
+            this.nodeService.getLazyFiles().then((files) => (this.files = this.duplicateData(files, 50)));
+            this.loading = false;
+            this.cd.markForCheck();
+        }, 1000);
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+    nodeExpand(event: any) {
+        if (event.node) {
+            this.loading = true;
+            setTimeout(() => {
+                this.nodeService.getLazyFiles().then((nodes) => {
+                    event.node.children = nodes;
+                    this.files = [...this.files, event.node.children];
+                });
+                this.loading = false;
+                this.cd.markForCheck();
+            }, 200);
+        }
+    }
+}`
+    };
+}
diff --git a/src/app/showcase/pages/tree/treedemo.ts b/src/app/showcase/pages/tree/treedemo.ts
@@ -13,6 +13,8 @@ import { ContextMenuDoc } from '../../doc/tree/contextmenudoc';
 import { FilterDoc } from '../../doc/tree/filterdoc';
 import { StyleDoc } from '../../doc/tree/styledoc';
 import { AccessibilityDoc } from '../../doc/tree/accessibilitydoc';
+import { VirtualScrollDoc } from '../../doc/tree/virtualscrolldoc';
+import { LazyVirtualScrollDoc } from '../../doc/tree/virtualscrolllazydoc';
 
 @Component({
     templateUrl: './treedemo.html'
@@ -65,6 +67,22 @@ export class TreeDemo {
             label: 'Lazy',
             component: LazyDoc
         },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            children:[
+                {
+                    id: 'preload',
+                    label: 'Preload',
+                    component: VirtualScrollDoc
+                },
+                {
+                    id: 'lazyvirtualscroll',
+                    label: 'Lazy',
+                    component: LazyVirtualScrollDoc
+                },
+            ]
+        },
         {
             id: 'template',
             label: 'Template',