[APM-7] Feature enhancement for the create and edit folder directive (#3179)

* Add observable menu open state to the sidenav-layout component

* add documentation, fix inversed value

* Add success events to folder create/edit directives

* Overridable dialog titles for the directives

* Update the documentation

lib/content-services/folder-directive/folder-create.directive.spec.ts

@@ -17,7 +17,7 @@
 
 import { HttpClientModule } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDialog, MatDialogModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@@ -27,12 +27,19 @@ import { FolderDialogComponent } from '../dialogs/folder.dialog';
 
 import { DirectiveModule, ContentService, TranslateLoaderService } from '@alfresco/adf-core';
 import { FolderCreateDirective } from './folder-create.directive';
+import { Subject } from 'rxjs/Subject';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 
 @Component({
-    template: '<div [adf-create-folder]="parentNode"></div>'
+    template: '<div [adf-create-folder]="parentNode" (success)="success($event)" title="create-title"></div>'
 })
 class TestComponent {
     parentNode = '';
+    public successParameter: MinimalNodeEntryEntity = null;
+
+    success(node: MinimalNodeEntryEntity) {
+        this.successParameter = node;
+    }
 }
 
 describe('FolderCreateDirective', () => {
@@ -43,6 +50,11 @@ describe('FolderCreateDirective', () => {
     let contentService: ContentService;
     let dialogRefMock;
 
+    const event = {
+        type: 'click',
+        preventDefault: () => null
+    };
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
@@ -80,7 +92,11 @@ describe('FolderCreateDirective', () => {
         node = { entry: { id: 'nodeId' } };
 
         dialogRefMock = {
-            afterClosed: val =>  Observable.of(val)
+            afterClosed: val =>  Observable.of(val),
+            componentInstance: {
+                error: new Subject<any>(),
+                success: new Subject<MinimalNodeEntryEntity>()
+            }
         };
 
         spyOn(dialog, 'open').and.returnValue(dialogRefMock);
@@ -113,4 +129,29 @@ describe('FolderCreateDirective', () => {
             expect(contentService.folderCreate.next).not.toHaveBeenCalled();
         });
     });
+
+    it('should emit success event with node if the folder creation was successful', async(() => {
+        const testNode = <MinimalNodeEntryEntity> {};
+        fixture.detectChanges();
+
+        element.triggerEventHandler('click', event);
+        dialogRefMock.componentInstance.success.next(testNode);
+
+        fixture.whenStable().then(() => {
+            expect(fixture.componentInstance.successParameter).toBe(testNode);
+        });
+    }));
+
+    it('should open the dialog with the proper title', async(() => {
+        fixture.detectChanges();
+        element.triggerEventHandler('click', event);
+
+        expect(dialog.open).toHaveBeenCalledWith(jasmine.any(Function), {
+            data: {
+                parentNodeId: jasmine.any(String),
+                createTitle: 'create-title'
+            },
+            width: jasmine.any(String)
+        });
+    }));
 });

lib/content-services/folder-directive/folder-create.directive.ts

@@ -35,10 +35,16 @@ export class FolderCreateDirective {
     @Input('adf-create-folder')
     parentNodeId: string = DEFAULT_FOLDER_PARENT_ID;
 
+    @Input()
+    title: string = null;
+
     /** Emitted when the create folder give error for example a folder with same name already exist */
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    @Output()
+    success: EventEmitter<MinimalNodeEntryEntity> = new EventEmitter<MinimalNodeEntryEntity>();
+
     @HostListener('click', [ '$event' ])
     onClick(event) {
         event.preventDefault();
@@ -55,7 +61,10 @@ export class FolderCreateDirective {
         const { parentNodeId } = this;
 
         return {
-            data: { parentNodeId },
+            data: {
+                parentNodeId,
+                createTitle: this.title
+            },
             width: `${width}px`
         };
     }
@@ -68,6 +77,10 @@ export class FolderCreateDirective {
             this.error.emit(error);
         });
 
+        dialogInstance.componentInstance.success.subscribe((node: MinimalNodeEntryEntity) => {
+            this.success.emit(node);
+        });
+
         dialogInstance.afterClosed().subscribe((node: MinimalNodeEntryEntity) => {
             if (node) {
                 content.folderCreate.next(node);

lib/content-services/folder-directive/folder-edit.directive.spec.ts

@@ -17,7 +17,7 @@
 
 import { HttpClientModule } from '@angular/common/http';
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { MatDialog, MatDialogModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
@@ -27,12 +27,19 @@ import { Observable } from 'rxjs/Observable';
 
 import { ContentService, TranslateLoaderService, DirectiveModule } from '@alfresco/adf-core';
 import { FolderEditDirective } from './folder-edit.directive';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { Subject } from 'rxjs/Subject';
 
 @Component({
-    template: '<div [adf-edit-folder]="folder"></div>'
+    template: '<div [adf-edit-folder]="folder" (success)="success($event)" title="edit-title"></div>'
 })
 class TestComponent {
     folder = {};
+    public successParameter: MinimalNodeEntryEntity = null;
+
+    success(node: MinimalNodeEntryEntity) {
+        this.successParameter = node;
+    }
 }
 
 describe('FolderEditDirective', () => {
@@ -85,7 +92,11 @@ describe('FolderEditDirective', () => {
         node = { entry: { id: 'folderId' } };
 
         dialogRefMock = {
-            afterClosed: val =>  Observable.of(val)
+            afterClosed: val =>  Observable.of(val),
+            componentInstance: {
+                error: new Subject<any>(),
+                success: new Subject<MinimalNodeEntryEntity>()
+            }
         };
 
         spyOn(dialog, 'open').and.returnValue(dialogRefMock);
@@ -114,4 +125,29 @@ describe('FolderEditDirective', () => {
             expect(contentService.folderEdit.next).not.toHaveBeenCalled();
         });
     });
+
+    it('should emit success event with node if the folder creation was successful', async(() => {
+        const testNode = <MinimalNodeEntryEntity> {};
+        fixture.detectChanges();
+
+        element.triggerEventHandler('click', event);
+        dialogRefMock.componentInstance.success.next(testNode);
+
+        fixture.whenStable().then(() => {
+            expect(fixture.componentInstance.successParameter).toBe(testNode);
+        });
+    }));
+
+    it('should open the dialog with the proper title', async(() => {
+        fixture.detectChanges();
+        element.triggerEventHandler('click', event);
+
+        expect(dialog.open).toHaveBeenCalledWith(jasmine.any(Function), {
+            data: {
+                folder: jasmine.any(Object),
+                editTitle: 'edit-title'
+            },
+            width: jasmine.any(String)
+        });
+    }));
 });

lib/content-services/folder-directive/folder-edit.directive.ts

@@ -39,6 +39,12 @@ export class FolderEditDirective {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
+    @Input()
+    title: string = null;
+
+    @Output()
+    success: EventEmitter<MinimalNodeEntryEntity> = new EventEmitter<MinimalNodeEntryEntity>();
+
     @HostListener('click', [ '$event' ])
     onClick(event) {
         event.preventDefault();
@@ -58,7 +64,10 @@ export class FolderEditDirective {
         const { folder } = this;
 
         return {
-            data: { folder },
+            data: {
+                folder,
+                editTitle: this.title
+            },
             width: `${width}px`
         };
     }
@@ -71,6 +80,10 @@ export class FolderEditDirective {
             this.error.emit(error);
         });
 
+        dialogInstance.componentInstance.success.subscribe((node: MinimalNodeEntryEntity) => {
+            this.success.emit(node);
+        });
+
         dialogInstance.afterClosed().subscribe((node: MinimalNodeEntryEntity) => {
             if (node) {
                 content.folderEdit.next(node);