From b12f4c21499ab41beeb4fc0d71c779301ae430e8 Mon Sep 17 00:00:00 2001 From: Yaroslav Date: Fri, 28 Dec 2018 13:34:48 +0200 Subject: [PATCH] add onStartRename item & onFinishRenameItem --- README.MD | 32 ++++++++++++++----- projects/ngx-tree-dnd/README.md | 32 ++++++++++++++----- projects/ngx-tree-dnd/package.json | 2 +- .../ngx-tree-dnd-children.component.html | 2 +- .../ngx-tree-dnd-children.component.ts | 16 ++++++++-- .../ngx-tree-dnd-parent.component.ts | 12 +++++-- .../src/lib/ngx-tree-dnd.service.ts | 21 ++++++++++-- src/app/app.component.html | 3 +- src/app/app.component.ts | 10 ++++++ 9 files changed, 103 insertions(+), 27 deletions(-) diff --git a/README.MD b/README.MD index a8aa2dc..8cd04fe 100644 --- 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 + +``` +in you component file: + +```typescript + onStartRenameItem(event) { + console.log(event); + } +``` + +### onFinishRenameItem() +Trigger finish renaming item after validation #### example in you template file: ```xml - + ``` 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 index a8aa2dc..8cd04fe 100644 --- 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 + +``` +in you component file: + +```typescript + onStartRenameItem(event) { + console.log(event); + } +``` + +### onFinishRenameItem() +Trigger finish renaming item after validation #### example in you template file: ```xml - + ``` 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 index 7932918..62eca54 100644 --- 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 index 007ba34..62ffc41 100644 --- 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 @@
-
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 index 1936e16..4525d71 100644 --- 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 index f8f4974..e374611 100644 --- 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 = new EventEmitter(); @Output() ondragend: EventEmitter = new EventEmitter(); @Output() onadditem: EventEmitter = new EventEmitter(); - @Output() onrenameitem: EventEmitter = new EventEmitter(); + @Output() onStartRenameItem: EventEmitter = new EventEmitter(); + @Output() onFinishRenameItem: EventEmitter = new EventEmitter(); @Output() onremoveitem: EventEmitter = 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 index dba619c..71e2868 100644 --- 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(); onAddItem = new Subject(); onRenameItem = new Subject(); + onStartRenameItem = new Subject(); + onFinishRenameItem = new Subject(); onRemoveItem = new Subject(); config = new BehaviorSubject(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 index 7a11e92..1435cd9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,7 @@
- + +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7a049f5..5d9184f 100644 --- 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); + } }