inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-920] Process Header Component - Refactoring (#2073)

Browse Source 
[ADF-920] Process Header Component - Refactoring
This commit is contained in:
Deepak Paul 2017-07-18 21:55:58 +05:30 committed by Eugenio Romano
parent 9113170f2c
commit 82e8dfa3b0
7 changed files with 128 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ng2-components/ng2-activiti-processlist/README.md
View File

@ -24,6 +24,7 @@
- [Process Instance Details Header component](#process-instance-details-header-component)
* [Properties](#properties-4)
* [Events](#events-4)
- [ProcessInstanceModel](#processinstancemodel)
- [Process Instance Tasks component](#process-instance-tasks-component)
* [Properties](#properties-5)
* [Events](#events-5)
@ -239,19 +240,17 @@ This is a sub-component of the process details component, which renders some gen
processInstance="localProcessDetails">
</adf-process-instance-details>
```
![adf-process-instance-header](docs/assets/adf-process-instance-header-attachment.png)
### Properties
| Name | Type| Description |
| --- | --- | --- |
| processInstance | string | (**required**): Full details of the process instance to display information about |
| showDiagram | boolean | If the value is true the button show diagram is shown |
| processInstance | [ProcessInstanceModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-processlist/src/models/process-instance.model.ts) | (**required**): Full details of the process instance to display information about |
### Events
| Name | Description |
| --- | --- |
| showProcessDiagram | Raised when the show diagram button is clicked |
No events
## Process Instance Tasks component

BIN
ng2-components/ng2-activiti-processlist/docs/assets/adf-process-instance-header-attachment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

3
ng2-components/ng2-activiti-processlist/index.ts
View File

@ -19,7 +19,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
import { MdProgressSpinnerModule } from '@angular/material';
import { ActivitiFormModule } from 'ng2-activiti-form';
import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
import { CoreModule } from 'ng2-alfresco-core';
import { CoreModule, CardViewUpdateService } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { CreateProcessAttachmentComponent } from './src/components/create-process-attachment.component';
@ -106,6 +106,7 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
ProcessService,
ProcessUploadService,
CardViewUpdateService,
// Old Deprecated import
ActivitiProcessService

10
ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.css
View File

@ -2,10 +2,8 @@
width: 100%;
}
.activiti-label {
font-weight: bolder;
}
.activiti-process-header__value {
color: rgb(68, 138, 255);
.adf-card-container {
font-family: inherit;
height: 19em;
padding: 8px;
}

23
ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.html
View File

@ -1,22 +1,5 @@
<div *ngIf="processInstance">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col" data-automation-id="header-started-by">
<span class="activiti-label">{{ 'DETAILS.LABELS.STARTED_BY' | translate }}</span>:
<span class="activiti-process-header__value">{{getStartedByFullName()}}</span>
</div>
<div class="mdl-cell mdl-cell--4-col" data-automation-id="header-started">
<span class="activiti-label">{{ 'DETAILS.LABELS.STARTED' | translate }}</span>:
<span class="activiti-process-header__value">{{getFormatDate(processInstance.started, 'medium')}}</span>
</div>
<div class="mdl-cell mdl-cell--4-col">
<adf-process-instance-comments [processInstanceId]="processInstance?.id"></adf-process-instance-comments>
</div>
<div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="!isRunning()">
<span class="activiti-label">{{ 'DETAILS.LABELS.ENDED' | translate }}</span>:
<span class="activiti-process-header__value">{{getFormatDate(processInstance.ended, 'medium')}}</span>
</div>
<button data-automation-id="header-show-diagram" id="show-diagram-button" md-raised-button *ngIf="isShowDiagram()" [attr.disabled]="isDiagramDisabled()" (click)="showDiagramEvent()" >
{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}
</button>
</div>
<md-card class="adf-card-container">
<adf-card-view [properties]="properties"></adf-card-view>
</md-card>
</div>

122
ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.spec.ts
View File

@ -16,21 +16,21 @@
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
import { exampleProcess, processEnded } from './../assets/process.model.mock';
import { TranslationMock } from './../assets/translation.service.mock';
import { ProcessInstance } from './../models/process-instance.model';
import { AlfrescoTranslationService, CardViewUpdateService, CoreModule } from 'ng2-alfresco-core';
import { Observable } from 'rxjs/Rx';
import { ProcessInstance } from '../models/process-instance.model';
import { exampleProcess } from './../assets/process.model.mock';
import { ProcessService } from './../services/process.service';
import { ProcessCommentsComponent } from './process-comments.component';
import { ProcessInstanceHeaderComponent } from './process-instance-header.component';
describe('ProcessInstanceHeaderComponent', () => {
let service: ProcessService;
let componentHandler: any;
let component: ProcessInstanceHeaderComponent;
let fixture: ComponentFixture<ProcessInstanceHeaderComponent>;
let element: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
@ -43,16 +43,20 @@ describe('ProcessInstanceHeaderComponent', () => {
],
providers: [
ProcessService,
{provide: AlfrescoTranslationService, useClass: TranslationMock}
CardViewUpdateService
]
}).compileComponents();
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService.translate, 'get').and.callFake((key) => { return Observable.of(key); });
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProcessInstanceHeaderComponent);
component = fixture.componentInstance;
element = fixture.nativeElement;
service = TestBed.get(ProcessService);
component.processInstance = new ProcessInstance(exampleProcess);
@ -63,71 +67,97 @@ describe('ProcessInstanceHeaderComponent', () => {
window['componentHandler'] = componentHandler;
});
it('should render empty component if no form details provided', () => {
it('should render empty component if no process details provided', () => {
component.processInstance = undefined;
fixture.detectChanges();
expect(fixture.debugElement.children.length).toBe(0);
});
it('should display started by user', () => {
it('should display status as running when process is not complete', () => {
component.processInstance.ended = null;
component.ngOnChanges({});
fixture.detectChanges();
let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-started-by"] .activiti-process-header__value'));
expect(formValueEl).not.toBeNull();
expect(formValueEl.nativeElement.innerText).toBe('Bob Jones');
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-status"]');
expect(valueEl.innerText).toBe('Running');
});
it('should display empty started by user if user unknown', () => {
component.processInstance.startedBy = null;
it('should display status as completed when process is complete', () => {
component.processInstance.ended = '2016-11-03';
component.ngOnChanges({});
fixture.detectChanges();
let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-started-by"] .activiti-process-header__value'));
expect(formValueEl).not.toBeNull();
expect(formValueEl.nativeElement.innerText).toBe('');
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-status"]');
expect(valueEl.innerText).toBe('Completed');
});
it('should display process start date', () => {
component.processInstance.started = '2016-11-10T03:37:30.010+0000';
it('should display due date', () => {
component.processInstance.ended = '2016-11-03';
component.ngOnChanges({});
fixture.detectChanges();
let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-started"] .activiti-process-header__value'));
expect(formValueEl).not.toBeNull();
expect(formValueEl.nativeElement.innerText).toBe('Nov 10, 2016, 3:37:30 AM');
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-dueDate"]');
expect(valueEl.innerText).toBe('Nov 03 2016');
});
it('should display ended date if process is ended', () => {
component.processInstance.ended = '2016-11-10T03:37:30.010+0000';
it('should display placeholder if no due date', () => {
component.processInstance.ended = null;
component.ngOnChanges({});
fixture.detectChanges();
let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-status"] .activiti-process-header__value'));
expect(formValueEl).not.toBeNull();
expect(formValueEl.nativeElement.innerText).toBe('Nov 10, 2016, 3:37:30 AM');
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-dueDate"]');
expect(valueEl.innerText).toBe('No date');
});
it('should render the button show diagram as default', () => {
it('should display process category', () => {
component.processInstance.processDefinitionCategory = 'Accounts';
component.ngOnChanges({});
fixture.detectChanges();
let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-show-diagram"]'));
expect(formValueEl).not.toBeNull();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-category"]');
expect(valueEl.innerText).toBe('Accounts');
});
it('should render the button show diagram enabled as default', () => {
it('should display placeholder if no process category', () => {
component.processInstance.processDefinitionCategory = null;
component.ngOnChanges({});
fixture.detectChanges();
let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
expect(showButton).toBeDefined();
expect(showButton.disabled).toBeFalsy();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-category"]');
expect(valueEl.innerText).toBe('No category');
});
it('should render the button show diagram disabled', () => {
component.processInstance = new ProcessInstance(processEnded);
it('should display created date', () => {
component.processInstance.started = '2016-11-03';
component.ngOnChanges({});
fixture.detectChanges();
fixture.whenStable().then(() => {
let showButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#show-diagram-button');
expect(showButton).toBeDefined();
expect(showButton.disabled).toBeTruthy();
});
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-dateitem-created"]');
expect(valueEl.innerText).toBe('Nov 03 2016');
});
it('should NOT render the button show diagram is the property showDiagram is false', () => {
component.showDiagram = false;
it('should display started by', () => {
component.processInstance.startedBy = {firstName: 'Admin', lastName: 'User'};
component.ngOnChanges({});
fixture.detectChanges();
let formValueEl = fixture.debugElement.query(By.css('[data-automation-id="header-show-pippo"]'));
expect(formValueEl).toBeNull();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-assignee"]');
expect(valueEl.innerText).toBe('Admin User');
});
it('should display process instance id', () => {
component.processInstance.id = '123';
component.ngOnChanges({});
fixture.detectChanges();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-id"]');
expect(valueEl.innerText).toBe('123');
});
it('should display description', () => {
component.processInstance.processDefinitionDescription = 'Test process';
component.ngOnChanges({});
fixture.detectChanges();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-description"]');
expect(valueEl.innerText).toBe('Test process');
});
it('should display placeholder if no description', () => {
component.processInstance.processDefinitionDescription = null;
component.ngOnChanges({});
fixture.detectChanges();
let valueEl = fixture.nativeElement.querySelector('[data-automation-id="card-textitem-value-description"]');
expect(valueEl.innerText).toBe('No description');
});
});

76
ng2-components/ng2-activiti-processlist/src/components/process-instance-header.component.ts
View File

@ -15,9 +15,8 @@
* limitations under the License.
*/
import { DatePipe } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AlfrescoTranslationService, CardViewDateItemModel, CardViewItem, CardViewTextItemModel, LogService } from 'ng2-alfresco-core';
import { ProcessInstance } from '../models/process-instance.model';
declare let componentHandler: any;
@ -27,19 +26,12 @@ declare let componentHandler: any;
templateUrl: './process-instance-header.component.html',
styleUrls: ['./process-instance-header.component.css']
})
export class ProcessInstanceHeaderComponent {
@Input()
showDiagram: boolean = true;
export class ProcessInstanceHeaderComponent implements OnChanges {
@Input()
processInstance: ProcessInstance;
@Output()
onError: EventEmitter<any> = new EventEmitter<any>();
@Output()
showProcessDiagram: EventEmitter<any> = new EventEmitter<any>();
properties: CardViewItem [];
constructor(private translate: AlfrescoTranslationService,
private logService: LogService) {
@ -49,37 +41,47 @@ export class ProcessInstanceHeaderComponent {
}
}
getStartedByFullName(): string {
if (this.processInstance && this.processInstance.startedBy) {
return (this.processInstance.startedBy.firstName && this.processInstance.startedBy.firstName !== 'null'
? this.processInstance.startedBy.firstName + ' ' : '') +
this.processInstance.startedBy.lastName;
}
return '';
ngOnChanges(changes: SimpleChanges) {
this.refreshData();
}
getFormatDate(value, format: string) {
let datePipe = new DatePipe('en-US');
try {
return datePipe.transform(value, format);
} catch (err) {
this.logService.error(`ProcessListInstanceHeader: error parsing date ${value} to format ${format}`);
refreshData() {
if (this.processInstance) {
this.properties = [
new CardViewTextItemModel({label: 'Status:', value: this.getProcessStatus(), key: 'status'}),
new CardViewDateItemModel({label: 'Due Date:', value: this.processInstance.ended, format: 'MMM DD YYYY', key: 'dueDate', default: 'No date'}),
new CardViewTextItemModel({label: 'Category:', value: this.processInstance.processDefinitionCategory, key: 'category', default: 'No category'}),
new CardViewTextItemModel(
{
label: 'Created By:',
value: this.getStartedByFullName(),
key: 'assignee',
default: 'No assignee'
}),
new CardViewDateItemModel({label: 'Created:', value: this.processInstance.started, format: 'MMM DD YYYY', key: 'created'}),
new CardViewTextItemModel({label: 'Id:', value: this.processInstance.id, key: 'id'}),
new CardViewTextItemModel({label: 'Description:', value: this.processInstance.processDefinitionDescription, key: 'description', default: 'No description'})
];
}
}
getProcessStatus(): string {
if (this.processInstance) {
return this.isRunning() ? 'Running' : 'Completed';
}
}
getStartedByFullName(): string {
let fullName = '';
if (this.processInstance && this.processInstance.startedBy) {
fullName += this.processInstance.startedBy.firstName || '';
fullName += fullName ? ' ' : '';
fullName += this.processInstance.startedBy.lastName || '';
}
return fullName;
}
isRunning(): boolean {
return this.processInstance && !this.processInstance.ended;
}
isDiagramDisabled(): boolean {
return !this.isRunning() ? true : undefined;
}
showDiagramEvent() {
this.showProcessDiagram.emit({value: this.processInstance.id});
}
isShowDiagram(): boolean {
return this.showDiagram;
}
}