Merge pull request #17 from Zicrael/dev-branch

add onStartRename item & onFinishRenameItem
Zicrael · Dec 28, 2018 · afcbab4 · afcbab4
2 parents 4dae479 + b12f4c2
commit afcbab4
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 27 deletions.
diff --git a/README.MD b/README.MD
@@ -231,7 +231,7 @@ in you component file:
 ```
 
 ### onallowdrop()
-Trigger start of dragging element
+Trigger enter on drop zone
 
 #### example 
 
@@ -248,7 +248,7 @@ in you component file:
   }
 ```
 ### ondrop()
-Trigger start of dragging element
+Trigger drop item action
 
 #### example 
 
@@ -266,7 +266,7 @@ in you component file:
 ```
 
 ### onadditem()
-Trigger start of dragging element
+Trigger add new item action
 
 #### example 
 
@@ -283,26 +283,42 @@ in you component file:
   }
 ```
 
-### onrenameitem()
-Trigger start of dragging element
+### onStartRenameItem()
+Trigger start renaming item
+#### example 
 
+in you template file:
+
+```xml
+<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onStartRenameItem($event)'> </lib-ngx-tree-component>
+```
+in you component file:
+
+```typescript
+  onStartRenameItem(event) {
+    console.log(event);
+  }
+```
+
+### onFinishRenameItem()
+Trigger finish renaming item after validation
 #### example 
 
 in you template file:
 
 ```xml
-<lib-ngx-tree-component [treeData]='youTree' (onrenameitem)='onRenameItem($event)'> </lib-ngx-tree-component>
+<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onFinishRenameItem($event)'> </lib-ngx-tree-component>
 ```
 in you component file:
 
 ```typescript
-    onRenameItem(event) {
+  onFinishRenameItem(event) {
     console.log(event);
   }
 ```
 
 ### onremoveitem()
-Trigger start of dragging element
+Trigger removing action item
 
 #### example 
 

diff --git a/projects/ngx-tree-dnd/README.md b/projects/ngx-tree-dnd/README.md
@@ -231,7 +231,7 @@ in you component file:
 ```
 
 ### onallowdrop()
-Trigger start of dragging element
+Trigger enter on drop zone
 
 #### example 
 
@@ -248,7 +248,7 @@ in you component file:
   }
 ```
 ### ondrop()
-Trigger start of dragging element
+Trigger drop item action
 
 #### example 
 
@@ -266,7 +266,7 @@ in you component file:
 ```
 
 ### onadditem()
-Trigger start of dragging element
+Trigger add new item action
 
 #### example 
 
@@ -283,26 +283,42 @@ in you component file:
   }
 ```
 
-### onrenameitem()
-Trigger start of dragging element
+### onStartRenameItem()
+Trigger start renaming item
+#### example 
 
+in you template file:
+
+```xml
+<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onStartRenameItem($event)'> </lib-ngx-tree-component>
+```
+in you component file:
+
+```typescript
+  onStartRenameItem(event) {
+    console.log(event);
+  }
+```
+
+### onFinishRenameItem()
+Trigger finish renaming item after validation
 #### example 
 
 in you template file:
 
 ```xml
-<lib-ngx-tree-component [treeData]='youTree' (onrenameitem)='onRenameItem($event)'> </lib-ngx-tree-component>
+<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onFinishRenameItem($event)'> </lib-ngx-tree-component>
 ```
 in you component file:
 
 ```typescript
-    onRenameItem(event) {
+  onFinishRenameItem(event) {
     console.log(event);
   }
 ```
 
 ### onremoveitem()
-Trigger start of dragging element
+Trigger removing action item
 
 #### example 
 

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.3.2",
+  "version": "2.4.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Zicrael/ngx-tree-dnd"

diff --git a/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html b/projects/ngx-tree-dnd/src/lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component.html
@@ -19,7 +19,7 @@
             </button>
           </div>
           <div class='d-flex'>
-            <button class="tree-btn edit-btn" *ngIf="config.showRenameButtons" (click)="element.options.edit = true">
+            <button class="tree-btn edit-btn" *ngIf="config.showRenameButtons" (click)="enableRenameMode(element)">
               <fa-icon icon="edit" [style.font-size.px]='config.setIconSize'></fa-icon>
             </button>
           </div>

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
@@ -95,6 +95,16 @@ export class NgxTreeChildrenComponent implements AfterViewInit {
     });
   }
 
+  /*
+    Event: onStartRenameItem;
+    Enable rename mode in element
+    Call onStartRenameItem() from tree service.
+  */
+  enableRenameMode(element) {
+    element.options.edit = true;
+    this.treeService.startRenameItem(element);
+  }
+
   /*
     Event: onadditem;
     Generate id by new Date() by 'full year + day + time'.
@@ -108,14 +118,14 @@ export class NgxTreeChildrenComponent implements AfterViewInit {
   }
 
   /*
-    Event: onrenameitem;
+    Event: onFinishRenameItem;
     Check is form valid.
     Call addNewItem() from tree service.
   */
-  submitRename( item ) {
+  submitRename(item) {
     if (this.renameForm.valid) {
       this.showError = false;
-      this.treeService.renameItem(this.renameForm.value.name, item.id);
+      this.treeService.finishRenameItem(this.renameForm.value.name, item.id);
       this.element.options.edit = false;
     } else {
       this.showError = true;

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
@@ -35,7 +35,8 @@ export class NgxTreeParentComponent implements AfterViewInit {
   @Output() onallowdrop: EventEmitter<any> = new EventEmitter();
   @Output() ondragend: EventEmitter<any> = new EventEmitter();
   @Output() onadditem: EventEmitter<any> = new EventEmitter();
-  @Output() onrenameitem: EventEmitter<any> = new EventEmitter();
+  @Output() onStartRenameItem: EventEmitter<any> = new EventEmitter();
+  @Output() onFinishRenameItem: EventEmitter<any> = new EventEmitter();
   @Output() onremoveitem: EventEmitter<any> = new EventEmitter();
 
   @Input()
@@ -101,9 +102,14 @@ export class NgxTreeParentComponent implements AfterViewInit {
         this.onadditem.emit(event);
       }
     );
-    this.treeService.onRenameItem.subscribe(
+    this.treeService.onStartRenameItem.subscribe(
       (event) => {
-        this.onrenameitem.emit(event);
+        this.onStartRenameItem.emit(event);
+      }
+    );
+    this.treeService.onFinishRenameItem.subscribe(
+      (event) => {
+        this.onFinishRenameItem.emit(event);
       }
     );
     this.treeService.onRemoveItem.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
@@ -28,6 +28,8 @@ export class NgxTreeService {
   onDragEnd = new Subject<any>();
   onAddItem = new Subject<any>();
   onRenameItem = new Subject<any>();
+  onStartRenameItem = new Subject<any>();
+  onFinishRenameItem = new Subject<any>();
   onRemoveItem = new Subject<any>();
   config = new BehaviorSubject<any>(null);
   defaulConfig: TreeConfig;
@@ -140,19 +142,34 @@ export class NgxTreeService {
     this.checkTreeLength();
   }
 
+  /*
+   Trigger start rename element.
+   It`s accepts 'name' and 'id' for find item on tree and set the name.
+   Emit onRenameItem Subject.
+  */
+ public startRenameItem(element) {
+    this.elementFinder(this.treeStorage, element.id);
+    // event emit
+    const eventEmit = {
+      element: this.selectedElement,
+      parentList: this.listOfSelectedElement
+    };
+    this.onStartRenameItem.next(eventEmit);
+  }
+
   /*
    Rename element.
    It`s accepts 'name' and 'id' for find item on tree and set the name.
    Emit onRenameItem Subject.
   */
-  public renameItem(name, id) {
+  public finishRenameItem(name, id) {
     this.elementFinder(this.treeStorage, id);
     // event emit
     const eventEmit = {
       element: this.selectedElement,
       parentList: this.listOfSelectedElement
     };
-    this.onRenameItem.next(eventEmit);
+    this.onFinishRenameItem.next(eventEmit);
     // code
     this.selectedElement.name = name;
     this.selectedElement.options.edit = false;

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,7 @@
 <!--The content below is only a placeholder and can be replaced.-->
 <div>
-  <lib-ngx-tree-component [treeData]='myTree' (ondrop)='onDrop($event)' (onremoveitem)='onDelete($event)' (onadditem)='onadditem($event)' [config]='config'>
+  <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>
+  <div id='eventInfo'></div>
 </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -84,4 +84,14 @@ export class AppComponent {
     console.log(this.myTree);
     console.log(event);
   }
+  onStartRenameItem(event) {
+    console.log('start rename');
+    console.log(this.myTree);
+    console.log(event);
+  }
+  onFinishRenameItem(event) {
+    console.log('finish rename');
+    console.log(this.myTree);
+    console.log(event);
+  }
 }