@WidgetComponent
File
Description
Used in App google-translate.
Surrounded by widgetframe
Provides form for google-translate configuration app
Metadata
| selector |
nm-iagent-review |
| styleUrls |
iagent-review.component.scss |
| templateUrl |
./iagent-review.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 {
WidgetConfiguration,
WidgetId,
WidgetConfigure,
WidgetComponent,
} from "../../widget.metadata";
import { WidgetConfig } from "../../widget.configuration";
import { ProgressbarService } from "../../../components/progressbar/progressbar.service";
import { CustomNotificationService } from "../../../components/notification/customnotification.service";
import { TranslateService } from "@ngx-translate/core";
import { HalService } from "../../../components/hal/hal.service";
declare var contextPath: string;
/**
* Used in App google-translate.
* Surrounded by widgetframe
* Provides form for google-translate configuration app
*/
@WidgetComponent("nm-iagent-review")
@Component({
selector: "nm-iagent-review",
templateUrl: "./iagent-review.component.html",
styleUrls: ["./iagent-review.component.scss"],
})
export class IagentReviewComponent {
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;
@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) {
this.action = {};
this.component = configuration.component;
this.title = this.configuration.configuration["title"];
this.header = this.configuration.configuration["header"];
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
*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"
/>
</mat-form-field>
<mat-button-toggle
type="button"
class="nm-small-toggle"
(change)="showPassword = !showPassword"
><mat-icon>remove_red_eye</mat-icon></mat-button-toggle
>
<br />
<mat-form-field class="full-width">
<input
matInput
placeholder="{{ 'placeholder.description' | translate }}"
[disabled]="!appData.enabled"
required
name="description"
type="text"
[(ngModel)]="appData.description"
/>
</mat-form-field>
<br />
<mat-form-field class="full-width">
<input
matInput
placeholder="{{ 'placeholder.message' | translate }}"
[disabled]="!appData.enabled"
required
name="message"
type="text"
[(ngModel)]="appData.message"
/>
</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"
>
{{ "button.update" | translate }}
</button>
</div>
</div>
</div>
</nm-widgetframe>
</form>
Legend
Html element with directive