ui-essentials/projects/demo-ui-essentials/src/app/demos/tree-view-demo/tree-view-demo.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TreeViewComponent } from "../../../../../ui-essentials/src/public-api";
import { TreeNode } from '../../../../../../dist/ui-essentials/lib/components/data-display/tree-view/tree-view.component';

@Component({
  selector: 'ui-tree-view-demo',
  standalone: true,
  imports: [CommonModule, TreeViewComponent],
  template: `
    <div class="demo-container">
      <h2>Tree View Demo</h2>
      
      <!-- Size Variants -->
      <section class="demo-section">
        <h3>Sizes</h3>
        <div class="demo-row">
          @for (size of sizes; track size) {
            <div class="demo-column">
              <h4>{{ size | titlecase }} Size</h4>
              <ui-tree-view 
                [size]="size" 
                [nodes]="basicNodes"
                (nodeSelected)="handleNodeSelected($event)"
                (nodeToggled)="handleNodeToggled($event)">
              </ui-tree-view>
            </div>
          }
        </div>
      </section>
      
      <!-- Color Variants -->
      <section class="demo-section">
        <h3>Variants</h3>
        <div class="demo-row">
          @for (variant of variants; track variant) {
            <div class="demo-column">
              <h4>{{ variant | titlecase }} Variant</h4>
              <ui-tree-view 
                [variant]="variant" 
                [nodes]="basicNodes"
                (nodeSelected)="handleNodeSelected($event)"
                (nodeToggled)="handleNodeToggled($event)">
              </ui-tree-view>
            </div>
          }
        </div>
      </section>
      
      <!-- Features -->
      <section class="demo-section">
        <h3>Features</h3>
        <div class="demo-row">
          <!-- Multi-select -->
          <div class="demo-column">
            <h4>Multi-Select</h4>
            <ui-tree-view 
              [nodes]="featureNodes" 
              [multiSelect]="true"
              (nodeSelected)="handleNodeSelected($event)"
              (nodeToggled)="handleNodeToggled($event)">
            </ui-tree-view>
          </div>
          
          <!-- With Icons -->
          <div class="demo-column">
            <h4>With Icons</h4>
            <ui-tree-view 
              [nodes]="iconNodes" 
              [showIcons]="true"
              (nodeSelected)="handleNodeSelected($event)"
              (nodeToggled)="handleNodeToggled($event)">
            </ui-tree-view>
          </div>
        </div>
      </section>
      
      <!-- States -->
      <section class="demo-section">
        <h3>States</h3>
        <div class="demo-row">
          <!-- Loading -->
          <div class="demo-column">
            <h4>Loading</h4>
            <ui-tree-view [loading]="true"></ui-tree-view>
          </div>
          
          <!-- Empty -->
          <div class="demo-column">
            <h4>Empty</h4>
            <ui-tree-view 
              [nodes]="[]" 
              emptyMessage="No files found">
            </ui-tree-view>
          </div>
          
          <!-- Disabled Nodes -->
          <div class="demo-column">
            <h4>Disabled Nodes</h4>
            <ui-tree-view 
              [nodes]="disabledNodes"
              (nodeSelected)="handleNodeSelected($event)"
              (nodeToggled)="handleNodeToggled($event)">
            </ui-tree-view>
          </div>
        </div>
      </section>
      
      <!-- Interactive Controls -->
      <section class="demo-section">
        <h3>Interactive Controls</h3>
        <div class="demo-controls">
          <button class="demo-button" (click)="expandAll()">Expand All</button>
          <button class="demo-button" (click)="collapseAll()">Collapse All</button>
          <button class="demo-button" (click)="getSelected()">Get Selected</button>
          <button class="demo-button" (click)="clearSelection()">Clear Selection</button>
        </div>
        
        <ui-tree-view 
          #interactiveTree
          [nodes]="interactiveNodes" 
          [multiSelect]="true"
          (nodeSelected)="handleNodeSelected($event)"
          (nodeToggled)="handleNodeToggled($event)"
          (nodesChanged)="handleNodesChanged($event)">
        </ui-tree-view>
        
        @if (selectedInfo) {
          <div class="demo-info">
            <strong>Selected:</strong> {{ selectedInfo }}
          </div>
        }
        
        @if (lastAction) {
          <div class="demo-info">
            <strong>Last Action:</strong> {{ lastAction }}
          </div>
        }
      </section>
      
      <!-- File System Example -->
      <section class="demo-section">
        <h3>File System Example</h3>
        <ui-tree-view 
          [nodes]="fileSystemNodes" 
          [showIcons]="true"
          size="sm"
          emptyMessage="No files or folders"
          (nodeSelected)="handleFileSystemSelect($event)"
          (nodeToggled)="handleNodeToggled($event)">
        </ui-tree-view>
        
        @if (selectedFile) {
          <div class="demo-info">
            <strong>Selected File:</strong> {{ selectedFile }}
          </div>
        }
      </section>
    </div>
  `,
  styleUrl: './tree-view-demo.component.scss'
})
export class TreeViewDemoComponent {
  sizes = ['sm', 'md', 'lg'] as const;
  variants = ['primary', 'secondary'] as const;
  
  selectedInfo = '';
  lastAction = '';
  selectedFile = '';
  
  basicNodes: TreeNode[] = [
    {
      id: 'item1',
      label: 'Item 1',
      children: [
        { id: 'item1-1', label: 'Sub Item 1.1' },
        { id: 'item1-2', label: 'Sub Item 1.2' }
      ]
    },
    {
      id: 'item2',
      label: 'Item 2',
      children: [
        {
          id: 'item2-1',
          label: 'Sub Item 2.1',
          children: [
            { id: 'item2-1-1', label: 'Sub Sub Item 2.1.1' }
          ]
        }
      ]
    },
    { id: 'item3', label: 'Item 3' }
  ];
  
  featureNodes: TreeNode[] = [
    {
      id: 'feature1',
      label: 'Authentication',
      expanded: true,
      children: [
        { id: 'feature1-1', label: 'Login', selected: true },
        { id: 'feature1-2', label: 'Registration' },
        { id: 'feature1-3', label: 'Password Reset' }
      ]
    },
    {
      id: 'feature2',
      label: 'User Management',
      children: [
        { id: 'feature2-1', label: 'User Profile' },
        { id: 'feature2-2', label: 'User Settings', selected: true }
      ]
    }
  ];
  
  iconNodes: TreeNode[] = [
    {
      id: 'folder1',
      label: 'Documents',
      icon: '📁',
      expanded: true,
      children: [
        { id: 'file1', label: 'Report.pdf', icon: '📄' },
        { id: 'file2', label: 'Presentation.pptx', icon: '📊' }
      ]
    },
    {
      id: 'folder2',
      label: 'Images',
      icon: '📁',
      children: [
        { id: 'file3', label: 'Photo1.jpg', icon: '🖼️' },
        { id: 'file4', label: 'Logo.png', icon: '🖼️' }
      ]
    }
  ];
  
  disabledNodes: TreeNode[] = [
    {
      id: 'enabled1',
      label: 'Enabled Item',
      children: [
        { id: 'disabled1', label: 'Disabled Sub Item', disabled: true },
        { id: 'enabled2', label: 'Enabled Sub Item' }
      ]
    },
    { id: 'disabled2', label: 'Disabled Item', disabled: true }
  ];
  
  interactiveNodes: TreeNode[] = JSON.parse(JSON.stringify(this.basicNodes));
  
  fileSystemNodes: TreeNode[] = [
    {
      id: 'src',
      label: 'src',
      icon: '📁',
      expanded: true,
      children: [
        {
          id: 'components',
          label: 'components',
          icon: '📁',
          children: [
            { id: 'button.ts', label: 'button.component.ts', icon: '📄' },
            { id: 'input.ts', label: 'input.component.ts', icon: '📄' }
          ]
        },
        {
          id: 'services',
          label: 'services',
          icon: '📁',
          children: [
            { id: 'api.ts', label: 'api.service.ts', icon: '📄' },
            { id: 'auth.ts', label: 'auth.service.ts', icon: '📄' }
          ]
        },
        { id: 'main.ts', label: 'main.ts', icon: '📄' }
      ]
    },
    {
      id: 'assets',
      label: 'assets',
      icon: '📁',
      children: [
        { id: 'logo.png', label: 'logo.png', icon: '🖼️' },
        { id: 'styles.css', label: 'styles.css', icon: '📄' }
      ]
    },
    { id: 'package.json', label: 'package.json', icon: '📄' },
    { id: 'readme.md', label: 'README.md', icon: '📄' }
  ];
  
  handleNodeSelected(event: { node: TreeNode; selected: boolean }): void {
    this.lastAction = `${event.selected ? 'Selected' : 'Deselected'}: ${event.node.label}`;
    console.log('Node selected:', event);
  }
  
  handleNodeToggled(event: { node: TreeNode; expanded: boolean }): void {
    this.lastAction = `${event.expanded ? 'Expanded' : 'Collapsed'}: ${event.node.label}`;
    console.log('Node toggled:', event);
  }
  
  handleNodesChanged(nodes: TreeNode[]): void {
    this.interactiveNodes = nodes;
    const selected = this.getSelectedNodes(nodes);
    this.selectedInfo = selected.map(n => n.label).join(', ') || 'None';
  }
  
  handleFileSystemSelect(event: { node: TreeNode; selected: boolean }): void {
    this.selectedFile = event.selected ? event.node.label : '';
  }
  
  expandAll(): void {
    this.setAllExpanded(this.interactiveNodes, true);
    this.lastAction = 'Expanded all nodes';
  }
  
  collapseAll(): void {
    this.setAllExpanded(this.interactiveNodes, false);
    this.lastAction = 'Collapsed all nodes';
  }
  
  getSelected(): void {
    const selected = this.getSelectedNodes(this.interactiveNodes);
    this.selectedInfo = selected.map(n => n.label).join(', ') || 'None';
    this.lastAction = `Found ${selected.length} selected nodes`;
  }
  
  clearSelection(): void {
    this.clearAllSelections(this.interactiveNodes);
    this.selectedInfo = 'None';
    this.lastAction = 'Cleared all selections';
  }
  
  private setAllExpanded(nodes: TreeNode[], expanded: boolean): void {
    for (const node of nodes) {
      if (node.children && node.children.length > 0) {
        node.expanded = expanded;
        this.setAllExpanded(node.children, expanded);
      }
    }
  }
  
  private getSelectedNodes(nodes: TreeNode[]): TreeNode[] {
    const selected: TreeNode[] = [];
    for (const node of nodes) {
      if (node.selected) {
        selected.push(node);
      }
      if (node.children) {
        selected.push(...this.getSelectedNodes(node.children));
      }
    }
    return selected;
  }
  
  private clearAllSelections(nodes: TreeNode[]): void {
    for (const node of nodes) {
      node.selected = false;
      if (node.children) {
        this.clearAllSelections(node.children);
      }
    }
  }
}