@WidgetComponent
File
Description
Used in datafeeddownload app.
Displays a button. Receives categoryIdentifier and displays popup for datafeed download.
Metadata
selector |
nm-datafeeddownload |
styleUrls |
datafeed-download.component.scss |
templateUrl |
./datafeed-download.component.html |
Index
Widget inputs
|
|
|
|
Widget outputs
|
|
Properties
|
|
Methods
|
|
Constructor
constructor(notificationService: NotificationsService, translateService: TranslateService, dialog: MatDialog, _halService: HalService, widgetframeService: WidgetframeService)
|
|
Parameters :
Name |
Type |
Optional |
notificationService |
NotificationsService
|
no
|
translateService |
TranslateService
|
no
|
dialog |
MatDialog
|
no
|
_halService |
HalService
|
no
|
widgetframeService |
WidgetframeService
|
no
|
|
Methods
Protected
configureWidget
|
configureWidget(configuration: WidgetConfig)
|
Decorators : WidgetConfigure
|
|
|
onValueChange
|
onValueChange(id: )
|
|
|
Public
_halService
|
_halService: HalService
|
Type : HalService
|
|
Private
categoryIdentifier
|
categoryIdentifier: Subject<any>
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Sets category identifier.
|
Public
categoryIdentifiers
|
categoryIdentifiers:
|
Default value : <any>[]
|
|
Private
datafeed
|
datafeed: Subject<any>
|
Type : Subject<any>
|
Default value : new Subject<any>()
|
Decorators : WidgetInput
|
|
Sets datafeed identifier.
|
Public
datafeedIdentifierString
|
datafeedIdentifierString: string
|
Type : string
|
|
Public
dataFeeds
|
dataFeeds: any
|
Type : any
|
|
Public
dialog
|
dialog: MatDialog
|
Type : MatDialog
|
|
Public
dialogRef
|
dialogRef: MatDialogRef<any>
|
Type : MatDialogRef<any>
|
|
Public
downloadAction
|
downloadAction: Action
|
Type : Action
|
|
Public
isDownloadButtonNeeded
|
isDownloadButtonNeeded: boolean
|
Type : boolean
|
Default value : false
|
|
Public
translateService
|
translateService: TranslateService
|
Type : TranslateService
|
|
import { Component, TemplateRef, ViewChild } from "@angular/core";
import { Subject } from "rxjs";
import { getOrDefault, WidgetConfig } from "../../../widget.configuration";
import {
WidgetComponent,
WidgetId,
WidgetConfiguration,
WidgetConfigure,
WidgetInput,
} from "../../../widget.metadata";
import { MatDialog, MatDialogRef } from "@angular/material/dialog";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { Action } from "../../../../components/hal/action";
import { HalService } from "../../../../components/hal/index";
import * as uriTemplates_ from "uri-templates";
const uriTemplates = uriTemplates_;
import { TranslateService } from "@ngx-translate/core";
import { NotificationsService } from "../../../../components/notifications/services/notifications.service";
export interface DatafeedDownload {
/**
* Datafeeds url.
*/
datafeedsUrl?: string;
/**
* Popup title.
*/
"popup-title"?: string;
}
/**
* Used in datafeeddownload app.
*
* Displays a button. Receives categoryIdentifier and displays popup for datafeed download.
*/
@WidgetComponent("nm-datafeeddownload")
@Component({
selector: "nm-datafeeddownload",
templateUrl: "./datafeed-download.component.html",
styleUrls: ["./datafeed-download.component.scss"],
})
export class DatafeeddownloadWidgetComponent {
@WidgetConfiguration()
public configuration: WidgetConfig;
/**
* Sets category identifier.
*/
@WidgetInput("categoryIdentifier")
private categoryIdentifier: Subject<any> = new Subject<any>();
/**
* Sets datafeed identifier.
*/
@WidgetInput("datafeed")
private datafeed: Subject<any> = new Subject<any>();
@WidgetId()
private _id: string;
@ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
public isDownloadButtonNeeded: boolean = false;
public downloadAction: Action;
public categoryIdentifiers = <any>[];
public datafeedIdentifierString: string;
public dialogRef: MatDialogRef<any>;
public dataFeeds: any;
constructor(
private notificationService: NotificationsService,
public translateService: TranslateService,
public dialog: MatDialog,
public _halService: HalService,
public widgetframeService: WidgetframeService
) {}
@WidgetConfigure()
protected configureWidget(configuration: WidgetConfig<DatafeedDownload>) {
this.categoryIdentifier.subscribe((data) => {
this.categoryIdentifiers = data;
this.isDownloadButtonNeeded = this.categoryIdentifiers.length > 0;
});
this.datafeed.subscribe((data) => {
if (data && data.length > 0) {
this.datafeedIdentifierString = data[0].identifier;
this.downloadAction = data[0]._actions["download"];
}
});
const datafeedsUrl = (configuration._links.datafeeds as any).href;
if (!datafeedsUrl) {
throw new Error("link 'datafeeds' needs to be configured");
}
this.widgetframeService.getData(datafeedsUrl).subscribe((data) => {
this.dataFeeds = data._embedded.datafeeds;
});
}
onValueChange(id) {
const selectedDdataFeed = this.dataFeeds.filter((item) => {
return item.id === id;
})[0];
if (selectedDdataFeed) {
this.datafeedIdentifierString = selectedDdataFeed.identifier;
this.downloadAction = selectedDdataFeed._actions["download"];
}
}
openPopup() {
this.dialogRef = this.dialog.open(this.template);
}
closePopup() {
this.dialogRef.close();
let template = uriTemplates(this.downloadAction.href);
let href = template.fill({
"category-identifiers": this.categoryIdentifiers,
});
// fill removes the token, add it here manually
href = href + "{&token}";
this.downloadAction.href = href;
this._halService
.execute("download-category-datafeed", this.downloadAction)
.subscribe((resp) => {
this.notificationService.success(
this.translateService.instant(
"app.ipim-category-feed.message.success.title"
),
this.translateService.instant(
"app.ipim-category-feed.message.success.body"
)
);
});
}
}
<button
mat-mini-fab
color="primary"
(click)="openPopup()"
popover="{{ configuration.configuration['popup-title'] | translate }}"
placement="bottom"
container="body"
triggers="mouseenter:mouseleave"
class="mat-icon-button nm-button-popup"
[class.nm-fadein]="isDownloadButtonNeeded"
>
<div
class="material-icons nm-svg-icon"
[ngStyle]="{ fill: 'rgb(255,153,0)' }"
>
<mat-icon>file_download</mat-icon>
</div>
</button>
<ng-template>
<nm-dialog [dialogRef]="dialogRef" class="nm-dialog">
<ng-container slot="title">
{{ configuration.configuration["popup-title"] | translate }}
</ng-container>
<ng-container slot="content">
<mat-form-field>
<mat-label>
{{
"app.ipim-data-feed-download.placeholder.data-feed-download"
| translate
}}
</mat-label>
<nm-combo
class="combo"
[options]="dataFeeds"
[valueKey]="'id'"
[displayKey]="'description'"
[filterPlaceholder]="'placeholder.search' | translate"
[placeholder]="
'app.ipim-data-feed-download.placeholder.data-feed-download'
| translate
"
(valueChange)="onValueChange($event)"
>
</nm-combo>
</mat-form-field>
</ng-container>
<ng-container slot="actions">
<button mat-button type="button" (click)="dialogRef.close()">
{{ "button.cancel" | translate }}
</button>
<button
mat-raised-button
type="button"
color="primary"
(click)="closePopup()"
>
{{ "export-config-save" | translate }}
</button>
</ng-container>
</nm-dialog>
</ng-template>
Legend
Html element with directive