sampleCode.txt

 
import {Component, Injectable} from '@angular/core';
import {SelectionModel} from '@angular/cdk/collections';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
import {of as ofObservable, Observable, BehaviorSubject} from 'rxjs';


/**
 * Node for to-do item
 */
export class TodoItemNode {
  children: TodoItemNode[]=[];
  item: string="";
}

/** Flat to-do item node with expandable and level information */
export class TodoItemFlatNode {
  item: string="";
  level: number=0;
  expandable: boolean=false;
}

/**
 * The Json object for to-do list data.
 */
const TREE_DATA = {
  'Reminders': [
    'Cook dinner',
    'Read the Material Design spec',
    'Upgrade Application to Angular'
  ],
  'Groceries': {
    'Organic eggs': null,
    'Protein Powder': null,
    'Almond Meal flour': null,
    'Fruits': {
      'Apple': null,
      'Orange': null,
      'Berries': ['Blueberry', 'Raspberry']
    }
  }
};


@Injectable()
export class ChecklistDatabase {
  dataChange: BehaviorSubject<TodoItemNode[]> = new BehaviorSubject<TodoItemNode[]>([]);

  get data(): TodoItemNode[] { return this.dataChange.value; }

  constructor() {
    this.initialize();
  }

  initialize() {
    // Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
    //     file node as children.
    const data = this.buildFileTree(TREE_DATA, 0);

    // Notify the change.
    this.dataChange.next(data);
  }

  /**
   * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
   * The return value is the list of `TodoItemNode`.
   */
  buildFileTree(value: any, level: number) {
    let data: any[] = [];
    for (let k in value) {
      let v = value[k];
      let node = new TodoItemNode();
      node.item = `${k}`;
      if (v === null || v === undefined) {
        // no action
      } else if (typeof v === 'object') {
        node.children = this.buildFileTree(v, level + 1);
      } else {
        node.item = v;
      }
      data.push(node);
    }
    return data;
  }

  /** Add an item to to-do list */
  insertItem(parent: TodoItemNode, name: string) {
    const child = <TodoItemNode>{item: name};
    if (parent.children) {
      parent.children.push(child);
      this.dataChange.next(this.data);
    }
  }

  updateItem(node: TodoItemNode, name: string) {
    node.item = name;
    this.dataChange.next(this.data);
  }
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ChecklistDatabase]
})
export class AppComponent {
  title = 'CodeSandbox';
  isLoading=false;
  selectedRow:any;

   districts = [
    { Id: 1, DistrictName: 'North District' },
    { Id: 2, DistrictName: 'South District' },
    { Id: 3, DistrictName: 'East District' },
    { Id: 4, DistrictName: 'West District' },
    { Id: 5, DistrictName: 'Central District' },
    { Id: 6, DistrictName: 'Northeast District' },
    { Id: 7, DistrictName: 'Southeast District' },
    { Id: 8, DistrictName: 'Northwest District' },
    { Id: 9, DistrictName: 'Southwest District' }
    ];


   displayedColumns: string[] = ['Id','AssetNumber'];
 
  
   dataSetSource = [
    {
      Id: 1,
      RoleId: 101,
      AssetNumber: 'A-001',
      AssetTypeName: 'Vehicle',
      AssetStatusName: 'Active',
    },
    {
      Id: 2,
      RoleId: 102,
      AssetNumber: 'A-002',
      AssetTypeName: 'Equipment',
      AssetStatusName: 'Maintenance',
    },
    {
      Id: 3,
      RoleId: 103,
      AssetNumber: 'A-003',
      AssetTypeName: 'Building',
      AssetStatusName: 'Inactive',
    },
    {
      Id: 4,
      RoleId: 104,
      AssetNumber: 'A-004',
      AssetTypeName: 'Vehicle',
      AssetStatusName: 'Active',
    },
    {
      Id: 5,
      RoleId: 105,
      AssetNumber: 'A-005',
      AssetTypeName: 'Equipment',
      AssetStatusName: 'Active',
    },
    {
      Id: 6,
      RoleId: 106,
      AssetNumber: 'A-006',
      AssetTypeName: 'Land',
      AssetStatusName: 'Under Review',
    },
    {
      Id: 7,
      RoleId: 107,
      AssetNumber: 'A-007',
      AssetTypeName: 'Building',
      AssetStatusName: 'Active',
    },
    {
      Id: 8,
      RoleId: 108,
      AssetNumber: 'A-008',
      AssetTypeName: 'Vehicle',
      AssetStatusName: 'Decommissioned',
    },
    // Add more entries as needed
  ];

  public applyFilterOnClick()
  {

  }

  public clearFilterOnClick()
  {

  }

  public importOnClick()
  {

  }

  public addOnClick()
  {

  }

  public selectRow(row:any)
  {

  }

  
 /** Map from flat node to nested node. This helps us finding the nested node to be modified */
 flatNodeMap: Map<TodoItemFlatNode, TodoItemNode> = new Map<TodoItemFlatNode, TodoItemNode>();

 /** Map from nested node to flattened node. This helps us to keep the same object for selection */
 nestedNodeMap: Map<TodoItemNode, TodoItemFlatNode> = new Map<TodoItemNode, TodoItemFlatNode>();

 /** A selected parent node to be inserted */
 selectedParent: TodoItemFlatNode | null = null;

 /** The new item's name */
 newItemName: string = '';

 treeControl: FlatTreeControl<TodoItemFlatNode>;

 treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;

 dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;

 /** The selection for checklist */
 checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);

 constructor(private database: ChecklistDatabase) {
   this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
     this.isExpandable, this.getChildren);
   this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
   this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

   database.dataChange.subscribe(data => {
     this.dataSource.data = data;
   });
 }

 getLevel = (node: TodoItemFlatNode) => { return node.level; };

 isExpandable = (node: TodoItemFlatNode) => { return node.expandable; };

 getChildren = (node: TodoItemNode): Observable<TodoItemNode[]> => {
   return ofObservable(node.children);
 }

 hasChild = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.expandable; };

 hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.item === ''; };

 /**
  * Transformer to convert nested node to flat node. Record the nodes in maps for later use.
  */
 transformer = (node: TodoItemNode, level: number) => {
   let flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item
     ? this.nestedNodeMap.get(node)!
     : new TodoItemFlatNode();
   flatNode.item = node.item;
   flatNode.level = level;
   flatNode.expandable = !!node.children;
   this.flatNodeMap.set(flatNode, node);
   this.nestedNodeMap.set(node, flatNode);
   return flatNode;
 }

 /** Whether all the descendants of the node are selected */
 descendantsAllSelected(node: TodoItemFlatNode): boolean {
   const descendants = this.treeControl.getDescendants(node);
   return descendants.every(child => this.checklistSelection.isSelected(child));
 }

 /** Whether part of the descendants are selected */
 descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
   const descendants = this.treeControl.getDescendants(node);
   const result = descendants.some(child => this.checklistSelection.isSelected(child));
   return result && !this.descendantsAllSelected(node);
 }

 /** Toggle the to-do item selection. Select/deselect all the descendants node */
 todoItemSelectionToggle(node: TodoItemFlatNode): void {
   this.checklistSelection.toggle(node);
   const descendants = this.treeControl.getDescendants(node);
   this.checklistSelection.isSelected(node)
     ? this.checklistSelection.select(...descendants)
     : this.checklistSelection.deselect(...descendants);
 }

 /** Select the category so we can insert the new item. */
 addNewItem(node: TodoItemFlatNode) {
   const parentNode = this.flatNodeMap.get(node);
   this.database.insertItem(parentNode!, '');
   this.treeControl.expand(node);
 }

 /** Save the node to database */
 saveNode(node: TodoItemFlatNode, itemValue: string) {
   const nestedNode = this.flatNodeMap.get(node);
   this.database.updateItem(nestedNode!, itemValue);
 }
}