@WidgetComponent
File
Implements
Metadata
| selector |
nm-process-list |
| styleUrls |
process-list.component.scss |
| templateUrl |
./process-list.component.html |
Index
Widget inputs
|
|
|
|
|
Widget outputs
|
|
|
Properties
|
|
|
Methods
|
|
|
Methods
|
Private
activateTab
|
activateTab(index: , origin: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
Default value |
| index |
|
no
|
|
| origin |
number
|
no
|
1
|
|
|
Protected
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
|
|
|
flattenActions
|
flattenActions(task: )
|
|
|
|
Returns : any[]
|
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
progressBarLocalizedValue
|
progressBarLocalizedValue(task: )
|
|
|
|
|
|
progressBarMode
|
progressBarMode(task: )
|
|
|
|
|
|
progressBarValue
|
progressBarValue(task: )
|
|
|
|
|
|
trackTab
|
trackTab(index: , tab: )
|
|
|
Parameters :
| Name |
Optional |
| index |
no
|
| tab |
no
|
|
|
Public
overlayContext
|
overlayContext: any
|
Type : any
|
|
|
|
Public
overlayContextSub
|
overlayContextSub:
|
Default value : new ReplaySubject(1)
|
Decorators : WidgetInput
|
|
|
|
Public
routerLink
|
routerLink: string
|
Type : string
|
Default value : "/apps/tasks"
|
|
|
|
Private
subscription
|
subscription: Subscription
|
Type : Subscription
|
|
|
|
Public
tabIndex
|
tabIndex: number
|
Type : number
|
Default value : 0
|
|
|
|
Public
tabs
|
tabs: any[]
|
Type : any[]
|
|
|
|
Public
tooltipDateformat
|
tooltipDateformat: string
|
Type : string
|
Default value : "yyyy-MM-dd HH:mm:ss"
|
|
|
|
Private
unsubscribe
|
unsubscribe:
|
Default value : NgUnsubscribe.create()
|
|
|
import {
AfterViewInit,
ChangeDetectorRef,
Component,
OnDestroy,
} from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AppContext } from "../../components/app-context/app.context";
import { WidgetConfig } from "../widget.configuration";
import {
WidgetComponent,
WidgetConfigure,
WidgetInput,
} from "../widget.metadata";
import { CurrentLocaleService } from "../../components/i18n/currentLocale.service";
import { Link } from "../../components/hal/hal";
import { MatTabChangeEvent } from "@angular/material/tabs";
import { interval, ReplaySubject, Subscription } from "rxjs";
import { flatMap, startWith, switchMap, takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../ng-unsubscribe";
const TOOLBOX_TASK_SELECTOR = { "@toolbox-task": "refresh" };
@WidgetComponent("nm-process-list")
@Component({
selector: "nm-process-list",
templateUrl: "./process-list.component.html",
styleUrls: ["./process-list.component.scss"],
})
export class ProcessListComponent implements OnDestroy, AfterViewInit {
private unsubscribe = NgUnsubscribe.create();
public routerLink = "/apps/tasks";
public tabs: any[];
private subscription: Subscription;
public tooltipDateformat: string = "yyyy-MM-dd HH:mm:ss";
public tabIndex = 0;
@WidgetInput("overlay-context")
public overlayContextSub = new ReplaySubject(1);
public overlayContext: any;
constructor(
private http: HttpClient,
private cdr: ChangeDetectorRef,
private localeService: CurrentLocaleService,
private appContext: AppContext
) {}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig) {
if (configuration.configuration.tooltipDateformat) {
this.tooltipDateformat = configuration.configuration.tooltipDateformat;
}
this.tabs = configuration.configuration.tabs.map((tab) => {
let link = (<Link>configuration._links[tab.link]).href;
return {
type: tab.type,
title: tab.title,
link: link,
tasks: [],
};
});
this.overlayContextSub
.pipe(takeUntil(this.unsubscribe))
.subscribe((context) => (this.overlayContext = context));
this.activateTab(0);
}
ngAfterViewInit(): void {}
onClick() {
this.overlayContext.close();
}
onTabChange(event: MatTabChangeEvent) {
let index = event.index;
this.activateTab(index, event.tab.origin);
}
private activateTab(index, origin = 1) {
let tab = this.tabs[index];
if (this.subscription) {
this.subscription.unsubscribe();
}
this.subscription = this.appContext.userContext
.subscribe(TOOLBOX_TASK_SELECTOR)
.pipe(
switchMap((data) => interval(2000).pipe(startWith(0))),
flatMap((time) =>
this.http.get(tab.link, { params: { progress: "false" } })
)
)
.subscribe((data) => {
let tasks = (<any>data)._embedded["tasks"];
if (!tasks || (tasks.length == 0 && origin > -1)) {
this.tabIndex = 1;
} else {
tab.tasks = tasks.map((task) => {
task.progressMode = this.progressBarMode(task);
task.progressValue = this.progressBarValue(task);
task.actions = this.flattenActions(task);
return task;
});
}
this.cdr.markForCheck();
});
}
flattenActions(task): any[] {
let result = [];
if (task._actions) {
for (let property in task._actions) {
if (!task._actions.hasOwnProperty(property)) {
continue;
}
let actions = task._actions[property];
if (Array.isArray(actions)) {
result.push(...actions);
} else {
result.push(actions);
}
}
}
return result;
}
progressBarMode(task): string {
if (task.hasOwnProperty("processed")) {
return "determinate";
}
return "indeterminate";
}
progressBarLocalizedValue(task): string {
if (task.hasOwnProperty("processed")) {
return (task.processed / task.total).toLocaleString(
this.localeService.currentLocale,
{ style: "percent" }
);
}
return "0";
}
progressBarValue(task): number {
if (task.hasOwnProperty("processed")) {
return Math.round((task.processed / task.total) * 100);
}
return 0;
}
trackTab(index, tab): void {
return tab.pimRef;
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
<div class="nm-processList">
<mat-tab-group
(selectedTabChange)="onTabChange($event)"
[(selectedIndex)]="tabIndex"
>
<mat-tab *ngFor="let tab of tabs">
<ng-container [ngSwitch]="tab.type">
<ng-container *ngSwitchCase="'active'">
<ng-template mat-tab-label>
<span *ngIf="tab.tasks">{{ tab.title | translate }}</span>
<mat-chip-list class="nm-right-nav-chip">
<mat-chip
color="primary"
[selected]="true"
[disableRipple]="true"
[selectable]="false"
>{{ tab?.tasks.length }}</mat-chip
>
</mat-chip-list>
</ng-template>
<ng-container *ngFor="let task of tab.tasks; trackBy: trackTab">
<mat-list-item style="height: 100px">
<div class="nm-content-container">
<div class="nm-icon-container">
<mat-icon>{{ task.icon }}</mat-icon>
</div>
<div class="nm-sub-container">
<div matLine>
<h3>
<nm-ellipsis
[width]="'240px'"
[content]="task.description"
></nm-ellipsis>
</h3>
</div>
<mat-card-subtitle matLine>
<mat-icon
[matTooltip]="task.started | datepipe: tooltipDateformat"
>access_time</mat-icon
>
<span class="nm-post-icon-label">
{{ "placeholder.started" | translate }} {{
task.started | amTimeAgo
}}
</span>
</mat-card-subtitle>
</div>
<div class="nm-action-container">
<ng-container *ngFor="let action of task.actions">
<nm-action-icon
*ngIf="action && action.type != 'download'"
[action]="action"
[name]="action.type"
>
</nm-action-icon>
</ng-container>
</div>
<mat-card-subtitle matLine class="nm-progressbar-container">
<mat-progress-bar
[value]="task.progressValue"
[mode]="task.progressMode"
></mat-progress-bar>
<span class="nm-progressbar-label">
{{ task.progressBarLocalizedValue }}
</span>
</mat-card-subtitle>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</ng-container>
</ng-container>
<ng-container *ngSwitchCase="'history'">
<ng-template mat-tab-label>
{{ tab.title | translate }}
</ng-template>
<ng-container *ngFor="let task of tab.tasks; trackBy: trackTab">
<mat-list-item style="height: 50px">
<div class="nm-content-container">
<div class="nm-icon-container">
<mat-icon>{{ task.icon }}</mat-icon>
</div>
<div class="nm-sub-container">
<div matLine>
<h3>
<nm-ellipsis
[width]="'240px'"
[content]="task.description"
></nm-ellipsis>
</h3>
</div>
<mat-card-subtitle matLine>
<mat-icon
[matTooltip]="task.started | datepipe: tooltipDateformat"
>access_time</mat-icon
>
<span class="nm-post-icon-label">
{{ "placeholder.started" | translate }} {{
task.started | amTimeAgo
}}
</span>
</mat-card-subtitle>
</div>
<div class="nm-action-container">
<ng-container *ngFor="let action of task.actions">
<nm-action-icon [action]="action" [name]="action.type">
</nm-action-icon>
</ng-container>
</div>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</ng-container>
</ng-container>
</ng-container>
</mat-tab>
</mat-tab-group>
<div class="tasks-links">
<a [routerLink]="routerLink" (click)="onClick()">
{{ "list.show.more" | translate }}
</a>
</div>
</div>
Legend
Html element with directive