diff --git a/demo-shell/src/app/components/process-service/process-attachments.component.html b/demo-shell/src/app/components/process-service/process-attachments.component.html index 61670f6fcd..7955be82a2 100644 --- a/demo-shell/src/app/components/process-service/process-attachments.component.html +++ b/demo-shell/src/app/components/process-service/process-attachments.component.html @@ -6,10 +6,24 @@ [disabled]="isCompletedProcess()"> + *ngIf="processInstanceId" + [disabled]="isCompletedProcess()" + [processInstanceId]="processInstanceId" + (attachmentClick)="onAttachmentClick($event)"> + +
+ {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} +
+
+
+ {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}} +
+
+ {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}} +
+
+ + diff --git a/docs/docassets/images/process-attachment-list.png b/docs/docassets/images/process-attachment-list.png new file mode 100644 index 0000000000..f9c6c70421 Binary files /dev/null and b/docs/docassets/images/process-attachment-list.png differ diff --git a/docs/process-attachment-list.component.md b/docs/process-attachment-list.component.md index 01f68571c1..5ad571eb5e 100644 --- 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 ``` +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 + + +
//no content template + +
{{This List is empty}}
+
{{Drag and drop to upload}}
+
+
+ +
+ + +``` + +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 | diff --git a/lib/process-services/attachment/process-attachment-list.component.html b/lib/process-services/attachment/process-attachment-list.component.html index 456d650759..f2fe9bf97b 100644 --- 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_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
-
-
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
-
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
-
-
- -
- + + + + + +
+ {{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}} +
+ + + + diff --git a/lib/process-services/attachment/process-attachment-list.component.spec.ts b/lib/process-services/attachment/process-attachment-list.component.spec.ts index 6575736445..348c3e2c74 100644 --- 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: ` + + +
Custom header
+ + + ` +}) +class CustomEmptyTemplateComponent { +} + +describe('Custom CustomEmptyTemplateComponent', () => { + let fixture: ComponentFixture; + + 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'); + }); + }); +}); diff --git a/lib/process-services/attachment/process-attachment-list.component.ts b/lib/process-services/attachment/process-attachment-list.component.ts index da1c40e4a4..50976948b9 100644 --- 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 = new EventEmitter(); - @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({ diff --git a/lib/process-services/attachment/task-attachment-list.component.spec.ts b/lib/process-services/attachment/task-attachment-list.component.spec.ts index 9c957d22c5..16fb136d84 100644 --- 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.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'); + 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'); + }); }); }); diff --git a/lib/process-services/attachment/task-attachment-list.component.ts b/lib/process-services/attachment/task-attachment-list.component.ts index f30ab4d23f..e2ff5606bb 100644 --- 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;