From aa8b2a28f3257c8f0719d21701b6bf4f17410010 Mon Sep 17 00:00:00 2001 From: madhukar23 <30654750+madhukar23@users.noreply.github.com> Date: Tue, 21 Nov 2017 16:03:56 +0530 Subject: [PATCH] [ADF-1711] The 14130 bytes .../images/default-no-content-template.png | Bin 0 -> 5373 bytes docs/task-attachment-list.component.md | 35 ++++++- .../task-attachment-list.component.html | 52 +++++----- .../task-attachment-list.component.spec.ts | 91 +++++++++++------- .../task-attachment-list.component.ts | 27 ++++-- 8 files changed, 167 insertions(+), 76 deletions(-) create mode 100644 docs/docassets/images/custom-no-content-drag-drop-template.png create mode 100644 docs/docassets/images/default-no-content-template.png diff --git a/demo-shell/src/app/components/activiti/activiti.component.html b/demo-shell/src/app/components/activiti/activiti.component.html index d623ab6ba9..7899552e9d 100644 --- a/demo-shell/src/app/components/activiti/activiti.component.html +++ b/demo-shell/src/app/components/activiti/activiti.component.html @@ -85,10 +85,20 @@ - - + + +
+
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
+
+
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
+
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
+
+
+ + diff --git a/demo-shell/src/app/components/activiti/activiti.component.ts b/demo-shell/src/app/components/activiti/activiti.component.ts index ace8ce4e13..f1b4f26d87 100644 --- a/demo-shell/src/app/components/activiti/activiti.component.ts +++ b/demo-shell/src/app/components/activiti/activiti.component.ts @@ -49,10 +49,12 @@ import { TaskDetailsEvent, TaskFiltersComponent, TaskListComponent, - TaskListService + TaskListService, + TaskAttachmentListComponent, + ProcessUploadService } from '@alfresco/adf-process-services'; import { LogService } from '@alfresco/adf-core'; -import { AlfrescoApiService } from '@alfresco/adf-core'; +import { AlfrescoApiService, UploadService } from '@alfresco/adf-core'; import { DataSorting, ObjectDataRow, @@ -69,6 +71,9 @@ const currentTaskIdNew = '__NEW__'; selector: 'adf-activiti', templateUrl: './activiti.component.html', styleUrls: ['./activiti.component.scss'], + providers: [ + { provide: UploadService, useClass: ProcessUploadService } + ], encapsulation: ViewEncapsulation.None }) export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit { @@ -79,6 +84,9 @@ export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit { @ViewChild(TaskListComponent) taskList: TaskListComponent; + @ViewChild(TaskAttachmentListComponent) + taskAttachList: TaskAttachmentListComponent; + @ViewChild(ProcessFiltersComponent) activitiprocessfilter: ProcessFiltersComponent; @@ -147,7 +155,8 @@ export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit { private apiService: AlfrescoApiService, private logService: LogService, formRenderingService: FormRenderingService, - formService: FormService) { + formService: FormService, + private uploadService: UploadService) { this.dataTasks = new ObjectDataTableAdapter(); this.dataTasks.setSorting(new DataSorting('created', 'desc')); @@ -247,6 +256,7 @@ export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit { this.currentProcessInstanceId = null; }); this.layoutType = AppsListComponent.LAYOUT_GRID; + this.uploadService.fileUploadComplete.subscribe(value => this.onTaskFileUploadComplete(value.data)); } @@ -480,4 +490,8 @@ export class ActivitiComponent implements AfterViewInit, OnDestroy, OnInit { this.taskList.reload(); this.currentTaskId = null; } + + onTaskFileUploadComplete(content: any) { + this.taskAttachList.add(content); + } } diff --git a/docs/docassets/images/custom-no-content-drag-drop-template.png b/docs/docassets/images/custom-no-content-drag-drop-template.png new file mode 100644 index 0000000000000000000000000000000000000000..6b554ba234a323f5c5b81a557697279383c26e19 GIT binary patch literal 14130 zcmd6OXH-*NyKNAaA_6J`(u*KcEfl2+3P?w!R|TbaLJLh%L`6VFx_}rE0SO|#1W=lS z^iC400-^U_?i24A_x!!%p6`rt*AL#;1a|gb>nZb@bLNGvw(3c07HR|naZ>H}Ejl&Fwn*Rmo(~aru5K<5MZ9c0 zA3k*TvUfu+lGn&15L^hgTZ;OA@8=1=e)|27Hv4&IUhUCMWucn845V@ws)*(bFG>TRuBwWG`|` zwO2`9?Xt&+zr7Tw5YlQ+2$;m*PuNZNYLip#93IB#3res=s%M^t`$Son;zSrD>c(`l z_0^MGRgm!7aJIf+q>4@9ARBG?kYn*_b_C)^n!aFcucLurEc}urK9&rDP@u8KJ?U~R zruEf=O`vsXANSI_Fcj+glNu69;85h)m6$$~(PhCf|{>ptL>gP;Dl>EL=CUE~PF z>u}P`f4Kh>FW=cM5RUovr>P5pcvSN=Jbbr6JmeF__mNom9P+8nw9Pg1|G5wUk37MD zU1ZH=b+UCNaJALFf810NMSoP$xF$Hr(lT{6yVW*eB2ua?O+n$6!4bsT&oOs4`M@pg z=5W9!!8e*+MzZ#!rkJB`DcrTPEVc1W2YZG>$8VD{WY$G-}tUv(W5_F zNjPX^b-SgaqMdN*ep&8u#Ma@=%uFA~BH&MbQce#<{&4=%Uh* z;9a_qt-8N0@j-*vFJ1bYmzT$x?`gp!w`ZZH)!H7sQK+M^FV4kvqk=$0+S=JMF*1J2 z%JTK`Not)uD`Z%;zkxe3u(amXQAB^T72J4cW~NopdT*=Lh%lv+qT=^{tB|~2N4TSTkBLSJad8F) zhA(EN7&O|ZA7cUQs$CnKjL(;j?)Y-;td?KDJg%|1RV}Nit2bNt5)Ab9-=(DF_0LYV zr*X2gi%^Evjs0wEs}9^=neIdrFtk$Fy6Q$mOun6$k=ZS+*`L=C!=5J`;Jw;i2EKCh z@nwGc)HvpjM|Nuo8GhMX>(+5{bnNQx?sZ(B&98C2#C+xIRW1JRWVhvC6u6uT}UEy#qMn~Snz@XTDOvxiaSNHYzdjl2TxxJ3;3c-6t z4&Cxwqfc7m#l+0ZE=ft1e*3nvx4kM>y=ASh-$U%q8u6b>vDzDFI(6z)ov$atU5;LC z!`dt~`NIdUNR>jTe$1mskFrux>X~|ShkL7nu`?}VH4ySrF)=Z6HNVq>HcX05_aQ<9 zmm8QQlU@40m~?09gv=E*z1NGhqpHKZcF(#@O4 z6zyGItKm^^+^C&O3lU{}`{qq&N5>5m;t^Tb?0P6yQAr8vKrLPOfvxS!loL#%=3haa7Y{FQsVf0B60}(^X=q^3(9l5jHh=u<*RQ8|RjQy6jNgSYuxsZ?&l2+@ za))xs?o6X$yU!l|PDGmK^+AA8g?8ZavexyKW1M1STylHlvFhtt3j4&=fQ3_O!=5c7 z-@ku{pm$62pG<^JpPHI#Pq>V3S6ZlAZHt!Qu_sh`x5SB5`Yn$`4Eih%YdwNJ(#!2_ zm)nFCkt;>5&xD;|l1^!>3#a3}?pZ%y-CDU=z1wSKwV!slo%ZV0tDE7p#YII`8$(WV z!HLn#mw&jHhHQ<6^QuO@mvS36bHir#&w5J}AjyMv=S%aA3wXrE*Z#&^1y3g0wY|SS zF~K)_{CgnX0-RfazLi)>blB6URl5t7P+Oo}ZT01uHN84Fp+ObHueDQixLfn~?c0#; z_>jTspxvNNLYDrDJozKe=f2p))=48ME3rnF4$jVd-DwAZd@3iCB%FfRbFEwkzx^FK zm>&_fs6bAo_-<@Gtacv!=D#|*f3R6If(_UVIou2pGyXanDK+dz%#0UjY5kpe^~sYb zBLR!p$;n9xr@pOVsxn0Zbq$S}w{Q3K;(k4#rlZ@`xC8ytYR~VnsE|CmUhMooPue9<}Jvco^7Hd`)YQ%`yrel6(V%B$#(M5tb~o`^rD*N?lQqN| z_r;69Tw1d4W(hNDK)1Sm`}Se;dvS-ibz@5!cNK5ls-GJyJf^sWEt+VG7Gj_lBP!+@ zMm&TvOPDo6w{lOIoOgLKw9yvr^ZM4zDOug&O{mPhPMAf~X^CSdRLUB(Q>Ejdk z?p=Z=e{OG1r#w6q>Rd^kTp<hS#l@0aA^g}oCJTwlIN|-kir>kk{7H z(YbxwU1;Oy8(!POL5b4<()xOO^bHM@T5XeCKlM7+)zzIjeVXR@llTe)BO@aN18*eq z8XGOvl9QD+`St4$x&rk_HWx?43@hO%zI^$DM&HcTgQv{M%sfYPypmvPZf()Q`orA{so$>tA3nnAfjgL&XN1 zGc;tXudjdS&Si(LjG`iOMS8em#so*;IjqOV+#m$w<>#OEbE2Z6a{evopW)A*p%xb1 zueGJf^bZW!Ut+elw$>LkfOETl|GtgQM21=n12mX)7zn-^3&Vp0q=81Lf-ZpDudc2x zFZZA6$)0LUDI9dR4t8{O6ciI%oSsgQ_5a32IbL9xTm0!0zk-6owQJX;rH5<_6E#1D zhK5#DRH()913F)Rkeiz;BO?O`RX@!0CWFcWZw4H!!eU zxw$R#{a#K^PJq_jN$V>YB|Jtb*H)?q3oKUFx*tFIby9^(*eF9g2!x>Z8H4r{U#D08 zwm=#7@bCbvhq(z`37^r@($etwvwCKib-}y%c<3fK^ZO%q-^&G*0Q~v$D@FzFv9m_B zwt*?4wY60uQ4^z4?KcNN^MYo=sAEk5ZXWjPYNDo5z9sur+gE;}5Kbv6DFp=uR z5D&5O@piVh>a+NP0f7bLjuE1RwNVan00@*HE19dGQ(u2ekv=IoS*zD}={o8ba7el$qy#0?-P-JCgwTLw5{r>v(k`XQaQSM8ZE?vEPx2mF&xUhiv z@}^MBJ#DW@4+mr3 zB+VA}^XF|Ml0h)mac-bMJ@ebQZ(X*9>ps%FDz7MMXujm-6`SUD&09Cfx)qR(zF0$S zSv`1=fn!`|JRZ?7US4RK-)}E2A|kTBzD^$EP{8^TieOX!jBg@!*hdHpES3wh3@^r^7>j{K#|tx(Qy-(sBVQ?cj$9 zyoEwMvobawfYLiVGo#5L<2NrREc_}eY9Y_5_C%P{<@-O57Vx3V%gdqqeEFh@?tJjz z0nLLpB3$hA=g+WNP%PjlJTMev&p$sovfiK0Uk2#GP{}H*Rw=mG=B*PRAJpUMt*NOA zwKpgz2*w41Yd!|kH@lu1se(YkJz%IDi={UN7Pc%bEDVxKItA0TK(0v7K&|X%Be
    nPw19v?$M8=q@FNj8? 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

    |jSs?5< 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 j!zH7Dg;a^cP6rtqni&xE?f?20x0mrh literal 0 HcmV?d00001 diff --git a/docs/task-attachment-list.component.md b/docs/task-attachment-list.component.md index f87ffac726..d2f136d8fe 100644 --- a/docs/task-attachment-list.component.md +++ b/docs/task-attachment-list.component.md @@ -1,6 +1,6 @@ # Task Attachment List Component -Displays attached documents on a specified task +Displays attached documents on a specified task. ![task-attachment-list-sample](docassets/images/task-attachment-list.png) @@ -9,6 +9,7 @@ Displays attached documents on a specified task - [Basic Usage](#basic-usage) + * [Drag and Drop Functionality](#how-to-add-drag-and-drop-functionality) * [Properties](#properties) * [Events](#events) @@ -24,6 +25,38 @@ Displays attached documents on a specified task (attachmentClick)="YOUR_HANDLER"> ``` +If the List is empty, a default no content template is displayed. + +![default-no-content-template-sample](docassets/images/default-no-content-template.png) + +### 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}}
    +
    +
    +     +
    + + +``` + +[Upload Drag Area Component](./upload-drag-area.component.md) + +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 diff --git a/lib/process-services/attachment/task-attachment-list.component.html b/lib/process-services/attachment/task-attachment-list.component.html index fc3ab365b7..37a87bf709 100644 --- a/lib/process-services/attachment/task-attachment-list.component.html +++ b/lib/process-services/attachment/task-attachment-list.component.html @@ -1,25 +1,29 @@ - - -
    {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
    -
    -
    {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
    -
    {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
    -
    -
    - -
    -     - - - - - - - - - - - - + + + +
    + {{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}} +
    +
    + +
    +     + + + + + + + + + + + + +     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 a11a7eebed..6edceb51a7 100644 --- a/lib/process-services/attachment/task-attachment-list.component.spec.ts +++ b/lib/process-services/attachment/task-attachment-list.component.spec.ts @@ -141,7 +141,54 @@ describe('TaskAttachmentList', () => { }); })); - it('should display all actions if attachements are not read only', () => { + it('emit document when a user wants to view the document', () => { + component.emitDocumentContent(mockAttachment.data[1]); + fixture.detectChanges(); + expect(getFileRawContentSpy).toHaveBeenCalled(); + }); + + it('download document when a user wants to view the document', () => { + component.downloadContent(mockAttachment.data[1]); + fixture.detectChanges(); + expect(getFileRawContentSpy).toHaveBeenCalled(); + }); + + it('should show the empty list drag and drop component when the task is not completed', async(() => { + getTaskRelatedContentSpy.and.returnValue(Observable.of({ + 'size': 0, + 'total': 0, + 'start': 0, + 'data': [] + })); + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({'taskId': change}); + component.disabled = false; + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('.adf-custom-empty-template')).not.toBeNull(); + }); + })); + + it('should not show the empty list drag and drop component when is disabled', async(() => { + getTaskRelatedContentSpy.and.returnValue(Observable.of({ + 'size': 0, + 'total': 0, + 'start': 0, + 'data': [] + })); + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({'taskId': change}); + component.disabled = true; + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('.adf-custom-empty-template')).toBeNull(); + expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'); + }); + })); + + it('should display all actions if attachments are not read only', () => { let change = new SimpleChange(null, '123', true); component.ngOnChanges({'taskId': change}); fixture.detectChanges(); @@ -190,40 +237,6 @@ describe('TaskAttachmentList', () => { }); })); - it('should show the empty list drag and drop component when the task is not completed', async(() => { - getTaskRelatedContentSpy.and.returnValue(Observable.of({ - 'size': 0, - 'total': 0, - 'start': 0, - 'data': [] - })); - let change = new SimpleChange(null, '123', true); - component.ngOnChanges({'taskId': change}); - - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('adf-empty-list .adf-empty-list-drag_drop').innerText.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE'); - }); - })); - - it('should not show the empty list drag and drop component when is disabled', async(() => { - getTaskRelatedContentSpy.and.returnValue(Observable.of({ - 'size': 0, - 'total': 0, - 'start': 0, - 'data': [] - })); - let change = new SimpleChange(null, '123', true); - component.ngOnChanges({'taskId': change}); - component.disabled = true; - - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('adf-empty-list .adf-empty-list-drag_drop')).toBeNull(); - expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER'); - }); - })); - it('should show the empty list component when the attachments list is empty for completed task', async(() => { getTaskRelatedContentSpy.and.returnValue(Observable.of({ 'size': 0, @@ -270,7 +283,7 @@ describe('TaskAttachmentList', () => { expect(getTaskRelatedContentSpy).toHaveBeenCalledWith('456'); }); - it('should NOT fetch new attachments when empty changeset made', () => { + it('should NOT fetch new attachments when empty change set made', () => { component.ngOnChanges({}); expect(getTaskRelatedContentSpy).not.toHaveBeenCalled(); }); @@ -292,5 +305,11 @@ describe('TaskAttachmentList', () => { expect(true).toBe(true); }); + it('delete content by contentId', () => { + component.deleteAttachmentById(5); + fixture.detectChanges(); + expect(deleteContentSpy).toHaveBeenCalled(); + }); + }); }); diff --git a/lib/process-services/attachment/task-attachment-list.component.ts b/lib/process-services/attachment/task-attachment-list.component.ts index fd159f69ec..f291df18fc 100644 --- a/lib/process-services/attachment/task-attachment-list.component.ts +++ b/lib/process-services/attachment/task-attachment-list.component.ts @@ -16,17 +16,16 @@ */ import { ContentService, ThumbnailService } from '@alfresco/adf-core'; -import { Component, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core'; import { ProcessContentService } from '@alfresco/adf-core'; -declare var require: any; - @Component({ selector: 'adf-task-attachment-list', styleUrls: ['./task-attachment-list.component.scss'], - templateUrl: './task-attachment-list.component.html' + templateUrl: './task-attachment-list.component.html', + encapsulation: ViewEncapsulation.None }) -export class TaskAttachmentListComponent implements OnChanges { +export class TaskAttachmentListComponent implements OnChanges, AfterViewInit { @Input() taskId: string; @@ -43,8 +42,9 @@ export class TaskAttachmentListComponent implements OnChanges { @Output() error: EventEmitter = new EventEmitter(); - @Input() - emptyListImageUrl: string = require('../assets/images/empty_doc_lib.svg'); + hasCustomTemplate: boolean; + + @ViewChild('customEmptyListTemplate') customTemplateRef: ElementRef; attachments: any[] = []; isLoading: boolean = true; @@ -61,6 +61,13 @@ export class TaskAttachmentListComponent implements OnChanges { } } + ngAfterViewInit() { + if (this.customTemplateRef && this.customTemplateRef.nativeElement && + this.customTemplateRef.nativeElement.children && this.customTemplateRef.nativeElement.children.length > 0) { + this.hasCustomTemplate = true; + } + } + reset(): void { this.attachments = []; } @@ -110,7 +117,7 @@ export class TaskAttachmentListComponent implements OnChanges { } } - private deleteAttachmentById(contentId: number) { + deleteAttachmentById(contentId: number) { if (contentId) { this.activitiContentService.deleteRelatedContent(contentId).subscribe( (res: any) => { @@ -128,6 +135,10 @@ export class TaskAttachmentListComponent implements OnChanges { return this.attachments && this.attachments.length === 0; } + isCustomTemplateDefined(): boolean { + return this.hasCustomTemplate; + } + onShowRowActionsMenu(event: any) { let viewAction = { title: 'ADF_TASK_LIST.MENU_ACTIONS.VIEW_CONTENT',