[ADF-1958] Process Attachment list - The empty list should be a simpl… (#2798)

* [ADF-1958] Process Attachment list - The empty list should be a simple template

* changed the default empty list to a simple template

* changed process-attachment.component.html so that the user can pass custom empty tempate

* [ADF-1958] Process Attachment list - The empty list should be a simple template

* changed the default empty list to a simple template

* changed process-attachment.component.html so that the user can pass custom empty tempate

* removed some unused variables

* [ADF-1958] Process Attachment list - The empty list should be a simple template

* changed the default empty list to a simple template

* changed process-attachment.component.html so that the user can pass custom empty tempate

demo-shell/src/app/components/process-service/process-attachments.component.html

@@ -10,6 +10,20 @@
                 [disabled]="isCompletedProcess()"
                 [processInstanceId]="processInstanceId"
                 (attachmentClick)="onAttachmentClick($event)">
+                    <adf-empty-list>
+                      <div adf-empty-list-header class="adf-empty-list-header">
+                          {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} 
+                       </div>
+                            <div adf-empty-list-body>
+                            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">
+                              {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
+                            </div>
+                                  <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add">
+                                  {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
+                                  </div>
+                            </div>
+                        
+                    </adf-empty-list>
             </adf-process-attachment-list>
 
         </adf-upload-drag-area>

docs/process-attachment-list.component.md

@@ -2,6 +2,8 @@
 
 Displays attached documents on a specified process instance
 
+![process-attachment-list-sample](docassets/images/process-attachment-list.png)
+
 ## Basic Usage
 
 ```html
@@ -11,6 +13,10 @@ Displays attached documents on a specified process instance
 </adf-process-attachment-list>
 ```
 
+If the List is empty, a default no content template is displayed.
+
+![default-no-content-template-sample](docassets/images/default-no-content-template.png)
+
 Make sure to override the UploadService with the ProcessUploadService
 ```ts
 
@@ -28,6 +34,33 @@ export class MyCustomProcessAttachmentComponent {
 }
 ```
 
+### How to Add Drag and Drop Functionality
+
+If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom *no content template* as shown below with our component urging the user to drag files to upload whenever the list is empty.
+
+```html
+<adf-upload-drag-area
+    [parentId]="YOUR_PROCESS_ID"
+    [showNotificationBar]="BOOLEAN">
+    <adf-process-attachment-list  
+        [processId]="YOUR_PROCESS_ID"
+        (attachmentClick)="YOUR_HANDLER">
+            <div adf-empty-list> //no content template
+                <adf-empty-list>
+                    <div adf-empty-list-header>{{This List is empty}}</div>
+                    <div adf-empty-list-body>{{Drag and drop to upload}}</div>
+                    <div adf-empty-list-footer>
+                        <img [src]="Your custom image URL"></div> 
+                </adf-empty-list>
+            </div>
+    </adf-process-attachment-list>
+</adf-upload-drag-area>
+```
+
+If the List is empty, the custom no-content template we passed is displayed.
+
+![custom-no-content-drag-drop-template-sample](docassets/images/custom-no-content-drag-drop-template.png)
+
 ### Properties
 
 | Name | Type | Description |

lib/process-services/attachment/process-attachment-list.component.html

@@ -1,16 +1,22 @@
-<adf-datatable [rows]="attachments" [actions]="true" [loading]="isLoading" (rowDblClick)="openContent($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)"
+<adf-datatable  [rows]="attachments" 
+                [actions]="true" 
+                [loading]="isLoading" 
+                (rowDblClick)="openContent($event)" 
+                (showRowActionsMenu)="onShowRowActionsMenu($event)"
                 (executeRowAction)="onExecuteRowAction($event)">
 
-    <adf-empty-list *ngIf="isEmpty()">
+                <no-content-template>
-        <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
+                    <ng-template>
-        <div adf-empty-list-body *ngIf="!isDisabled()">
+                        <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
-            <div fxHide.lt-md="true" class="adf-empty-list-drag_drop">{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}</div>
+                        <ng-template #defaulEmptyList>
-            <div fxHide.lt-md="true" class="adf-empty-list__any-files-here-to-add"> {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} </div>
+                            <adf-empty-list>
-        </div>
+                                <div adf-empty-list-header class="adf-empty-list-header">
-        <div adf-empty-list-footer *ngIf="!isDisabled()">
+                                    {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
-            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
                                 </div>
                             </adf-empty-list>
+                        </ng-template>
+                    </ng-template>
+                </no-content-template>
 
     <data-columns>
         <data-column key="icon" type="image" srTitle="ADF_PROCESS_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>

lib/process-services/attachment/process-attachment-list.component.spec.ts

@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import { NgZone, SimpleChange } from '@angular/core';
+import { NgZone, SimpleChange, Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatProgressSpinnerModule } from '@angular/material';
+import { MaterialModule } from '../material.module';
 import { By } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ProcessContentService } from '@alfresco/adf-core';
 import { Observable } from 'rxjs/Observable';
-
 import { ProcessAttachmentListComponent } from './process-attachment-list.component';
 
 describe('ProcessAttachmentListComponent', () => {
@@ -202,22 +202,6 @@ describe('ProcessAttachmentListComponent', () => {
         });
     }));
 
-    it('should show the empty list drag and drop component when the process is not completed', async(() => {
-        getProcessRelatedContentSpy.and.returnValue(Observable.of({
-            'size': 0,
-            'total': 0,
-            'start': 0,
-            'data': []
-        }));
-        let change = new SimpleChange(null, '123', true);
-        component.ngOnChanges({'processInstanceId': change});
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
-            expect(fixture.nativeElement.querySelector('adf-empty-list .adf-empty-list-drag_drop').innerText.trim())
-            .toEqual('ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE');
-        });
-    }));
-
     it('should not show the empty list drag and drop component when is disabled', async(() => {
         getProcessRelatedContentSpy.and.returnValue(Observable.of({
             'size': 0,
@@ -308,3 +292,45 @@ describe('ProcessAttachmentListComponent', () => {
     });
 
 });
+
+@Component({
+    template: `
+    <adf-process-attachment-list>
+        <adf-empty-list>
+            <div adf-empty-list-header class="adf-empty-list-header">Custom header</div>
+        </adf-empty-list>
+    </adf-process-attachment-list>
+       `
+})
+class CustomEmptyTemplateComponent {
+}
+
+describe('Custom CustomEmptyTemplateComponent', () => {
+    let fixture: ComponentFixture<CustomEmptyTemplateComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                ProcessAttachmentListComponent,
+                CustomEmptyTemplateComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomEmptyTemplateComponent);
+        fixture.detectChanges();
+    });
+
+    it('should render the custom template', () => {
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
+            expect(title.length).toBe(1);
+            expect(title[0].nativeElement.innerText).toBe('Custom header');
+        });
+    });
+});

lib/process-services/attachment/process-attachment-list.component.ts

@@ -15,16 +15,20 @@
  * limitations under the License.
  */
 
-import { ContentService, ThumbnailService } from '@alfresco/adf-core';
+import { ContentService, EmptyListComponent , ThumbnailService } from '@alfresco/adf-core';
-import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { AfterContentInit, ContentChild, Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ProcessContentService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-process-attachment-list',
     styleUrls: ['./process-attachment-list.component.scss'],
-    templateUrl: './process-attachment-list.component.html'
+    templateUrl: './process-attachment-list.component.html',
+    encapsulation: ViewEncapsulation.None
 })
-export class ProcessAttachmentListComponent implements OnChanges {
+export class ProcessAttachmentListComponent implements OnChanges, AfterContentInit {
+
+    @ContentChild(EmptyListComponent)
+    emptyTemplate: EmptyListComponent;
 
     @Input()
     processInstanceId: string;
@@ -41,8 +45,7 @@ export class ProcessAttachmentListComponent implements OnChanges {
     @Output()
     error: EventEmitter<any> = new EventEmitter<any>();
 
-    @Input()
+    hasCustomTemplate: boolean = false;
-    emptyListImageUrl: string = './assets/images/empty_doc_lib.svg';
 
     attachments: any[] = [];
     isLoading: boolean = true;
@@ -59,6 +62,12 @@ export class ProcessAttachmentListComponent implements OnChanges {
         }
     }
 
+    ngAfterContentInit() {
+        if (this.emptyTemplate) {
+            this.hasCustomTemplate = true;
+        }
+    }
+
     reset() {
         this.attachments = [];
     }
@@ -69,6 +78,10 @@ export class ProcessAttachmentListComponent implements OnChanges {
         });
     }
 
+    hasCutomEmptyTemplate() {
+        return !!this.emptyTemplate;
+    }
+
     add(content: any): void {
         this.ngZone.run(() => {
             this.attachments.push({

lib/process-services/attachment/task-attachment-list.component.spec.ts

@@ -331,9 +331,11 @@ describe('Custom CustomEmptyTemplateComponent', () => {
     });
 
     it('should render the custom template', () => {
+        fixture.whenStable().then(() => {
             fixture.detectChanges();
             let title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
             expect(title.length).toBe(1);
             expect(title[0].nativeElement.innerText).toBe('Custom header');
         });
     });
+});

lib/process-services/attachment/task-attachment-list.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { ContentService, ThumbnailService, EmptyListComponent } from '@alfresco/adf-core';
-import { AfterContentInit, ContentChild, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ContentChild, Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ProcessContentService } from '@alfresco/adf-core';
 
 @Component({
@@ -47,11 +47,6 @@ export class TaskAttachmentListComponent implements OnChanges, AfterContentInit
 
     hasCustomTemplate: boolean = false;
 
-    @ViewChild('customEmptyListTemplate')
-    customTemplateRef: ElementRef;
-
-    curret: any;
-
     attachments: any[] = [];
     isLoading: boolean = false;