[ADF-1786] fix delete and permission on the same button case (#2565)

* fix delete and permission on the same button case

* ripristinate space
This commit is contained in:
Eugenio Romano 2017-10-30 12:47:03 +00:00 committed by Denys Vuika
parent 8ad9017c1a
commit 7fa592ebe7
7 changed files with 194 additions and 217 deletions

View File

@ -18,8 +18,6 @@
import { Component, DebugElement } from '@angular/core';
import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Observable } from 'rxjs/Rx';
import { AlfrescoTranslationService } from '../../index';
import { CoreModule } from '../../index';
import { AlfrescoApiService } from '../services/alfresco-api.service';
import { NotificationService } from '../services/notification.service';
@ -37,12 +35,26 @@ class TestComponent {
done = jasmine.createSpy('done');
}
@Component({
template: `
<div [adf-node-permission]="selection" [adf-delete]="selection"
(delete)="done()">
</div>`
})
class TestWithPermissionsComponent {
selection = [];
done = jasmine.createSpy('done');
}
describe('NodeDeleteDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let fixtureWithPermissions: ComponentFixture<TestWithPermissionsComponent>;
let element: DebugElement;
let elementWithPermissions: DebugElement;
let component: TestComponent;
let componentWithPermissions: TestWithPermissionsComponent;
let alfrescoApi: AlfrescoApiService;
let translation: AlfrescoTranslationService;
let notification: NotificationService;
let nodeApi;
@ -52,28 +64,25 @@ describe('NodeDeleteDirective', () => {
CoreModule
],
declarations: [
TestComponent
TestComponent,
TestWithPermissionsComponent
]
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
element = fixture.debugElement.query(By.directive(NodeDeleteDirective));
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(TestComponent);
fixtureWithPermissions = TestBed.createComponent(TestWithPermissionsComponent);
component = fixture.componentInstance;
componentWithPermissions = fixtureWithPermissions.componentInstance;
element = fixture.debugElement.query(By.directive(NodeDeleteDirective));
elementWithPermissions = fixtureWithPermissions.debugElement.query(By.directive(NodeDeleteDirective));
alfrescoApi = TestBed.get(AlfrescoApiService);
nodeApi = alfrescoApi.getInstance().nodes;
translation = TestBed.get(AlfrescoTranslationService);
notification = TestBed.get(NotificationService);
});
alfrescoApi = TestBed.get(AlfrescoApiService);
nodeApi = alfrescoApi.getInstance().nodes;
notification = TestBed.get(NotificationService);
});
}));
beforeEach(() => {
spyOn(translation, 'get').and.callFake((key) => {
return Observable.of(key);
});
});
describe('Delete', () => {
beforeEach(() => {
spyOn(notification, 'openSnackMessage');
@ -216,5 +225,51 @@ describe('NodeDeleteDirective', () => {
expect(component.done).toHaveBeenCalled();
}));
it('should disable the button if no node are selected', fakeAsync(() => {
component.selection = [];
fixture.detectChanges();
expect(element.nativeElement.disabled).toEqual(true);
}));
it('should disable the button if selected node is null', fakeAsync(() => {
component.selection = null;
fixture.detectChanges();
expect(element.nativeElement.disabled).toEqual(true);
}));
it('should enable the button if nodes are selected', fakeAsync(() => {
component.selection = [
{ entry: { id: '1', name: 'name1' } },
{ entry: { id: '2', name: 'name2' } },
{ entry: { id: '3', name: 'name3' } }
];
fixture.detectChanges();
expect(element.nativeElement.disabled).toEqual(false);
}));
it('should not enable the button if adf-node-permission is present', fakeAsync(() => {
elementWithPermissions.nativeElement.disabled = false;
componentWithPermissions.selection = [];
fixtureWithPermissions.detectChanges();
componentWithPermissions.selection = [
{ entry: { id: '1', name: 'name1' } },
{ entry: { id: '2', name: 'name2' } },
{ entry: { id: '3', name: 'name3' } }
];
fixtureWithPermissions.detectChanges();
expect(elementWithPermissions.nativeElement.disabled).toEqual(false);
}));
});
});

View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output } from '@angular/core';
import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
import { Observable } from 'rxjs/Rx';
import { AlfrescoApiService } from '../services/alfresco-api.service';
@ -30,38 +30,56 @@ interface ProcessedNodeData {
interface ProcessStatus {
success: ProcessedNodeData[];
failed: ProcessedNodeData[];
someFailed();
someSucceeded();
oneFailed();
oneSucceeded();
allSucceeded();
allFailed();
}
@Directive({
selector: '[adf-delete]'
})
export class NodeDeleteDirective {
private nodesApi;
export class NodeDeleteDirective implements OnChanges {
@Input('adf-delete')
selection: MinimalNodeEntity[];
@Input() permanent: boolean = false;
@Input()
permanent: boolean = false;
@Output() delete: EventEmitter<any> = new EventEmitter();
@Output()
delete: EventEmitter<any> = new EventEmitter();
@HostListener('click')
onClick() {
this.process(this.selection);
}
constructor(
private notification: NotificationService,
private alfrescoApiService: AlfrescoApiService,
private translation: TranslationService
) {
this.nodesApi = this.alfrescoApiService.getInstance().nodes;
constructor(private notification: NotificationService,
private alfrescoApiService: AlfrescoApiService,
private translation: TranslationService,
private elementRef: ElementRef) {
}
ngOnChanges() {
if (!this.selection || (this.selection && this.selection.length === 0)) {
this.setDisableAttribute(true);
} else {
if (!this.elementRef.nativeElement.hasAttribute('adf-node-permission')) {
this.setDisableAttribute(false);
}
}
}
private setDisableAttribute(disable: boolean) {
this.elementRef.nativeElement.disabled = disable;
}
private process(selection: MinimalNodeEntity[]) {
@ -88,10 +106,9 @@ export class NodeDeleteDirective {
}
private deleteNode(node: MinimalNodeEntity): Observable<ProcessedNodeData> {
// shared nodes support
const id = (<any> node.entry).nodeId || node.entry.id;
const promise = this.nodesApi.deleteNode(id, { permanent: this.permanent });
const promise = this.alfrescoApiService.getInstance().nodes.deleteNode(id, {permanent: this.permanent});
return Observable.fromPromise(promise)
.map(() => ({
@ -152,14 +169,14 @@ export class NodeDeleteDirective {
if (status.allFailed && !status.oneFailed) {
return this.translation.get(
'CORE.DELETE_NODE.ERROR_PLURAL',
{ number: status.failed.length }
{number: status.failed.length}
);
}
if (status.allSucceeded && !status.oneSucceeded) {
return this.translation.get(
'CORE.DELETE_NODE.PLURAL',
{ number: status.success.length }
{number: status.success.length}
);
}
@ -186,14 +203,14 @@ export class NodeDeleteDirective {
if (status.oneFailed && !status.someSucceeded) {
return this.translation.get(
'CORE.DELETE_NODE.ERROR_SINGULAR',
{ name: status.failed[0].entry.name }
{name: status.failed[0].entry.name}
);
}
if (status.oneSucceeded && !status.someFailed) {
return this.translation.get(
'CORE.DELETE_NODE.SINGULAR',
{ name: status.success[0].entry.name }
{name: status.success[0].entry.name}
);
}
}

View File

@ -15,150 +15,99 @@
* limitations under the License.
*/
import { ChangeDetectorRef, Component, ElementRef, SimpleChange } from '@angular/core';
import { Component, DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CoreModule } from '../../index';
import { AlfrescoContentService } from './../services/alfresco-content.service';
import { NodePermissionDirective, NodePermissionSubject } from './node-permission.directive';
import { NodePermissionDirective } from './node-permission.directive';
@Component({
selector: 'adf-text-subject'
template: `
<div [adf-node-permission]="'delete'" [adf-nodes]="selection">
</div>`
})
class TestComponent implements NodePermissionSubject {
disabled: boolean = false;
class TestComponent {
selection = [];
disabled = false;
done = jasmine.createSpy('done');
}
describe('NodePermissionDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let element: DebugElement;
let component: TestComponent;
let alfrescoContentService: AlfrescoContentService;
let changeDetectorMock: ChangeDetectorRef;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CoreModule
],
declarations: [
TestComponent
]
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(TestComponent);
alfrescoContentService = TestBed.get(AlfrescoContentService);
component = fixture.componentInstance;
element = fixture.debugElement.query(By.directive(NodePermissionDirective));
});
}));
beforeEach(() => {
changeDetectorMock = <ChangeDetectorRef> { detectChanges: () => {} };
it('Should be disabled if no nodes are passed', () => {
component.selection = undefined;
fixture.detectChanges();
component.selection = null;
fixture.detectChanges();
expect(element.nativeElement.disabled).toEqual(true);
});
describe('HTML nativeElement as subject', () => {
it('Should be disabled if nodes is an empty array', () => {
component.selection = null;
it('updates element once it is loaded', () => {
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'updateElement').and.stub();
fixture.detectChanges();
const nodes = [{}, {}];
const change = new SimpleChange([], nodes, false);
directive.ngOnChanges({ nodes: change });
component.selection = [];
expect(directive.updateElement).toHaveBeenCalled();
});
fixture.detectChanges();
it('updates element on nodes change', () => {
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'updateElement').and.stub();
const nodes = [{}, {}];
const change = new SimpleChange([], nodes, false);
directive.ngOnChanges({ nodes: change });
expect(directive.updateElement).toHaveBeenCalled();
});
it('updates element only on subsequent change', () => {
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'updateElement').and.stub();
const nodes = [{}, {}];
const change = new SimpleChange([], nodes, true);
directive.ngOnChanges({ nodes: change });
expect(directive.updateElement).not.toHaveBeenCalled();
});
it('enables decorated element', () => {
const renderer = jasmine.createSpyObj('renderer', ['removeAttribute']);
const elementRef = new ElementRef({});
const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
directive.enableElement();
expect(renderer.removeAttribute).toHaveBeenCalledWith(elementRef.nativeElement, 'disabled');
});
it('disables decorated element', () => {
const renderer = jasmine.createSpyObj('renderer', ['setAttribute']);
const elementRef = new ElementRef({});
const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
directive.disableElement();
expect(renderer.setAttribute).toHaveBeenCalledWith(elementRef.nativeElement, 'disabled', 'true');
});
it('disables element when nodes not available', () => {
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'disableElement').and.stub();
directive.nodes = null;
expect(directive.updateElement()).toBeFalsy();
directive.nodes = [];
expect(directive.updateElement()).toBeFalsy();
});
it('enables element when all nodes have expected permission', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(true);
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
spyOn(directive, 'enableElement').and.stub();
directive.nodes = <any> [{}, {}];
expect(directive.updateElement()).toBeTruthy();
expect(directive.enableElement).toHaveBeenCalled();
});
it('disables element when one of the nodes have no permission', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(false);
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
spyOn(directive, 'disableElement').and.stub();
directive.nodes = <any> [{}, {}];
expect(directive.updateElement()).toBeFalsy();
expect(directive.disableElement).toHaveBeenCalled();
});
expect(element.nativeElement.disabled).toEqual(true);
});
describe('Angular component as subject', () => {
it('enables element when all nodes have expected permission', () => {
spyOn(alfrescoContentService, 'hasPermission').and.returnValue(true);
it('disables decorated component', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(false);
spyOn(changeDetectorMock, 'detectChanges');
component.selection = null;
let testComponent = new TestComponent();
testComponent.disabled = false;
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
directive.nodes = <any> [{}, {}];
fixture.detectChanges();
directive.updateElement();
component.selection = <any> [{entry: {id: '1', name: 'name1'}}];
expect(testComponent.disabled).toBeTruthy();
expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
});
fixture.detectChanges();
it('enables decorated component', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(true);
spyOn(changeDetectorMock, 'detectChanges');
expect(element.nativeElement.disabled).toEqual(false);
});
let testComponent = new TestComponent();
testComponent.disabled = true;
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
directive.nodes = <any> [{}, {}];
it('disables element when one of the nodes have no permission', () => {
spyOn(alfrescoContentService, 'hasPermission').and.returnValue(false);
directive.updateElement();
component.selection = null;
expect(testComponent.disabled).toBeFalsy();
expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
});
fixture.detectChanges();
component.selection = <any> [{entry: {id: '1', name: 'name1'}}];
fixture.detectChanges();
expect(element.nativeElement.disabled).toEqual(true);
});
});
})

View File

@ -15,9 +15,8 @@
* limitations under the License.
*/
import { ChangeDetectorRef, Directive, ElementRef, Host, Inject, Input, OnChanges, Optional, Renderer2, SimpleChanges } from '@angular/core';
import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { EXTENDIBLE_COMPONENT } from './../interface/injection.tokens';
import { AlfrescoContentService } from './../services/alfresco-content.service';
export interface NodePermissionSubject {
@ -30,19 +29,13 @@ export interface NodePermissionSubject {
export class NodePermissionDirective implements OnChanges {
@Input('adf-node-permission')
permission: string = null;
permission: string = null;
@Input('adf-nodes')
nodes: MinimalNodeEntity[] = [];
constructor(private elementRef: ElementRef,
private renderer: Renderer2,
private contentService: AlfrescoContentService,
private changeDetector: ChangeDetectorRef,
@Host()
@Optional()
@Inject(EXTENDIBLE_COMPONENT) private parentComponent?: NodePermissionSubject) {
private contentService: AlfrescoContentService) {
}
ngOnChanges(changes: SimpleChanges) {
@ -52,57 +45,17 @@ export class NodePermissionDirective implements OnChanges {
}
/**
* Updates disabled state for the decorated elememtn
*
* @returns {boolean} True if decorated element got disabled, otherwise False
* @memberof NodePermissionDirective
*/
updateElement(): boolean {
let enable = this.hasPermission(this.nodes, this.permission);
if (enable) {
this.enable();
} else {
this.disable();
}
return enable;
}
private enable(): void {
if (this.parentComponent) {
this.parentComponent.disabled = false;
this.changeDetector.detectChanges();
} else {
this.enableElement();
}
}
private disable(): void {
if (this.parentComponent) {
this.parentComponent.disabled = true;
this.changeDetector.detectChanges();
} else {
this.disableElement();
}
}
/**
* Enables decorated element
* Updates disabled state for the decorated element
*
* @memberof NodePermissionDirective
*/
enableElement(): void {
this.renderer.removeAttribute(this.elementRef.nativeElement, 'disabled');
updateElement(): void {
let hasPermission = this.hasPermission(this.nodes, this.permission);
this.setDisableAttribute(!hasPermission);
}
/**
* Disables decorated element
*
* @memberof NodePermissionDirective
*/
disableElement(): void {
this.renderer.setAttribute(this.elementRef.nativeElement, 'disabled', 'true');
private setDisableAttribute(disable: boolean) {
this.elementRef.nativeElement.disabled = disable;
}
/**

View File

@ -32,9 +32,11 @@ export class NodeRestoreDirective {
@Input('adf-restore')
selection: DeletedNodeEntry[];
@Input() location: string = '';
@Input()
location: string = '';
@Output() restore: EventEmitter<any> = new EventEmitter();
@Output()
restore: EventEmitter<any> = new EventEmitter();
@HostListener('click')
onClick() {

View File

@ -16,10 +16,10 @@
*/
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { UploadModule } from 'ng2-alfresco-upload';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BreadcrumbComponent } from './src/components/breadcrumb/breadcrumb.component';
import { DropdownBreadcrumbComponent } from './src/components/breadcrumb/dropdown-breadcrumb.component';

View File

@ -1,4 +1,5 @@
.adf-tag-chips-delete {
overflow: visible;
cursor: pointer;
height: 17px;
width: 20px;