diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index d454bb612e..17b4dabe5c 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/ng2-components/ng2-activiti-processlist/README.md @@ -300,10 +300,10 @@ Displays comments associated with a particular process instance and allows the u This component displays attached documents on a specified process instance ```html - - + (attachmentClick)="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER"> + ``` ![process-attachment-list-sample](docs/assets/process-attachment-list.png) @@ -312,6 +312,7 @@ This component displays attached documents on a specified process instance | Name | Type | Description | | --- | --- | -- | | processInstanceId | string | (**required**): The ID of the process instance to display | +| disabled | boolean | false | Disable/Enable read only mode for attachement list | ### Events diff --git a/ng2-components/ng2-activiti-processlist/docs/assets/process-attachment-list.png b/ng2-components/ng2-activiti-processlist/docs/assets/process-attachment-list.png deleted file mode 100644 index 23d902bfb4..0000000000 Binary files a/ng2-components/ng2-activiti-processlist/docs/assets/process-attachment-list.png and /dev/null differ diff --git a/ng2-components/ng2-activiti-processlist/index.ts b/ng2-components/ng2-activiti-processlist/index.ts index afae068b63..ec2dabe4f3 100644 --- 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 { ModuleWithProviders, NgModule } from '@angular/core'; +import { ModuleWithProviders, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { MdButtonModule, MdCardModule, @@ -148,7 +148,8 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [ ], exports: [ ...ACTIVITI_PROCESSLIST_DIRECTIVES - ] + ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class ActivitiProcessListModule { static forRoot(): ModuleWithProviders { diff --git a/ng2-components/ng2-activiti-processlist/src/assets/images/empty_doc_lib.svg b/ng2-components/ng2-activiti-processlist/src/assets/images/empty_doc_lib.svg new file mode 100644 index 0000000000..866acd527b --- /dev/null +++ b/ng2-components/ng2-activiti-processlist/src/assets/images/empty_doc_lib.svg @@ -0,0 +1,208 @@ + + + + empty_doc_lib + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.css b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.css deleted file mode 100644 index 5d87a966e7..0000000000 --- a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.css +++ /dev/null @@ -1,13 +0,0 @@ -adf-datatable >>> .column-header { - color: #232323; - font-size: 15px; -} - -adf-datatable >>> .data-cell { - cursor: pointer !important; -} - -.adf-attachment-list-loading-margin { - margin-left: calc((100% - 100px) / 2); - margin-right: calc((100% - 100px) / 2); -} diff --git 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 index 510301cc16..de92e55dd8 100644 --- 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,11 +1,22 @@ - - + + +
{{'PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
+ + +
{{'PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
+
{{'PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
+ + +
+ + + + +
{{'PROCESS-ATTACHMENT.EMPTY-LIST.HEADER' | translate}}
+ + @@ -14,11 +25,8 @@ - + - - + + \ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..9679f9fd00 --- /dev/null +++ b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.scss @@ -0,0 +1,52 @@ +adf-datatable /deep/ .column-header { + color: #232323; + font-size: 15px; +} + +adf-datatable /deep/ .data-cell { + cursor: pointer !important; +} + +.adf-attachment-list-loading-margin { + margin-left: calc((100% - 100px) / 2); + margin-right: calc((100% - 100px) / 2); +} + +adf-empty-list-header /deep/ div { + height: 32px; + opacity: 0.26 !important; + font-family: Muli, Helvetica, Arial, sans-serif; + font-size: 24px; + line-height: 1.33; + letter-spacing: -1px; + color: #000000; +} + +.adf-empty-list-drag_drop { + height: 56px; + opacity: 0.54; + font-family: Muli, Helvetica, Arial, sans-serif; + font-size: 56px; + line-height: 1; + letter-spacing: -2px; + color: #000000; + margin-top: 40px !important; +} + +.adf-empty-list__any-files-here-to-add { + height: 24px; + opacity: 0.54; + font-family: Muli, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + letter-spacing: -0.4px; + color: #000000; + margin-top: 17px; +} + +.adf-empty-list__empty_doc_lib { + width: 565px; + height: 161px; + object-fit: contain; + margin-top: 17px; +} \ No newline at end of file diff --git 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 index 762d8607e6..52cfa45404 100644 --- 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 { SimpleChange } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MdProgressSpinnerModule } from '@angular/material'; import { By } from '@angular/platform-browser'; @@ -52,7 +52,8 @@ describe('ProcessAttachmentListComponent', () => { providers: [ { provide: AlfrescoTranslationService, useClass: TranslationMock }, ActivitiContentService - ] + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); })); @@ -168,6 +169,39 @@ describe('ProcessAttachmentListComponent', () => { }); })); + it('should display all actions if attachements are not read only', () => { + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({ 'processInstanceId': change }); + + fixture.detectChanges(); + let actionButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="action_menu_0"]'); + actionButton.click(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + let actionMenu = fixture.debugElement.nativeElement.querySelectorAll('button.mat-menu-item').length; + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="View"]')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="Remove"]')).not.toBeNull(); + expect(actionMenu).toBe(3); + }); + }); + + it('should not display remove action if attachments are read only', () => { + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({ 'processInstanceId': change }); + component.disabled = true; + + fixture.detectChanges(); + let actionButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="action_menu_0"]'); + actionButton.click(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + let actionMenu = fixture.debugElement.nativeElement.querySelectorAll('button.mat-menu-item').length; + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="View"]')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="Remove"]')).toBeNull(); + expect(actionMenu).toBe(2); + }); + }); + it('should show the empty list component when the attachments list is empty', async(() => { getProcessRelatedContentSpy.and.returnValue(Observable.of({ 'size': 0, @@ -179,7 +213,39 @@ describe('ProcessAttachmentListComponent', () => { component.ngOnChanges({'processInstanceId': change}); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER'); + expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY.HEADER'); + }); + })); + + 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('PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE'); + }); + })); + + it('should show the empty list component when the attachments list is empty for completed process', async(() => { + getProcessRelatedContentSpy.and.returnValue(Observable.of({ + 'size': 0, + 'total': 0, + 'start': 0, + 'data': [] + })); + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({'processInstanceId': change}); + component.disabled = true; + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('PROCESS-ATTACHMENT.EMPTY-LIST.HEADER'); }); })); diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.ts b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.ts index 72c7071239..baaf5edd8c 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/process-attachment-list.component.ts @@ -21,7 +21,7 @@ import { ContentService, ThumbnailService } from 'ng2-alfresco-core'; @Component({ selector: 'adf-process-attachment-list', - styleUrls: ['./process-attachment-list.component.css'], + styleUrls: ['./process-attachment-list.component.scss'], templateUrl: './process-attachment-list.component.html' }) export class ProcessAttachmentListComponent implements OnChanges { @@ -29,6 +29,9 @@ export class ProcessAttachmentListComponent implements OnChanges { @Input() processInstanceId: string; + @Input() + disabled: boolean = false; + @Output() attachmentClick = new EventEmitter(); @@ -38,6 +41,9 @@ export class ProcessAttachmentListComponent implements OnChanges { @Output() error: EventEmitter = new EventEmitter(); + @Input() + emptyListImageUrl: string = require('./../assets/images/empty_doc_lib.svg'); + attachments: any[] = []; isLoading: boolean = true; @@ -131,9 +137,12 @@ export class ProcessAttachmentListComponent implements OnChanges { event.value.actions = [ viewAction, - removeAction, downloadAction ]; + + if (!this.disabled) { + event.value.actions.splice(1, 0, removeAction); + } } onExecuteRowAction(event: any) { @@ -173,4 +182,8 @@ export class ProcessAttachmentListComponent implements OnChanges { } ); } + + isDisabled(): boolean { + return this.disabled; + } } diff --git a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts index 6239eb639d..82b5cd1a5b 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/process-instance-variables.component.spec.ts @@ -164,14 +164,6 @@ describe('ProcessInstanceVariablesComponent', () => { component.ngOnChanges({ 'processInstanceId': nullChange }); expect(getVariablesSpy).not.toHaveBeenCalled(); }); - - it('should set a placeholder message when processInstanceId changed to null', () => { - component.ngOnChanges({ 'processInstanceId': nullChange }); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty'); - }); - }); }); describe('Add variable', () => { diff --git a/ng2-components/ng2-activiti-processlist/src/i18n/en.json b/ng2-components/ng2-activiti-processlist/src/i18n/en.json index 0e2383e288..2cdca83784 100644 --- a/ng2-components/ng2-activiti-processlist/src/i18n/en.json +++ b/ng2-components/ng2-activiti-processlist/src/i18n/en.json @@ -104,5 +104,17 @@ "LOAD_PROCESS_DEFS": "Could not load process definitions, please check you have access.", "START": "Could not start new process instance, please check you have permission." } + }, + "PROCESS-ATTACHMENT": { + "EMPTY": { + "HEADER": "This list is empty", + "DRAG-AND-DROP": { + "TITLE": "Drag and drop", + "SUBTITLE": "any files here to add" + } + }, + "EMPTY-LIST": { + "HEADER": "No documents are available" + } } } diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md index dc719bb90f..4679ef396c 100644 --- a/ng2-components/ng2-activiti-tasklist/README.md +++ b/ng2-components/ng2-activiti-tasklist/README.md @@ -379,6 +379,7 @@ This component displays attached documents on a specified task | Name | Type | Description | | --- | --- | --- | | taskId | string | (**required**): The ID of the task to display | +| disabled | boolean | false | Disable/Enable read only mode for attachement list | ### Events diff --git a/ng2-components/ng2-activiti-tasklist/src/assets/images/empty_doc_lib.svg b/ng2-components/ng2-activiti-tasklist/src/assets/images/empty_doc_lib.svg new file mode 100644 index 0000000000..866acd527b --- /dev/null +++ b/ng2-components/ng2-activiti-tasklist/src/assets/images/empty_doc_lib.svg @@ -0,0 +1,208 @@ + + + + empty_doc_lib + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.css b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.css deleted file mode 100644 index 88e06d2740..0000000000 --- a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.css +++ /dev/null @@ -1,13 +0,0 @@ -adf-datatable >>> .column-header { - color: #232323; - font-size: 15px; -} - -adf-datatable >>> .data-cell { - cursor: pointer !important; -} - -.adf-attachment-list-loading-margin { - margin-left: calc((100% - 100px) / 2); - margin-right: calc((100% - 100px) / 2); -} \ No newline at end of file diff --git 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 index d0c9e62d17..783b6a85e4 100644 --- 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,11 +1,22 @@ - - + + +
{{'TASK-ATTACHMENT.EMPTY.HEADER' | translate}}
+ + +
{{'TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
+
{{'TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
+ + +
+ + + + +
{{'TASK-ATTACHMENT.EMPTY-LIST.HEADER' | translate}}
+ + @@ -14,11 +25,8 @@ - + - + \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.css b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss similarity index 62% rename from ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.css rename to ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss index 9a8fc48a47..c062ef4a15 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.css +++ b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.scss @@ -1,10 +1,18 @@ -.empty-list_empty_template { - text-align: center; - margin-top: 20px; - margin-bottom: 20px; +adf-datatable /deep/ .column-header { + color: #232323; + font-size: 15px; } -.empty-list__this-space-is-empty { +adf-datatable /deep/ .data-cell { + cursor: pointer !important; +} + +.adf-attachment-list-loading-margin { + margin-left: calc((100% - 100px) / 2); + margin-right: calc((100% - 100px) / 2); +} + +adf-empty-list-header /deep/ div { height: 32px; opacity: 0.26; font-family: Muli, Helvetica, Arial, sans-serif; @@ -14,7 +22,7 @@ color: #000000; } -.empty-list__drag-drop { +.adf-empty-list-drag_drop { height: 56px; opacity: 0.54; font-family: Muli, Helvetica, Arial, sans-serif; @@ -25,7 +33,7 @@ margin-top: 40px; } -.empty-list__any-files-here-to-add { +.adf-empty-list__any-files-here-to-add { height: 24px; opacity: 0.54; font-family: Muli, Helvetica, Arial, sans-serif; @@ -36,9 +44,9 @@ margin-top: 17px; } -.empty-list__empty_doc_lib { +.adf-empty-list__empty_doc_lib { width: 565px; height: 161px; object-fit: contain; margin-top: 17px; -} +} \ No newline at end of file diff --git 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 index c4ad16e1f9..7ddcb55b88 100644 --- 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 { SimpleChange } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { MdProgressSpinnerModule } from '@angular/material'; import { By } from '@angular/platform-browser'; @@ -51,7 +51,8 @@ describe('TaskAttachmentList', () => { ], providers: [ ActivitiContentService - ] + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); let translateService: AlfrescoTranslationService = TestBed.get(AlfrescoTranslationService); @@ -164,6 +165,39 @@ describe('TaskAttachmentList', () => { }); })); + it('should display all actions if attachements are not read only', () => { + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({'taskId': change}); + fixture.detectChanges(); + + let actionButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="action_menu_0"]'); + actionButton.click(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + let actionMenu = fixture.debugElement.nativeElement.querySelectorAll('button.mat-menu-item').length; + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="View"]')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="Remove"]')).not.toBeNull(); + expect(actionMenu).toBe(3); + }); + }); + + it('should not display remove action if attachments are read only', () => { + let change = new SimpleChange(null, '123', true); + component.ngOnChanges({'taskId': change}); + component.disabled = true; + fixture.detectChanges(); + + let actionButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="action_menu_0"]'); + actionButton.click(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + let actionMenu = fixture.debugElement.nativeElement.querySelectorAll('button.mat-menu-item').length; + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="View"]')).not.toBeNull(); + expect(fixture.debugElement.nativeElement.querySelector('[data-automation-id="Remove"]')).toBeNull(); + expect(actionMenu).toBe(2); + }); + }); + it('should show the empty list component when the attachments list is empty', async(() => { getTaskRelatedContentSpy.and.returnValue(Observable.of({ 'size': 0, @@ -176,7 +210,40 @@ describe('TaskAttachmentList', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER'); + expect(fixture.nativeElement.querySelector('adf-empty-list-header').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY.HEADER'); + }); + })); + + 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('TASK-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE'); + }); + })); + + it('should show the empty list component when the attachments list is empty for completed task', 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-header').innerText.trim()).toEqual('TASK-ATTACHMENT.EMPTY-LIST.HEADER'); }); })); diff --git a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.ts index ea7b11ebf9..a275001c50 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.ts +++ b/ng2-components/ng2-activiti-tasklist/src/components/task-attachment-list.component.ts @@ -21,7 +21,7 @@ import { ContentService, ThumbnailService } from 'ng2-alfresco-core'; @Component({ selector: 'adf-task-attachment-list', - styleUrls: ['./task-attachment-list.component.css'], + styleUrls: ['./task-attachment-list.component.scss'], templateUrl: './task-attachment-list.component.html' }) export class TaskAttachmentListComponent implements OnChanges { @@ -29,6 +29,9 @@ export class TaskAttachmentListComponent implements OnChanges { @Input() taskId: string; + @Input() + disabled: boolean = false; + @Output() attachmentClick = new EventEmitter(); @@ -38,6 +41,9 @@ export class TaskAttachmentListComponent implements OnChanges { @Output() error: EventEmitter = new EventEmitter(); + @Input() + emptyListImageUrl: string = require('./../assets/images/empty_doc_lib.svg'); + attachments: any[] = []; isLoading: boolean = true; @@ -133,9 +139,12 @@ export class TaskAttachmentListComponent implements OnChanges { event.value.actions = [ viewAction, - removeAction, downloadAction ]; + + if (!this.disabled) { + event.value.actions.splice(1, 0, removeAction); + } } onExecuteRowAction(event: any) { @@ -175,4 +184,8 @@ export class TaskAttachmentListComponent implements OnChanges { } ); } + + isDisabled(): boolean { + return this.disabled; + } } diff --git a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json index 3a31c90be9..1e93742ed8 100644 --- a/ng2-components/ng2-activiti-tasklist/src/i18n/en.json +++ b/ng2-components/ng2-activiti-tasklist/src/i18n/en.json @@ -100,5 +100,17 @@ "SEARCH": { "NO_USERS": "No user found to involve" } + }, + "TASK-ATTACHMENT": { + "EMPTY": { + "HEADER": "This list is empty", + "DRAG-AND-DROP": { + "TITLE": "Drag and drop", + "SUBTITLE": "any files here to add" + } + }, + "EMPTY-LIST": { + "HEADER": "No documents are available" + } } } diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md index fd92d11206..c566a9a4d8 100644 --- a/ng2-components/ng2-alfresco-datatable/README.md +++ b/ng2-components/ng2-alfresco-datatable/README.md @@ -293,10 +293,12 @@ You can add a template that will be shown when there are no results in your data ``` -### Default Empty content template +### Custom Empty content template You can use the empty list component if you want to show the default ADF empty template: +You can use any HTML layout or Angular component as a content of the empty template section by using the special `, , ` elements: + ```html - + + "'My custom Header'" + "'My custom body'" + "'My custom footer'" + "'HTML Layout'" diff --git 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 index 1b62fe0058..b453cc0966 100644 --- 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 @@ -
-
{{ emptyMsg | translate }}
-
{{ dragDropMsg | translate }}
-
{{ additionalMsg | translate }}
- -
+
+ + + + +
\ No newline at end of file diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.scss b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.scss new file mode 100644 index 0000000000..88f7fbeb68 --- /dev/null +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.scss @@ -0,0 +1,5 @@ +.adf-empty-list_template { + text-align: center; + margin-top: 20px; + margin-bottom: 20px; +} diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.spec.ts index 6ad390d198..df148ad7d2 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/empty-list.component.spec.ts @@ -41,27 +41,11 @@ describe('EmptyListComponentComponent', () => { expect(component).toBeDefined(); }); - it('should show the default values', async(() => { - fixture.detectChanges(); - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('ADF-DATATABLE.EMPTY.HEADER'); - expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE'); - expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE'); - expect(fixture.nativeElement.querySelector('.empty-list__empty_doc_lib').src).toContain('empty_doc_lib'); - }); - })); - it('should render the input values', async(() => { - component.emptyMsg = 'Fake empty msg'; - component.dragDropMsg = 'Fake drag drop msg'; - component.additionalMsg = 'Fake additional msg'; fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('Fake empty msg'); - expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Fake drag drop msg'); - expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('Fake additional msg'); + expect(fixture.nativeElement.querySelector('.adf-empty-list_template')).toBeDefined(); }); })); }); diff --git 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 index 23e129c773..0385a2ca5a 100644 --- 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,27 +15,11 @@ * limitations under the License. */ -import { Component, Input } from '@angular/core'; - -declare var require: any; +import { Component } from '@angular/core'; @Component({ selector: 'adf-empty-list', - styleUrls: ['./empty-list.component.css'], + styleUrls: ['./empty-list.component.scss'], templateUrl: './empty-list.component.html' }) -export class EmptyListComponent { - - @Input() - emptyListImageUrl: string = require('../../assets/images/empty_doc_lib.svg'); - - @Input() - emptyMsg: string = 'ADF-DATATABLE.EMPTY.HEADER'; - - @Input() - dragDropMsg: string = 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE'; - - @Input() - additionalMsg: string = 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE'; - -} +export class EmptyListComponent {} diff --git a/ng2-components/ng2-alfresco-documentlist/index.ts b/ng2-components/ng2-alfresco-documentlist/index.ts index 838828ec85..a5ae3d2913 100644 --- 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 { ModuleWithProviders, NgModule } from '@angular/core'; +import { ModuleWithProviders, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core'; import { DataTableModule } from 'ng2-alfresco-datatable'; @@ -109,7 +109,8 @@ export const DOCUMENT_LIST_PROVIDERS: any[] = [ DataTableModule, ...DOCUMENT_LIST_DIRECTIVES, MaterialModule - ] + ], + schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class DocumentListModule { /** @deprecated in 1.8.0 */ diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts index 8c2f6255e8..7fe30d8868 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { DebugElement, EventEmitter } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, DebugElement, EventEmitter } from '@angular/core'; import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; import { By } from '@angular/platform-browser'; @@ -86,7 +86,8 @@ describe('ContentNodeSelectorComponent', () => { DocumentListService, SearchService, ...plusProviders - ] + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }); } diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css index f2075a3d7d..fac54f630d 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css @@ -59,3 +59,13 @@ flex-direction: row; height: 100%; } + +adf-empty-list-header >>>>div { + height: 32px; + opacity: 0.26 !important; + font-family: Muli, Helvetica, Arial, sans-serif; + font-size: 24px; + line-height: 1.33; + letter-spacing: -1px; + color: #000000; +} \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html index 3c8d79d7eb..3f71cbacd8 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html @@ -21,8 +21,10 @@
- + + +
{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}
+ diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts index df06c3e707..c303ca4d6c 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { NgZone, SimpleChange, TemplateRef } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, NgZone, SimpleChange, TemplateRef } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core'; import { DataColumn, DataTableComponent } from 'ng2-alfresco-datatable'; @@ -61,7 +61,8 @@ describe('DocumentList', () => { providers: [ DocumentListService, {provide: NgZone, useValue: zone} - ] + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); }));