TSK-1436: replaced history table view with material table
This is done to fix the breaking api changes
This commit is contained in:
Mustapha Zorgati
parent
2a9ffa8a80
commit
eca0609add
|
|
@ -5,9 +5,19 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { HistoryRoutingModule } from './history-routing.module';
|
||||
import { TaskHistoryQueryComponent } from './task-history-query/task-history-query.component';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, HistoryRoutingModule, SharedModule, FormsModule, ReactiveFormsModule],
|
||||
imports: [
|
||||
CommonModule,
|
||||
HistoryRoutingModule,
|
||||
SharedModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatTableModule,
|
||||
MatSortModule
|
||||
],
|
||||
declarations: [TaskHistoryQueryComponent]
|
||||
})
|
||||
export class HistoryModule {}
|
||||
|
|
|
|||
|
|
@ -1,116 +1,140 @@
|
|||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="pull-right btn-group">
|
||||
<button class="btn btn-default" data-toggle="tooltip" title="Search" type="button">
|
||||
<span (click)="search()" class="material-icons md-20 blue">search</span>
|
||||
</button>
|
||||
<button class="btn btn-default" data-toggle="tooltip" title="Clear" type="button">
|
||||
<span (click)="clear()" class="material-icons md-20 blue">clear</span>
|
||||
</button>
|
||||
</div>
|
||||
<h4 class="panel-header">Taskana history query</h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div *ngIf="taskQuery" class="table table-striped">
|
||||
<form [formGroup]="taskQueryForm">
|
||||
<div class="table-header">
|
||||
<div class="table-row">
|
||||
<ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
|
||||
<div (click)="changeOrderBy(taskHeader.key); search();"
|
||||
*ngIf="filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
|
||||
class="table-cell table-cell--bold table-cell--justify">
|
||||
<span class="icon-space">
|
||||
{{getHeaderFieldDescription(taskHeader.key)}}
|
||||
</span>
|
||||
<span *ngIf="sortParameter['sort-by'] === taskHeader.key"
|
||||
[ngClass]="{'flip': sortParameter.order === sortDirection.DESC}"
|
||||
class="material-icons md-20 blue pull-right">sort</span>
|
||||
</div>
|
||||
<div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
|
||||
[ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
|
||||
class="table-cell table-cell--bold table-cell--separator">
|
||||
<span class="material-icons md-24 blue pull-right">{{toggleExpand ? 'chevron_left'
|
||||
: 'chevron_right'}}</span>
|
||||
</div>
|
||||
<div (click)="changeOrderBy(taskHeader.key); search();"
|
||||
*ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
|
||||
class="table-cell table-cell--bold table-cell--justify">
|
||||
<span class="icon-space">
|
||||
{{getHeaderFieldDescription(taskHeader.key)}}
|
||||
</span>
|
||||
<span
|
||||
*ngIf="sortParameter['sort-by'] === taskHeader.key && filterFieldsToAllowQuerying(taskHeader.key)"
|
||||
[ngClass]="{'flip': sortParameter.order === sortDirection.DESC}"
|
||||
class="material-icons md-20 blue pull-right">sort</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="table-row">
|
||||
<ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
|
||||
<div *ngIf="isDate(taskHeader.key)"
|
||||
class="table-cell table-cell--bold table-cell--justify divDate">
|
||||
<taskana-shared-date-picker (dateOutput)="updateDate($event)" [id]="'created'"
|
||||
[name]="'this.created'" formControlName="{{taskHeader.key}}"
|
||||
placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
|
||||
type="text"></taskana-shared-date-picker>
|
||||
</div>
|
||||
<div
|
||||
*ngIf="!isDate(taskHeader.key) && filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
|
||||
class="table-cell table-cell--bold table-cell--justify">
|
||||
<input (keyup.enter)="search()" class="form-control input-sm"
|
||||
formControlName="{{taskHeader.key}}"
|
||||
placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
|
||||
type="text">
|
||||
</div>
|
||||
<div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
|
||||
[ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
|
||||
class="table-cell table-cell--bold table-cell--separator">
|
||||
</div>
|
||||
<div
|
||||
*ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
|
||||
class="table-cell table-cell--bold table-cell--justify">
|
||||
<input (keyup.enter)="search()" *ngIf="filterFieldsToAllowQuerying(taskHeader.key)"
|
||||
class="form-control input-sm"
|
||||
formControlName="{{taskHeader.key}}"
|
||||
placeholder="{{getHeaderFieldDescription(taskHeader.key)}}" type="text">
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div *ngFor="let task of taskQuery" class="table-row">
|
||||
<ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
|
||||
<div *ngIf="isDate(taskHeader.key)" class="table-cell table-cell--justify">
|
||||
{{task[taskHeader.key] | dateTimeZone:'yyyy-MM-dd'}}
|
||||
</div>
|
||||
<div
|
||||
*ngIf="!isDate(taskHeader.key) && filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
|
||||
class="table-cell table-cell--justify">
|
||||
{{task[taskHeader.key]}}
|
||||
</div>
|
||||
<div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
|
||||
[ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
|
||||
class="table-cell table-cell--separator">
|
||||
</div>
|
||||
<div
|
||||
*ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand"
|
||||
class="table-cell table-cell--justify">
|
||||
{{task[taskHeader.key]}}
|
||||
</div>
|
||||
<div *ngIf="!filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand"
|
||||
class="table-cell table-cell--justify">
|
||||
<div *ngIf="task[taskHeader.key]">{{task[taskHeader.key]}}
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div *ngIf="taskQueryResource?.page" class="divTablePagination">
|
||||
<taskana-shared-pagination (changePage)="changePage($event)" [page]="taskQueryResource.page"
|
||||
[numberOfItems]="taskQuery.length"
|
||||
type="Entries"></taskana-shared-pagination>
|
||||
</div>
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-table-container">
|
||||
<table mat-table [dataSource]="data" class="example-table"
|
||||
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
|
||||
|
||||
<ng-container matColumnDef="parentBusinessProcessId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Parent BPI</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).parentBusinessProcessId}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="businessProcessId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>BPI</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).businessProcessId}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="taskId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Task Id</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskId}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="eventType">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Event type</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).eventType}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="created">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Created</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).created}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="userId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>User Id</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).userId}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="domain">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Domain</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).domain}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="workbasketKey">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Workbasket key</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).workbasketKey}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="porCompany">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj company</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porCompany}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="porSystem">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj system</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porSystem}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="porInstance">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj instance</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porInstance}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="porType">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj type</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porType}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="porValue">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj value</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porValue}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="taskClassificationKey">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification key</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationKey}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="taskClassificationCategory">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification category</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationCategory}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="attachmentClassificationKey">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Attachment Classification Key</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).attachmentClassificationKey}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="custom1">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 1</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom1}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="custom2">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 2</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom2}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="custom3">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 3</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom3}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="custom4">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 4</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom4}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="oldData">
|
||||
<th mat-header-cell *matHeaderCellDef>Old data</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldData}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="newData">
|
||||
<th mat-header-cell *matHeaderCellDef>New data</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newData}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="comment">
|
||||
<th mat-header-cell *matHeaderCellDef>Comment</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).comment}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="oldValue">
|
||||
<th mat-header-cell *matHeaderCellDef>Old value</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldValue}}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="newValue">
|
||||
<th mat-header-cell *matHeaderCellDef>New value</th>
|
||||
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newValue}}</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="getDisplayColumns()"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: getDisplayColumns()"></tr>
|
||||
</table>
|
||||
|
||||
<taskana-shared-pagination [numberOfItems]="data.length"
|
||||
[page]="pageInformation"></taskana-shared-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,12 @@
|
|||
@import '../../../theme/colors';
|
||||
|
||||
.table {
|
||||
max-height: calc(100vh - 152px);
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background-color: $light-grey;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
height: 35px;
|
||||
max-height: 35px;
|
||||
min-height: 35px;
|
||||
}
|
||||
|
||||
.divDate {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.table .btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.icon-space {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.divTablePagination {
|
||||
margin: 0 auto;
|
||||
.example-loading-shade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 56px;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Direction, Sorting, TaskHistoryQuerySortParameter } from 'app/shared/models/sorting';
|
||||
import { OrientationService } from 'app/shared/services/orientation/orientation.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Orientation } from 'app/shared/models/orientation';
|
||||
import { TaskanaQueryParameters } from 'app/shared/util/query-parameters';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { TaskHistoryEventResourceData } from 'app/shared/models/task-history-event-resource';
|
||||
import { RequestInProgressService } from 'app/shared/services/request-in-progress/request-in-progress.service';
|
||||
import { TaskHistoryEventData } from '../../shared/models/task-history-event';
|
||||
import { TaskHistoryQueryService } from '../services/task-history-query/task-history-query.service';
|
||||
import { Page } from '../../shared/models/page';
|
||||
import { MatSort, Sort } from '@angular/material/sort';
|
||||
import { QueryPagingParameter } from '../../shared/models/query-paging-parameter';
|
||||
import { PaginationComponent } from '../../shared/components/pagination/pagination.component';
|
||||
import { merge } from 'rxjs';
|
||||
import { startWith, switchMap, tap } from 'rxjs/operators';
|
||||
import { RequestInProgressService } from '../../shared/services/request-in-progress/request-in-progress.service';
|
||||
import { Pair } from '../../shared/models/pair';
|
||||
|
||||
@Component({
|
||||
selector: 'taskana-task-query',
|
||||
|
|
@ -16,214 +17,110 @@ import { TaskHistoryQueryService } from '../services/task-history-query/task-his
|
|||
styleUrls: ['./task-history-query.component.scss']
|
||||
})
|
||||
export class TaskHistoryQueryComponent implements OnInit {
|
||||
taskQueryResource: TaskHistoryEventResourceData;
|
||||
taskQuery: Array<TaskHistoryEventData>;
|
||||
taskQueryHeader = new TaskHistoryEventData();
|
||||
data: TaskHistoryEventData[] = [];
|
||||
displayedColumns: Pair<string, TaskHistoryQuerySortParameter>[] = [
|
||||
{ left: 'parentBusinessProcessId', right: TaskHistoryQuerySortParameter.PARENT_BUSINESS_PROCESS_ID },
|
||||
{ left: 'businessProcessId', right: TaskHistoryQuerySortParameter.BUSINESS_PROCESS_ID },
|
||||
{ left: 'created', right: TaskHistoryQuerySortParameter.CREATED },
|
||||
{ left: 'userId', right: TaskHistoryQuerySortParameter.USER_ID },
|
||||
{ left: 'eventType', right: TaskHistoryQuerySortParameter.EVENT_TYPE },
|
||||
{ left: 'workbasketKey', right: TaskHistoryQuerySortParameter.WORKBASKET_KEY },
|
||||
{ left: 'porType', right: TaskHistoryQuerySortParameter.POR_TYPE },
|
||||
{ left: 'porValue', right: TaskHistoryQuerySortParameter.POR_VALUE },
|
||||
{ left: 'domain', right: TaskHistoryQuerySortParameter.DOMAIN },
|
||||
{ left: 'taskId', right: TaskHistoryQuerySortParameter.TASK_ID },
|
||||
{ left: 'porCompany', right: TaskHistoryQuerySortParameter.POR_COMPANY },
|
||||
{ left: 'porSystem', right: TaskHistoryQuerySortParameter.POR_SYSTEM },
|
||||
{ left: 'porInstance', right: TaskHistoryQuerySortParameter.POR_INSTANCE },
|
||||
{ left: 'taskClassificationKey', right: TaskHistoryQuerySortParameter.TASK_CLASSIFICATION_KEY },
|
||||
{ left: 'taskClassificationCategory', right: TaskHistoryQuerySortParameter.TASK_CLASSIFICATION_CATEGORY },
|
||||
{ left: 'attachmentClassificationKey', right: TaskHistoryQuerySortParameter.ATTACHMENT_CLASSIFICATION_KEY },
|
||||
{ left: 'custom1', right: TaskHistoryQuerySortParameter.CUSTOM_1 },
|
||||
{ left: 'custom2', right: TaskHistoryQuerySortParameter.CUSTOM_2 },
|
||||
{ left: 'custom3', right: TaskHistoryQuerySortParameter.CUSTOM_3 },
|
||||
{ left: 'custom4', right: TaskHistoryQuerySortParameter.CUSTOM_4 },
|
||||
{ left: 'comment', right: undefined },
|
||||
{ left: 'oldValue', right: undefined },
|
||||
{ left: 'newValue', right: undefined },
|
||||
{ left: 'oldData', right: undefined },
|
||||
{ left: 'newData', right: undefined }
|
||||
];
|
||||
pageInformation: Page;
|
||||
|
||||
pageParameter: QueryPagingParameter = {
|
||||
page: 1,
|
||||
'page-size': 9
|
||||
};
|
||||
|
||||
// IMPORTANT: Please make sure that material table default matches with this entity.
|
||||
sortParameter: Sorting<TaskHistoryQuerySortParameter> = {
|
||||
'sort-by': TaskHistoryQuerySortParameter.CREATED,
|
||||
order: Direction.ASC
|
||||
};
|
||||
orientationSubscription: Subscription;
|
||||
taskQuerySubscription: Subscription;
|
||||
|
||||
taskQueryForm = new FormGroup({});
|
||||
|
||||
// to make this enum available for html
|
||||
sortDirection = Direction;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(PaginationComponent) pagination: PaginationComponent;
|
||||
|
||||
constructor(
|
||||
private taskQueryService: TaskHistoryQueryService,
|
||||
private orientationService: OrientationService,
|
||||
private taskHistoryQueryService: TaskHistoryQueryService,
|
||||
private requestInProgressService: RequestInProgressService
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.orientationSubscription = this.orientationService.getOrientation().subscribe((orientation: Orientation) => {
|
||||
this.performRequest();
|
||||
});
|
||||
this.initTaskQueryForm();
|
||||
}
|
||||
ngOnInit() {}
|
||||
|
||||
getHeaderFieldDescription(property: string): string {
|
||||
switch (property) {
|
||||
case 'parentBusinessProcessId':
|
||||
return 'Parent BPI';
|
||||
case 'businessProcessId':
|
||||
return 'BPI';
|
||||
case 'taskId':
|
||||
return 'Task id';
|
||||
case 'eventType':
|
||||
return 'Event type';
|
||||
case 'created':
|
||||
return 'Created';
|
||||
case 'userId':
|
||||
return 'User id';
|
||||
case 'domain':
|
||||
return 'Domain';
|
||||
case 'workbasketKey':
|
||||
return 'Workbasket key';
|
||||
case 'porCompany':
|
||||
return 'Obj company';
|
||||
case 'porSystem':
|
||||
return 'Obj system';
|
||||
case 'porInstance':
|
||||
return 'Obj instance';
|
||||
case 'porType':
|
||||
return 'Obj type';
|
||||
case 'porValue':
|
||||
return 'Obj value';
|
||||
case 'taskClassificationKey':
|
||||
return 'Classification key';
|
||||
case 'taskClassificationCategory':
|
||||
return 'Classification category';
|
||||
case 'attachmentClassificationKey':
|
||||
return 'Attachment Classification';
|
||||
case 'custom1':
|
||||
return 'Custom 1';
|
||||
case 'custom2':
|
||||
return 'Custom 2';
|
||||
case 'custom3':
|
||||
return 'Custom 3';
|
||||
case 'custom4':
|
||||
return 'Custom 4';
|
||||
case 'oldData':
|
||||
return 'Old data';
|
||||
case 'newData':
|
||||
return 'New data';
|
||||
case 'comment':
|
||||
return 'Comment';
|
||||
case 'oldValue':
|
||||
return 'Old value';
|
||||
case 'newValue':
|
||||
return 'New value';
|
||||
default:
|
||||
return property;
|
||||
}
|
||||
}
|
||||
ngAfterViewInit() {
|
||||
const sortChange$ = this.sort.sortChange.pipe(
|
||||
tap((sort) => this.updateSortParameter(sort)),
|
||||
tap(() => (this.pageParameter.page = 1))
|
||||
);
|
||||
|
||||
isDate(fieldName: string): boolean {
|
||||
return fieldName === 'created';
|
||||
}
|
||||
const pageChange$ = this.pagination.changePage.pipe(tap((newPage) => (this.pageParameter.page = newPage)));
|
||||
|
||||
filterFieldsToAllowQuerying(fieldName: string): boolean {
|
||||
if (
|
||||
!fieldName ||
|
||||
fieldName === 'oldData' ||
|
||||
fieldName === 'newData' ||
|
||||
fieldName === 'comment' ||
|
||||
fieldName === 'oldValue' ||
|
||||
fieldName === 'newValue'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
filterFieldsToShow(fieldName: string): boolean {
|
||||
if (fieldName === 'taskHistoryId' || fieldName === 'page' || fieldName === '_links') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
filterExpandGroup(fieldName: string): boolean {
|
||||
if (
|
||||
fieldName === 'custom1' ||
|
||||
fieldName === 'custom2' ||
|
||||
fieldName === 'custom3' ||
|
||||
fieldName === 'custom4' ||
|
||||
fieldName === 'oldData' ||
|
||||
fieldName === 'newData' ||
|
||||
fieldName === 'comment' ||
|
||||
fieldName === 'oldValue' ||
|
||||
fieldName === 'newValue'
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// TODO: but why?
|
||||
search() {
|
||||
this.performRequest();
|
||||
}
|
||||
|
||||
changeOrderBy(key: string) {
|
||||
if (this.filterFieldsToAllowQuerying(key)) {
|
||||
// if (this.orderBy.sortBy === key) {
|
||||
// this.orderBy.sortDirection = this.toggleSortDirection(this.orderBy.sortDirection);
|
||||
// }
|
||||
// this.orderBy.sortBy = key;
|
||||
}
|
||||
}
|
||||
|
||||
getTaskValue(key: string, task: TaskHistoryEventData): string {
|
||||
return task[key];
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.taskQueryForm.reset();
|
||||
this.performRequest();
|
||||
}
|
||||
|
||||
changePage(page) {
|
||||
TaskanaQueryParameters.page = page;
|
||||
this.performRequest();
|
||||
}
|
||||
|
||||
updateDate($event: string) {
|
||||
this.taskQueryForm.get('created').setValue($event.substring(0, 10));
|
||||
this.performRequest();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.orientationSubscription) {
|
||||
this.orientationSubscription.unsubscribe();
|
||||
}
|
||||
if (this.taskQuerySubscription) {
|
||||
this.taskQuerySubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
private toggleSortDirection(sortDirection: string): Direction {
|
||||
if (sortDirection === Direction.ASC) {
|
||||
return Direction.DESC;
|
||||
}
|
||||
return Direction.ASC;
|
||||
}
|
||||
|
||||
private performRequest() {
|
||||
this.requestInProgressService.setRequestInProgress(true);
|
||||
this.calculateQueryPages();
|
||||
this.taskQuerySubscription = this.taskQueryService
|
||||
.getTaskHistoryEvents
|
||||
// this.orderBy.sortBy.replace(/([A-Z])|([0-9])/g, (g) => `-${g[0].toLowerCase()}`),
|
||||
// this.orderBy.sortDirection,
|
||||
// new TaskHistoryEventData(this.taskQueryForm.value),
|
||||
// false
|
||||
()
|
||||
.subscribe((taskQueryResource) => {
|
||||
merge(sortChange$, pageChange$)
|
||||
.pipe(
|
||||
startWith({}),
|
||||
tap(() => this.calculateQueryPages()),
|
||||
switchMap(() => {
|
||||
this.requestInProgressService.setRequestInProgress(true);
|
||||
return this.taskHistoryQueryService.getTaskHistoryEvents(undefined, this.sortParameter, this.pageParameter);
|
||||
})
|
||||
)
|
||||
.subscribe((data) => {
|
||||
this.data = data.taskHistoryEvents;
|
||||
this.pageInformation = data.page;
|
||||
this.requestInProgressService.setRequestInProgress(false);
|
||||
console.log(taskQueryResource);
|
||||
this.taskQueryResource = taskQueryResource.taskHistoryEvents ? taskQueryResource : null;
|
||||
this.taskQuery = taskQueryResource.taskHistoryEvents ? taskQueryResource.taskHistoryEvents : null;
|
||||
});
|
||||
}
|
||||
|
||||
private initTaskQueryForm() {
|
||||
Object.keys(new TaskHistoryEventData()).forEach((key) => {
|
||||
this.taskQueryForm.addControl(key, new FormControl());
|
||||
});
|
||||
this.performRequest();
|
||||
updateSortParameter(sort: Sort): void {
|
||||
if (sort) {
|
||||
const pair: Pair<string, TaskHistoryQuerySortParameter> = this.displayedColumns.find(
|
||||
(pair) => pair.left === sort.active
|
||||
);
|
||||
if (pair) {
|
||||
this.sortParameter = {
|
||||
'sort-by': pair.right,
|
||||
order: sort.direction === 'asc' ? Direction.ASC : Direction.DESC
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this is a workaround so that the variables inside the html will be resolved correctly.
|
||||
// more details: https://stackoverflow.com/a/64448113/6501286
|
||||
convertToTaskHistoryEventData(data: TaskHistoryEventData): TaskHistoryEventData {
|
||||
return data;
|
||||
}
|
||||
|
||||
getDisplayColumns(): string[] {
|
||||
return this.displayedColumns.map((pair) => pair.left);
|
||||
}
|
||||
|
||||
private calculateQueryPages() {
|
||||
const rowHeight = 34;
|
||||
const rowHeight = 48;
|
||||
const unusedHeight = 300;
|
||||
const totalHeight = window.innerHeight;
|
||||
const cards = Math.round((totalHeight - unusedHeight) / rowHeight);
|
||||
TaskanaQueryParameters.page = TaskanaQueryParameters.page ? TaskanaQueryParameters.page : 1;
|
||||
TaskanaQueryParameters.pageSize = cards > 0 ? cards : 1;
|
||||
this.pageParameter['page-size'] = cards > 0 ? cards : 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,28 @@
|
|||
import { Page } from './page';
|
||||
|
||||
export class TaskHistoryEventData {
|
||||
taskHistoryId = 0;
|
||||
parentBusinessProcessId = '';
|
||||
businessProcessId = '';
|
||||
created = '';
|
||||
userId = '';
|
||||
eventType = '';
|
||||
workbasketKey = '';
|
||||
porType = '';
|
||||
porValue = '';
|
||||
domain = '';
|
||||
taskId = '';
|
||||
porCompany = '';
|
||||
porSystem = '';
|
||||
porInstance = '';
|
||||
taskClassificationKey = '';
|
||||
taskClassificationCategory = '';
|
||||
attachmentClassificationKey = '';
|
||||
custom1 = '';
|
||||
custom2 = '';
|
||||
custom3 = '';
|
||||
custom4 = '';
|
||||
comment = '';
|
||||
oldValue = '';
|
||||
newValue = '';
|
||||
oldData = '';
|
||||
newData = '';
|
||||
page = new Page();
|
||||
|
||||
public constructor(init?: Partial<TaskHistoryEventData>) {
|
||||
Object.assign(this, init);
|
||||
}
|
||||
export interface TaskHistoryEventData {
|
||||
taskHistoryId: string;
|
||||
parentBusinessProcessId: string;
|
||||
businessProcessId: string;
|
||||
created: string;
|
||||
userId: string;
|
||||
eventType: string;
|
||||
workbasketKey: string;
|
||||
porType: string;
|
||||
porValue: string;
|
||||
domain: string;
|
||||
taskId: string;
|
||||
porCompany: string;
|
||||
porSystem: string;
|
||||
porInstance: string;
|
||||
taskClassificationKey: string;
|
||||
taskClassificationCategory: string;
|
||||
attachmentClassificationKey: string;
|
||||
custom1: string;
|
||||
custom2: string;
|
||||
custom3: string;
|
||||
custom4: string;
|
||||
comment: string;
|
||||
oldValue: string;
|
||||
newValue: string;
|
||||
oldData: string;
|
||||
newData: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue