[ADF-1466] Ng2-activiti-tasklist module uses NO_ERRORS_SCHEMA schema, which hides underlying error (#2271)

* [ADF-1466] Ng2-activiti-tasklist module uses NO_ERRORS_SCHEMA schema, which hides underlying error * Added directives for the custom tags * Replaced empty list tags with new directives * Removed CUSTOM_ELEMENTS_SCHEMA document-list, task-list and process-list * Handled empty attachment list sceeenario in attachment list * [ADF-1466] Ng2-activiti-tasklist module uses NO_ERRORS_SCHEMA schema, which hides underlying error * Added tests for disabled and non empty attachments scenario
2025-05-26 17:24:56 +00:00 · 2017-09-01 16:53:51 +05:30 · 2017-09-01 16:53:51 +05:30 · 287630d40f
commit 287630d40f
parent c9b7ddff90
18 changed files with 87 additions and 71 deletions
--- a/ng2-components/ng2-activiti-processlist/index.ts
+++ b/ng2-components/ng2-activiti-processlist/index.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import {
    MdButtonModule,
    MdCardModule,
@ -148,8 +148,7 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
    ],
    exports: [
        ...ACTIVITI_PROCESSLIST_DIRECTIVES
-    ],
-    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+    ]
 })
 export class ActivitiProcessListModule {
    static forRoot(): ModuleWithProviders {
--- a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.html
@ -1,21 +1,14 @@
 <adf-datatable [rows]="attachments" [actions]="true" [loading]="isLoading" (rowDblClick)="openContent($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
-    <adf-empty-list *ngIf="!isDisabled()">
-        <adf-empty-list-header>
-            <div> {{'PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-        </adf-empty-list-header>
-        <adf-empty-list-body>
+    <adf-empty-list *ngIf="isEmpty()">
+        <div adf-empty-list-header class="adf-empty-list-header"> {{'PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
+        <div adf-empty-list-body *ngIf="!isDisabled()">
            <div class="adf-empty-list-drag_drop">{{'PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
            <div class="adf-empty-list__any-files-here-to-add"> {{'PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
-        </adf-empty-list-body>
-        <adf-empty-list-footer>
-            <div><img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl"></div>
-        </adf-empty-list-footer>
-    </adf-empty-list>
-    <adf-empty-list *ngIf="isDisabled()">
-        <adf-empty-list-header>
-            <div> {{'PROCESS-ATTACHMENT.EMPTY-LIST.HEADER' | translate}} </div>
-        </adf-empty-list-header>
+        </div>
+        <div adf-empty-list-footer *ngIf="!isDisabled()">
+            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
+        </div>
    </adf-empty-list>
    <data-columns>
        <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
--- a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.scss
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.scss
@ -1,6 +1,5 @@
-adf-datatable /deep/ .column-header {
+adf-datatable /deep/ th span {
    color: #232323;
-    font-size: 15px;
 }

 adf-datatable /deep/ .data-cell {
@ -12,7 +11,7 @@ adf-datatable /deep/ .data-cell {
    margin-right: calc((100% - 100px) / 2);
 }

-adf-empty-list-header /deep/ div {
+.adf-empty-list-header {
    height: 32px;
    opacity: 0.26 !important;
    font-family: Muli, Helvetica, Arial, sans-serif;
--- a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.spec.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@ -52,8 +52,7 @@ describe('ProcessAttachmentListComponent', () => {
            providers: [
                { provide: AlfrescoTranslationService, useClass: TranslationMock },
                ActivitiContentService
-            ],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            ]
        }).compileComponents();
    }));

@ -213,7 +212,7 @@ describe('ProcessAttachmentListComponent', () => {
        component.ngOnChanges({'processInstanceId': change});
        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER');
        });
    }));

@ -245,7 +244,19 @@ describe('ProcessAttachmentListComponent', () => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY-LIST.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER');
+        });
+    }));
+
+    it('should not show the empty list component when the attachments list is not empty for completed process', async(() => {
+        getProcessRelatedContentSpy.and.returnValue(Observable.of(mockAttachment));
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'processInstanceId': change});
+        component.disabled = true;
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]')).toBeNull();
        });
    }));

--- a/ng2-components/ng2-activiti-tasklist/index.ts
+++ b/ng2-components/ng2-activiti-tasklist/index.ts
@ -16,7 +16,7 @@
 */

 import { DatePipe } from '@angular/common';
-import { ModuleWithProviders, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { MdAutocompleteModule, MdButtonModule, MdCardModule, MdDatepickerModule, MdGridListModule,
    MdIconModule, MdInputModule, MdNativeDateModule, MdProgressSpinnerModule, MdRippleModule, MdSelectModule } from '@angular/material';
 import { ActivitiFormModule } from 'ng2-activiti-form';
@ -33,7 +33,7 @@ import { CommentsComponent } from './src/components/comments.component';
 import { AttachmentComponent } from './src/components/create-task-attachment.component';
 import { NoTaskDetailsTemplateDirective } from './src/components/no-task-detail-template.directive';
 import { PeopleListComponent } from './src/components/people-list.component';
-import { PeopleSearchComponent } from './src/components/people-search.component';
+import { PeopleSearchActionLabelDirective, PeopleSearchComponent, PeopleSearchTitleDirective } from './src/components/people-search.component';
 import { PeopleComponent } from './src/components/people.component';
 import { StartTaskComponent } from './src/components/start-task.component';
 import { TaskAttachmentListComponent } from './src/components/task-attachment-list.component';
@ -55,7 +55,7 @@ export {TaskFiltersComponent } from './src/components/task-filters.component';
 export {TaskDetailsComponent } from './src/components/task-details.component';
 export {TaskAuditDirective } from './src/components/task-audit.directive';
 export {StartTaskComponent } from './src/components/start-task.component';
-export {PeopleSearchComponent } from './src/components/people-search.component';
+export {PeopleSearchComponent, PeopleSearchTitleDirective } from './src/components/people-search.component';
 export {AttachmentComponent } from './src/components/create-task-attachment.component';
 export {PeopleListComponent } from './src/components/people-list.component';
 export {CommentListComponent } from './src/components/comment-list.component';
@ -118,6 +118,8 @@ export const ACTIVITI_TASKLIST_DIRECTIVES: any[] = [
    TaskHeaderComponent,
    StartTaskComponent,
    PeopleSearchComponent,
+    PeopleSearchTitleDirective,
+    PeopleSearchActionLabelDirective,
    TaskAttachmentListComponent,
    AttachmentComponent,
    PeopleListComponent,
@ -185,8 +187,7 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [
        ...ACTIVITI_TASKLIST_DIRECTIVES,
        MdIconModule,
        MdButtonModule
-    ],
-    schemas: [ NO_ERRORS_SCHEMA ]
+    ]
 })
 export class ActivitiTaskListModule {
    static forRoot(): ModuleWithProviders {
--- a/ng2-components/ng2-activiti-tasklist/src/components/people-search.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/people-search.component.html
@ -1,5 +1,5 @@
 <div class="search-text-header">
-    <ng-content select="header-title"></ng-content>
+    <ng-content select="[people-search-title]"></ng-content>
 </div>
 <md-input-container class="search-text-container">
 	<input mdInput placeholder="{{'PEOPLE.SEARCH_USER'|translate}}" type="text" id="userSearchText" [value]="" [formControl]="searchUser">
@ -33,6 +33,6 @@
        {{'PEOPLE.DIALOG_CLOSE' | translate }}
    </button>
    <button md-button type="button" id="add-people" (click)="involveUserAndClose()">
-        <ng-content select="action-button-label"></ng-content>
+        <ng-content select="[people-search-action-label]"></ng-content>
    </button>
 </div>
--- a/ng2-components/ng2-activiti-tasklist/src/components/people-search.component.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/people-search.component.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Directive, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { User } from '../models/user.model';
@ -111,3 +111,6 @@ export class PeopleSearchComponent implements OnInit {
        }
    }
 }
+
+@Directive({ selector: 'people-search-title' }) export class PeopleSearchTitleDirective { }
+@Directive({ selector: 'people-search-action-label' }) export class PeopleSearchActionLabelDirective { }
--- a/ng2-components/ng2-activiti-tasklist/src/components/people.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/people.component.html
@ -16,8 +16,8 @@
        (success)="involveUser($event)"
        (closeSearch)="onCloseSearch()"
        [results]="peopleSearch$">
-            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
-            <action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
+            <ng-container people-search-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
+            <ng-container people-search-action-label>{{ 'PEOPLE.ADD_USER' | translate }}</ng-container>
        </adf-people-search>
    </div>
    <div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.html
@ -1,21 +1,14 @@
 <adf-datatable [rows]="attachments" [actions]="true" [loading]="isLoading" (rowDblClick)="openContent($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
    (executeRowAction)="onExecuteRowAction($event)">
-    <adf-empty-list *ngIf="!isDisabled()">
-        <adf-empty-list-header>
-            <div class="adf-empty-list-header"> {{'TASK-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-        </adf-empty-list-header>
-        <adf-empty-list-body>
+    <adf-empty-list *ngIf="isEmpty()">
+        <div adf-empty-list-header class="adf-empty-list-header"> {{'TASK-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
+        <div adf-empty-list-body *ngIf="!isDisabled()">
            <div class="adf-empty-list-drag_drop">{{'TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
            <div class="adf-empty-list__any-files-here-to-add"> {{'TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
-        </adf-empty-list-body>
-        <adf-empty-list-footer>
-            <div><img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl"></div>
-        </adf-empty-list-footer>
-    </adf-empty-list>
-    <adf-empty-list *ngIf="isDisabled()">
-        <adf-empty-list-header>
-            <div> {{'TASK-ATTACHMENT.EMPTY-LIST.HEADER' | translate}} </div>
-        </adf-empty-list-header>
+        </div>
+        <div adf-empty-list-footer *ngIf="!isDisabled()">
+            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
+        </div>
    </adf-empty-list>
    <data-columns>
        <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss
+++ b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss
@ -1,6 +1,5 @@
-adf-datatable  /deep/ .column-header {
+adf-datatable  /deep/ th span {
    color: #232323;
-    font-size: 15px;
 }

 adf-datatable  /deep/ .data-cell {
@ -12,7 +11,7 @@ adf-datatable  /deep/ .data-cell {
    margin-right: calc((100% - 100px) / 2);
 }

-adf-empty-list-header /deep/ div {
+.adf-empty-list-header {
    height: 32px;
    opacity: 0.26;
    font-family: Muli, Helvetica, Arial, sans-serif;
--- a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.spec.ts
+++ b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.spec.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
+import { SimpleChange } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MdProgressSpinnerModule } from '@angular/material';
 import { By } from '@angular/platform-browser';
@ -54,8 +54,7 @@ describe('TaskAttachmentList', () => {
                ActivitiContentService,
                { provide: AppConfigService, useClass: AppConfigServiceMock },
                { provide: TranslationService, useClass: TranslationMock }
-            ],
-            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            ]
        }).compileComponents();

    }));
@ -203,7 +202,7 @@ describe('TaskAttachmentList', () => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER');
        });
    }));

@ -236,7 +235,19 @@ describe('TaskAttachmentList', () => {

        fixture.whenStable().then(() => {
            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY-LIST.HEADER');
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER');
+        });
+    }));
+
+    it('should not show the empty list component when the attachments list is not empty for completed task', async(() => {
+        getTaskRelatedContentSpy.and.returnValue(Observable.of(mockAttachment));
+        let change = new SimpleChange(null, '123', true);
+        component.ngOnChanges({'taskId': change});
+        component.disabled = true;
+
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]')).toBeNull();
        });
    }));

--- a/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/task-details.component.html
@ -61,8 +61,8 @@
                        (success)="assignTaskToUser($event)"
                        (closeSearch)="onCloseSearch()"
                        [results]="peopleSearch$">
-                            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }}</header-title>
-                            <action-button-label>{{ 'PEOPLE.ADD_ASSIGNEE' | translate }}</action-button-label>
+                            <ng-container people-search-title>{{ 'TASK_DETAILS.LABELS.ADD_ASSIGNEE' | translate }}</ng-container>
+                            <ng-container people-search-action-label>{{ 'PEOPLE.ADD_ASSIGNEE' | translate }}</ng-container>
                        </adf-people-search>
                    </div>
                    <adf-task-header
--- a/ng2-components/ng2-alfresco-datatable/index.ts
+++ b/ng2-components/ng2-alfresco-datatable/index.ts
@ -30,7 +30,10 @@ export { DataRowActionEvent, DataRowActionModel } from './src/components/datatab

 import { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 import { DataTableComponent } from './src/components/datatable/datatable.component';
-import { EmptyListComponent } from './src/components/datatable/empty-list.component';
+import { EmptyListBodyDirective,
+    EmptyListComponent,
+    EmptyListFooterDirective,
+    EmptyListHeaderDirective } from './src/components/datatable/empty-list.component';
 import { LocationCellComponent } from './src/components/datatable/location-cell.component';
 import { LoadingContentTemplateDirective } from './src/directives/loading-template.directive';
 import { NoContentTemplateDirective } from './src/directives/no-content-template.directive';
@ -39,6 +42,9 @@ export function directives() {
    return [
        DataTableComponent,
        EmptyListComponent,
+        EmptyListHeaderDirective,
+        EmptyListBodyDirective,
+        EmptyListFooterDirective,
        DataTableCellComponent,
        LocationCellComponent,
        NoContentTemplateDirective,
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.html
@ -1,6 +1,6 @@
 <div class="adf-empty-list_template">
-    <ng-content select="adf-empty-list-header"></ng-content>
-    <ng-content select="adf-empty-list-body"></ng-content>
-    <ng-content select="adf-empty-list-footer"></ng-content>
+    <ng-content select="[adf-empty-list-header]"></ng-content>
+    <ng-content select="[adf-empty-list-body]"></ng-content>
+    <ng-content select="[adf-empty-list-footer]"></ng-content>
    <ng-content></ng-content>
 </div>
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { Component } from '@angular/core';
+import { Component, Directive } from '@angular/core';

@Component({
    selector: 'adf-empty-list',
@ -23,3 +23,7 @@ import { Component } from '@angular/core';
    templateUrl: './empty-list.component.html'
 })
 export class EmptyListComponent {}
+
+@Directive({ selector: '[adf-empty-list-header]' }) export class EmptyListHeaderDirective {}
+@Directive({ selector: '[adf-empty-list-body]' }) export class EmptyListBodyDirective {}
+@Directive({ selector: '[adf-empty-list-footer]' }) export class EmptyListFooterDirective {}
--- a/ng2-components/ng2-alfresco-documentlist/index.ts
+++ b/ng2-components/ng2-alfresco-documentlist/index.ts
@ -15,7 +15,7 @@
 * limitations under the License.
 */

-import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
 import { DataTableModule } from 'ng2-alfresco-datatable';

@ -110,8 +110,7 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [
        DataTableModule,
        ...DOCUMENT_LIST_DIRECTIVES,
        MaterialModule
-    ],
-    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+    ]
 })
 export class DocumentListModule {
    /** @deprecated in 1.8.0 */
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
@ -22,9 +22,7 @@
        <no-content-template>
            <ng-template>
                <adf-empty-list>
-                    <adf-empty-list-header>
-                        <div> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div>
-                    </adf-empty-list-header>
+                        <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}} </div>
                </adf-empty-list>
            </ng-template>
        </no-content-template>
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.scss
@ -60,7 +60,7 @@
    height: 100%;
 }

-adf-empty-list-header >>> div {
+.adf-empty-list-header {
    height: 32px;
    opacity: 0.26 !important;
    font-family: Muli, Helvetica, Arial, sans-serif;