[ADF-3308] Process list filter by fields (#3588)

* process list component created

* process list renamed

* routing fix
This commit is contained in:
bbcodrin 2018-07-20 18:54:20 +03:00 committed by Eugenio Romano
parent b015594de6
commit 855fdd8f48
9 changed files with 236 additions and 1 deletions

View File

@ -57,6 +57,7 @@
"BREADCRUMB": "Breadcrumb",
"NOTIFICATIONS": "Notifications",
"TASK_LIST": "Task List",
"PROCESS_LIST": "Process List",
"CARD_VIEW": "CardView",
"PROCESS_SERVICES": "Process Services",
"LOGIN": "Login",
@ -210,5 +211,9 @@
"TASK_LIST_DEMO": {
"APP_ID_REQUIRED_ERROR": "Insert App Id",
"APP_ID_TYPE_ERROR": "App Id must be a number"
},
"PROCESS_LIST_DEMO": {
"APP_ID_REQUIRED_ERROR": "Insert App Id",
"APP_ID_TYPE_ERROR": "App Id must be a number"
}
}

View File

@ -53,12 +53,14 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
import { PreviewService } from './services/preview.service';
import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { ReportIssueComponent } from './components/report-issue/report-issue.component';
import { CardViewComponent } from './components/card-view/card-view.component';
import { HeaderDataComponent } from './components/header-data/header-data.component';
import { HeaderDataService } from './components/header-data/header-data.service';
@NgModule({
imports: [
BrowserModule,
@ -116,6 +118,7 @@ import { HeaderDataService } from './components/header-data/header-data.service'
ContentNodeSelectorComponent,
ReportIssueComponent,
TaskListDemoComponent,
ProcessListDemoComponent,
HeaderDataComponent
],
providers: [

View File

@ -50,6 +50,7 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { CardViewComponent } from './components/card-view/card-view.component';
import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
@ -263,6 +264,16 @@ export const appRoutes: Routes = [
component: TaskListDemoComponent,
canActivate: [AuthGuardBpm]
},
{
path: 'process-list',
component: ProcessListDemoComponent,
canActivate: [AuthGuardBpm]
},
{
path: 'process-list/:id',
component: ProcessListDemoComponent,
canActivate: [AuthGuardBpm]
},
{
path: 'error/:id',
component: ErrorContentComponent

View File

@ -40,6 +40,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA'},
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
{ href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
{ href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
{ href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
{ href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },

View File

@ -0,0 +1,73 @@
<div class="process-list-inputs">
<form [formGroup]="processListForm">
<mat-form-field>
<mat-label>App Id</mat-label>
<input
matInput
class="form-control"
[formControl]="processAppId">
<mat-error *ngIf="processAppId.hasError('required')">
{{ 'PROCESS_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
</mat-error>
<mat-error *ngIf="processAppId.hasError('pattern')">
{{ 'PROCESS_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Process Name</mat-label>
<input
matInput
class="form-control"
[formControl]="processName">
</mat-form-field>
<mat-form-field>
<mat-label>ProcessDefinitionId</mat-label>
<input
matInput
class="form-control"
[formControl]="processDefinitionId">
<mat-hint>SimpleProcess:1:2</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-label>State</mat-label>
<mat-select
class="form-control"
[formControl]="processState">
<mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Sort</mat-label>
<mat-select
class="form-control"
[formControl]="processSort">
<mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
</mat-select>
</mat-form-field>
<div class="adf-reset-button">
<button mat-raised-button (click)="resetProcessForm()">Reset</button>
</div>
</form>
</div>
<div>
<adf-process-instance-list
#processList
[appId]="appId"
[processDefinitionKey]="processDefId"
[state]="state"
[sort]="sort"
[name]="name">
</adf-process-instance-list>
<adf-pagination
[target]="processList">
</adf-pagination>
</div>

View File

@ -0,0 +1,17 @@
.process-list-inputs {
margin-top: 100px;
margin-bottom: 50px;
display: flex;
justify-content: space-evenly;
}
.adf-reset-button {
margin-top: 50px;
display: flex;
justify-content: center;
}
.process-list-error-message {
color: red;
text-align: center;
}

View File

@ -0,0 +1,124 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* distributed under the License is distributed on an "AS IS" BASIS,
* limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
templateUrl: './process-list-demo.component.html',
styleUrls: [`./process-list-demo.component.scss`],
})
export class ProcessListDemoComponent implements OnInit {
processListForm: FormGroup;
defaultAppId: number;
appId: number;
name: string;
processDefId: string;
state: string;
sort: string;
stateOptions = [
{value: 'all', title: 'All'},
{value: 'active', title: 'Active'},
{value: 'completed', title: 'Completed'}
];
sortOptions = [
{value: 'created-asc', title: 'Created (asc)'},
{value: 'created-desc', title: 'Created (desc)'},
{value: 'due-asc', title: 'Due (asc)'},
{value: 'due-desc', title: 'Due (desc)'}
];
constructor(private route: ActivatedRoute,
private formBuilder: FormBuilder) {}
ngOnInit() {
if (this.route) {
this.route.params.forEach((params: Params) => {
this.defaultAppId = params['id'] ? +params['id'] : 0;
});
}
this.appId = this.defaultAppId;
this.buildForm();
}
buildForm() {
this.processListForm = this.formBuilder.group({
processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
processName: new FormControl(''),
processDefinitionId: new FormControl(''),
processState: new FormControl(''),
processSort: new FormControl('')
});
this.processListForm.valueChanges
.debounceTime(500)
.subscribe(processFilter => {
if (this.isFormValid()) {
this.filterProcesses(processFilter);
}
});
}
filterProcesses(processFilter: any) {
this.appId = processFilter.processAppId;
this.name = processFilter.processName;
this.processDefId = processFilter.processDefinitionId;
this.state = processFilter.processState;
this.sort = processFilter.processSort;
}
isFormValid() {
return this.processListForm && this.processListForm.dirty && this.processListForm.valid;
}
resetProcessForm() {
this.processListForm.reset();
}
get processAppId(): AbstractControl {
return this.processListForm.get('processAppId');
}
get processName(): AbstractControl {
return this.processListForm.get('processName');
}
get processDefinitionId(): AbstractControl {
return this.processListForm.get('processDefinitionId');
}
get processState(): AbstractControl {
return this.processListForm.get('processState');
}
get processSort(): AbstractControl {
return this.processListForm.get('processSort');
}
}

View File

@ -49,6 +49,7 @@ Renders a list containing all the process instances matched by the parameters sp
| page | `number` | 0 | The page number of the processes to fetch. |
| presetColumn | `string` | | Name of a custom schema to fetch from `app.config.json`. |
| processDefinitionKey | `string` | | The processDefinitionKey of the process. |
| processDefinitionId | `string` | | The Definition Id of the process. |
| selectFirstRow | `boolean` | true | Toggles default selection of the first row |
| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| size | `number` | [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of processes to fetch in each page. |

View File

@ -154,7 +154,7 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
this.loadLayoutPresets();
this.setupSchema();
if (this.appId) {
if (this.appId != null) {
this.reload();
}
}