inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

#1176 improve responsiveness task list and process list (#1235)

Browse Source
This commit is contained in:
Mario Romano
2016-12-13 15:32:31 +00:00
committed by Denys Vuika
parent 5392fa5452
commit 6c7e28a83f
11 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell-ng2/app/components/activiti/activiti-demo.component.css
View File

@@ -10,9 +10,13 @@
.task-column { .task-column {
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
border: solid 2px rgb(31,188,210); border: solid 2px rgb(31, 188, 210);
}
.list-column {
width: 320px;
} }
.mdl-layout__header { .mdl-layout__header {
z-index: 1; z-index: 1;
} }

4
demo-shell-ng2/app/components/activiti/activiti-demo.component.html
View File

@@ -24,7 +24,7 @@
<activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)" <activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
#activitifilter></activiti-filters> #activitifilter></activiti-filters>
</div> </div>
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp"> <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
<span>Task List</span> <span>Task List</span>
<activiti-tasklist *ngIf="taskFilter?.hasFilter()" [appId]="taskFilter.appId" <activiti-tasklist *ngIf="taskFilter?.hasFilter()" [appId]="taskFilter.appId"
[processDefinitionKey]="taskFilter.filter.processDefinitionKey" [processDefinitionKey]="taskFilter.filter.processDefinitionKey"
@@ -59,7 +59,7 @@
(filterClick)="onProcessFilterClick($event)" (filterClick)="onProcessFilterClick($event)"
(onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters> (onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
</div> </div>
<div class="mdl-cell mdl-cell--3-col task-column"> <div class="mdl-cell mdl-cell--3-col task-column list-column">
<span>Process List</span> <span>Process List</span>
<activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId" <activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
[processDefinitionKey]="processFilter.filter.processDefinitionKey" [processDefinitionKey]="processFilter.filter.processDefinitionKey"

4
demo-shell-ng2/app/components/activiti/activiti-demo.component.ts
View File

@@ -109,8 +109,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
this.dataProcesses = new ObjectDataTableAdapter( this.dataProcesses = new ObjectDataTableAdapter(
[], [],
[ [
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column'}, {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden'} {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
] ]
); );

1
ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts
View File

@@ -81,7 +81,6 @@ export class FormFieldComponent implements OnInit, OnDestroy {
let instance = <WidgetComponent>this.componentRef.instance; let instance = <WidgetComponent>this.componentRef.instance;
instance.field = this.field; instance.field = this.field;
instance.fieldChanged.subscribe(field => { instance.fieldChanged.subscribe(field => {
console.log('WidgetComponent.fieldChanged was used only to trigger visibility engine, components should do that internally if needed');
if (field && field.form) { if (field && field.form) {
this.visibilityService.refreshVisibility(field.form); this.visibilityService.refreshVisibility(field.form);
} }

16
ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.css
View File

@@ -1,3 +1,15 @@
:host h1 { alfresco-datatable >>> .column-header {
font-size:22px color: #232323;
font-size: 15px;
}
alfresco-datatable >>> .data-cell {
cursor: pointer !important;
}
alfresco-datatable >>> .cell-value{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
} }

14
ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts
View File

@@ -31,7 +31,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
let fakeGlobalProcesses = [ let fakeGlobalProcesses = [
new ProcessInstance({ new ProcessInstance({
id: 1, name: 'fake-long-name-fake-long-name-fake-long-name-fak50-long-name', id: 1, name: 'process-name',
processDefinitionId: 'fakeprocess:5:7507', processDefinitionId: 'fakeprocess:5:7507',
processDefinitionKey: 'fakeprocess', processDefinitionKey: 'fakeprocess',
processDefinitionName: 'Fake Process Name', processDefinitionName: 'Fake Process Name',
@@ -126,8 +126,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
fixture.detectChanges(); fixture.detectChanges();
@@ -142,8 +141,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
fixture.detectChanges(); fixture.detectChanges();
@@ -190,7 +188,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
@@ -238,7 +235,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
@@ -255,7 +251,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
@@ -272,7 +267,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
@@ -289,7 +283,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });
@@ -306,7 +299,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done(); done();
}); });

8
ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
View File

@@ -26,7 +26,7 @@ import { ActivitiProcessService } from '../services/activiti-process.service';
@Component({ @Component({
selector: 'activiti-process-instance-list', selector: 'activiti-process-instance-list',
moduleId: module.id, moduleId: module.id,
styleUrls: [ './activiti-processlist.component.css' ], styleUrls: ['./activiti-processlist.component.css'],
templateUrl: './activiti-processlist.component.html' templateUrl: './activiti-processlist.component.html'
}) })
export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges { export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
@@ -69,7 +69,8 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true} {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
]; ];
constructor(private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) { constructor(private processService: ActivitiProcessService,
private translate: AlfrescoTranslationService) {
if (translate !== null) { if (translate !== null) {
translate.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/dist/src'); translate.addTranslationFolder('ng2-activiti-processlist', 'node_modules/ng2-activiti-processlist/dist/src');
} }
@@ -216,9 +217,6 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
private optimizeNames(instances: any[]) { private optimizeNames(instances: any[]) {
instances = instances.map(t => { instances = instances.map(t => {
t.obj.name = t.obj.name || 'No name'; t.obj.name = t.obj.name || 'No name';
if (t.obj.name.length > 50) {
t.obj.name = t.obj.name.substring(0, 50) + '...';
}
return t; return t;
}); });
return instances; return instances;

16
ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.css
View File

@@ -1,3 +1,15 @@
alfresco-datatable >>> .data-cell { alfresco-datatable >>> .column-header {
cursor: pointer; color: #232323;
font-size: 15px;
}
alfresco-datatable >>> .data-cell {
cursor: pointer !important;
}
alfresco-datatable >>> .cell-value{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
} }

4
ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.html
View File

@@ -2,8 +2,8 @@
<div *ngIf="requestNode"> <div *ngIf="requestNode">
<div *ngIf="!isListEmpty()"> <div *ngIf="!isListEmpty()">
<alfresco-datatable <alfresco-datatable
[data]="data" [data]="data"
(rowClick)="onRowClick($event)"> (rowClick)="onRowClick($event)">
</alfresco-datatable> </alfresco-datatable>
</div> </div>
<div *ngIf="isListEmpty()"> <div *ngIf="isListEmpty()">

29
ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.spec.ts
View File

@@ -29,7 +29,7 @@ describe('ActivitiTaskList', () => {
let fakeGlobalTask = [ let fakeGlobalTask = [
{ {
id: 14, name: 'fake-long-name-fake-long-name-fake-long-name-fak50-long-name', id: 14, name: 'task-name',
processDefinitionId: 'fakeprocess:5:7507', processDefinitionId: 'fakeprocess:5:7507',
processDefinitionKey: 'fakeprocess', processDefinitionKey: 'fakeprocess',
processDefinitionName: 'Fake Process Name', processDefinitionName: 'Fake Process Name',
@@ -123,8 +123,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
component.ngOnInit(); component.ngOnInit();
@@ -141,8 +140,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
component.ngOnInit(); component.ngOnInit();
@@ -177,8 +175,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
component.reload(); component.reload();
@@ -228,8 +225,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
@@ -245,8 +241,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
@@ -262,8 +257,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
@@ -279,8 +273,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
@@ -296,8 +289,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });
@@ -313,8 +305,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined(); expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('fake-long-name-fake-long-name-fake-long-name-fak50...'); expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
expect(component.data.getRows()[1].getValue('name')).toEqual('Nameless task');
done(); done();
}); });

5
ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
View File

@@ -226,10 +226,7 @@ export class ActivitiTaskList implements OnInit, OnChanges {
*/ */
private optimizeNames(istances: any[]) { private optimizeNames(istances: any[]) {
istances = istances.map(t => { istances = istances.map(t => {
t.obj.name = t.obj.name || 'Nameless task'; t.obj.name = t.obj.name || 'No name';
if (t.obj.name.length > 50) {
t.obj.name = t.obj.name.substring(0, 50) + '...';
}
return t; return t;
}); });
return istances; return istances;