@michalrakus/x-react-web-lib 1.0.0 → 1.2.0

package/lib/components/XFormComponent.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -15,6 +17,8 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XFormComponent = void 0;
 var react_1 = require("react");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtils_1 = require("./XUtils");
 var XFormComponent = /** @class */ (function (_super) {
     __extends(XFormComponent, _super);
     function XFormComponent(props) {
@@ -22,24 +26,64 @@ var XFormComponent = /** @class */ (function (_super) {
         props.form.addXFormComponent(_this);
         return _this;
     }
-    // pomocna metodka, sluzi napr. na validaciu not null atributov
-    // should be overriden
-    XFormComponent.prototype.getFieldForEdit = function () {
-        return undefined;
+    // ******** read and write from/into form.state.object ***********
+    // reads value from form.state.object
+    // can be overridden, but this should work for every component
+    XFormComponent.prototype.getValueFromObject = function () {
+        var objectValue = null;
+        var object = this.props.form.state.object;
+        if (object !== null) {
+            objectValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(object, this.getField());
+            //  pre istotu dame na null, null je standard
+            if (objectValue === undefined) {
+                objectValue = null;
+            }
+        }
+        return objectValue;
+    };
+    // writes value into form.state.object
+    XFormComponent.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
+        var error = this.validateOnChange(value);
+        this.props.form.onFieldChange(this.getField(), value, error, onChange, assocObjectChange);
+    };
+    XFormComponent.prototype.isReadOnly = function () {
+        // tuto do buducna planujeme pridat aj dynamicky readOnly, bude ho treba ukladat do form.state podobne ako sa ukladaju errory do form.state.errorMap
+        return XUtils_1.XUtils.isReadOnly(this.getField(), this.props.readOnly);
+    };
+    XFormComponent.prototype.getLabel = function () {
+        var _a;
+        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.getField();
+        // test na readOnly je tu hlavne koli tomu aby sme nemali * pri ID atribute, ktory sa pri inserte generuje az pri zapise do DB
+        if (this.isNotNull() && !this.isReadOnly()) {
+            label = XUtils_1.XUtils.markNotNull(label);
+        }
+        return label;
     };
+    XFormComponent.prototype.getLabelStyle = function () {
+        var _a, _b;
+        var labelStyle = (_a = this.props.labelStyle) !== null && _a !== void 0 ? _a : {};
+        var inline = (_b = this.props.inline) !== null && _b !== void 0 ? _b : false;
+        if (!inline) {
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH });
+        }
+        else {
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { width: 'auto' }); // podla dlzky labelu
+            XUtils_1.XUtils.addCssPropIfNotExists(labelStyle, { marginLeft: '1rem' });
+        }
+        return labelStyle;
+    };
+    // *********** validation support ************
     // volane po kliknuti na Save
-    // vrati error message ak nezbehne "field validacia", ak zbehne, vrati undefined
+    // vrati (field, XError) ak nezbehne "field validacia", ak zbehne, vrati undefined
     XFormComponent.prototype.validate = function () {
+        // TODO - FILOZOFICKA OTAZKA - volat validaciu aj ked je field readOnly (this.isReadOnly() === true)? zatial dame ze hej...
         var value = this.getValueFromObject();
         // not null validacia + custom field validacia volana na onChange
         var errorOnChange = this.validateOnChange(value);
         // custom field validacia volana na onBlur (focus lost)
         // TODO
         if (errorOnChange) {
-            var field = this.getFieldForEdit();
-            if (field) {
-                return { field: field, xError: { onChange: errorOnChange } };
-            }
+            return { field: this.getField(), xError: { onChange: errorOnChange, fieldLabel: this.getLabel() } };
         }
         return undefined;
     };
@@ -53,49 +97,14 @@ var XFormComponent = /** @class */ (function (_super) {
         return undefined;
     };
     XFormComponent.prototype.validateNotNull = function (value) {
-        if (this.checkNotNull() && value === null) {
+        // validacia by mala sediet s metodou getLabel(), kde sa pridava * , preto tu mame aj test !this.isReadOnly() - id fieldy pri inserte nechceme testovat
+        // otazka je ci nevypinat validaciu pre readOnly fieldy vzdy (aj ked napr. readOnly vznikne dynamicky)
+        if (this.isNotNull() && !this.isReadOnly() && value === null) {
             return "Field is required.";
         }
         return undefined;
     };
-    // should be overriden
-    XFormComponent.prototype.checkNotNull = function () {
-        return false;
-    };
-    // should be overriden
-    XFormComponent.prototype.getValueFromObject = function () {
-        return null;
-    };
-    // vrati error message z form.state.errorMap
-    XFormComponent.prototype.getError = function () {
-        var field = this.getFieldForEdit();
-        if (field) {
-            var error = this.props.form.state.errorMap[field];
-            if (error) {
-                if (error.onChange || error.onBlur || error.form) {
-                    var message = '';
-                    if (error.onChange) {
-                        message += error.onChange;
-                    }
-                    if (error.onBlur) {
-                        if (message !== '') {
-                            message += ' ';
-                        }
-                        message += error.onBlur;
-                    }
-                    if (error.form) {
-                        if (message !== '') {
-                            message += ' ';
-                        }
-                        message += error.form;
-                    }
-                    return message;
-                }
-            }
-        }
-        return undefined;
-    };
-    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props
+    // deprecated - nie je to pekne riesenie - do komponentu treba posielat error message (string) a nie props (asi ako v XAutoComplete)
     XFormComponent.prototype.getClassNameTooltip = function () {
         var error = this.getError();
         return error ? {
@@ -104,6 +113,37 @@ var XFormComponent = /** @class */ (function (_super) {
             tooltipOptions: { className: 'pink-tooltip', position: 'bottom' }
         } : {};
     };
+    // vrati error message z form.state.errorMap
+    XFormComponent.prototype.getError = function () {
+        var error = this.props.form.state.errorMap[this.getField()];
+        return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
+    };
+    XFormComponent.prototype.callOnChangeFromOnBlur = function () {
+        if (this.props.onChange) {
+            var object = this.props.form.getXObject();
+            // developer v onChange nastavi atributy na object-e
+            this.props.onChange({ object: object });
+            // rovno zavolame form.setState({...}), nech to nemusi robit developer
+            this.props.form.setStateXForm();
+        }
+    };
+    // len pre assoc fieldy sa pouziva
+    XFormComponent.prototype.getFilterBase = function (filter) {
+        var customFilter = undefined;
+        if (typeof filter === 'object') {
+            customFilter = filter;
+        }
+        if (typeof filter === 'function') {
+            //const object: XObject = this.props.form.getXObject();
+            var object = this.props.form.state.object;
+            // zatial zakomentujeme, aby sa zavolal aj pre XAutoComplete (tam zatial nemame k dispozicii object
+            // (componentDidMount pre XAutoComplete sa vola skor ako componentDidMount pre XFormBase))
+            //if (object) {
+            customFilter = filter(object);
+            //}
+        }
+        return customFilter;
+    };
     return XFormComponent;
 }(react_1.Component));
 exports.XFormComponent = XFormComponent;

package/lib/components/XFormComponentDT.d.ts

@@ -0,0 +1,30 @@
+import { XFormBase } from "./XFormBase";
+import { Component } from "react";
+import { OperationType } from "./XUtils";
+import { XError } from "./XErrors";
+import { XCustomFilter } from "../serverApi/FindParam";
+import { XTableFieldFilterProp, TableFieldOnChange } from "./XFormDataTable2";
+export interface XFormComponentDTProps {
+    form: XFormBase;
+    entity: string;
+    rowData: any;
+    readOnly?: boolean;
+    onChange?: TableFieldOnChange;
+}
+export declare abstract class XFormComponentDT<P extends XFormComponentDTProps> extends Component<P> {
+    protected constructor(props: P);
+    abstract getField(): string;
+    getValueFromRowData(): any;
+    onValueChangeBase(value: any, onChange?: TableFieldOnChange, assocObjectChange?: OperationType): void;
+    abstract isNotNull(): boolean;
+    isReadOnly(): boolean;
+    validate(): {
+        field: string;
+        xError: XError;
+    } | undefined;
+    validateOnChange(value: any): string | undefined;
+    validateNotNull(value: any): string | undefined;
+    getError(): string | undefined;
+    callOnChangeFromOnBlur(): void;
+    getFilterBase(filter: XTableFieldFilterProp | undefined): XCustomFilter | undefined;
+}

package/lib/components/XFormComponentDT.js

@@ -0,0 +1,119 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XFormComponentDT = void 0;
+var XFormBase_1 = require("./XFormBase");
+var react_1 = require("react");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtils_1 = require("./XUtils");
+var XFormComponentDT = /** @class */ (function (_super) {
+    __extends(XFormComponentDT, _super);
+    function XFormComponentDT(props) {
+        var _this = _super.call(this, props) || this;
+        XFormBase_1.XFormBase.getXRowTechData(props.rowData).xFormComponentDTList.push(_this);
+        return _this;
+    }
+    // ******** read and write from/into this.props.rowData ***********
+    // reads value from this.props.rowData
+    // can be overridden, but this should work for every component
+    XFormComponentDT.prototype.getValueFromRowData = function () {
+        var rowDataValue = null;
+        // test na undefined je tu koli insertu noveho riadku
+        if (this.props.rowData !== undefined && this.props.rowData !== null) {
+            rowDataValue = XUtilsCommon_1.XUtilsCommon.getValueByPath(this.props.rowData, this.getField());
+            //  pre istotu dame na null, null je standard
+            if (rowDataValue === undefined) {
+                rowDataValue = null;
+            }
+        }
+        return rowDataValue;
+    };
+    // writes value into form.state.object
+    XFormComponentDT.prototype.onValueChangeBase = function (value, onChange, assocObjectChange) {
+        var error = this.validateOnChange(value);
+        this.props.form.onTableFieldChange(this.props.rowData, this.getField(), value, error, onChange, assocObjectChange);
+    };
+    XFormComponentDT.prototype.isReadOnly = function () {
+        // tuto do buducna planujeme pridat aj dynamicky readOnly, bude ho treba ukladat do form.state podobne ako sa ukladaju errory do form.state.errorMap
+        return XUtils_1.XUtils.isReadOnly(this.getField(), this.props.readOnly);
+    };
+    // *********** validation support ************
+    // volane po kliknuti na Save
+    // vrati (field, XError) ak nezbehne "field validacia", ak zbehne, vrati undefined
+    XFormComponentDT.prototype.validate = function () {
+        // TODO - FILOZOFICKA OTAZKA - volat validaciu aj ked je field readOnly (this.isReadOnly() === true)? zatial dame ze hej...
+        var value = this.getValueFromRowData();
+        // not null validacia + custom field validacia volana na onChange
+        var errorOnChange = this.validateOnChange(value);
+        // custom field validacia volana na onBlur (focus lost)
+        // TODO - fieldLabel
+        if (errorOnChange) {
+            return { field: this.getField(), xError: { onChange: errorOnChange, fieldLabel: undefined } };
+        }
+        return undefined;
+    };
+    XFormComponentDT.prototype.validateOnChange = function (value) {
+        var error = this.validateNotNull(value);
+        if (error) {
+            return error;
+        }
+        // custom field validacia volana na onChange
+        // TODO
+        return undefined;
+    };
+    XFormComponentDT.prototype.validateNotNull = function (value) {
+        // validacia by mala sediet s metodou getLabel(), kde sa pridava * , preto tu mame aj test !this.isReadOnly() - id fieldy pri inserte nechceme testovat
+        // otazka je ci nevypinat validaciu pre readOnly fieldy vzdy (aj ked napr. readOnly vznikne dynamicky)
+        if (this.isNotNull() && !this.isReadOnly() && value === null) {
+            return "Field is required.";
+        }
+        return undefined;
+    };
+    // vrati error message z rowData.errorMap
+    XFormComponentDT.prototype.getError = function () {
+        var error = XFormBase_1.XFormBase.getXRowTechData(this.props.rowData).errorMap[this.getField()];
+        return error ? XUtils_1.XUtils.getErrorMessage(error) : undefined;
+    };
+    XFormComponentDT.prototype.callOnChangeFromOnBlur = function () {
+        if (this.props.onChange) {
+            var object = this.props.form.getXObject();
+            // developer v onChange nastavi atributy na object-e
+            this.props.onChange({ object: object, tableRow: this.props.rowData, assocObjectChange: undefined });
+            // rovno zavolame form.setState({...}), nech to nemusi robit developer
+            this.props.form.setStateXForm();
+        }
+    };
+    // len pre assoc fieldy sa pouziva, aj to nie pre vsetky
+    XFormComponentDT.prototype.getFilterBase = function (filter) {
+        var customFilter = undefined;
+        if (typeof filter === 'object') {
+            customFilter = filter;
+        }
+        if (typeof filter === 'function') {
+            //const object: XObject = this.props.form.getXObject();
+            var object = this.props.form.state.object;
+            // zatial zakomentujeme, aby sa zavolal aj pre XAutoComplete (tam zatial nemame k dispozicii object
+            // (componentDidMount pre XAutoComplete sa vola skor ako componentDidMount pre XFormBase))
+            //if (object) {
+            customFilter = filter(object, this.props.rowData);
+            //}
+        }
+        return customFilter;
+    };
+    return XFormComponentDT;
+}(react_1.Component));
+exports.XFormComponentDT = XFormComponentDT;

package/lib/components/XFormDataTable2.d.ts

@@ -1,7 +1,18 @@
 import { XFormBase } from "./XFormBase";
 import { Component, ReactChild } from "react";
-import { Filters } from "../serverApi/FindParam";
+import { DataTableFilterMeta } from "primereact/datatable";
 import { XEntity, XField } from "../serverApi/XEntityMetadata";
+import { FilterMatchMode } from "primereact/api";
+import { XTableFieldChangeEvent } from "./XFieldChangeEvent";
+import { XCustomFilter } from "../serverApi/FindParam";
+import { XFormComponentDT } from "./XFormComponentDT";
+import { XErrorMap } from "./XErrors";
+import { IconType } from "primereact/utils";
+import { ButtonProps } from "primereact/button";
+export interface XRowTechData {
+    xFormComponentDTList: Array<XFormComponentDT<any>>;
+    errorMap: XErrorMap;
+}
 export interface XDropdownOptionsMap {
     [assocField: string]: any[];
 }
@@ -11,6 +22,8 @@ export interface XFormDataTableProps {
     dataKey?: string;
     paginator?: boolean;
     rows?: number;
+    filterDisplay: "menu" | "row" | "none";
+    sortable: boolean;
     scrollable: boolean;
     scrollWidth?: string;
     scrollHeight?: string;
@@ -18,16 +31,26 @@ export interface XFormDataTableProps {
     label?: string;
     readOnly?: boolean;
     onClickAddRow?: () => void;
-    onClickRemoveRow?: () => void;
+    onClickRemoveRow?: (row: any) => void;
+    removeButtonInRow: boolean;
+    addRowLabel: string;
+    addRowIcon?: IconType<ButtonProps>;
+    removeRowLabel: string;
+    removeRowIcon?: IconType<ButtonProps>;
     width?: string;
     children: ReactChild[];
 }
 export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     static defaultProps: {
+        filterDisplay: string;
+        sortable: boolean;
         scrollable: boolean;
         scrollWidth: string;
         scrollHeight: string;
         shrinkWidth: boolean;
+        removeButtonInRow: boolean;
+        addRowLabel: string;
+        removeRowLabel: string;
     };
     props: XFormDataTableProps;
     entity?: string;
@@ -36,12 +59,15 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     state: {
         selectedRow: {} | undefined;
         dropdownOptionsMap: XDropdownOptionsMap;
-        filters: Filters;
+        filters: DataTableFilterMeta;
     };
     constructor(props: XFormDataTableProps);
-    static getPathForColumn(columnProps: XFormColumnProps): string;
+    getPathForColumn(columnProps: XFormColumnProps): string;
+    getDisplayFieldOrId(columnPropsAutoComplete: XFormAutoCompleteColumnProps): string;
     static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
     getEntity(): string;
+    createInitFilters(): DataTableFilterMeta;
+    getFilterMatchMode(xField: XField): FilterMatchMode;
     onSelectionChange(event: any): void;
     onDropdownOptionsMapChange(dropdownOptionsMap: XDropdownOptionsMap): void;
     onFilter(event: any): void;
@@ -49,18 +75,24 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     getCheckboxFilterValue(field: string): boolean | null;
     onDropdownFilterChange(field: string, displayValue: any): void;
     getDropdownFilterValue(field: string): any;
-    onBodyValueChange(field: string, rowData: any, newValue: any): void;
     bodyTemplate(columnProps: XFormColumnProps, rowData: any, xEntity: XEntity): any;
-    onClickAddRowDefault(): void;
-    onClickRemoveRowDefault(): void;
+    onClickAddRow(): void;
+    onClickRemoveRowBySelection(): void;
+    removeRow(row: any): void;
+    validate(): void;
+    getErrorMessages(): string;
     render(): JSX.Element;
 }
+export type TableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
+export type XTableFieldFilterProp = XCustomFilter | ((object: any, rowData: any) => XCustomFilter | undefined);
 export interface XFormColumnProps {
-    type: string;
+    type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton";
     header?: any;
     readOnly?: boolean;
     dropdownInFilter?: boolean;
+    showFilterMenu?: boolean;
     width?: string;
+    onChange?: TableFieldOnChange;
 }
 export interface XFormInputSimpleColumnProps extends XFormColumnProps {
     field: string;
@@ -69,6 +101,13 @@ export interface XFormDropdownColumnProps extends XFormColumnProps {
     assocField: string;
     displayField: string;
 }
+export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
+    assocField: string;
+    displayField: string | ((suggestion: any) => string);
+    searchTable?: any;
+    assocForm?: any;
+    filter?: XTableFieldFilterProp;
+}
 export interface XFormSearchButtonColumnProps extends XFormColumnProps {
     assocField: string;
     displayField: string;
@@ -86,6 +125,12 @@ export declare const XFormDropdownColumn: {
         type: string;
     };
 };
+export declare const XFormAutoCompleteColumn: {
+    (props: XFormAutoCompleteColumnProps): null;
+    defaultProps: {
+        type: string;
+    };
+};
 export declare const XFormSearchButtonColumn: {
     (props: XFormSearchButtonColumnProps): null;
     defaultProps: {