@WidgetComponent
File
Description
Used in App clickworker.
Surrounded by widgetframe
Provides form for clickworker configuration app
Metadata
| selector |
nm-clickworker |
| styleUrls |
clickworker.component.scss |
| templateUrl |
./clickworker.component.html |
Index
Widget inputs
|
|
|
Widget outputs
|
|
|
Properties
|
|
|
Methods
|
|
|
Constructor
constructor(_progressbarService: ProgressbarService, _widgetframeService: WidgetframeService, _notificationService: CustomNotificationService, _halService: HalService, translateService: TranslateService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| _progressbarService |
ProgressbarService
|
no
|
| _widgetframeService |
WidgetframeService
|
no
|
| _notificationService |
CustomNotificationService
|
no
|
| _halService |
HalService
|
no
|
| translateService |
TranslateService
|
no
|
|
Methods
|
Protected
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Public
action
|
action: any
|
Type : any
|
|
|
|
Public
appData
|
appData: any
|
Type : any
|
|
|
|
Private
appSetup
|
appSetup: any[]
|
Type : any[]
|
|
|
|
Public
href
|
href: Subject<string>
|
Type : Subject<string>
|
Default value : new ReplaySubject<string>(1)
|
|
|
|
Public
showPassword
|
showPassword: boolean
|
Type : boolean
|
Default value : false
|
|
|
import { map, filter } from "rxjs/operators";
import { Component } from "@angular/core";
import { Subject, ReplaySubject } from "rxjs";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../widget.configuration";
import {
WidgetComponent,
WidgetConfiguration,
WidgetId,
WidgetConfigure,
} from "../../widget.metadata";
import { ProgressbarService } from "../../../components/progressbar/progressbar.service";
import { CustomNotificationService } from "../../../components/notification/customnotification.service";
import { HalService } from "../../../components/hal/hal.service";
import { TranslateService } from "@ngx-translate/core";
declare var contextPath: string;
export interface ClickworkerConfiguration {
/**
* Sets the title shown in the clickworker configuration header
*/
title: string;
/**
* Sets CSS class name for the embedded header component
*/
header: string;
}
/**
* Used in App clickworker.
* Surrounded by widgetframe
* Provides form for clickworker configuration app
*/
@WidgetComponent("nm-clickworker")
@Component({
selector: "nm-clickworker",
templateUrl: "./clickworker.component.html",
styleUrls: ["./clickworker.component.scss"],
})
export class ClickworkerComponent {
public title: string;
public header: string;
public component: string;
public showPassword: boolean = false;
private appSetup: any[];
public appData: any;
public action: any;
@WidgetConfiguration()
private configuration: WidgetConfig<ClickworkerConfiguration>;
@WidgetId()
public _id: string;
public href: Subject<string> = new ReplaySubject<string>(1);
constructor(
private _progressbarService: ProgressbarService,
private _widgetframeService: WidgetframeService,
private _notificationService: CustomNotificationService,
private _halService: HalService,
private translateService: TranslateService
) {
this._progressbarService.requestFinished();
}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig<ClickworkerConfiguration>) {
this.action = {};
this.title = this.configuration.configuration.title;
this.header = this.configuration.configuration.header;
this.component = configuration.component;
let href = configuration._links["data"]["href"];
this._progressbarService.addRequest();
this._widgetframeService.getData(href).subscribe((data) => {
this.appData = data;
this._progressbarService.requestFinished();
});
this.action.description = this.component;
this.action.href = href;
this.action.title = this.component;
this.action.type = "request";
this._halService
.getActionEvents()
.pipe(
filter((event) => event.name === this.component),
map((event) => (<any>event).response)
)
.subscribe((resp) => {
this._notificationService.fromJson(resp);
});
}
ngOnInit(): void {}
ngOnDestroy(): void {}
}
<form class="app-form" #appForm="ngForm" *ngIf="appData">
<nm-widgetframe
[header]="header"
style="width: 1000px; padding-top: 15px"
widgetId="{{ _id }}"
>
<div slot="title" class="nm-widgetframe__title">
<span style="float: left; line-height: 55px"
>{{ title | translate }}
</span>
</div>
<div slot="content" class="nm-widgetframe__content nm-clickworker-app">
<div class="app-container">
<div class="config-container">
<!--<i class="material-icons nm-app-icon-detail" [class.enabled]="(appData.enabled === 'true'|| appData.enabled)"> compare_arrows</i>-->
<h4 class="nm-app-hl">{{ "hl.configuration" | translate }}</h4>
</div>
<mat-divider
style="margin: 0 16px; width: calc(100% - 32px)"
></mat-divider>
<br />
<div class="config-container">
<mat-form-field class="full-width">
<input
matInput
placeholder="{{ 'placeholder.username' | translate }}"
[disabled]="!appData.enabled"
required
name="username"
type="text"
[(ngModel)]="appData.username"
/>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input
*ngIf="showPassword"
matInput
placeholder="{{ 'placeholder.password' | translate }}"
[disabled]="!appData.enabled"
required
name="password"
type="text"
[(ngModel)]="appData.password"
/>
<input
*ngIf="!showPassword"
matInput
placeholder="{{ 'placeholder.password' | translate }}"
[disabled]="!appData.enabled"
required
name="password"
type="password"
[(ngModel)]="appData.password"
/>
<button
matSuffix
mat-icon-button
type="button"
class="nm-small-toggle"
(click)="showPassword = !showPassword"
>
<mat-icon>remove_red_eye</mat-icon>
</button>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input
matInput
placeholder="{{ 'placeholder.outbox' | translate }}"
[disabled]="!appData.enabled"
required
name="outbox"
type="text"
[(ngModel)]="appData.outbox"
/>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input
matInput
placeholder="{{ 'placeholder.inbox' | translate }}"
[disabled]="!appData.enabled"
required
name="inbox"
type="text"
[(ngModel)]="appData.inbox"
/>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input
matInput
placeholder="{{ 'placeholder.template' | translate }}"
[disabled]="!appData.enabled"
required
name="template"
type="text"
[(ngModel)]="appData.template"
/>
</mat-form-field>
<br />
<br />
<mat-slide-toggle
style="margin-right: 15px"
color="primary"
name="enabled"
[(ngModel)]="appData.enabled"
>
<span *ngIf="appData.enabled">
{{ "placeholder.enabled" | translate }}
</span>
<span *ngIf="!appData.enabled">
{{ "placeholder.disabled" | translate }}
</span>
</mat-slide-toggle>
<br />
<br />
</div>
<div class="modal-footer">
<button
mat-raised-button
type="button"
color="primary"
[nm-action]="action"
[action-name]="component"
[disabled]="!appForm.form.valid"
[action-name]="'app'"
[action-payload]="appData"
style="font-size: 15px"
>
<mat-icon class="mat-24">check</mat-icon>
{{ "button.update" | translate }}
</button>
</div>
</div>
</div>
</nm-widgetframe>
</form>
Legend
Html element with directive