[ACA-972] Refactor code to use folder edit directive from ADF, once the PR (to add those to ADF) is merged (#39)

and some [ACA-966] changes to use correct service and event to reload

src/app/common/common.module.ts

@@ -24,7 +24,6 @@ import { AdfModule } from '../adf.module';
 import { MaterialModule } from './material.module';
 
 import { FolderDialogComponent } from './dialogs/folder-dialog.component';
-import { FolderEditDirective } from './directives/folder-edit.directive';
 import { NodeCopyDirective } from './directives/node-copy.directive';
 import { NodeDeleteDirective } from './directives/node-delete.directive';
 import { NodeMoveDirective } from './directives/node-move.directive';
@@ -50,7 +49,6 @@ export function modules() {
 export function declarations() {
     return [
         FolderDialogComponent,
-        FolderEditDirective,
         NodeCopyDirective,
         NodeDeleteDirective,
         NodeMoveDirective,

src/app/common/directives/folder-edit.directive.spec.ts

@@ -1,96 +0,0 @@
-/*!
- * @license
- * Copyright 2017 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { Component  } from '@angular/core';
-import { Observable } from 'rxjs/Rx';
-import { MatDialogModule, MatDialog } from '@angular/material';
-
-import { FolderEditDirective } from './folder-edit.directive';
-import { ContentManagementService } from '../services/content-management.service';
-
-@Component({
-    template: '<div [app-edit-folder]="folder"></div>'
-})
-class TestComponent {
-    folder = {};
-}
-
-describe('FolderEditDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
-    let element;
-    let node: any;
-    let dialog: MatDialog;
-    let contentService: ContentManagementService;
-    let dialogRefMock;
-
-    const event = {
-        type: 'click',
-        preventDefault: () => null
-    };
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            imports: [ MatDialogModule ],
-            declarations: [
-                TestComponent,
-                FolderEditDirective
-            ]
-            ,
-            providers: [
-                ContentManagementService
-            ]
-        });
-
-        fixture = TestBed.createComponent(TestComponent);
-        element = fixture.debugElement.query(By.directive(FolderEditDirective));
-        dialog = TestBed.get(MatDialog);
-        contentService = TestBed.get(ContentManagementService);
-    });
-
-    beforeEach(() => {
-        node = { entry: { id: 'folderId' } };
-
-        dialogRefMock = {
-            afterClosed: val =>  Observable.of(val)
-        };
-
-        spyOn(dialog, 'open').and.returnValue(dialogRefMock);
-    });
-
-    it('emits editFolder event when input value is not undefined', () => {
-        spyOn(dialogRefMock, 'afterClosed').and.returnValue(Observable.of(node));
-
-        contentService.createFolder.subscribe((val) => {
-            expect(val).toBe(node);
-        });
-
-        element.triggerEventHandler('click', event);
-        fixture.detectChanges();
-    });
-
-    it('does not emits FolderEditDirective event when input value is undefined', () => {
-        spyOn(dialogRefMock, 'afterClosed').and.returnValue(Observable.of(null));
-        spyOn(contentService.createFolder, 'next');
-
-        element.triggerEventHandler('click', event);
-        fixture.detectChanges();
-
-        expect(contentService.createFolder.next).not.toHaveBeenCalled();
-    });
-});

src/app/common/directives/folder-edit.directive.ts

@@ -1,67 +0,0 @@
-/*!
- * @license
- * Copyright 2017 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Directive, HostListener, ElementRef, Input } from '@angular/core';
-import { MatDialog, MatDialogConfig } from '@angular/material';
-
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-
-import { FolderDialogComponent } from '../dialogs/folder-dialog.component';
-import { ContentManagementService } from '../services/content-management.service';
-
-@Directive({
-    selector: '[app-edit-folder]'
-})
-export class FolderEditDirective {
-    static DIALOG_WIDTH = 400;
-
-    @Input('app-edit-folder')
-    folder: MinimalNodeEntryEntity;
-
-    @HostListener('click', [ '$event' ])
-    onClick(event) {
-        event.preventDefault();
-        this.openDialog();
-    }
-
-    constructor(
-        public dialogRef: MatDialog,
-        public elementRef: ElementRef,
-        public content: ContentManagementService
-    ) {}
-
-    private get dialogConfig(): MatDialogConfig {
-        const { DIALOG_WIDTH: width } = FolderEditDirective;
-        const { folder } = this;
-
-        return {
-            data: { folder },
-            width: `${width}px`
-        };
-    }
-
-    private openDialog(): void {
-        const { dialogRef, dialogConfig, content } = this;
-        const dialogInstance = dialogRef.open(FolderDialogComponent, dialogConfig);
-
-        dialogInstance.afterClosed().subscribe((node: MinimalNodeEntryEntity) => {
-            if (node) {
-                content.editFolder.next(node);
-            }
-        });
-    }
-}

src/app/common/services/content-management.service.ts

@@ -18,12 +18,8 @@
 import { Subject } from 'rxjs/Rx';
 import { Injectable } from '@angular/core';
 
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-
 @Injectable()
 export class ContentManagementService {
-    createFolder = new Subject<MinimalNodeEntryEntity>();
-    editFolder = new Subject<MinimalNodeEntryEntity>();
     deleteNode = new Subject<string>();
     moveNode = new Subject<string>();
     restoreNode = new Subject<string>();

src/app/components/favorites/favorites.component.html

@@ -25,7 +25,7 @@
                 mat-icon-button
                 *ngIf="canEditFolder(documentList.selection)"
                 title="{{ 'APP.ACTIONS.EDIT' | translate }}"
-                [app-edit-folder]="documentList.selection[0]?.entry">
+                [adf-edit-folder]="documentList.selection[0]?.entry">
                 <mat-icon>create</mat-icon>
             </button>
 

src/app/components/favorites/favorites.component.spec.ts

@@ -20,7 +20,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { TestBed, async } from '@angular/core/testing';
 import { Observable } from 'rxjs/Rx';
 
-import { CoreModule, NodesApiService, AlfrescoApiService } from 'ng2-alfresco-core';
+import { CoreModule, NodesApiService, AlfrescoApiService, AlfrescoContentService } from 'ng2-alfresco-core';
 import { CommonModule } from '../../common/common.module';
 
 import { ContentManagementService } from '../../common/services/content-management.service';
@@ -32,6 +32,7 @@ describe('Favorites Routed Component', () => {
     let component: FavoritesComponent;
     let nodesApi: NodesApiService;
     let alfrescoApi: AlfrescoApiService;
+    let alfrescoContentService: AlfrescoContentService;
     let contentService: ContentManagementService;
     let router: Router;
     let page;
@@ -80,6 +81,7 @@ describe('Favorites Routed Component', () => {
 
             nodesApi = TestBed.get(NodesApiService);
             alfrescoApi = TestBed.get(AlfrescoApiService);
+            alfrescoContentService = TestBed.get(AlfrescoContentService);
             contentService = TestBed.get(ContentManagementService);
             router = TestBed.get(Router);
         });
@@ -94,7 +96,7 @@ describe('Favorites Routed Component', () => {
             spyOn(component, 'refresh');
             fixture.detectChanges();
 
-            contentService.editFolder.next(null);
+            alfrescoContentService.folderEdit.next(null);
 
             expect(component.refresh).toHaveBeenCalled();
         });

src/app/components/favorites/favorites.component.ts

@@ -20,7 +20,7 @@ import { Router } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
 import { MinimalNodeEntryEntity, PathElementEntity, PathInfo } from 'alfresco-js-api';
-import { NodesApiService } from 'ng2-alfresco-core';
+import { AlfrescoContentService, NodesApiService } from 'ng2-alfresco-core';
 import { DocumentListComponent } from 'ng2-alfresco-documentlist';
 
 import { ContentManagementService } from '../../common/services/content-management.service';
@@ -41,12 +41,13 @@ export class FavoritesComponent extends PageComponent implements OnInit, OnDestr
     constructor(
         private router: Router,
         private nodesApi: NodesApiService,
+        private contentService: AlfrescoContentService,
         private content: ContentManagementService) {
         super();
     }
 
     ngOnInit() {
-        this.onEditFolder = this.content.editFolder.subscribe(() => this.refresh());
+        this.onEditFolder = this.contentService.folderEdit.subscribe(() => this.refresh());
         this.onMoveNode = this.content.moveNode.subscribe(() => this.refresh());
         this.onToggleFavorite = this.content.toggleFavorite
             .debounceTime(300).subscribe(() => this.refresh());

src/app/components/files/files.component.html

@@ -27,7 +27,7 @@
                 mat-icon-button
                 *ngIf="canEditFolder(documentList.selection)"
                 title="{{ 'APP.ACTIONS.EDIT' | translate }}"
-                [app-edit-folder]="documentList.selection[0]?.entry">
+                [adf-edit-folder]="documentList.selection[0]?.entry">
                 <mat-icon>create</mat-icon>
             </button>
 

src/app/components/files/files.component.spec.ts

@@ -170,13 +170,13 @@ describe('FilesComponent', () => {
         });
 
         it('calls refresh onCreateFolder event', () => {
-            contentManagementService.createFolder.next();
+            alfrescoContentService.folderCreate.next();
 
             expect(component.load).toHaveBeenCalled();
         });
 
         it('calls refresh editFolder event', () => {
-            contentManagementService.editFolder.next();
+            alfrescoContentService.folderEdit.next();
 
             expect(component.load).toHaveBeenCalled();
         });

src/app/components/files/files.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Observable, Subscription } from 'rxjs/Rx';
-import { Component, ViewChild, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElementEntity, NodePaging, PathElement } from 'alfresco-js-api';
 import { UploadService, FileUploadEvent, NodesApiService, AlfrescoContentService, AlfrescoApiService } from 'ng2-alfresco-core';
@@ -60,7 +60,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        const { route, contentManagementService, nodeActionsService, uploadService } = this;
+        const { route, contentManagementService, contentService, nodeActionsService, uploadService } = this;
         const { data } = route.snapshot;
 
         this.routeData = data;
@@ -87,8 +87,8 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
 
         this.onCopyNode = nodeActionsService.contentCopied
             .subscribe((nodes) => this.onContentCopied(nodes));
-        this.onCreateFolder = contentManagementService.createFolder.subscribe(() => this.load());
+        this.onCreateFolder = contentService.folderCreate.subscribe(() => this.load());
-        this.onEditFolder = contentManagementService.editFolder.subscribe(() => this.load());
+        this.onEditFolder = contentService.folderEdit.subscribe(() => this.load());
         this.onDeleteNode = contentManagementService.deleteNode.subscribe(() => this.load());
         this.onMoveNode = contentManagementService.moveNode.subscribe(() => this.load());
         this.onRestoreNode = contentManagementService.restoreNode.subscribe(() => this.load());