inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +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

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

@@ -10,7 +10,11 @@
.task-column {
background-color: #f5f5f5;
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 {

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)"
#activitifilter></activiti-filters>
</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>
<activiti-tasklist *ngIf="taskFilter?.hasFilter()" [appId]="taskFilter.appId"
[processDefinitionKey]="taskFilter.filter.processDefinitionKey"
@@ -59,7 +59,7 @@
(filterClick)="onProcessFilterClick($event)"
(onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
</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>
<activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
[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(
[],
[
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column'},
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden'}
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{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;
instance.field = this.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) {
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 {
font-size:22px
alfresco-datatable >>> .column-header {
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 = [
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',
processDefinitionKey: 'fakeprocess',
processDefinitionName: 'Fake Process Name',
@@ -126,8 +126,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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()[0].getValue('name')).toEqual('No name');
done();
});
fixture.detectChanges();
@@ -142,8 +141,7 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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()[0].getValue('name')).toEqual('No name');
done();
});
fixture.detectChanges();
@@ -190,7 +188,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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');
done();
});
@@ -238,7 +235,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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');
done();
});
@@ -255,7 +251,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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');
done();
});
@@ -272,7 +267,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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');
done();
});
@@ -289,7 +283,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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');
done();
});
@@ -306,7 +299,6 @@ describe('ActivitiProcessInstanceListComponent', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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');
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({
selector: 'activiti-process-instance-list',
moduleId: module.id,
styleUrls: [ './activiti-processlist.component.css' ],
styleUrls: ['./activiti-processlist.component.css'],
templateUrl: './activiti-processlist.component.html'
})
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}
];
constructor(private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) {
constructor(private processService: ActivitiProcessService,
private translate: AlfrescoTranslationService) {
if (translate !== null) {
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[]) {
instances = instances.map(t => {
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 instances;

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

@@ -1,3 +1,15 @@
alfresco-datatable >>> .data-cell {
cursor: pointer;
alfresco-datatable >>> .column-header {
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="!isListEmpty()">
<alfresco-datatable
[data]="data"
(rowClick)="onRowClick($event)">
[data]="data"
(rowClick)="onRowClick($event)">
</alfresco-datatable>
</div>
<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 = [
{
id: 14, name: 'fake-long-name-fake-long-name-fake-long-name-fak50-long-name',
id: 14, name: 'task-name',
processDefinitionId: 'fakeprocess:5:7507',
processDefinitionKey: 'fakeprocess',
processDefinitionName: 'Fake Process Name',
@@ -123,8 +123,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
done();
});
component.ngOnInit();
@@ -141,8 +140,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
done();
});
component.ngOnInit();
@@ -177,8 +175,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[0].getValue('name')).toEqual('No name');
done();
});
component.reload();
@@ -228,8 +225,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done();
});
@@ -245,8 +241,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done();
});
@@ -262,8 +257,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done();
});
@@ -279,8 +273,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done();
});
@@ -296,8 +289,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
done();
});
@@ -313,8 +305,7 @@ describe('ActivitiTaskList', () => {
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
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('Nameless task');
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
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[]) {
istances = istances.map(t => {
t.obj.name = t.obj.name || 'Nameless task';
if (t.obj.name.length > 50) {
t.obj.name = t.obj.name.substring(0, 50) + '...';
}
t.obj.name = t.obj.name || 'No name';
return t;
});
return istances;