nm-edit-input
src/app/shared/widgets/edit-input/edit-input.component.ts
| selector | nm-edit-input |
| styleUrls | edit-input.component.scss |
| templateUrl | ./edit-input.component.html |
Widget inputs |
Widget outputs |
Properties |
|
Methods |
|
constructor(_widgetframeService: WidgetframeService, dialog: MatDialog, localStorageService: LocalStorageService, translateService: TranslateService)
|
|||||||||||||||
|
Parameters :
|
| Protected configureWidget | ||||||
configureWidget(configuration: WidgetConfig)
|
||||||
Decorators : WidgetConfigure
|
||||||
|
Parameters :
Returns :
void
|
| keyDownFunction | ||||
keyDownFunction(event: )
|
||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| onChange |
onChange()
|
|
Returns :
void
|
| Public _id |
_id:
|
Decorators : WidgetId
|
| Public configuration |
configuration:
|
Type : WidgetConfig
|
Decorators : WidgetConfiguration
|
| Public dialog |
dialog:
|
Type : MatDialog
|
| Public localStorageEntry |
localStorageEntry:
|
Type : LocalStorageEntry
|
| Public localStorageKey |
localStorageKey:
|
Type : string
|
| Public options |
options:
|
Type : any[]
|
Default value : []
|
| Public payload |
payload:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
| Public placeholder |
placeholder:
|
Type : string
|
| Public reset |
reset:
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
| Public selectedValue |
selectedValue:
|
Default value : new ReplaySubject<any>(1)
|
Decorators : WidgetOutput
|
| Public selection |
selection:
|
Type : string
|
| Public shouldLabelFloat |
shouldLabelFloat:
|
Default value : false
|
| Public translateService |
translateService:
|
Type : TranslateService
|
| Public trigger |
trigger:
|
Default value : new Subject<any>()
|
Decorators : WidgetOutput
|
import { Component, OnDestroy } from "@angular/core";
import { Subject, ReplaySubject } from "rxjs";
import { WidgetframeService } from "../widgetframe/widgetframe.service";
import { WidgetConfig } from "../widget.configuration";
import {
WidgetComponent,
WidgetConfiguration,
WidgetConfigure,
WidgetId,
WidgetInput,
WidgetOutput,
} from "../widget.metadata";
import { MatDialog } from "@angular/material/dialog";
import { TranslateService } from "@ngx-translate/core";
import {
DeletionMode,
Scope,
} from "../../components/local-storage/local-storage-constants";
import {
LocalStorageEntry,
LocalStorageService,
} from "../../components/local-storage/local-storage.service";
@WidgetComponent("nm-edit-input")
@Component({
selector: "nm-edit-input",
templateUrl: "./edit-input.component.html",
styleUrls: ["./edit-input.component.scss"],
})
export class EditInputWidgetComponent implements OnDestroy {
@WidgetId()
public _id;
@WidgetConfiguration()
public configuration: WidgetConfig;
@WidgetOutput()
public selectedValue = new ReplaySubject<any>(1);
@WidgetInput()
public payload = new Subject<any>();
@WidgetInput()
public reset = new Subject<any>();
@WidgetOutput()
public trigger = new Subject<any>();
public selection: string;
public placeholder: string;
public shouldLabelFloat = false;
public localStorageKey: string;
public localStorageEntry: LocalStorageEntry;
public options: any[] = [];
constructor(
private _widgetframeService: WidgetframeService,
public dialog: MatDialog,
private localStorageService: LocalStorageService,
public translateService: TranslateService
) {}
onChange() {
this.localStorageEntry.value = this.selection;
this.selectedValue.next(this.selection);
}
keyDownFunction(event) {
if (event.keyCode == 13 && !!this.selection) {
this.trigger.next(new Date());
}
}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig) {
let title = configuration.configuration["title"];
this.placeholder = configuration.configuration["placeholder"];
this.shouldLabelFloat = configuration.configuration["shouldLabelFloat"];
this.localStorageEntry = this.localStorageService.getLocalStorageEntry(
configuration.configuration["local-storage-key"],
Scope.GLOBAL,
DeletionMode.LOGIN
);
if (this.localStorageEntry.exists()) {
this.selection = this.localStorageEntry.value;
}
this.selectedValue.next(this.selection);
this.reset.asObservable().subscribe((reset) => {
this.localStorageEntry.clear();
this.selection = "";
this.selectedValue.next(this.selection);
});
}
ngOnDestroy() {
//this.unsubscribe.destroy();
}
}
<div class="nm-select">
<mat-form-field>
<input
matInput
[(ngModel)]="selection"
(input)="onChange()"
(keydown)="keyDownFunction($event)"
[placeholder]="placeholder | translate"
[name]="configuration.configuration['name']"
[id]="configuration.configuration['name']"
/>
</mat-form-field>
</div>