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

[ADF-3586] Refactor Process List page and fix query bugs (#3868)

Browse Source
This commit is contained in:
davidcanonieto 2018-10-11 22:31:27 +01:00 committed by Eugenio Romano
parent b89fefcc9f
commit a9245b5ef9
4 changed files with 99 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo-shell/resources/i18n/en.json
View File

@ -230,9 +230,12 @@
}
},
"PROCESS_LIST_DEMO": {
"APP_ID_REQUIRED_ERROR": "Insert App ID",
"APP_ID_TYPE_ERROR": "App ID must be a number"
"ERROR_MESSAGE": {
"APP_ID_REQUIRED_ERROR": "Insert App ID",
"APP_ID_TYPE_ERROR": "App ID must be a number",
"NUMBER_GREATER_THAN": "Value must be greater than or equal to {{ value }}"
}
},
"GROUP-TITLE1-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION ONE",
"GROUP-TITLE2-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION TWO"
}
}

51
demo-shell/src/app/components/process-list-demo/process-list-demo.component.html
View File

@ -8,10 +8,13 @@
class="form-control"
[formControl]="processAppId">
<mat-error *ngIf="processAppId.hasError('required')">
{{ 'PROCESS_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
</mat-error>
<mat-error *ngIf="processAppId.hasError('pattern')">
{{ 'PROCESS_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
</mat-error>
<mat-error *ngIf="processAppId.hasError('min')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
</mat-error>
</mat-form-field>
@ -25,15 +28,7 @@
</mat-form-field>
<mat-form-field>
<mat-label>ProcessInstanceId</mat-label>
<input
matInput
class="form-control"
[formControl]="processInstanceId">
</mat-form-field>
<mat-form-field>
<mat-label>Status</mat-label>
<mat-label>State</mat-label>
<mat-select
class="form-control"
[formControl]="processState">
@ -50,6 +45,35 @@
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Items per page</mat-label>
<input
matInput
class="form-control"
[formControl]="processSize">
<mat-error *ngIf="processSize.hasError('min')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
</mat-error>
<mat-error *ngIf="processSize.hasError('pattern')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Page</mat-label>
<input
matInput
class="form-control"
[formControl]="processPage">
<mat-error *ngIf="processPage.hasError('min')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
</mat-error>
<mat-error *ngIf="processPage.hasError('pattern')">
{{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
</mat-error>
</mat-form-field>
<div class="adf-reset-button">
<button mat-raised-button (click)="resetProcessForm()">Reset</button>
</div>
@ -61,9 +85,10 @@
#processList
[appId]="appId"
[processDefinitionId]="processDefId"
[processInstanceId]="instanceId"
[state]="state"
[sort]="sort"
[page]="page"
[size]="size"
[presetColumn]="presetColumn">
<data-columns>
<data-column key="ended" title="ADF_PROCESS_LIST.PROPERTIES.STATUS">
@ -71,6 +96,8 @@
<div title="{{getStatus(entry.row.obj.ended)}}">{{getStatus(entry.row.obj.ended)}}</div>
</ng-template>
</data-column>
<data-column key="started" title="Started"></data-column>
<data-column key="processDefinitionId" title="Process Definition Id"></data-column>
</data-columns>
</adf-process-instance-list>

13
demo-shell/src/app/components/process-list-demo/process-list-demo.component.scss
View File

@ -1,12 +1,15 @@
.process-list-inputs {
margin-top: 100px;
margin-bottom: 50px;
display: flex;
justify-content: space-evenly;
margin: 20px auto 0;
max-width: 1200px;
& mat-form-field {
margin: 20px 5px;
width: calc(100% * (1/4) - 10px);
}
}
.adf-reset-button {
margin-top: 50px;
margin-bottom: 50px;
display: flex;
justify-content: center;
}

66
demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts
View File

@ -27,21 +27,18 @@ import { debounceTime } from 'rxjs/operators';
export class ProcessListDemoComponent implements OnInit {
DEFAULT_SIZE = 20;
minValue = 1;
processListForm: FormGroup;
defaultAppId: number;
appId: number;
name: string;
processDefId: string;
instanceId: number|string;
state: string;
sort: string;
size: number = this.DEFAULT_SIZE;
page: number = 0;
presetColumn = 'default';
@ -61,22 +58,27 @@ export class ProcessListDemoComponent implements OnInit {
}
ngOnInit() {
this.resetQueryParameters();
if (this.route) {
this.route.params.forEach((params: Params) => {
this.defaultAppId = params['id'] ? +params['id'] : 0;
if (params['id']) {
this.appId = params['id'];
}
});
}
this.appId = this.defaultAppId;
this.buildForm();
}
buildForm() {
this.processListForm = this.formBuilder.group({
processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
processAppId: new FormControl(this.appId, [Validators.required, Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
processDefinitionId: new FormControl(''),
processInstanceId: new FormControl(''),
processState: new FormControl(''),
processSort: new FormControl('')
processSort: new FormControl(''),
processSize: new FormControl('', [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
processPage: new FormControl('', [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)])
});
this.processListForm.valueChanges
@ -93,11 +95,21 @@ export class ProcessListDemoComponent implements OnInit {
filterProcesses(processFilter: any) {
this.appId = processFilter.processAppId;
this.name = processFilter.processName;
this.processDefId = processFilter.processDefinitionId;
this.instanceId = processFilter.processInstanceId;
this.state = processFilter.processState;
if (!processFilter.processState) {
this.state = this.stateOptions[0].value;
}
this.sort = processFilter.processSort;
if (processFilter.processSize) {
this.size = parseInt(processFilter.processSize, 10);
}
if (processFilter.processPage) {
let pageValue = parseInt(processFilter.processPage, 10);
this.page = pageValue > 0 ? pageValue - 1 : pageValue;
} else {
this.page = 0;
}
}
isFormValid() {
@ -106,6 +118,16 @@ export class ProcessListDemoComponent implements OnInit {
resetProcessForm() {
this.processListForm.reset();
this.resetQueryParameters();
}
resetQueryParameters() {
this.appId = null;
this.processDefId = null;
this.state = this.stateOptions[0].value;
this.sort = null;
this.size = this.DEFAULT_SIZE;
this.page = null;
}
getStatus(ended: Date) {
@ -120,10 +142,6 @@ export class ProcessListDemoComponent implements OnInit {
return this.processListForm.get('processDefinitionId');
}
get processInstanceId(): AbstractControl {
return this.processListForm.get('processInstanceId');
}
get processState(): AbstractControl {
return this.processListForm.get('processState');
}
@ -131,4 +149,12 @@ export class ProcessListDemoComponent implements OnInit {
get processSort(): AbstractControl {
return this.processListForm.get('processSort');
}
get processSize(): AbstractControl {
return this.processListForm.get('processSize');
}
get processPage(): AbstractControl {
return this.processListForm.get('processPage');
}
}