inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1583] Fix change detection error (the quick way) (#2396)

Browse Source 
* Fix change detection error (the quick way)

* Fix it the second time
This commit is contained in:
Popovics András 2017-09-29 17:49:01 +01:00 committed by Eugenio Romano
parent cf0b45acb6
commit 9f0e40a6e8
5 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell-ng2/app/components/files/files.component.html
View File

@ -4,7 +4,7 @@
</adf-sites-dropdown>
</div>
<adf-upload-drag-area
[parentId]="documentList.currentFolderId"
[parentId]="getDocumentListCurrentFolderId()"
[versioning]="versioning"
[adf-node-permission]="'create'"
[adf-nodes]="getCurrentDocumentListNode()">

11
demo-shell-ng2/app/components/files/files.component.ts
View File

@ -29,6 +29,8 @@ import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-docume
import { ViewerService } from 'ng2-alfresco-viewer';
const DEFAULT_FOLDER_TO_SHOW = '-my-';
@Component({
selector: 'adf-files-component',
templateUrl: './files.component.html',
@ -36,7 +38,7 @@ import { ViewerService } from 'ng2-alfresco-viewer';
})
export class FilesComponent implements OnInit {
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
currentFolderId: string = '-my-';
currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
errorMessage: string = null;
fileNodeId: any;
@ -114,6 +116,7 @@ export class FilesComponent implements OnInit {
}
onFolderChange($event) {
this.currentFolderId = $event.value.id;
this.router.navigate(['/files', $event.value.id]);
}
@ -220,7 +223,11 @@ export class FilesComponent implements OnInit {
}
getSiteContent(site: SiteModel) {
this.currentFolderId = site && site.guid ? site.guid : '-my-';
this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
}
getDocumentListCurrentFolderId() {
return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
}
hasSelection(selection: Array<MinimalNodeEntity>): boolean {

1
ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.spec.ts
View File

@ -14,6 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MaterialModule } from '../../material.module';

36
ng2-components/ng2-alfresco-core/src/directives/node-permission.directive.spec.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, ElementRef, SimpleChange } from '@angular/core';
import { ChangeDetectorRef, Component, ElementRef, SimpleChange } from '@angular/core';
import { AlfrescoContentService } from './../services/alfresco-content.service';
import { NodePermissionDirective, NodePermissionSubject } from './node-permission.directive';
@ -28,19 +28,27 @@ class TestComponent implements NodePermissionSubject {
describe('NodePermissionDirective', () => {
let changeDetectorMock: ChangeDetectorRef;
beforeEach(() => {
changeDetectorMock = <ChangeDetectorRef> { detectChanges: () => {} };
});
describe('HTML nativeElement as subject', () => {
it('updates element once it is loaded', () => {
const directive = new NodePermissionDirective(null, null, null);
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'updateElement').and.stub();
directive.ngAfterViewInit();
const nodes = [{}, {}];
const change = new SimpleChange([], nodes, false);
directive.ngOnChanges({ nodes: change });
expect(directive.updateElement).toHaveBeenCalled();
});
it('updates element on nodes change', () => {
const directive = new NodePermissionDirective(null, null, null);
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'updateElement').and.stub();
const nodes = [{}, {}];
@ -51,7 +59,7 @@ describe('NodePermissionDirective', () => {
});
it('updates element only on subsequent change', () => {
const directive = new NodePermissionDirective(null, null, null);
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'updateElement').and.stub();
const nodes = [{}, {}];
@ -64,7 +72,7 @@ describe('NodePermissionDirective', () => {
it('enables decorated element', () => {
const renderer = jasmine.createSpyObj('renderer', ['removeAttribute']);
const elementRef = new ElementRef({});
const directive = new NodePermissionDirective(elementRef, renderer, null);
const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
directive.enableElement();
@ -74,7 +82,7 @@ describe('NodePermissionDirective', () => {
it('disables decorated element', () => {
const renderer = jasmine.createSpyObj('renderer', ['setAttribute']);
const elementRef = new ElementRef({});
const directive = new NodePermissionDirective(elementRef, renderer, null);
const directive = new NodePermissionDirective(elementRef, renderer, null, changeDetectorMock);
directive.disableElement();
@ -82,7 +90,7 @@ describe('NodePermissionDirective', () => {
});
it('disables element when nodes not available', () => {
const directive = new NodePermissionDirective(null, null, null);
const directive = new NodePermissionDirective(null, null, null, changeDetectorMock);
spyOn(directive, 'disableElement').and.stub();
directive.nodes = null;
@ -96,7 +104,7 @@ describe('NodePermissionDirective', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(true);
const directive = new NodePermissionDirective(null, null, contentService);
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
spyOn(directive, 'enableElement').and.stub();
directive.nodes = <any> [{}, {}];
@ -109,7 +117,7 @@ describe('NodePermissionDirective', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(false);
const directive = new NodePermissionDirective(null, null, contentService);
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock);
spyOn(directive, 'disableElement').and.stub();
directive.nodes = <any> [{}, {}];
@ -124,29 +132,33 @@ describe('NodePermissionDirective', () => {
it('disables decorated component', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(false);
spyOn(changeDetectorMock, 'detectChanges');
let testComponent = new TestComponent();
testComponent.disabled = false;
const directive = new NodePermissionDirective(null, null, contentService, testComponent);
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
directive.nodes = <any> [{}, {}];
directive.updateElement();
expect(testComponent.disabled).toBeTruthy();
expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
});
it('enables decorated component', () => {
const contentService = new AlfrescoContentService(null, null, null);
spyOn(contentService, 'hasPermission').and.returnValue(true);
spyOn(changeDetectorMock, 'detectChanges');
let testComponent = new TestComponent();
testComponent.disabled = true;
const directive = new NodePermissionDirective(null, null, contentService, testComponent);
const directive = new NodePermissionDirective(null, null, contentService, changeDetectorMock, testComponent);
directive.nodes = <any> [{}, {}];
directive.updateElement();
expect(testComponent.disabled).toBeFalsy();
expect(changeDetectorMock.detectChanges).toHaveBeenCalledTimes(1);
});
});
});

11
ng2-components/ng2-alfresco-core/src/directives/node-permission.directive.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AfterViewInit, Directive, ElementRef, Host, Inject, Input, OnChanges, Optional, Renderer2, SimpleChanges } from '@angular/core';
import { ChangeDetectorRef, Directive, ElementRef, Host, Inject, Input, OnChanges, Optional, Renderer2, SimpleChanges } from '@angular/core';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { EXTENDIBLE_COMPONENT } from './../interface/injection.tokens';
import { AlfrescoContentService } from './../services/alfresco-content.service';
@ -27,7 +27,7 @@ export interface NodePermissionSubject {
@Directive({
selector: '[adf-node-permission]'
})
export class NodePermissionDirective implements OnChanges, AfterViewInit {
export class NodePermissionDirective implements OnChanges {
@Input('adf-node-permission')
permission: string = null;
@ -38,16 +38,13 @@ export class NodePermissionDirective implements OnChanges, AfterViewInit {
constructor(private elementRef: ElementRef,
private renderer: Renderer2,
private contentService: AlfrescoContentService,
private changeDetector: ChangeDetectorRef,
@Host()
@Optional()
@Inject(EXTENDIBLE_COMPONENT) private parentComponent?: NodePermissionSubject) {
}
ngAfterViewInit() {
this.updateElement();
}
ngOnChanges(changes: SimpleChanges) {
if (changes.nodes && !changes.nodes.firstChange) {
this.updateElement();
@ -75,6 +72,7 @@ export class NodePermissionDirective implements OnChanges, AfterViewInit {
private enable(): void {
if (this.parentComponent) {
this.parentComponent.disabled = false;
this.changeDetector.detectChanges();
} else {
this.enableElement();
}
@ -83,6 +81,7 @@ export class NodePermissionDirective implements OnChanges, AfterViewInit {
private disable(): void {
if (this.parentComponent) {
this.parentComponent.disabled = true;
this.changeDetector.detectChanges();
} else {
this.disableElement();
}