@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 • 9.98 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.TableColumnsConverterService = void 0;
const tslib_1 = require("tslib");
const core_1 = require("@angular/core");
const forms_1 = require("@angular/forms");
const get_1 = tslib_1.__importDefault(require("lodash/get"));
const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
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("../../../../types");
const preview_service_1 = require("../../preview.service");
const base_converter_1 = require("../base-converter");
let TableColumnsConverterService = class TableColumnsConverterService extends base_converter_1.BaseConverter {
constructor(eventBus, previewService, pizzagnaService) {
super(eventBus, previewService, pizzagnaService);
}
ngAfterViewInit() {
super.ngAfterViewInit();
}
buildForm() {
const table = this.getPreview()?.table;
const dataFields = table?.properties?.dataFields;
const columns = table?.properties?.configuration?.columns;
let formPizzagna = this.pizzagnaService.pizzagna;
formPizzagna = (0, bits_1.immutableSet)(formPizzagna, `${types_1.PizzagnaLayer.Data}.columns.properties.columns`, columns ?? []);
formPizzagna = (0, bits_1.immutableSet)(formPizzagna, `${types_1.PizzagnaLayer.Data}.columns.properties.dataFields`, dataFields);
this.updateFormPizzagna(formPizzagna);
}
toPreview(form) {
// table configurator v2 doesn't have `columnsOutput`, it just uses `columns` as source of truth
const formControl = form.contains("columnsOutput")
? form.get("columnsOutput")
: form.get("columns");
if (!formControl) {
throw new Error("FormControl is not defined!");
}
formControl.valueChanges
.pipe((0, operators_1.takeUntil)(this.destroy$), (0, operators_1.distinctUntilChanged)(isEqual_1.default))
.subscribe((columns) => {
const columnsPath = "table.properties.configuration.columns";
// need to wait till forms are initialized in case of creating new column
setTimeout(() => {
const preview = this.getPreview();
this.updatePreview((0, bits_1.immutableSet)(preview, columnsPath, columns));
});
let formPizzagna = this.pizzagnaService.pizzagna;
// using setTimeout here updates the "filters" component properly - without it it doesn't update the dropdown with sortable columns
setTimeout(() => {
// hackfix for NUI-5712
// this assigment resolves a race condition that sometimes occured when data fields received from the data source would be
// overwritten by an "older" formPizzagna value assigned above
formPizzagna = (0, bits_1.immutableSet)(formPizzagna, `${types_1.PizzagnaLayer.Structure}.columns.properties.template`, this.pizzagnaService.pizzagna[types_1.PizzagnaLayer.Structure]
.columns.properties?.template);
formPizzagna = (0, bits_1.immutableSet)(formPizzagna, `${types_1.PizzagnaLayer.Data}.filters.properties.columns`, columns);
// this triggers change detection on the "filters" component
formPizzagna = (0, bits_1.immutableSet)(formPizzagna, `${types_1.PizzagnaLayer.Structure}.presentation.properties.nodes`, [
...(formPizzagna?.structure?.presentation
?.properties?.nodes ?? []),
]);
this.updateFormPizzagna(formPizzagna);
});
});
this.subscribeToColumnsValueChange();
}
subscribeToColumnsValueChange() {
this.component.form
.get("columnsOutput")
?.valueChanges.pipe(
// trigger subscription after tableColumnsFormArray is filled with values
// eslint-disable-next-line import/no-deprecated
(0, operators_1.startWith)(this.component.form.get("columnsOutput").value), (0, operators_1.filter)((columns) => columns.length > 0), (0, operators_1.tap)(() => this.handleWidthValidation()), (0, operators_1.map)((columns) => this.filterColumnsWithoutSpecifiedWidth(columns)), (0, operators_1.map)((activeColumnsWithoutWidth) => this.handleColumnsWithoutSpecifiedWidth(activeColumnsWithoutWidth)), (0, operators_1.distinctUntilKeyChanged)("id"), (0, operators_1.pluck)("id"), (0, operators_1.takeUntil)(this.destroy$))
.subscribe((columnId) => this.setWidthMessages(columnId));
}
/**
* Filters columns which are active (visible) and don't have specified width
* @param columns
*/
filterColumnsWithoutSpecifiedWidth(columns) {
return columns.filter((column) => column.isActive && !column.width);
}
/**
* Receives columns which are active and don't have specified width and returns:
* - if all columns have specified width, reset width of the last column and return its id
* - if there are only one column, set this columns id as last without specified width
* - if there are more than one column that don't have specified width, do nothing
* @param activeColumnsWithoutWidth
*/
handleColumnsWithoutSpecifiedWidth(activeColumnsWithoutWidth) {
switch (activeColumnsWithoutWidth.length) {
// if all columns have specified width, reset last columns value so that other columns can resize
case 0: {
const activeColumns = this.component.form.get("columns").controls.filter((control) => (0, get_1.default)(control, `value.properties[${control.value.id}/description].isActive`));
if ((0, isEmpty_1.default)(activeColumns)) {
return {
id: undefined,
label: undefined,
};
}
const lastActiveColumn = activeColumns[activeColumns.length - 1];
console.warn(`Cannot set width for all columns. Resetting "${lastActiveColumn.value.label}" width.`);
lastActiveColumn.patchValue({ width: null }, { emitEvent: false });
return lastActiveColumn.value;
}
case 1:
return activeColumnsWithoutWidth[0];
default:
return {
id: undefined,
label: undefined,
};
}
}
handleWidthValidation() {
this.component.form.get("columns").controls.forEach((formGroup) => {
const descriptionFormPath = `properties.${formGroup.value.id}/description`;
const descriptionForm = formGroup.get(descriptionFormPath);
if (!descriptionForm) {
return;
}
const isActive = descriptionForm.get("isActive")?.value;
const widthFormField = descriptionForm.get("width");
if (isActive) {
widthFormField?.setValidators([forms_1.Validators.min(62)]);
widthFormField?.markAllAsTouched();
widthFormField?.updateValueAndValidity({
emitEvent: false,
});
}
else {
widthFormField?.clearValidators();
widthFormField?.updateValueAndValidity({
emitEvent: false,
});
}
});
}
setWidthMessages(columnId) {
if (!this.pizzagnaService.pizzagna) {
return;
}
const widthMessageInput = "isWidthMessageDisplayed";
const { pizzagna } = this.pizzagnaService;
const columns = pizzagna.data.columns.properties?.columns;
columns.forEach((col) => this.pizzagnaService.setProperty(`${types_1.PizzagnaLayer.Data}.${col.id}/description.properties.${widthMessageInput}`, false));
if (!columnId) {
return;
}
this.pizzagnaService.setProperty(`${types_1.PizzagnaLayer.Data}.${columnId}/description.properties.${widthMessageInput}`, true);
}
};
exports.TableColumnsConverterService = TableColumnsConverterService;
exports.TableColumnsConverterService = TableColumnsConverterService = tslib_1.__decorate([
(0, core_1.Injectable)(),
tslib_1.__param(0, (0, core_1.Inject)(types_1.PIZZAGNA_EVENT_BUS)),
tslib_1.__metadata("design:paramtypes", [bits_1.EventBus,
preview_service_1.PreviewService,
pizzagna_service_1.PizzagnaService])
], TableColumnsConverterService);
//# sourceMappingURL=table-columns-converter.service.js.map