@nova-ui/dashboards
Version:
Nova Dashboards is a framework designed to provide feature developers with a common solution for presenting data coming from various sources within a single view, as well as a set of predefined widget visualizations that are 100% configuration-driven and
219 lines • 9.1 kB
JavaScript
"use strict";
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
Object.defineProperty(exports, "__esModule", { value: true });
exports.WidgetHeaderComponent = void 0;
const tslib_1 = require("tslib");
const animations_1 = require("@angular/animations");
const core_1 = require("@angular/core");
const rxjs_1 = require("rxjs");
const operators_1 = require("rxjs/operators");
const bits_1 = require("@nova-ui/bits");
const pizzagna_service_1 = require("../../../pizzagna/services/pizzagna.service");
const types_1 = require("../../../services/types");
const widget_to_dashboard_event_proxy_service_1 = require("../../../services/widget-to-dashboard-event-proxy.service");
const types_2 = require("../../../types");
let WidgetHeaderComponent = class WidgetHeaderComponent {
static { this.lateLoadKey = "WidgetHeaderComponent"; }
get hostClass() {
return true;
}
get state() {
return this.collapsed && this.collapsible ? "collapsed" : "expanded";
}
constructor(eventBus, pizzagnaService, changeDetector, eventProxy, linkProvider) {
this.eventBus = eventBus;
this.pizzagnaService = pizzagnaService;
this.changeDetector = changeDetector;
this.eventProxy = eventProxy;
this.linkProvider = linkProvider;
this.editMode = true;
/**
* Boolean which shows or hides the edit button
*/
this.editable = true;
/**
* Boolean which shows or hides the remove widget button
*/
this.removable = true;
/**
* Boolean which adds ability to collapse widget header
*/
this.collapsible = false;
this.reloadable = true;
this.hideMenu = false;
/**
* Boolean which tells what state the widget header is in if collapsible
*/
this.collapsed = false;
this.onDestroy$ = new rxjs_1.Subject();
this.linkTooltip = $localize `Explore this data`;
}
ngOnInit() {
if (this.collapsible) {
this.pizzagnaService.setProperty({
componentId: this.componentId,
pizzagnaKey: types_2.PizzagnaLayer.Data,
propertyPath: ["isCollapsed"],
}, true);
}
if (this.eventProxy) {
this.eventProxy.addUpstream(types_1.WIDGET_EDIT);
this.eventProxy.addUpstream(types_1.WIDGET_REMOVE);
this.eventProxy.addDownstream(types_1.DASHBOARD_EDIT_MODE);
}
// subscribing to dashboard event to set 'edit mode'
this.eventBus
.getStream(types_1.DASHBOARD_EDIT_MODE)
.pipe((0, operators_1.takeUntil)(this.onDestroy$))
.subscribe((event) => {
this.pizzagnaService.setProperty({
componentId: this.componentId,
pizzagnaKey: types_2.PizzagnaLayer.Data,
propertyPath: ["collapsed"],
}, !event.payload);
this.pizzagnaService.setProperty({
componentId: this.componentId,
pizzagnaKey: types_2.PizzagnaLayer.Data,
propertyPath: ["editMode"],
}, !!event.payload);
});
}
ngAfterViewInit() {
// we can't set values in ngAfterViewInit directly - it causes ExpressionChangedAfterViewChecked error, so setTimeout has to be used
setTimeout(() => {
this.withCustomElement =
this.widgetHeaderCustomElement.nativeElement.childNodes
.length !== 0;
});
}
ngOnDestroy() {
this.onDestroy$.next();
this.onDestroy$.complete();
}
removeWidget() {
this.eventBus.getStream(types_1.WIDGET_REMOVE).next({});
}
toggleCollapsed() {
this.pizzagnaService.setProperty({
componentId: this.componentId,
pizzagnaKey: types_2.PizzagnaLayer.Data,
propertyPath: ["collapsed"],
}, !this.collapsed);
}
onEditWidget() {
this.eventBus.getStream(types_1.WIDGET_EDIT).next({});
}
onReloadData() {
if (!this.reloadable) {
throw new Error("The widget is not reloadable, so it can't be reloaded manually.");
}
this.eventBus.getStream(types_1.REFRESH).next({});
}
prepareLink($event) {
const target = $event.target;
if (target && this.linkProvider) {
const link = this.linkProvider.getLink(this.url);
if (link) {
target.setAttribute("href", link);
}
}
return true;
}
};
exports.WidgetHeaderComponent = WidgetHeaderComponent;
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", String)
], WidgetHeaderComponent.prototype, "componentId", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], WidgetHeaderComponent.prototype, "editMode", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Boolean)
], WidgetHeaderComponent.prototype, "editable", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Boolean)
], WidgetHeaderComponent.prototype, "removable", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], WidgetHeaderComponent.prototype, "collapsible", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], WidgetHeaderComponent.prototype, "reloadable", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", String)
], WidgetHeaderComponent.prototype, "title", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", String)
], WidgetHeaderComponent.prototype, "subtitle", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Boolean)
], WidgetHeaderComponent.prototype, "hideMenu", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", String)
], WidgetHeaderComponent.prototype, "url", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Boolean)
], WidgetHeaderComponent.prototype, "collapsed", void 0);
tslib_1.__decorate([
(0, core_1.HostBinding)("class.nui-widget-header"),
tslib_1.__metadata("design:type", Boolean),
tslib_1.__metadata("design:paramtypes", [])
], WidgetHeaderComponent.prototype, "hostClass", null);
tslib_1.__decorate([
(0, core_1.ViewChild)("widgetHeaderCustomElement"),
tslib_1.__metadata("design:type", core_1.ElementRef)
], WidgetHeaderComponent.prototype, "widgetHeaderCustomElement", void 0);
exports.WidgetHeaderComponent = WidgetHeaderComponent = tslib_1.__decorate([
(0, core_1.Component)({
selector: "nui-widget-header",
templateUrl: "./widget-header.component.html",
styleUrls: ["./widget-header.component.less"],
animations: [
(0, animations_1.trigger)("expandedState", [
(0, animations_1.state)("expanded", (0, animations_1.style)({ height: "*" })),
(0, animations_1.state)("collapsed", (0, animations_1.style)({ height: "11px" })),
(0, animations_1.transition)("expanded <=> collapsed", [
(0, animations_1.animate)("350ms ease-in-out"),
]),
]),
],
}),
tslib_1.__param(0, (0, core_1.Inject)(types_2.PIZZAGNA_EVENT_BUS)),
tslib_1.__param(3, (0, core_1.Optional)()),
tslib_1.__param(4, (0, core_1.Inject)(types_2.HEADER_LINK_PROVIDER)),
tslib_1.__param(4, (0, core_1.Optional)()),
tslib_1.__metadata("design:paramtypes", [bits_1.EventBus,
pizzagna_service_1.PizzagnaService,
core_1.ChangeDetectorRef,
widget_to_dashboard_event_proxy_service_1.WidgetToDashboardEventProxyService, Object])
], WidgetHeaderComponent);
//# sourceMappingURL=widget-header.component.js.map