@michalrakus/x-react-web-lib 1.10.0 → 1.11.1

package/lib/components/XCheckboxDT.js

@@ -7,16 +7,8 @@ exports.XCheckboxDT = void 0;
 var react_1 = __importDefault(require("react"));
 var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtils_1 = require("./XUtils");
 var XCheckboxDT = function (props) {
-    // ak mame path, field je vzdy readOnly
-    var readOnly;
-    var posDot = props.field.indexOf(".");
-    if (posDot !== -1) {
-        readOnly = true;
-    }
-    else {
-        readOnly = props.readOnly !== undefined ? props.readOnly : false;
-    }
     var onValueChange = function (field, rowData, newValue) {
         // pri klikani na TriStateCheckbox prichadza v newValue cyklicky: true -> false -> null
         // ak mame not null atribut, tak pri null hodnote skocime rovno na true
@@ -41,6 +33,7 @@ var XCheckboxDT = function (props) {
         // konvertovat null hodnotu na "" (vo funkcii stringAsUI) je dolezite aby sa prejavila zmena na null v modeli (a tiez aby korektne pridal novy riadok)
         fieldValue = rowDataValue;
     }
+    var readOnly = XUtils_1.XUtils.isReadOnlyTableField(props.field, props.readOnly, props.form.state.object, props.rowData);
     return (react_1.default.createElement(tristatecheckbox_1.TriStateCheckbox, { id: props.field, value: fieldValue, onChange: function (e) { return onValueChange(props.field, props.rowData, e.value); }, disabled: readOnly }));
 };
 exports.XCheckboxDT = XCheckboxDT;

package/lib/components/XDropdownDT.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { XFormBase } from "./XFormBase";
-import { XDropdownOptionsMap } from "./XFormDataTable2";
+import { XDropdownOptionsMap, XTableFieldReadOnlyProp } from "./XFormDataTable2";
 import { XCustomFilter } from "../serverApi/FindParam";
 export declare const XDropdownDT: (props: {
     form: XFormBase;
@@ -12,5 +12,5 @@ export declare const XDropdownDT: (props: {
     dropdownOptionsMap: XDropdownOptionsMap;
     onDropdownOptionsMapChange: (dropdownOptionsMap: XDropdownOptionsMap) => void;
     rowData: any;
-    readOnly?: boolean | undefined;
+    readOnly?: XTableFieldReadOnlyProp | undefined;
 }) => JSX.Element;

package/lib/components/XDropdownDT.js

@@ -103,7 +103,6 @@ var XDropdownDT = function (props) {
             }
         });
     }); };
-    var readOnly = props.readOnly !== undefined ? props.readOnly : false;
     var onValueChange = function (assocField, rowData, newValue) {
         // zmenime hodnotu v modeli (odtial sa hodnota cita)
         var newValueOrNull;
@@ -118,7 +117,6 @@ var XDropdownDT = function (props) {
         // kedze "rowData" je sucastou "props.form.state.object", tak nam staci zavolat setState({object: object}), aby sa zmena prejavila
         props.form.onObjectDataChange();
     };
-    // TODO - readOnly implementovat
     // Dropdown setuje do atributu object.assocField asociovany objekt zo zoznamu objektov ktore ziskame podla asociacie
     var assocObject = null;
     if (props.rowData !== null) {
@@ -129,7 +127,8 @@ var XDropdownDT = function (props) {
         }
     }
     var options = props.dropdownOptionsMap[props.assocField] !== undefined ? props.dropdownOptionsMap[props.assocField] : []; // mozno mozme do options prasknut rovno undefined...
+    var readOnly = XUtils_1.XUtils.isReadOnlyTableField(undefined, props.readOnly, props.form.state.object, props.rowData);
     // appendTo={document.body} appenduje overlay panel na element body - eliminuje problem s overflow (pozri poznamku v XDropdownDTFilter)
-    return (react_1.default.createElement(dropdown_1.Dropdown, { appendTo: document.body, id: props.assocField, optionLabel: props.displayField, value: assocObject, options: options, dataKey: idField, onChange: function (e) { return onValueChange(props.assocField, props.rowData, e.target.value); } }));
+    return (react_1.default.createElement(dropdown_1.Dropdown, { appendTo: document.body, id: props.assocField, optionLabel: props.displayField, value: assocObject, options: options, dataKey: idField, onChange: function (e) { return onValueChange(props.assocField, props.rowData, e.target.value); }, readOnly: readOnly, disabled: readOnly }));
 };
 exports.XDropdownDT = XDropdownDT;

package/lib/components/{XBrowse.d.ts → XEditBrowse.d.ts}

@@ -1,11 +1,11 @@
 import { Component } from "react";
 import { XEditColumnDialogValues } from "./XEditColumnDialog";
 import { XBrowseMeta } from "../serverApi/XBrowseMetadata";
-export interface XBrowseProps {
+export interface XEditBrowseProps {
     entity: string;
     browseId?: string;
 }
-export declare class XBrowse extends Component<XBrowseProps> {
+export declare class XEditBrowse extends Component<XEditBrowseProps> {
     state: {
         xBrowseMeta: XBrowseMeta;
         editMode: boolean;
@@ -14,7 +14,7 @@ export declare class XBrowse extends Component<XBrowseProps> {
     indexForAddColumn?: number;
     addColumn: boolean;
     xEditColumnDialogValues?: XEditColumnDialogValues;
-    constructor(props: XBrowseProps);
+    constructor(props: XEditBrowseProps);
     getXBrowseMeta(): XBrowseMeta;
     createDefaultXBrowseMeta(): XBrowseMeta;
     onEditModeStart(): void;

package/lib/components/{XBrowse.js → XEditBrowse.js}

@@ -101,7 +101,7 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XBrowse = void 0;
+exports.XEditBrowse = void 0;
 var react_1 = __importStar(require("react"));
 var SourceCodeLinkEntity_1 = require("./SourceCodeLinkEntity");
 var XEditColumnDialog_1 = require("./XEditColumnDialog");
@@ -109,10 +109,10 @@ var _ = __importStar(require("lodash"));
 var XUtilsMetadata_1 = require("./XUtilsMetadata");
 var XUtils_1 = require("./XUtils");
 var XLazyDataTable_1 = require("./XLazyDataTable");
-// TODO - pouzit extends XBrowseBase, ako je tomu pri CarForm?
-var XBrowse = /** @class */ (function (_super) {
-    __extends(XBrowse, _super);
-    function XBrowse(props) {
+// TODO - pouzit extends XEditBrowseBase, ako je tomu pri CarForm?
+var XEditBrowse = /** @class */ (function (_super) {
+    __extends(XEditBrowse, _super);
+    function XEditBrowse(props) {
         var _this = _super.call(this, props) || this;
         console.log("************* XBrowse const entity = " + _this.props.entity);
         _this.getXBrowseMeta = _this.getXBrowseMeta.bind(_this);
@@ -137,14 +137,14 @@ var XBrowse = /** @class */ (function (_super) {
         _this.onEdit = _this.onEdit.bind(_this);
         return _this;
     }
-    XBrowse.prototype.getXBrowseMeta = function () {
+    XEditBrowse.prototype.getXBrowseMeta = function () {
         var xBrowseMeta = XUtilsMetadata_1.XUtilsMetadata.getXBrowseMeta(this.props.entity, this.props.browseId);
         if (xBrowseMeta === undefined) {
             xBrowseMeta = this.createDefaultXBrowseMeta();
         }
         return xBrowseMeta;
     };
-    XBrowse.prototype.createDefaultXBrowseMeta = function () {
+    XEditBrowse.prototype.createDefaultXBrowseMeta = function () {
         var e_1, _a;
         var xColumnMetaList = [];
         var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.props.entity);
@@ -164,12 +164,12 @@ var XBrowse = /** @class */ (function (_super) {
         }
         return { entity: this.props.entity, rows: 15, columnMetaList: xColumnMetaList };
     };
-    XBrowse.prototype.onEditModeStart = function () {
+    XEditBrowse.prototype.onEditModeStart = function () {
         // zmeny budeme robit na klonovanych datach - aby sme sa vedeli cez cancel vratit do povodneho stavu
         var xBrowseMetaCloned = _.cloneDeep(this.state.xBrowseMeta);
         this.setState({ xBrowseMeta: xBrowseMetaCloned, editMode: true });
     };
-    XBrowse.prototype.onEditModeSave = function () {
+    XEditBrowse.prototype.onEditModeSave = function () {
         return __awaiter(this, void 0, void 0, function () {
             var xBrowseMeta, columnOrder, _a, _b, xColumnMeta, e_2;
             var e_3, _c;
@@ -213,19 +213,19 @@ var XBrowse = /** @class */ (function (_super) {
             });
         });
     };
-    XBrowse.prototype.onEditModeCancel = function () {
+    XEditBrowse.prototype.onEditModeCancel = function () {
         // vratime formular z cache, resp. defaultny formular
         var xBrowseMeta = this.getXBrowseMeta();
         this.setState({ editMode: false, xBrowseMeta: xBrowseMeta });
     };
-    XBrowse.prototype.onAddColumn = function (field) {
+    XEditBrowse.prototype.onAddColumn = function (field) {
         console.log("onAddColumn: " + field);
         this.indexForAddColumn = this.getIndexForColumn(field);
         this.addColumn = true;
         this.xEditColumnDialogValues = { field: "", header: "", dropdownInFilter: false }; // values are used for dialog initialization
         this.setState({ editColumnDialogOpened: true });
     };
-    XBrowse.prototype.editColumnDialogOnHide = function (xEditColumnDialogValues) {
+    XEditBrowse.prototype.editColumnDialogOnHide = function (xEditColumnDialogValues) {
         if (xEditColumnDialogValues !== null) {
             if (this.indexForAddColumn !== undefined) {
                 var xBrowseMeta = this.state.xBrowseMeta;
@@ -248,7 +248,7 @@ var XBrowse = /** @class */ (function (_super) {
         }
         this.setState({ editColumnDialogOpened: false });
     };
-    XBrowse.prototype.onEditColumn = function (field) {
+    XEditBrowse.prototype.onEditColumn = function (field) {
         var _a;
         console.log("onEditColumn: " + field);
         this.indexForAddColumn = this.getIndexForColumn(field);
@@ -260,7 +260,7 @@ var XBrowse = /** @class */ (function (_super) {
             this.setState({ editColumnDialogOpened: true });
         }
     };
-    XBrowse.prototype.onRemoveColumn = function (field) {
+    XEditBrowse.prototype.onRemoveColumn = function (field) {
         console.log("onRemoveColumn: " + field);
         var index = this.getIndexForColumn(field);
         if (index !== undefined) {
@@ -270,13 +270,13 @@ var XBrowse = /** @class */ (function (_super) {
             this.setState({ xBrowseMeta: xBrowseMeta });
         }
     };
-    XBrowse.prototype.onMoveColumnLeft = function (field) {
+    XEditBrowse.prototype.onMoveColumnLeft = function (field) {
         this.moveColumn(field, -1);
     };
-    XBrowse.prototype.onMoveColumnRight = function (field) {
+    XEditBrowse.prototype.onMoveColumnRight = function (field) {
         this.moveColumn(field, 1);
     };
-    XBrowse.prototype.moveColumn = function (field, offset) {
+    XEditBrowse.prototype.moveColumn = function (field, offset) {
         var index = this.getIndexForColumn(field);
         if (index !== undefined) {
             var xBrowseMeta = this.state.xBrowseMeta;
@@ -285,7 +285,7 @@ var XBrowse = /** @class */ (function (_super) {
             this.setState({ xBrowseMeta: xBrowseMeta });
         }
     };
-    XBrowse.prototype.getIndexForColumn = function (field) {
+    XEditBrowse.prototype.getIndexForColumn = function (field) {
         var e_4, _a;
         var searchedIndex = undefined;
         var xBrowseMeta = this.state.xBrowseMeta;
@@ -307,7 +307,7 @@ var XBrowse = /** @class */ (function (_super) {
         }
         return searchedIndex;
     };
-    XBrowse.prototype.onEdit = function (selectedRow) {
+    XEditBrowse.prototype.onEdit = function (selectedRow) {
         var formElement = XUtils_1.XUtils.getAppForm(this.props.entity);
         if (formElement !== undefined) {
             var xEntity = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.props.entity);
@@ -321,7 +321,7 @@ var XBrowse = /** @class */ (function (_super) {
             console.log("XBrowse entity = ".concat(this.props.entity, ": form not found/registered."));
         }
     };
-    XBrowse.prototype.render = function () {
+    XEditBrowse.prototype.render = function () {
         var xBrowseMeta = this.state.xBrowseMeta;
         var xEditModeHandlers = {
             onStart: this.onEditModeStart,
@@ -355,6 +355,6 @@ var XBrowse = /** @class */ (function (_super) {
             entitySourceCodeLink,
             react_1.default.createElement(XEditColumnDialog_1.XEditColumnDialog, { dialogOpened: this.state.editColumnDialogOpened, entity: xBrowseMeta.entity, addColumn: this.addColumn, xEditColumnDialogValues: this.xEditColumnDialogValues, onHideDialog: this.editColumnDialogOnHide })));
     };
-    return XBrowse;
+    return XEditBrowse;
 }(react_1.Component));
-exports.XBrowse = XBrowse;
+exports.XEditBrowse = XEditBrowse;

package/lib/components/XFormBase.d.ts

@@ -1,13 +1,13 @@
 import { Component } from "react";
 import { XObject } from "./XObject";
 import { OperationType } from "./XUtils";
-import { FieldOnChange, XFormComponent } from "./XFormComponent";
-import { TableFieldOnChange, XFormDataTable2, XRowTechData } from "./XFormDataTable2";
+import { XFieldOnChange, XFormComponent } from "./XFormComponent";
+import { XTableFieldOnChange, XFormDataTable2, XRowTechData } from "./XFormDataTable2";
 import { XErrorMap, XErrors } from "./XErrors";
 export type XOnSaveOrCancelProp = (object: XObject | null, objectChange: OperationType) => void;
-export interface FormProps {
+export interface XFormProps {
     id?: number;
-    object?: XObject;
+    initValues?: object;
     onSaveOrCancel?: XOnSaveOrCancelProp;
 }
 export declare function Form(entity: string): <T extends new (...args: any[]) => {}>(constructor: T) => {
@@ -15,7 +15,7 @@ export declare function Form(entity: string): <T extends new (...args: any[]) =>
         entity: string;
     };
 } & T;
-export declare abstract class XFormBase extends Component<FormProps> {
+export declare abstract class XFormBase extends Component<XFormProps> {
     entity?: string;
     fields: Set<string>;
     state: {
@@ -29,18 +29,18 @@ export declare abstract class XFormBase extends Component<FormProps> {
         assoc: string;
         sortField: string;
     }>;
-    constructor(props: FormProps);
+    constructor(props: XFormProps);
     componentDidMount(): Promise<void>;
     getEntity(): string;
     getXObject(): XObject;
     getObject(): any;
     isAddRow(): any;
-    onFieldChange(field: string, value: any, error?: string | undefined, onChange?: FieldOnChange, assocObjectChange?: OperationType): void;
-    onTableFieldChange(rowData: any, field: string, value: any, error?: string | undefined, onChange?: TableFieldOnChange, assocObjectChange?: OperationType): void;
+    onFieldChange(field: string, value: any, error?: string | undefined, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
+    onTableFieldChange(rowData: any, field: string, value: any, error?: string | undefined, onChange?: XTableFieldOnChange, assocObjectChange?: OperationType): void;
     /**
      * @deprecated - mal by sa pouzivat onTableFieldChange
      */
-    onObjectDataChange(row?: any, onChange?: TableFieldOnChange): void;
+    onObjectDataChange(row?: any, onChange?: XTableFieldOnChange): void;
     setStateXForm(): void;
     onTableAddRow(assocField: string, newRow: any, dataKey?: string, selectedRow?: {}): void;
     static getNextRowId(rowList: any[], dataKey: string): number;
@@ -61,6 +61,7 @@ export declare abstract class XFormBase extends Component<FormProps> {
     getErrorMessagesForAssoc(oneToManyAssoc: string): string;
     static saveErrorsIntoXRowTechData(row: any, xErrors: XErrors): void;
     formReadOnly(object: XObject, field: string): boolean;
+    createNewObject(): XObject;
     preInitForm(object: XObject, operationType: OperationType.Insert | OperationType.Update): void;
     validate(object: XObject): XErrors;
     preSave(object: XObject): void;

package/lib/components/XFormBase.js

@@ -116,20 +116,20 @@ var XFormBase = /** @class */ (function (_super) {
     function XFormBase(props) {
         var _this = _super.call(this, props) || this;
         // check
-        if (props.id !== undefined && props.object !== undefined) {
-            throw "Form cannot have both props id and object defined. Only one of them can be defined.";
+        if (props.id !== undefined && props.initValues !== undefined) {
+            throw "Form cannot have both props id and initValues defined. Only one of them can be defined.";
         }
         //this.entity = props.entity; - nastavuje sa cez decorator @Form
         var object = null;
-        if (props.id === undefined) {
-            // add row operation
-            if (props.object !== undefined) {
-                object = props.object;
-            }
-            else {
-                object = {}; // empty new object
-            }
-        }
+        // if (props.id === undefined) {
+        //     // add row operation
+        //     if (props.object !== undefined) {
+        //         object = props.object;
+        //     }
+        //     else {
+        //         object = {}; // empty new object
+        //     }
+        // }
         _this.fields = new Set();
         _this.state = {
             object: object,
@@ -182,7 +182,11 @@ var XFormBase = /** @class */ (function (_super) {
                         return [3 /*break*/, 3];
                     case 2:
                         // add new row
-                        object = this.state.object;
+                        object = this.createNewObject();
+                        // pridame pripadne "init values", ktore pridu cez prop object (pouziva sa napr. pri insertovani cez XAutoComplete na predplnenie hodnoty)
+                        if (this.props.initValues !== undefined) {
+                            object = __assign(__assign({}, object), this.props.initValues); // values from this.props.object will override values from object (if key is the same)
+                        }
                         operationType = XUtils_1.OperationType.Insert;
                         _d.label = 3;
                     case 3:
@@ -590,6 +594,10 @@ var XFormBase = /** @class */ (function (_super) {
     XFormBase.prototype.formReadOnly = function (object, field) {
         return false;
     };
+    // this method can be overriden in subclass if needed (to set some default values for insert)
+    XFormBase.prototype.createNewObject = function () {
+        return {};
+    };
     // this method can be overriden in subclass if needed (to modify/save object after read from DB and before set into the form)
     XFormBase.prototype.preInitForm = function (object, operationType) {
     };

package/lib/components/XFormComponent.d.ts

@@ -4,7 +4,7 @@ import { XError } from "./XErrors";
 import { OperationType } from "./XUtils";
 import { XFieldChangeEvent } from "./XFieldChangeEvent";
 import { XCustomFilter } from "../serverApi/FindParam";
-export type FieldOnChange = (e: XFieldChangeEvent<any>) => void;
+export type XFieldOnChange = (e: XFieldChangeEvent<any>) => void;
 export type XReadOnlyProp = boolean | ((object: any) => boolean);
 export type XFilterProp = XCustomFilter | ((object: any) => XCustomFilter | undefined);
 export interface XFormComponentProps<T> {
@@ -13,13 +13,13 @@ export interface XFormComponentProps<T> {
     readOnly?: XReadOnlyProp;
     labelStyle?: React.CSSProperties;
     inline?: boolean;
-    onChange?: FieldOnChange;
+    onChange?: XFieldOnChange;
 }
 export declare abstract class XFormComponent<T, P extends XFormComponentProps<T>> extends Component<P> {
     protected constructor(props: P);
     abstract getField(): string;
     getValueFromObject(): any;
-    onValueChangeBase(value: any, onChange?: FieldOnChange, assocObjectChange?: OperationType): void;
+    onValueChangeBase(value: any, onChange?: XFieldOnChange, assocObjectChange?: OperationType): void;
     abstract isNotNull(): boolean;
     isReadOnly(): boolean;
     getLabel(): string;

package/lib/components/XFormComponentDT.d.ts

@@ -3,19 +3,19 @@ import { Component } from "react";
 import { OperationType } from "./XUtils";
 import { XError } from "./XErrors";
 import { XCustomFilter } from "../serverApi/FindParam";
-import { XTableFieldFilterProp, TableFieldOnChange } from "./XFormDataTable2";
+import { XTableFieldFilterProp, XTableFieldOnChange, XTableFieldReadOnlyProp } from "./XFormDataTable2";
 export interface XFormComponentDTProps {
     form: XFormBase;
     entity: string;
     rowData: any;
-    readOnly?: boolean;
-    onChange?: TableFieldOnChange;
+    readOnly?: XTableFieldReadOnlyProp;
+    onChange?: XTableFieldOnChange;
 }
 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;
+    onValueChangeBase(value: any, onChange?: XTableFieldOnChange, assocObjectChange?: OperationType): void;
     abstract isNotNull(): boolean;
     isReadOnly(): boolean;
     validate(): {

package/lib/components/XFormComponentDT.js

@@ -60,17 +60,16 @@ var XFormComponentDT = /** @class */ (function (_super) {
         else if (typeof this.props.readOnly === 'boolean') {
             readOnly = this.props.readOnly;
         }
-        // else if (typeof this.props.readOnly === 'function') {
-        //     // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
-        // TODO - use also this.props.rowData
-        //     const object: XObject = this.props.form.state.object;
-        //     if (object) {
-        //         readOnly = this.props.readOnly(this.props.form.getXObject());
-        //     }
-        //     else {
-        //         readOnly = true;
-        //     }
-        // }
+        else if (typeof this.props.readOnly === 'function') {
+            // TODO - tazko povedat ci niekedy bude object === null (asi ano vid metodu getFilterBase)
+            var object = this.props.form.state.object;
+            if (object) {
+                readOnly = this.props.readOnly(this.props.form.getXObject(), this.props.rowData);
+            }
+            else {
+                readOnly = true;
+            }
+        }
         else {
             // readOnly is undefined
             readOnly = false;

package/lib/components/XFormDataTable2.d.ts

@@ -66,8 +66,8 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     };
     constructor(props: XFormDataTableProps);
     getPathForColumn(columnProps: XFormColumnProps): string;
-    getDisplayFieldOrId(columnPropsAutoComplete: XFormAutoCompleteColumnProps): string;
     static getHeader(columnProps: XFormColumnProps, xEntity: XEntity, field: string, xField: XField): string;
+    static isReadOnlyHeader(path: string | undefined, readOnly: XTableFieldReadOnlyProp | undefined): boolean;
     getEntity(): string;
     createInitFilters(): DataTableFilterMeta;
     getFilterMatchMode(xField: XField): FilterMatchMode;
@@ -86,16 +86,17 @@ export declare class XFormDataTable2 extends Component<XFormDataTableProps> {
     isReadOnly(): boolean;
     render(): JSX.Element;
 }
-export type TableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
+export type XTableFieldOnChange = (e: XTableFieldChangeEvent<any, any>) => void;
+export type XTableFieldReadOnlyProp = boolean | ((object: any, tableRow: any) => boolean);
 export type XTableFieldFilterProp = XCustomFilter | ((object: any, rowData: any) => XCustomFilter | undefined);
 export interface XFormColumnProps {
     type: "inputSimple" | "dropdown" | "autoComplete" | "searchButton";
     header?: any;
-    readOnly?: boolean;
+    readOnly?: XTableFieldReadOnlyProp;
     dropdownInFilter?: boolean;
     showFilterMenu?: boolean;
     width?: string;
-    onChange?: TableFieldOnChange;
+    onChange?: XTableFieldOnChange;
 }
 export interface XFormInputSimpleColumnProps extends XFormColumnProps {
     field: string;
@@ -108,15 +109,16 @@ export interface XFormDropdownColumnProps extends XFormColumnProps {
 }
 export interface XFormAutoCompleteColumnProps extends XFormColumnProps {
     assocField: string;
-    displayField: string | ((suggestion: any) => string);
-    searchTable?: any;
-    assocForm?: any;
+    displayField: string;
+    searchBrowse?: JSX.Element;
+    assocForm?: JSX.Element;
     filter?: XTableFieldFilterProp;
+    suggestions?: any[];
 }
 export interface XFormSearchButtonColumnProps extends XFormColumnProps {
     assocField: string;
     displayField: string;
-    searchTable: any;
+    searchBrowse: JSX.Element;
 }
 export declare const XFormColumn: {
     (props: XFormInputSimpleColumnProps): null;

package/lib/components/XFormDataTable2.js

@@ -79,6 +79,7 @@ var tristatecheckbox_1 = require("primereact/tristatecheckbox");
 var api_1 = require("primereact/api");
 var XAutoCompleteDT_1 = require("./XAutoCompleteDT");
 var XButtonIconNarrow_1 = require("./XButtonIconNarrow");
+var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 var XLocale_1 = require("./XLocale");
 var XInputIntervalDT_1 = require("./XInputIntervalDT");
 var XFormDataTable2 = /** @class */ (function (_super) {
@@ -140,7 +141,7 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            return columnPropsAutoComplete.assocField + '.' + this.getDisplayFieldOrId(columnPropsAutoComplete);
+            return columnPropsAutoComplete.assocField + '.' + columnPropsAutoComplete.displayField;
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
@@ -150,21 +151,8 @@ var XFormDataTable2 = /** @class */ (function (_super) {
             throw "Unknown prop type = " + columnProps.type;
         }
     };
-    XFormDataTable2.prototype.getDisplayFieldOrId = function (columnPropsAutoComplete) {
-        // toto je hack - ak ratame displayField cez funkciu, tak nam potom v kode chyba (hociaky) atribut asociovaneho objektu
-        // aby sme nemuseli robit nejake velke prerabky a zmeny, tak podsunieme id-ckovy atribut
-        if (typeof columnPropsAutoComplete.displayField === 'string') {
-            return columnPropsAutoComplete.displayField; // vsetko ok
-        }
-        else {
-            // v displayField mame funkciu, zistime id-ckovy atribut
-            // TODO - problem - sortovanie/filtrovanie bude fungovat podla tohto id atributu
-            var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.getEntity()), columnPropsAutoComplete.assocField);
-            return XUtilsMetadata_1.XUtilsMetadata.getXEntity(xAssoc.entityName).idField;
-        }
-    };
     XFormDataTable2.getHeader = function (columnProps, xEntity, field, xField) {
-        var _a, _b, _c, _d;
+        var _a;
         // poznamky - parametre field a xField by sme mohli vyratavat na zaklade columnProps ale kedze ich uz mame, setrime performance a neduplikujeme vypocet
         // nie je to tu uplne idealne nakodene, ale je to pomerne prehladne
         var isNullable = true;
@@ -172,35 +160,58 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         if (columnProps.type === "inputSimple") {
             var columnPropsInputSimple = columnProps;
             isNullable = xField.isNullable;
-            readOnly = XUtils_1.XUtils.isReadOnly(columnPropsInputSimple.field, columnProps.readOnly);
+            readOnly = XFormDataTable2.isReadOnlyHeader(columnPropsInputSimple.field, columnProps.readOnly);
         }
         else if (columnProps.type === "dropdown") {
             var columnPropsDropdown = columnProps;
             var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsDropdown.assocField);
             isNullable = xAssoc.isNullable;
-            readOnly = (_a = columnProps.readOnly) !== null && _a !== void 0 ? _a : false;
+            readOnly = XFormDataTable2.isReadOnlyHeader(undefined, columnProps.readOnly);
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
             var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsAutoComplete.assocField);
             isNullable = xAssoc.isNullable;
-            readOnly = (_b = columnProps.readOnly) !== null && _b !== void 0 ? _b : false;
+            readOnly = XFormDataTable2.isReadOnlyHeader(undefined, columnProps.readOnly);
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
             var xAssoc = XUtilsMetadata_1.XUtilsMetadata.getXAssocToOne(xEntity, columnPropsSearchButton.assocField);
             isNullable = xAssoc.isNullable;
-            readOnly = (_c = columnProps.readOnly) !== null && _c !== void 0 ? _c : false;
+            readOnly = XFormDataTable2.isReadOnlyHeader(undefined, columnProps.readOnly);
         }
         else {
             throw "Unknown prop type = " + columnProps.type;
         }
-        var header = (_d = columnProps.header) !== null && _d !== void 0 ? _d : field;
+        var header = (_a = columnProps.header) !== null && _a !== void 0 ? _a : field;
         if (!isNullable && !readOnly) {
             header = XUtils_1.XUtils.markNotNull(header);
         }
         return header;
     };
+    // helper
+    XFormDataTable2.isReadOnlyHeader = function (path, readOnly) {
+        var isReadOnly;
+        if (path && !XUtilsCommon_1.XUtilsCommon.isSingleField(path)) {
+            // if the length of field is 2 or more, then readOnly
+            isReadOnly = true;
+        }
+        // formReadOnlyBase is called on the level XFormDataTable2
+        // else if (this.props.form.formReadOnlyBase("xxx")) {
+        //     isReadOnly = true;
+        // }
+        else if (typeof readOnly === 'boolean') {
+            isReadOnly = readOnly;
+        }
+        else if (typeof readOnly === 'function') {
+            isReadOnly = false;
+        }
+        else {
+            // readOnly is undefined
+            isReadOnly = false;
+        }
+        return isReadOnly;
+    };
     XFormDataTable2.prototype.getEntity = function () {
         if (this.entity === undefined) {
             throw "Unexpected error: this.entity is undefined";
@@ -337,12 +348,11 @@ var XFormDataTable2 = /** @class */ (function (_super) {
     */
     // body={(rowData: any) => bodyTemplate(childColumn.props.field, rowData)}
     XFormDataTable2.prototype.bodyTemplate = function (columnProps, tableReadOnly, rowData, xEntity) {
-        var _a, _b;
         var body;
+        // tableReadOnly has higher prio then property readOnly
+        var readOnly = tableReadOnly ? true : columnProps.readOnly;
         if (columnProps.type === "inputSimple") {
             var columnPropsInputSimple = columnProps;
-            // tableReadOnly has higher prio then property readOnly
-            var readOnly = tableReadOnly || ((_a = columnPropsInputSimple.readOnly) !== null && _a !== void 0 ? _a : false);
             var xField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntity, columnPropsInputSimple.field);
             if (xField.type === "decimal" || xField.type === "number") {
                 body = react_1.default.createElement(XInputDecimalDT_1.XInputDecimalDT, { form: this.props.form, entity: this.getEntity(), field: columnPropsInputSimple.field, rowData: rowData, readOnly: readOnly, onChange: columnPropsInputSimple.onChange });
@@ -363,17 +373,15 @@ var XFormDataTable2 = /** @class */ (function (_super) {
         }
         else if (columnProps.type === "dropdown") {
             var columnPropsDropdown = columnProps;
-            body = react_1.default.createElement(XDropdownDT_1.XDropdownDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsDropdown.assocField, displayField: columnPropsDropdown.displayField, sortField: columnPropsDropdown.sortField, filter: columnPropsDropdown.filter, dropdownOptionsMap: this.state.dropdownOptionsMap, onDropdownOptionsMapChange: this.onDropdownOptionsMapChange, rowData: rowData });
+            body = react_1.default.createElement(XDropdownDT_1.XDropdownDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsDropdown.assocField, displayField: columnPropsDropdown.displayField, sortField: columnPropsDropdown.sortField, filter: columnPropsDropdown.filter, dropdownOptionsMap: this.state.dropdownOptionsMap, onDropdownOptionsMapChange: this.onDropdownOptionsMapChange, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "autoComplete") {
             var columnPropsAutoComplete = columnProps;
-            // tableReadOnly has higher prio then property readOnly
-            var readOnly = tableReadOnly || ((_b = columnPropsAutoComplete.readOnly) !== null && _b !== void 0 ? _b : false);
-            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchTable: columnPropsAutoComplete.searchTable, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, rowData: rowData, readOnly: readOnly });
+            body = react_1.default.createElement(XAutoCompleteDT_1.XAutoCompleteDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsAutoComplete.assocField, displayField: columnPropsAutoComplete.displayField, searchBrowse: columnPropsAutoComplete.searchBrowse, assocForm: columnPropsAutoComplete.assocForm, filter: columnPropsAutoComplete.filter, suggestions: columnPropsAutoComplete.suggestions, rowData: rowData, readOnly: readOnly });
         }
         else if (columnProps.type === "searchButton") {
             var columnPropsSearchButton = columnProps;
-            body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchTable: columnPropsSearchButton.searchTable, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
+            body = react_1.default.createElement(XSearchButtonDT_1.XSearchButtonDT, { form: this.props.form, entity: this.getEntity(), assocField: columnPropsSearchButton.assocField, displayField: columnPropsSearchButton.displayField, searchBrowse: columnPropsSearchButton.searchBrowse, rowData: rowData, readOnly: columnPropsSearchButton.readOnly });
         }
         else {
             throw "Unknown prop type = " + columnProps.type;

package/lib/components/XFormNavigator3.d.ts

@@ -1,12 +1,12 @@
 import { Component } from "react";
 export interface XFormNavigator3Props {
-    rootFormElement?: any;
+    rootFormElement?: JSX.Element;
 }
 export declare class XFormNavigator3 extends Component<XFormNavigator3Props> {
     state: {
-        formElements: any[];
+        formElements: JSX.Element[];
     };
     constructor(props: XFormNavigator3Props);
-    openForm(newFormElement: any): void;
+    openForm(newFormElement: JSX.Element | null): void;
     render(): JSX.Element;
 }