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 { SharedModule } from 'app/shared/shared.module';
|
||||||
import { HistoryRoutingModule } from './history-routing.module';
|
import { HistoryRoutingModule } from './history-routing.module';
|
||||||
import { TaskHistoryQueryComponent } from './task-history-query/task-history-query.component';
|
import { TaskHistoryQueryComponent } from './task-history-query/task-history-query.component';
|
||||||
|
import { MatTableModule } from '@angular/material/table';
|
||||||
|
import { MatSortModule } from '@angular/material/sort';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [CommonModule, HistoryRoutingModule, SharedModule, FormsModule, ReactiveFormsModule],
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
HistoryRoutingModule,
|
||||||
|
SharedModule,
|
||||||
|
FormsModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
MatTableModule,
|
||||||
|
MatSortModule
|
||||||
|
],
|
||||||
declarations: [TaskHistoryQueryComponent]
|
declarations: [TaskHistoryQueryComponent]
|
||||||
})
|
})
|
||||||
export class HistoryModule {}
|
export class HistoryModule {}
|
||||||
|
|
|
||||||
|
|
@ -1,116 +1,140 @@
|
||||||
<div class="panel panel-default">
|
<div class="example-container mat-elevation-z8">
|
||||||
<div class="panel-heading">
|
<div class="example-table-container">
|
||||||
<div class="pull-right btn-group">
|
<table mat-table [dataSource]="data" class="example-table"
|
||||||
<button class="btn btn-default" data-toggle="tooltip" title="Search" type="button">
|
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
|
||||||
<span (click)="search()" class="material-icons md-20 blue">search</span>
|
|
||||||
</button>
|
<ng-container matColumnDef="parentBusinessProcessId">
|
||||||
<button class="btn btn-default" data-toggle="tooltip" title="Clear" type="button">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Parent BPI</th>
|
||||||
<span (click)="clear()" class="material-icons md-20 blue">clear</span>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).parentBusinessProcessId}}</td>
|
||||||
</button>
|
</ng-container>
|
||||||
</div>
|
|
||||||
<h4 class="panel-header">Taskana history query</h4>
|
<ng-container matColumnDef="businessProcessId">
|
||||||
</div>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>BPI</th>
|
||||||
<div class="panel-body">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).businessProcessId}}</td>
|
||||||
<div *ngIf="taskQuery" class="table table-striped">
|
</ng-container>
|
||||||
<form [formGroup]="taskQueryForm">
|
|
||||||
<div class="table-header">
|
<ng-container matColumnDef="taskId">
|
||||||
<div class="table-row">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Task Id</th>
|
||||||
<ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskId}}</td>
|
||||||
<div (click)="changeOrderBy(taskHeader.key); search();"
|
</ng-container>
|
||||||
*ngIf="filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
|
|
||||||
class="table-cell table-cell--bold table-cell--justify">
|
<ng-container matColumnDef="eventType">
|
||||||
<span class="icon-space">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Event type</th>
|
||||||
{{getHeaderFieldDescription(taskHeader.key)}}
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).eventType}}</td>
|
||||||
</span>
|
</ng-container>
|
||||||
<span *ngIf="sortParameter['sort-by'] === taskHeader.key"
|
|
||||||
[ngClass]="{'flip': sortParameter.order === sortDirection.DESC}"
|
<ng-container matColumnDef="created">
|
||||||
class="material-icons md-20 blue pull-right">sort</span>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Created</th>
|
||||||
</div>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).created}}</td>
|
||||||
<div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
|
</ng-container>
|
||||||
[ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
|
|
||||||
class="table-cell table-cell--bold table-cell--separator">
|
<ng-container matColumnDef="userId">
|
||||||
<span class="material-icons md-24 blue pull-right">{{toggleExpand ? 'chevron_left'
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>User Id</th>
|
||||||
: 'chevron_right'}}</span>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).userId}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
<div (click)="changeOrderBy(taskHeader.key); search();"
|
|
||||||
*ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
|
<ng-container matColumnDef="domain">
|
||||||
class="table-cell table-cell--bold table-cell--justify">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Domain</th>
|
||||||
<span class="icon-space">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).domain}}</td>
|
||||||
{{getHeaderFieldDescription(taskHeader.key)}}
|
</ng-container>
|
||||||
</span>
|
|
||||||
<span
|
<ng-container matColumnDef="workbasketKey">
|
||||||
*ngIf="sortParameter['sort-by'] === taskHeader.key && filterFieldsToAllowQuerying(taskHeader.key)"
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Workbasket key</th>
|
||||||
[ngClass]="{'flip': sortParameter.order === sortDirection.DESC}"
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).workbasketKey}}</td>
|
||||||
class="material-icons md-20 blue pull-right">sort</span>
|
</ng-container>
|
||||||
</div>
|
|
||||||
</ng-container>
|
<ng-container matColumnDef="porCompany">
|
||||||
</div>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj company</th>
|
||||||
<div class="table-row">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porCompany}}</td>
|
||||||
<ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
|
</ng-container>
|
||||||
<div *ngIf="isDate(taskHeader.key)"
|
|
||||||
class="table-cell table-cell--bold table-cell--justify divDate">
|
<ng-container matColumnDef="porSystem">
|
||||||
<taskana-shared-date-picker (dateOutput)="updateDate($event)" [id]="'created'"
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj system</th>
|
||||||
[name]="'this.created'" formControlName="{{taskHeader.key}}"
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porSystem}}</td>
|
||||||
placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
|
</ng-container>
|
||||||
type="text"></taskana-shared-date-picker>
|
|
||||||
</div>
|
<ng-container matColumnDef="porInstance">
|
||||||
<div
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj instance</th>
|
||||||
*ngIf="!isDate(taskHeader.key) && filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porInstance}}</td>
|
||||||
class="table-cell table-cell--bold table-cell--justify">
|
</ng-container>
|
||||||
<input (keyup.enter)="search()" class="form-control input-sm"
|
|
||||||
formControlName="{{taskHeader.key}}"
|
<ng-container matColumnDef="porType">
|
||||||
placeholder="{{getHeaderFieldDescription(taskHeader.key)}}"
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj type</th>
|
||||||
type="text">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porType}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
<div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
|
|
||||||
[ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
|
<ng-container matColumnDef="porValue">
|
||||||
class="table-cell table-cell--bold table-cell--separator">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Obj value</th>
|
||||||
</div>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).porValue}}</td>
|
||||||
<div
|
</ng-container>
|
||||||
*ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && toggleExpand"
|
|
||||||
class="table-cell table-cell--bold table-cell--justify">
|
<ng-container matColumnDef="taskClassificationKey">
|
||||||
<input (keyup.enter)="search()" *ngIf="filterFieldsToAllowQuerying(taskHeader.key)"
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification key</th>
|
||||||
class="form-control input-sm"
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationKey}}</td>
|
||||||
formControlName="{{taskHeader.key}}"
|
</ng-container>
|
||||||
placeholder="{{getHeaderFieldDescription(taskHeader.key)}}" type="text">
|
|
||||||
</div>
|
<ng-container matColumnDef="taskClassificationCategory">
|
||||||
</ng-container>
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Classification category</th>
|
||||||
</div>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).taskClassificationCategory}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
<div class="table-body">
|
|
||||||
<div *ngFor="let task of taskQuery" class="table-row">
|
<ng-container matColumnDef="attachmentClassificationKey">
|
||||||
<ng-container *ngFor="let taskHeader of taskQueryHeader | mapToIterable">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Attachment Classification Key</th>
|
||||||
<div *ngIf="isDate(taskHeader.key)" class="table-cell table-cell--justify">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).attachmentClassificationKey}}</td>
|
||||||
{{task[taskHeader.key] | dateTimeZone:'yyyy-MM-dd'}}
|
</ng-container>
|
||||||
</div>
|
|
||||||
<div
|
<ng-container matColumnDef="custom1">
|
||||||
*ngIf="!isDate(taskHeader.key) && filterFieldsToShow(taskHeader.key) && !filterExpandGroup(taskHeader.key)"
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 1</th>
|
||||||
class="table-cell table-cell--justify">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom1}}</td>
|
||||||
{{task[taskHeader.key]}}
|
</ng-container>
|
||||||
</div>
|
|
||||||
<div (click)="toggleExpand = !toggleExpand" *ngIf="taskHeader.key === 'custom1'"
|
<ng-container matColumnDef="custom2">
|
||||||
[ngClass]="{'zoom-in': !toggleExpand, 'zoom-out': toggleExpand}"
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 2</th>
|
||||||
class="table-cell table-cell--separator">
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom2}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
<div
|
|
||||||
*ngIf="filterFieldsToShow(taskHeader.key) && filterExpandGroup(taskHeader.key) && filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand"
|
<ng-container matColumnDef="custom3">
|
||||||
class="table-cell table-cell--justify">
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 3</th>
|
||||||
{{task[taskHeader.key]}}
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom3}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
<div *ngIf="!filterFieldsToAllowQuerying(taskHeader.key) && toggleExpand"
|
|
||||||
class="table-cell table-cell--justify">
|
<ng-container matColumnDef="custom4">
|
||||||
<div *ngIf="task[taskHeader.key]">{{task[taskHeader.key]}}
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>Custom 4</th>
|
||||||
</div>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).custom4}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
</ng-container>
|
|
||||||
</div>
|
<ng-container matColumnDef="oldData">
|
||||||
</div>
|
<th mat-header-cell *matHeaderCellDef>Old data</th>
|
||||||
</form>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).oldData}}</td>
|
||||||
</div>
|
</ng-container>
|
||||||
<div *ngIf="taskQueryResource?.page" class="divTablePagination">
|
|
||||||
<taskana-shared-pagination (changePage)="changePage($event)" [page]="taskQueryResource.page"
|
<ng-container matColumnDef="newData">
|
||||||
[numberOfItems]="taskQuery.length"
|
<th mat-header-cell *matHeaderCellDef>New data</th>
|
||||||
type="Entries"></taskana-shared-pagination>
|
<td mat-cell *matCellDef="let element">{{convertToTaskHistoryEventData(element).newData}}</td>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,12 @@
|
||||||
@import '../../../theme/colors';
|
.example-loading-shade {
|
||||||
|
position: absolute;
|
||||||
.table {
|
top: 0;
|
||||||
max-height: calc(100vh - 152px);
|
left: 0;
|
||||||
padding-right: 15px;
|
bottom: 56px;
|
||||||
}
|
right: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.15);
|
||||||
.table-header {
|
z-index: 1;
|
||||||
background-color: $light-grey;
|
display: flex;
|
||||||
cursor: pointer;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 { 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 { TaskHistoryEventData } from '../../shared/models/task-history-event';
|
||||||
import { TaskHistoryQueryService } from '../services/task-history-query/task-history-query.service';
|
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({
|
@Component({
|
||||||
selector: 'taskana-task-query',
|
selector: 'taskana-task-query',
|
||||||
|
|
@ -16,214 +17,110 @@ import { TaskHistoryQueryService } from '../services/task-history-query/task-his
|
||||||
styleUrls: ['./task-history-query.component.scss']
|
styleUrls: ['./task-history-query.component.scss']
|
||||||
})
|
})
|
||||||
export class TaskHistoryQueryComponent implements OnInit {
|
export class TaskHistoryQueryComponent implements OnInit {
|
||||||
taskQueryResource: TaskHistoryEventResourceData;
|
data: TaskHistoryEventData[] = [];
|
||||||
taskQuery: Array<TaskHistoryEventData>;
|
displayedColumns: Pair<string, TaskHistoryQuerySortParameter>[] = [
|
||||||
taskQueryHeader = new TaskHistoryEventData();
|
{ 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> = {
|
sortParameter: Sorting<TaskHistoryQuerySortParameter> = {
|
||||||
'sort-by': TaskHistoryQuerySortParameter.CREATED,
|
'sort-by': TaskHistoryQuerySortParameter.CREATED,
|
||||||
order: Direction.ASC
|
order: Direction.ASC
|
||||||
};
|
};
|
||||||
orientationSubscription: Subscription;
|
|
||||||
taskQuerySubscription: Subscription;
|
|
||||||
|
|
||||||
taskQueryForm = new FormGroup({});
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
|
@ViewChild(PaginationComponent) pagination: PaginationComponent;
|
||||||
// to make this enum available for html
|
|
||||||
sortDirection = Direction;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private taskQueryService: TaskHistoryQueryService,
|
private taskHistoryQueryService: TaskHistoryQueryService,
|
||||||
private orientationService: OrientationService,
|
|
||||||
private requestInProgressService: RequestInProgressService
|
private requestInProgressService: RequestInProgressService
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {}
|
||||||
this.orientationSubscription = this.orientationService.getOrientation().subscribe((orientation: Orientation) => {
|
|
||||||
this.performRequest();
|
|
||||||
});
|
|
||||||
this.initTaskQueryForm();
|
|
||||||
}
|
|
||||||
|
|
||||||
getHeaderFieldDescription(property: string): string {
|
ngAfterViewInit() {
|
||||||
switch (property) {
|
const sortChange$ = this.sort.sortChange.pipe(
|
||||||
case 'parentBusinessProcessId':
|
tap((sort) => this.updateSortParameter(sort)),
|
||||||
return 'Parent BPI';
|
tap(() => (this.pageParameter.page = 1))
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
isDate(fieldName: string): boolean {
|
const pageChange$ = this.pagination.changePage.pipe(tap((newPage) => (this.pageParameter.page = newPage)));
|
||||||
return fieldName === 'created';
|
|
||||||
}
|
|
||||||
|
|
||||||
filterFieldsToAllowQuerying(fieldName: string): boolean {
|
merge(sortChange$, pageChange$)
|
||||||
if (
|
.pipe(
|
||||||
!fieldName ||
|
startWith({}),
|
||||||
fieldName === 'oldData' ||
|
tap(() => this.calculateQueryPages()),
|
||||||
fieldName === 'newData' ||
|
switchMap(() => {
|
||||||
fieldName === 'comment' ||
|
this.requestInProgressService.setRequestInProgress(true);
|
||||||
fieldName === 'oldValue' ||
|
return this.taskHistoryQueryService.getTaskHistoryEvents(undefined, this.sortParameter, this.pageParameter);
|
||||||
fieldName === 'newValue'
|
})
|
||||||
) {
|
)
|
||||||
return false;
|
.subscribe((data) => {
|
||||||
}
|
this.data = data.taskHistoryEvents;
|
||||||
|
this.pageInformation = data.page;
|
||||||
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) => {
|
|
||||||
this.requestInProgressService.setRequestInProgress(false);
|
this.requestInProgressService.setRequestInProgress(false);
|
||||||
console.log(taskQueryResource);
|
|
||||||
this.taskQueryResource = taskQueryResource.taskHistoryEvents ? taskQueryResource : null;
|
|
||||||
this.taskQuery = taskQueryResource.taskHistoryEvents ? taskQueryResource.taskHistoryEvents : null;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private initTaskQueryForm() {
|
updateSortParameter(sort: Sort): void {
|
||||||
Object.keys(new TaskHistoryEventData()).forEach((key) => {
|
if (sort) {
|
||||||
this.taskQueryForm.addControl(key, new FormControl());
|
const pair: Pair<string, TaskHistoryQuerySortParameter> = this.displayedColumns.find(
|
||||||
});
|
(pair) => pair.left === sort.active
|
||||||
this.performRequest();
|
);
|
||||||
|
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() {
|
private calculateQueryPages() {
|
||||||
const rowHeight = 34;
|
const rowHeight = 48;
|
||||||
const unusedHeight = 300;
|
const unusedHeight = 300;
|
||||||
const totalHeight = window.innerHeight;
|
const totalHeight = window.innerHeight;
|
||||||
const cards = Math.round((totalHeight - unusedHeight) / rowHeight);
|
const cards = Math.round((totalHeight - unusedHeight) / rowHeight);
|
||||||
TaskanaQueryParameters.page = TaskanaQueryParameters.page ? TaskanaQueryParameters.page : 1;
|
this.pageParameter['page-size'] = cards > 0 ? cards : 1;
|
||||||
TaskanaQueryParameters.pageSize = cards > 0 ? cards : 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,28 @@
|
||||||
import { Page } from './page';
|
export interface TaskHistoryEventData {
|
||||||
|
taskHistoryId: string;
|
||||||
export class TaskHistoryEventData {
|
parentBusinessProcessId: string;
|
||||||
taskHistoryId = 0;
|
businessProcessId: string;
|
||||||
parentBusinessProcessId = '';
|
created: string;
|
||||||
businessProcessId = '';
|
userId: string;
|
||||||
created = '';
|
eventType: string;
|
||||||
userId = '';
|
workbasketKey: string;
|
||||||
eventType = '';
|
porType: string;
|
||||||
workbasketKey = '';
|
porValue: string;
|
||||||
porType = '';
|
domain: string;
|
||||||
porValue = '';
|
taskId: string;
|
||||||
domain = '';
|
porCompany: string;
|
||||||
taskId = '';
|
porSystem: string;
|
||||||
porCompany = '';
|
porInstance: string;
|
||||||
porSystem = '';
|
taskClassificationKey: string;
|
||||||
porInstance = '';
|
taskClassificationCategory: string;
|
||||||
taskClassificationKey = '';
|
attachmentClassificationKey: string;
|
||||||
taskClassificationCategory = '';
|
custom1: string;
|
||||||
attachmentClassificationKey = '';
|
custom2: string;
|
||||||
custom1 = '';
|
custom3: string;
|
||||||
custom2 = '';
|
custom4: string;
|
||||||
custom3 = '';
|
comment: string;
|
||||||
custom4 = '';
|
oldValue: string;
|
||||||
comment = '';
|
newValue: string;
|
||||||
oldValue = '';
|
oldData: string;
|
||||||
newValue = '';
|
newData: string;
|
||||||
oldData = '';
|
|
||||||
newData = '';
|
|
||||||
page = new Page();
|
|
||||||
|
|
||||||
public constructor(init?: Partial<TaskHistoryEventData>) {
|
|
||||||
Object.assign(this, init);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue