@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
191 lines • 8.33 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.WidgetClonerComponent = void 0;
const tslib_1 = require("tslib");
const overlay_1 = require("@angular/cdk/overlay");
const core_1 = require("@angular/core");
const forms_1 = require("@angular/forms");
const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
const rxjs_1 = require("rxjs");
const operators_1 = require("rxjs/operators");
const widget_types_service_1 = require("../../../services/widget-types.service");
const types_1 = require("../../../types");
const preview_service_1 = require("../../services/preview.service");
const configurator_component_1 = require("../configurator/configurator.component");
let WidgetClonerComponent = class WidgetClonerComponent {
static { this.lateLoadKey = "WidgetClonerComponent"; }
constructor(changeDetector, configurator, previewService, formBuilder, widgetTypesService, scrollDispatcher) {
this.changeDetector = changeDetector;
this.configurator = configurator;
this.previewService = previewService;
this.formBuilder = formBuilder;
this.widgetTypesService = widgetTypesService;
this.scrollDispatcher = scrollDispatcher;
this.navigationControl = new rxjs_1.BehaviorSubject({
busyState: { busy: false },
allowStepChange: true,
});
this.busy = false;
this.scrolled = false;
this.isFormDisplayed = false;
this.destroy$ = new rxjs_1.Subject();
this.resetForm$ = new rxjs_1.Subject();
this.resetForm();
}
ngOnInit() {
this.previewService.previewChanged
.pipe((0, operators_1.takeUntil)(this.destroy$))
.subscribe((pizzagna) => {
this.onPreviewPizzagnaUpdate(pizzagna);
});
this.configurator.submitError
.pipe((0, operators_1.takeUntil)(this.destroy$))
.subscribe(() => {
this.toggleBusy();
});
}
ngAfterViewInit() {
// trigger dashwiz to update its button configuration
this.changeDetector.markForCheck();
// Scroll shadows
this.scrollDispatcher
.scrolled()
.subscribe((event) => {
const element = event?.getElementRef()?.nativeElement;
if (element?.classList?.contains("configurator-scrollable")) {
this.scrolled = !!element?.scrollTop;
this.changeDetector.detectChanges();
}
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
this.resetForm$.complete();
}
// --------------------------------------------------------------------------------
onPreviewPizzagnaUpdate(configLayer) {
if (!this.isFormDisplayed) {
return;
}
const previewWidget = {
...this.configurator.previewWidget,
pizzagna: {
...this.configurator.previewWidget?.pizzagna,
[types_1.PizzagnaLayer.Configuration]: configLayer,
},
};
// TODO: Make previewWidget to be assignable to IWidget
// @ts-ignore: Type '{ pizzagna: { configuration: IPizzagnaLayer; }; }' is missing the following properties from type 'IWidget': id, type
this.configurator.updateWidget(previewWidget);
}
canFinish() {
return (!!this.widgetTemplate?.pizzagna?.configuration &&
!this.widgetTemplate?.metadata?.needsConfiguration);
}
onFinish() {
if (this.form.invalid) {
this.form.markAllAsTouched();
// is used to trigger valueChanges to detect changes in forms
// as form is invalid and marking as touched doesn't trigger neither statusChanges nor valueChanges
// and validation messages and styles are not applied in that cases
this.form.patchValue(this.form.value);
this.form.updateValueAndValidity({ onlySelf: false });
return;
}
this.toggleBusy();
this.configurator.formSubmit();
}
onCancel() {
this.configurator.formCancel();
}
onStepNavigated(event) {
this.isFormDisplayed = event.currentStepIndex === 1;
if (event.currentStepIndex === 0 && event.previousStepIndex === 1) {
this.formPizzagna = undefined;
this.resetForm();
this.onSelect(this.widgetTemplate);
}
else if (event.currentStepIndex === 1) {
this.formPizzagna = this.widgetTypesService.getWidgetType(this.widgetTemplate.type, this.widgetTemplate.version).configurator;
this.previewService.preview =
this.widgetTemplate.pizzagna[types_1.PizzagnaLayer.Configuration];
}
}
onSelect(widget) {
this.widgetTemplate = widget;
const previewWidget = {
...widget,
id: this.configurator.previewWidget?.id || null,
};
// clear out the old widget first because we want to recreate the widget from scratch
this.configurator.updateWidget(null);
// the new widget is assigned in a setTimeout to apply the change in the next change detection cycle
setTimeout(() => {
// @ts-ignore: Type 'null' is not assignable to type 'string' on id property
this.configurator.updateWidget((0, cloneDeep_1.default)(previewWidget));
this.changeDetector.detectChanges();
});
}
toggleBusy() {
this.busy = !this.busy;
this.navigationControl.next({
busyState: { busy: this.busy },
allowStepChange: !this.busy,
});
}
resetForm() {
this.resetForm$.next();
this.form = this.formBuilder.group({});
this.form.statusChanges
.pipe((0, operators_1.takeUntil)(this.resetForm$), (0, operators_1.takeUntil)(this.destroy$))
.subscribe(() => {
this.changeDetector.markForCheck();
});
}
};
exports.WidgetClonerComponent = WidgetClonerComponent;
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], WidgetClonerComponent.prototype, "formPizzagna", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Function)
], WidgetClonerComponent.prototype, "cloneSelectionComponentType", void 0);
exports.WidgetClonerComponent = WidgetClonerComponent = tslib_1.__decorate([
(0, core_1.Component)({
selector: "nui-widget-cloner",
templateUrl: "./widget-cloner.component.html",
styleUrls: ["./widget-cloner.component.less"],
host: { class: "d-flex flex-column h-100" },
changeDetection: core_1.ChangeDetectionStrategy.OnPush,
standalone: false,
}),
tslib_1.__metadata("design:paramtypes", [core_1.ChangeDetectorRef,
configurator_component_1.ConfiguratorComponent,
preview_service_1.PreviewService,
forms_1.FormBuilder,
widget_types_service_1.WidgetTypesService,
overlay_1.ScrollDispatcher])
], WidgetClonerComponent);
//# sourceMappingURL=widget-cloner.component.js.map