From be077ebe27b3be5a786b1aa547aa98d915e2b721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 26 Feb 2024 10:43:11 +0300 Subject: [PATCH 1/2] tree virtual scroll added --- src/app/showcase/doc/tree/treedoc.module.ts | 4 +- src/app/showcase/doc/tree/virtualscrolldoc.ts | 80 ++++++++++++ .../showcase/doc/tree/virtualscrolllazydoc.ts | 114 ++++++++++++++++++ src/app/showcase/pages/tree/treedemo.ts | 18 +++ 4 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 src/app/showcase/doc/tree/virtualscrolldoc.ts create mode 100644 src/app/showcase/doc/tree/virtualscrolllazydoc.ts diff --git a/src/app/showcase/doc/tree/treedoc.module.ts b/src/app/showcase/doc/tree/treedoc.module.ts index a8a851af322..afe234ab19e 100644 --- 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 new file mode 100644 index 00000000000..76f6b970e29 --- /dev/null +++ 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: ` + +

VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.

+ +
+ +
+ + ` +}) +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: ``, + + html: ` +
+ +
`, + + 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 new file mode 100644 index 00000000000..aaaf72e72b2 --- /dev/null +++ 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: ` + +

VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.

+ +
+ +
+ + ` +}) +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: ``, + + html: `
+ +
`, + + 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 index 72ed5d4c44e..30538daa466 100644 --- 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', From cd04621688fbb4d30e6cb553fc90a16922491fea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Mon, 26 Feb 2024 12:58:15 +0300 Subject: [PATCH 2/2] stackblitz update --- src/app/showcase/doc/tree/virtualscrolldoc.ts | 41 ++++++++++++++++--- .../showcase/doc/tree/virtualscrolllazydoc.ts | 41 ++++++++++++++++--- 2 files changed, 72 insertions(+), 10 deletions(-) diff --git a/src/app/showcase/doc/tree/virtualscrolldoc.ts b/src/app/showcase/doc/tree/virtualscrolldoc.ts index 76f6b970e29..3655c67a59a 100644 --- a/src/app/showcase/doc/tree/virtualscrolldoc.ts +++ b/src/app/showcase/doc/tree/virtualscrolldoc.ts @@ -46,14 +46,15 @@ export class VirtualScrollDoc implements OnInit { `, typescript: ` -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { NodeService } from '../../service/nodeservice'; @Component({ - selector: 'tree-template-demo', - templateUrl: './tree-template-demo.html' + selector: 'tree-virtual-scroll-demo', + templateUrl: './tree-virtual-scroll-demo.html' }) -export class TreeTemplateDemo implements OnInit { +export class TreeVirtualScrollDemo implements OnInit { loading: boolean = false; files!: TreeNode[]; @@ -75,6 +76,36 @@ export class TreeTemplateDemo implements OnInit { return duplicatedData; } -}` +}`, +service: ['NodeService'], + +data: ` +/* NodeService */ +{ +key: '0', +label: 'Documents', +data: 'Documents Folder', +icon: 'pi pi-fw pi-inbox', +children: [ +{ + key: '0-0', + label: 'Work', + data: 'Work Folder', + icon: 'pi pi-fw pi-cog', + children: [ + { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' }, + { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' } + ] +}, +{ + key: '0-1', + label: 'Home', + data: 'Home Folder', + icon: 'pi pi-fw pi-home', + children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }] +} +] +}, +...` }; } diff --git a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts index aaaf72e72b2..6fde95d7ca0 100644 --- a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts +++ b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts @@ -63,14 +63,15 @@ export class LazyVirtualScrollDoc implements OnInit { `, typescript: ` -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { NodeService } from '../../service/nodeservice'; @Component({ - selector: 'tree-template-demo', - templateUrl: './tree-template-demo.html' + selector: 'tree-virtual-scroll-lazy-demo', + templateUrl: './tree-virtual-scroll-lazy-demo.html' }) -export class TreeTemplateDemo implements OnInit { +export class TreeVirtualScrollLazyDemo implements OnInit { loading: boolean = false; files!: TreeNode[]; @@ -109,6 +110,36 @@ export class TreeTemplateDemo implements OnInit { }, 200); } } -}` +}`, + service: ['NodeService'], + + data: ` + /* NodeService */ +{ + key: '0', + label: 'Documents', + data: 'Documents Folder', + icon: 'pi pi-fw pi-inbox', + children: [ + { + key: '0-0', + label: 'Work', + data: 'Work Folder', + icon: 'pi pi-fw pi-cog', + children: [ + { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' }, + { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' } + ] + }, + { + key: '0-1', + label: 'Home', + data: 'Home Folder', + icon: 'pi pi-fw pi-home', + children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }] + } + ] +}, +...` }; }