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

[ADF-3749] Process Filter Component - APS2 (#3998)

Browse Source 
* [ADF-3749] Created new process filter component

* [ADF-3749] Improved process filters

* [ADF-3749] Improved process filters

* [ADF-3749] Added tests

* [ADF-3749] Included filter in process list cloud demo

* [ADF-3749] Added documentation

* [ADF-3749] Improved documentation

* [ADF-3749] Added new query model and improved model names

* [][ADF-3749] Added extra documentation

* [ADF-3749] Added new key in the filter models

* [ADF-3749] Added translation support for filters

* [ADF-3749] Added new tests

* [ADF-3749] Added new translation keys
This commit is contained in:
Deepak Paul
2018-11-28 02:44:48 +05:30
committed by Eugenio Romano
parent 86ae2f5c2b
commit 1387aff0f4
19 changed files with 1068 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,6 +62,7 @@
"TASK_LIST": "Task List",
"PROCESS_LIST": "Process List",
"PROCESS_CLOUD": "Process Cloud",
"PROCESS_LIST_CLOUD": "Process List Cloud",
"CARD_VIEW": "CardView",
"PROCESS_SERVICES": "Process Services",
"LOGIN": "Login",
@@ -269,5 +270,8 @@
"TEXT": "Back to home"
}
}
},
"PROCESS_LIST_CLOUD": {
"TITLE": "PROCESS LIST CLOUD DEMO"
}
}

2
demo-shell/src/app/app.routes.ts
View File

@@ -150,7 +150,7 @@ export const appRoutes: Routes = [
]
},
{
path: 'process-cloud',
path: 'process-list-cloud',
component: ProcessListCloudExampleComponent
},
{

1
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -41,6 +41,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
{ href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
{ href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
{ href: '/process-list-cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_LIST_CLOUD' },
{ 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' },

83
demo-shell/src/app/components/cloud/process-list-cloud-example.component.html
View File

@@ -1,4 +1,11 @@
<div>PROCESS LIST CLOUD</div>
<h3>{{'PROCESS_LIST_CLOUD.TITLE' | translate}}</h3>
<adf-cloud-process-filters
[appName]="currentAppName"
[showIcons]="true"
(filterClick)="onFilterSelected($event)"
*ngIf="currentAppName">
</adf-cloud-process-filters>
<adf-cloud-app-list *ngIf="!currentAppName"
(appClick)="onAppClick($event)"></adf-cloud-app-list>
<div *ngIf="currentAppName">
@@ -6,13 +13,13 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Process Example Filters
{{filterName | translate}}
</mat-panel-title>
<mat-panel-description>
Apply one of the filters to the process list
Customise your filter
</mat-panel-description>
</mat-expansion-panel-header>
<div class="app-process-cloud-spacing">
<div>
<mat-form-field>
<mat-select placeholder="Status" [(ngModel)]="status">
<mat-option value="">
@@ -21,60 +28,32 @@
<mat-option value="RUNNING">
RUNNING
</mat-option>
<mat-option value="SUSPENDED">
SUSPENDED
<mat-option value="COMPLETED">
COMPLETED
</mat-option>
<mat-option value="CANCELLED">
CANCELLED
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [formControl]="sortFormControl">
<mat-option [value]="''">Select a column</mat-option>
<mat-option *ngFor="let column of columns" [value]="column.key">
{{column.label}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [formControl]="sortDirectionFormControl">
<mat-option [value]="''">Select a direction</mat-option>
<mat-option value="ASC">
ASC
</mat-option>
<mat-option value="DESC">
DESC
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="app-process-cloud-spacing">
<mat-form-field class="example-full-width">
<input matInput placeholder="Filter by id" [(ngModel)]="filterId">
</mat-form-field>
</div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Sorting Panel
</mat-panel-title>
<mat-panel-description>
Choose how to sort your tasks
</mat-panel-description>
</mat-expansion-panel-header>
<div class="task-cloud-demo-select">
<mat-form-field>
<mat-select placeholder="Sort Field" [(ngModel)]="sortField">
<mat-option value="id">
ID
</mat-option>
<mat-option value="name">
NAME
</mat-option>
<mat-option value="status">
STATUS
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="task-cloud-demo-select">
<mat-form-field>
<mat-select placeholder="Direction" [(ngModel)]="sortDirection">
<mat-option value="ASC">
ASC
</mat-option>
<mat-option value="DESC">
DESC
</mat-option>
</mat-select>
</mat-form-field>
</div>
<button mat-button (click)="onFilterButtonClick($event)">Apply Filter</button>
<button mat-button (click)="onClearFilters()">Clear Filter</button>
</mat-expansion-panel>
</mat-accordion>
<adf-cloud-process-list
[applicationName]="currentAppName"

4
demo-shell/src/app/components/cloud/process-list-cloud-example.component.scss
View File

@@ -5,3 +5,7 @@
.app-process-cloud-spacing {
margin: 10px;
}
mat-form-field {
margin-left: 10px;
}

62
demo-shell/src/app/components/cloud/process-list-cloud-example.component.ts
View File

@@ -15,30 +15,70 @@
* limitations under the License.
*/
import { Component, ViewChild } from '@angular/core';
import { Component, ViewChild, OnInit } from '@angular/core';
import { UserPreferencesService } from '@alfresco/adf-core';
import { ProcessListCloudComponent } from '@alfresco/adf-process-services-cloud';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-process-list-example',
templateUrl: './process-list-cloud-example.component.html',
styleUrls: ['./process-list-cloud-example.component.scss']
})
export class ProcessListCloudExampleComponent {
export class ProcessListCloudExampleComponent implements OnInit {
@ViewChild('processCloud')
processCloud: ProcessListCloudComponent;
sortFormControl: FormControl;
sortDirectionFormControl: FormControl;
currentAppName: string = '';
filterName: string = '';
status: string = '';
filterId: string = '';
sortArray: any = [];
sort: string = '';
sortArray: any[];
sortField: string;
sortDirection: string;
columns = [
{key: 'id', label: 'ID'},
{key: 'name', label: 'NAME'},
{key: 'status', label: 'STATUS'},
{key: 'startDate', label: 'START DATE'}
];
constructor(private userPreference: UserPreferencesService) {
}
ngOnInit() {
this.sortFormControl = new FormControl('');
this.sortFormControl.valueChanges.subscribe(
(sortValue) => {
this.sort = sortValue;
this.sortArray = [{
orderBy: this.sort,
direction: this.sortDirection
}];
}
);
this.sortDirectionFormControl = new FormControl('');
this.sortDirectionFormControl.valueChanges.subscribe(
(sortDirectionValue) => {
this.sortDirection = sortDirectionValue;
this.sortArray = [{
orderBy: this.sort,
direction: this.sortDirection
}];
}
);
}
onAppClick(appClicked: any) {
this.currentAppName = appClicked.name;
}
@@ -51,16 +91,16 @@ export class ProcessListCloudExampleComponent {
this.userPreference.paginationSize = event.maxItems;
}
onFilterButtonClick($event) {
let newSortParam: any = {
orderBy: this.sortField,
direction: this.sortDirection };
this.sortArray.push(newSortParam);
onClearFilters() {
this.processCloud.reload();
}
onClearFilters() {
this.sortArray = [];
this.processCloud.reload();
onFilterSelected(filter) {
this.status = filter.query.state || '';
this.sort = filter.query.sort;
this.sortDirection = filter.query.order;
this.filterName = filter.name;
this.sortDirectionFormControl.setValue(this.sortDirection);
this.sortFormControl.setValue(this.sort);
}
}