app.component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { EmployeesService, type Employee } from './employees.service';
import { DxTreeListModule, type DxTreeListTypes } from 'devextreme-angular/ui/tree-list';
import { DxButtonModule } from 'devextreme-angular/ui/button';

@Component({
    selector: 'app-root',
    imports: [DxTreeListModule, DxButtonModule],
    templateUrl: './app.component.html',
    changeDetection: ChangeDetectionStrategy.Eager,
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  employees: Employee[] = [];

  selectedEmployee: Employee | null = null;

  expanded = true;

  expandedRowKeys: number[] = [];

  constructor(private readonly employeesService: EmployeesService) {
    this.employees = this.employeesService.getEmployees();
    this.selectEmployee = this.selectEmployee.bind(this);
    this.onReorder = this.onReorder.bind(this);
    this.onDragChange = this.onDragChange.bind(this);
  }

  selectEmployee(e: DxTreeListTypes.SelectionChangedEvent): void {
    e.component.byKey(e.currentSelectedRowKeys[0]).then((employee: Employee) => {
      if (employee) {
        this.selectedEmployee = employee;
      }
    }).catch(() => {
      // Handle error silently
    });
  }

  onDragChange(e: any): void {
    const visibleRows = e.component.getVisibleRows();
    const sourceNode = e.component.getNodeByKey(e.itemData.ID);
    let targetNode = visibleRows[e.toIndex].node;

    while (targetNode?.data) {
      if (targetNode.data.ID === sourceNode.data.ID) {
        e.cancel = true;
        break;
      }
      const parentNode = targetNode.parent;
      if (!parentNode) {
        break;
      }
      targetNode = parentNode;
    }
  }

  onReorder(e: any): void {
    const visibleRows = e.component.getVisibleRows();
    const sourceData = e.itemData;
    const targetData = visibleRows[e.toIndex].data;

    if (e.dropInsideItem) {
      e.itemData.HeadID = targetData.ID;
      e.component.refresh().catch(() => {
        // Handle error silently
      });
    } else {
      let targetIndex = this.employees.indexOf(targetData);

      if (sourceData.HeadID !== targetData.HeadID) {
        sourceData.HeadID = targetData.HeadID;
        if (e.toIndex > e.fromIndex) {
          targetIndex += 1;
        }
      }

      this.employeesService.reorderEmployees(sourceData, targetIndex);
      this.employees = this.employeesService.getEmployees();
    }
  }

  toggleExpansion(): void {
    this.expanded = !this.expanded;
    this.expandedRowKeys = [];
  }
}