Merge pull request #34 from Zicrael/dev-branch

init v2.5.0
Zicrael · Jan 15, 2019 · 6b372a8 · 6b372a8
2 parents 6d6a1ad + 6742c84
commit 6b372a8
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 21 deletions.
diff --git a/README.MD b/README.MD
@@ -317,24 +317,61 @@ in you component file:
   }
 ```
 
-### onremoveitem()
-Trigger removing action item
+### onStartDeleteItem()
+Trigger start Deleting action item
 
 #### example 
 
 in you template file:
 
 ```xml
-<lib-ngx-tree-component [treeData]='youTree' (onremoveitem)='onRemoveItem($event)'> </lib-ngx-tree-component>
+<lib-ngx-tree-component [treeData]='youTree' (onStartDeleteItem)='onStartDeleteItem($event)'> </lib-ngx-tree-component>
 ```
 in you component file:
 
 ```typescript
-    onRemoveItem(event) {
+    onStartDeleteItem(event) {
     console.log(event);
   }
 ```
 
+### onFinishDeleteItem()
+Trigger start Deleting action item
+
+#### example 
+
+in you template file:
+
+```xml
+<lib-ngx-tree-component [treeData]='youTree' (onFinishDeleteItem)='onFinishDeleteItem($event)'> </lib-ngx-tree-component>
+```
+in you component file:
+
+```typescript
+    onFinishDeleteItem(event) {
+    console.log(event);
+  }
+```
+
+### onCancelDeleteItem()
+Trigger start Deleting action item
+
+#### example 
+
+in you template file:
+
+```xml
+<lib-ngx-tree-component [treeData]='youTree' (onCancelDeleteItem)='onCancelDeleteItem($event)'> </lib-ngx-tree-component>
+```
+in you component file:
+
+```typescript
+    onCancelDeleteItem(event) {
+    console.log(event);
+  }
+```
+
+
 ### 3. Config
 
 You can enable/disable and set some elements on tree by write simple config: 
@@ -354,6 +391,7 @@ in you component file:
       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

diff --git a/projects/ngx-tree-dnd/README.md b/projects/ngx-tree-dnd/README.md
@@ -317,24 +317,61 @@ in you component file:
   }
 ```
 
-### onremoveitem()
-Trigger removing action item
+### onStartDeleteItem()
+Trigger start Deleting action item
 
 #### example 
 
 in you template file:
 
 ```xml
-<lib-ngx-tree-component [treeData]='youTree' (onremoveitem)='onRemoveItem($event)'> </lib-ngx-tree-component>
+<lib-ngx-tree-component [treeData]='youTree' (onStartDeleteItem)='onStartDelete($event)'> </lib-ngx-tree-component>
 ```
 in you component file:
 
 ```typescript
-    onRemoveItem(event) {
+    onStartDelete(event) {
     console.log(event);
   }
 ```
 
+### onFinishDeleteItem()
+Trigger finish deleting action item
+
+#### example 
+
+in you template file:
+
+```xml
+<lib-ngx-tree-component [treeData]='youTree' (onFinishDeleteItem)='onFinishDelete($event)'> </lib-ngx-tree-component>
+```
+in you component file:
+
+```typescript
+    onFinishDelete(event) {
+    console.log(event);
+  }
+```
+
+### onCancelDeleteItem()
+Trigger cancel deleting action item
+
+#### example 
+
+in you template file:
+
+```xml
+<lib-ngx-tree-component [treeData]='youTree' (onCancelDeleteItem)='onCancelDelete($event)'> </lib-ngx-tree-component>
+```
+in you component file:
+
+```typescript
+    onCancelDelete(event) {
+    console.log(event);
+  }
+```
+
+
 ### 3. Config
 
 You can enable/disable and set some elements on tree by write simple config: 
@@ -354,6 +391,7 @@ in you component file:
       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

diff --git a/projects/ngx-tree-dnd/package.json b/projects/ngx-tree-dnd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-tree-dnd",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Zicrael/ngx-tree-dnd"

diff --git a/projects/ngx-tree-dnd/src/lib/models/tree-view.model.ts b/projects/ngx-tree-dnd/src/lib/models/tree-view.model.ts
@@ -40,6 +40,7 @@ export interface TreeConfig {
     showRenameButtons?: boolean;
     showDeleteButtons?: boolean;
     enableExpandButtons?: boolean;
+    showRootActionButtons?: boolean;
     // actions
     enableDragging?: boolean;
     rootTitle?: string;

diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.ts
@@ -133,7 +133,10 @@ export class NgxTreeChildrenComponent implements AfterViewInit {
   }
 
   /*
-    Event: onremoveitem;
+    Events:
+    onStartDeleteItem,
+    onFinishDeleteItem,    
+    onCancelDeleteItem.
     Check is item edit, then if name empty delete item.
     Call deleteItem() from tree service.
   */

diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.html b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.html
@@ -4,7 +4,7 @@
         {{userConfig.rootTitle}}
       </div>
 
-      <div class='d-flex buttons-bar' *ngIf="userConfig.showActionButtons">
+      <div class='d-flex buttons-bar' *ngIf="userConfig.showActionButtons && userConfig.showRootActionButtons">
         <div class='d-flex'>
           <button class="tree-btn add-btn" *ngIf="userConfig.showAddButtons" (click)="submitAdd(null)">
             <fa-icon icon="plus" [style.font-size.px]='userConfig.setIconSize'></fa-icon>

diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component.ts
@@ -20,6 +20,7 @@ export class NgxTreeParentComponent implements AfterViewInit {
       showAddButtons: true,
       showRenameButtons: true,
       showDeleteButtons: true,
+      showRootActionButtons: true,
       enableExpandButtons: true,
       enableDragging: true,
       rootTitle: 'Root',
@@ -43,7 +44,9 @@ export class NgxTreeParentComponent implements AfterViewInit {
   @Output() onadditem: EventEmitter<any> = new EventEmitter();
   @Output() onStartRenameItem: EventEmitter<any> = new EventEmitter();
   @Output() onFinishRenameItem: EventEmitter<any> = new EventEmitter();
-  @Output() onremoveitem: EventEmitter<any> = new EventEmitter();
+  @Output() onStartDeleteItem: EventEmitter<any> = new EventEmitter();
+  @Output() onFinishDeleteItem: EventEmitter<any> = new EventEmitter();
+  @Output() onCancelDeleteItem: EventEmitter<any> = new EventEmitter();
 
   @Input()
   set config(config: TreeConfig) {
@@ -122,9 +125,19 @@ export class NgxTreeParentComponent implements AfterViewInit {
         this.onFinishRenameItem.emit(event);
       }
     );
-    this.treeService.onRemoveItem.subscribe(
+    this.treeService.onStartDeleteItem.subscribe(
       (event) => {
-        this.onremoveitem.emit(event);
+        this.onStartDeleteItem.emit(event);
+      }
+    );
+    this.treeService.onFinishDeleteItem.subscribe(
+      (event) => {
+        this.onFinishDeleteItem.emit(event);
+      }
+    );
+    this.treeService.onCancelDeleteItem.subscribe(
+      (event) => {
+        this.onCancelDeleteItem.emit(event);
       }
     );
     this.treeService.onDragEnter.subscribe(

diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd.service.ts
@@ -31,7 +31,9 @@ export class NgxTreeService {
   onRenameItem = new Subject<any>();
   onStartRenameItem = new Subject<any>();
   onFinishRenameItem = new Subject<any>();
-  onRemoveItem = new Subject<any>();
+  onStartDeleteItem = new Subject<any>();
+  onFinishDeleteItem = new Subject<any>();
+  onCancelDeleteItem = new Subject<any>();
   config = new BehaviorSubject<any>(null);
   defaulConfig: TreeConfig;
 
@@ -42,6 +44,7 @@ export class NgxTreeService {
       showAddButtons: true,
       showRenameButtons: true,
       showDeleteButtons: true,
+      showRootActionButtons: true,
       enableExpandButtons: true,
       enableDragging: true,
       rootTitle: 'Root',
@@ -155,17 +158,30 @@ export class NgxTreeService {
   /*
    Delete element.
    It`s accepts 'id' for find item on tree.
-   Emit onRemoveItem Subject.
+   Emit onStartDeleteItem Subject before delete.
+   Emit onFinishDeleteItem Subject after submit delete.
+   Emit onCancelDeleteItem Subject after on cancel delete.
   */
   public deleteItem(id) {
     this.elementFinder(this.treeStorage, id);
     const eventEmit = {
       element: this.findingResults.foundItem,
       parent: this.findingResults.parentItem || 'root'
     };
-    this.onRemoveItem.next(eventEmit);
-    const i = this.findingResults.itemsList.indexOf(this.findingResults.foundItem);
-    this.findingResults.itemsList.splice(i, 1);
+    this.onStartDeleteItem.next(eventEmit);
+    let text: string;
+    if( this.findingResults.foundItem.name ) {
+      text = `Do you really want to delete '${this.findingResults.foundItem.name}'?`;
+    } else {
+      text = `Cancel creating a new item?`;
+    }
+    if(confirm(text)) {
+      this.onFinishDeleteItem.next(eventEmit);
+      const i = this.findingResults.itemsList.indexOf(this.findingResults.foundItem);
+      this.findingResults.itemsList.splice(i, 1);
+    } else {
+      this.onCancelDeleteItem.next(eventEmit);
+    }
     this.clearAction();
     this.checkTreeLength();
   }

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,15 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div>
-  <lib-ngx-tree-component [treeData]='myTree' (ondrop)='onDrop($event)' (onStartRenameItem)="onStartRenameItem($event)"  (onFinishRenameItem)='onFinishRenameItem($event)' (onremoveitem)='onDelete($event)' (onadditem)='onadditem($event)' [config]='config'>
+  <lib-ngx-tree-component 
+  [treeData]='myTree'
+  (ondrop)='onDrop($event)' 
+  (onStartRenameItem)="onStartRenameItem($event)"
+  (onFinishRenameItem)='onFinishRenameItem($event)'
+  (onStartDeleteItem)='onStartDelete($event)'
+  (onFinishDeleteItem)='onFinishDelete($event)'
+  (onCancelDeleteItem)='onCancelDelete($event)'
+  (onadditem)='onadditem($event)'
+  [config]='config'>
   </lib-ngx-tree-component>
   <div id='eventInfo'></div>
 </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -12,6 +12,7 @@ export class AppComponent {
     showAddButtons: true,
     showRenameButtons: true,
     showDeleteButtons: true,
+    showRootActionButtons: true,
     enableExpandButtons: true,
     enableDragging: true,
     rootTitle: 'My Tree',
@@ -76,7 +77,18 @@ export class AppComponent {
     console.log(this.myTree);
     console.log(event);
   }
-  onDelete(event) {
+  onStartDelete(event) {
+    console.log('on start delete item');
+    console.log(this.myTree);
+    console.log(event);
+  }
+  onFinishDelete(event) {
+    console.log('on finish delete item');
+    console.log(this.myTree);
+    console.log(event);
+  }
+  onCancelDelete(event) {
+    console.log('on cancel delete item');
     console.log(this.myTree);
     console.log(event);
   }