@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
181 lines • 7.5 kB
JavaScript
;
// © 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.ItemsDynamicComponent = void 0;
const tslib_1 = require("tslib");
const core_1 = require("@angular/core");
const forms_1 = require("@angular/forms");
// eslint-disable-next-line import/no-deprecated
const operators_1 = require("rxjs/operators");
const bits_1 = require("@nova-ui/bits");
const base_layout_1 = require("../../../components/layouts/base-layout");
const pizzagna_service_1 = require("../../../pizzagna/services/pizzagna.service");
/** @ignore */
let ItemsDynamicComponent = class ItemsDynamicComponent extends base_layout_1.BaseLayout {
static { this.lateLoadKey = "ItemsDynamicComponent"; }
constructor(changeDetector, pizzagnaService, logger, formBuilder) {
super(changeDetector, pizzagnaService, logger);
this.formBuilder = formBuilder;
this.items = [];
this.moveButtons = true;
this.formReady = new core_1.EventEmitter();
this.itemsChange = new core_1.EventEmitter();
this.headerMap = new Map();
}
getItemForNode(node) {
return this.items.find((item) => item.id === node.id);
}
getNodes() {
return this.nodes;
}
ngOnInit() {
this.form = this.formBuilder.array([], forms_1.Validators.required);
this.formReady.emit(this.form);
}
onEvent(componentId, event) {
// TODO: refactor
const item = this.items.find((i) => i.id === componentId);
const index = this.items.findIndex((i) => i.id === componentId);
if (event.id === "formReady" && item) {
this.onFormReady(item, event.payload, index);
}
if (event.id === "formDestroy") {
this.onFormDestroy(event.payload);
}
}
onFormReady(item, form, index) {
const childForm = this.formBuilder.group({
id: [item.id],
componentType: [item.componentType],
properties: form,
});
this.form.setControl(index, childForm);
setTimeout(() => {
const label = form.get(`${item.id}/description`)?.get("label");
label?.valueChanges
// eslint-disable-next-line import/no-deprecated
.pipe((0, operators_1.startWith)(label.value), (0, operators_1.takeUntil)(this.destroyed$))
.subscribe((value) => {
this.headerMap.set(item.id, value || "");
this.changeDetector.markForCheck();
});
});
}
onFormDestroy(form) {
// using setTimeout to allow the change detection cycle to finish before updating the form
setTimeout(() => {
// remove form
let i = 0;
for (; i < this.form.length; i++) {
if (this.form.at(i).get("properties") === form) {
break;
}
}
this.form.removeAt(i);
// triggers form change
this.form.patchValue(this.form.value, { emitEvent: true });
});
}
trackBy(index, item) {
return item.id;
}
removeItem(item, index) {
if (!item) {
throw new Error("Unable to remove undefined item from pizzagna");
}
// remove item configuration - this will cause the onFormDestroy to be called for related form after component disappears from the view
this.itemsChange.emit(this.items.filter((it) => it !== item));
this.items.splice(index, 1);
this.nodes.splice(index, 1);
this.pizzagnaService.removeComponents(item.id);
}
moveItem(index, toIndex) {
const items = [...this.items];
const item = items.splice(index, 1);
items.splice(toIndex, 0, ...item);
const nodes = [...this.nodes];
const node = nodes.splice(index, 1);
nodes.splice(toIndex, 0, ...node);
this.nodes = [...nodes];
this.moveFormValues(index, toIndex);
this.itemsChange.emit(items);
// triggers form change - setTimeout because we need to wait first for items to update
// console.log(this.form.value);
setTimeout(() => {
this.form.setValue(this.form.value, { emitEvent: true });
});
}
drop(event) {
this.moveItem(event.previousIndex, event.currentIndex);
}
cdkDragStarted(event) {
this.height = event.source.element.nativeElement.offsetHeight;
}
moveFormValues(index, toIndex) {
const oldValue = this.form.at(index);
this.form.removeAt(index);
this.form.insert(toIndex, oldValue);
}
ngOnDestroy() {
// Ensures that any base class observables are unsubscribed.
super.ngOnDestroy();
}
};
exports.ItemsDynamicComponent = ItemsDynamicComponent;
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Array)
], ItemsDynamicComponent.prototype, "items", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Object)
], ItemsDynamicComponent.prototype, "moveButtons", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", Array)
], ItemsDynamicComponent.prototype, "nodes", void 0);
tslib_1.__decorate([
(0, core_1.Input)(),
tslib_1.__metadata("design:type", String)
], ItemsDynamicComponent.prototype, "headerPrefix", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], ItemsDynamicComponent.prototype, "formReady", void 0);
tslib_1.__decorate([
(0, core_1.Output)(),
tslib_1.__metadata("design:type", Object)
], ItemsDynamicComponent.prototype, "itemsChange", void 0);
exports.ItemsDynamicComponent = ItemsDynamicComponent = tslib_1.__decorate([
(0, core_1.Component)({
selector: "nui-items-dynamic",
templateUrl: "./items-dynamic.component.html",
styleUrls: ["items-dynamic.component.less"],
changeDetection: core_1.ChangeDetectionStrategy.OnPush,
encapsulation: core_1.ViewEncapsulation.None,
standalone: false,
}),
tslib_1.__metadata("design:paramtypes", [core_1.ChangeDetectorRef,
pizzagna_service_1.PizzagnaService,
bits_1.LoggerService,
forms_1.FormBuilder])
], ItemsDynamicComponent);
//# sourceMappingURL=items-dynamic.component.js.map