mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3749] Process Filter Component - APS2 (#3998)
* [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
committed by
Eugenio Romano
Eugenio Romano
parent
86ae2f5c2b
commit
1387aff0f4
@@ -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"
|
||||
|
||||
@@ -5,3 +5,7 @@
|
||||
.app-process-cloud-spacing {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user