Nightmare Prom Memories

    inteligent-schedular

    1.0.0 • Public • Published

    ngx-tree-dnd npm version npm downloads

    Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.

    Dependency Status Build status codecov Known Vulnerabilities License MIT

    Help the project and star it :3

    Installation

    New ngx-tree-dnd with draggable/sortable tree data, easy for use.

    To install library, run:

    $ npm install ngx-tree-dnd --save

    Import NgxTreeModule module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { NgxTreeDndModule } from 'ngx-tree-dnd'; // here
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        NgxTreeDndModule,   // add  NgxTreeDndModule to imports
        LibraryModule 
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    Once library is imported, you can use it`s components, directives and pipes in your Angular application:

    <h1>
      {{title}}
    </h1>
    <lib-ngx-tree-component [treeData]='youTree' [config]='config'></lib-ngx-tree-component>

    Styles

    You need to import default styles for tree ( you can change them by rewrite classes )

    "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico"
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "app",
          "styles": [
            "styles.css",
            "node_modules/ngx-tree-dnd/styles-tree-dnd.css" 
          ],
          "scripts": [],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],

    Demo

    Demo with editor:

    Run on stackblitz.com

    Demo application:

    Run on stackblitz.com

    NGX-TREE-DND DOCS

    With the development of the plug-in docs will be replenished. So do not forget update the packadge.

    1.Set the base tree

    Use [treeData] on ngx-tree-component BUT be careful!

    The interface accepts only the following structure:

     export interface TreeModel {
        name: string; // name of item
        id: number; // id of item
        options?: TreeItemOptions; // options of item
        childrens: TreeModel[]; // childrens list
    }
    export interface TreeItemOptions {
        // item options
        href?: string;
        hidden?: boolean;
        hideChildrens?: boolean;
        draggable?: boolean;
        position?: number;
        edit?: boolean;
        disabled?: boolean;
        // item buttons
        showDropChildZone?: boolean;
        showActionButtons?: boolean;
        showDeleteButton?: boolean;
        showExpandButton?: boolean;
    }

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' ></lib-ngx-tree-component>

    in you component file:

      youTree = [
        {
          name: 'first elem',
          id: 1234567890,
          childrens: [
            {
              name: 'first child elem',
              id: 0987654321,
              childrens: []
            }
          ]
        },
      ];

    2.Events

    You can trigger events by following code:

    ondragstart()

    Trigger start of dragging element

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (ondragstart)='onDragStart($event)'> </lib-ngx-tree-component>

    in you component file:

        onDragStart(event) {
        console.log(event);
      }

    ondragenter()

    Trigger if draggable element enter to drop zone.

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (ondragenter)='onDragEnter($event)'> </lib-ngx-tree-component>

    in you component file:

        onDragEnter(event) {
        console.log(event);
      }

    ondragleave()

    Trigger if draggable element enter to drop zone.

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (ondragleave)='onDragLeave($event)'> </lib-ngx-tree-component>

    in you component file:

        onDragLeave(event) {
        console.log(event);
      }

    ondragend()

    Trigger end of drag event

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> </lib-ngx-tree-component>

    in you component file:

        onDragEnd(event) {
        console.log(event);
      }

    onallowdrop()

    Trigger enter on drop zone

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onallowdrop)='onAllowDrop($event)'> </lib-ngx-tree-component>

    in you component file:

        onAllowDrop(event) {
        console.log(event);
      }

    ondrop()

    Trigger drop item action

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (ondrop)='onDrop($event)'> </lib-ngx-tree-component>

    in you component file:

        onDrop(event) {
        console.log(event);
      }

    onadditem()

    Trigger add new item action

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onadditem)='onAddItem($event)'> </lib-ngx-tree-component>

    in you component file:

        onAddItem(event) {
        console.log(event);
      }

    onStartRenameItem()

    Trigger start renaming item

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onStartRenameItem($event)'> </lib-ngx-tree-component>

    in you component file:

      onStartRenameItem(event) {
        console.log(event);
      }

    onFinishRenameItem()

    Trigger finish renaming item after validation

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onFinishRenameItem($event)'> </lib-ngx-tree-component>

    in you component file:

      onFinishRenameItem(event) {
        console.log(event);
      }

    onStartDeleteItem()

    Trigger start Deleting action item

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onStartDeleteItem)='onStartDelete($event)'> </lib-ngx-tree-component>

    in you component file:

      onStartDelete(event) {
        console.log(event);
      }

    onFinishDeleteItem()

    Trigger finish deleting action item

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onFinishDeleteItem)='onFinishDelete($event)'> </lib-ngx-tree-component>

    in you component file:

      onFinishDelete(event) {
        console.log(event);
      }

    onCancelDeleteItem()

    Trigger cancel deleting action item

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' (onCancelDeleteItem)='onCancelDelete($event)'> </lib-ngx-tree-component>

    in you component file:

      onCancelDelete(event) {
        console.log(event);
      }

    3. Config

    You can enable/disable and set some elements on tree by write simple config:

    example

    in you template file:

    <lib-ngx-tree-component [treeData]='youTree' [config]='config'> </lib-ngx-tree-component>

    in you component file:

        config =  {
          showActionButtons: true, // show/hide action buttons for all elements
          showAddButtons: true, // show/hide add button for all elements
          showRenameButtons: true, // show/hide rename buttons for all elements
          showDeleteButtons: true, // show/hide delete buttons for all elements
          showRootActionButtons: true, // shlow/hide root action bottons
          enableExpandButtons: true, // // show/hide expand buttons for all elements
          enableDragging: true, // enable/disable dragging
          rootTitle: 'Root', // Tree titile name
          validationText: 'Enter valid name', // form validation text 
          minCharacterLength: 1, // minimum valid chars
          setItemsAsLinks: false, // set tree as <a> link-items, use 'href' option for set link.
          setFontSize: 16, // font-size of items in tree.
          setIconSize: 14 // font-size of font-awesome icons inside buttons.
        }

    4. Items options

    You can change items options by set 'options' key on item object.

    example

    in you component file:

        youTree = [
          {
            name: 'google.com',
            id: 777,
            options: {
                // item options
                href: 'google.com', // item href for <a> , use if you set 'setItemsAsLinks: true' in config.
                hidden: 'false', // hide element without removing from data array.
                hideChildrens: false, // hide childrens of element.
                draggable: true, // allow block dragging single element if set 'enableDragging: true'
                position: 1,  // set position of item for sort tree.
                disabled: false, // disaled buttons and add opacity to element.
                // buttons
                showActionButtons: true, // show/hide  action buttons for element.
                showDeleteButton: true, // if 'false' element cannot be deleted.
                showExpandButton: true // show/hide expand buttons for element.
            }
            childrens: []
          }
        ];

    5. Styles

    You can rewrite all styles like you want. Here some for example:

      /* ===Tree items=== */
      .tree-child {
        /* change styles for child elements */
      }
      .tree-title {
        /* change styles for items title */
      }
      .tree-content {
        /* change styles for tree.childrens wrapper */
      }
      .tree-link {
        /* change styles for links if  config.setTreeItemAsLinks = true  */
      }
      /* ===Form=== */
      .input-rename {
        /* change styles for input name/rename  */
      }
      /* ===Buttons=== */
      .tree-btn {
        /*  used in all tree buttons  */
      }
      .add-btn {
          /*  styles for add button  */
      }
      .submit-btn {
          /*  styles for submit button  */
      }
      .edit-btn {
          /*  styles for edit button  */
      }
      .delete-btn {
          /*  styles for delete button  */
      }
      .show-btn {
          /*  styles for show expand button  */
      }
      .hide-btn {
          /*  styles for hide expand button  */
      }

    Special thanks to the people who help to improve and maintain this repository:

    njofce

    Thank you for use my plug-in! Subscribe for more plugins! :)

    Made with love by Zicrael(Yaroslav Kikot) ^^

    License

    MIT © Yaroslav Kikot

    Install

    npm i inteligent-schedular

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    59.9 kB

    Total Files

    23

    Last publish

    Collaborators

    • awaheed7