Ids-tree NPM | npm.io

ids-tree

Install

npm install ids-tree

app.module.ts

import { IdsTreeModule } from 'ids-tree';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
   ..,
    IdsTreeModule
  ],
  providers: [],
  bootstrap: [...]
})

angular.json.html

{
  .....,
  assets:[
    ...,
    { "glob": "**/*", "input": "node_modules/ids-tree/assets", "output": "assets" }
  ]
}

Methods

addElement(path : string, entity: TreeEntity);

deleteElement(path: string, nameEntity: string);

sortAllByName(casesensivite?: boolean);

sortAllByNameAndType([{idType: "project", priority: 0}, {idType: "folder", priority: 1}, {idType: "agent", priority: 2}] (casesensivite?: boolean)); // Example

Example

component.html

    <ids-tree [tree]="tree" (callAction)="callActionTree($event)"  (selected)="selected($event)"></ids-tree>

component.ts

import { IdsTree } from 'ids-tree';

export class ExampleComponent {
public tree : IdsTree = {
    config: {
      defineEntity: [
        {
          id:"project",
          icon: "assets/folder.png"
        },
        {
          id:"folder",
          icon: "assets/folder.png"
        },
        {
          id:"agent",
          icon: "assets/user.png"
        },
        {
          id:"behaviour",
          icon: "assets/behaviour.png"
        }
      ],
      suggestion: [
        {id: "create_agent", icon: "assets/user.png", toolTip: "Create agent", idType: ["agent"]},
        {id: "create_behaviour", icon: "assets/behaviour.png", toolTip: "Create behaviour", idType: ["agent"]}
      ],
      contextMenu: [
        {
          items:[
                {id: "create_agent", icon: "assets/folder.png", label: "Create agent", idType: ["folder", "project","agent"]},
                {id: "create_pippo", icon: "assets/folder.png", label: "Create Pippo", idType: ["agent"]}
          ]
        },
        {
          label: "Eliminazione",
          items:[
                {id: "delete_pippo", icon: "assets/user.png", label: "Delete", idType: ["agent"]}
          ]
        }
      ]
    },
    tree : [
      {
        name: "Progetto 1",
        idType: "project",
        children:[
          {
            idType: "folder",
            name:"Cartella 1",
            children: [
              {
                idType: "agent",
                name:"Agente 1"
              },
              {
                idType: "folder",
                name:"Cartella 2",
                children: [
                  {
                    idType: "agent",
                    name:"Agente 2"
                  }
                ]
              },
            ]
          },
          {
            idType: "agent",
            name:"Agente 3"
          },
        ]
      },
      {
        name: "Progetto 2",
        idType: "project"
      }
    ]
  }
  
  public callActionTree(event: any){
    console.log(event);
  }

  public selected(event: any){
    console.log(event);
  }