[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
2025-06-30 18:15:11 +00:00 · 2018-01-04 00:39:11 +05:30 · 2018-01-04 00:39:11 +05:30 · 77822b8494
commit 77822b8494
parent 771cea1f11
8 changed files with 139 additions and 50 deletions
--- a/demo-shell/src/app/components/process-service/process-attachments.component.html
+++ b/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>
--- a/docs/docassets/images/process-attachment-list.png
+++ b/docs/docassets/images/process-attachment-list.png
--- a/docs/process-attachment-list.component.md
+++ b/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 |
--- a/lib/process-services/attachment/process-attachment-list.component.html
+++ b/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()">
-        <div adf-empty-list-header class="adf-empty-list-header"> {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} </div>
-        <div adf-empty-list-body *ngIf="!isDisabled()">
-            <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>
-        <div adf-empty-list-footer *ngIf="!isDisabled()">
-            <img class="adf-empty-list__empty_doc_lib" [src]="emptyListImageUrl">
+                <no-content-template>
+                    <ng-template>
+                        <ng-content *ngIf="hasCustomTemplate; else defaulEmptyList" class="adf-custom-empty-template"></ng-content>
+                        <ng-template #defaulEmptyList>
+                            <adf-empty-list>
+                                <div adf-empty-list-header class="adf-empty-list-header">
+                                    {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
                                </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>
--- a/lib/process-services/attachment/process-attachment-list.component.spec.ts
+++ b/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');
+        });
+    });
+});
--- a/lib/process-services/attachment/process-attachment-list.component.ts
+++ b/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 { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ContentService, EmptyListComponent , ThumbnailService } from '@alfresco/adf-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()
-    emptyListImageUrl: string = './assets/images/empty_doc_lib.svg';
+    hasCustomTemplate: boolean = false;

    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({
--- a/lib/process-services/attachment/task-attachment-list.component.spec.ts
+++ b/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');
        });
    });
+});
--- a/lib/process-services/attachment/task-attachment-list.component.ts
+++ b/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;