@michalrakus/x-react-web-lib 1.25.0 → 1.26.0

package/lib/components/XAutoCompleteBase.d.ts

@@ -1,15 +1,22 @@
 import React, { Component } from "react";
 import { AutoCompleteChangeEvent } from "primereact/autocomplete";
 import { OperationType, XQuery } from "./XUtils";
-import { MenuItem } from "primereact/menuitem";
+import { MenuItemCommandEvent } from "primereact/menuitem";
 import { XSearchBrowseParams } from "./XSearchBrowseParams";
 import { DataTableSortMeta } from "primereact/datatable";
+import { XEntity } from "../serverApi/XEntityMetadata";
+interface XButtonItem {
+    icon: any | undefined;
+    tooltip?: string;
+    command(event: MenuItemCommandEvent): void;
+}
 export type XSuggestionsLoadProp = "eager" | "onSearchStart" | "lazy";
 export type XSuggestionsLoadType = "suggestions" | XSuggestionsLoadProp;
 export interface XAutoCompleteBaseProps {
     value: any;
     onChange: (object: any, objectChange: OperationType) => void;
     suggestions?: any[];
+    suggestionsEntity?: string;
     suggestionsLoad?: XSuggestionsLoadProp;
     suggestionsQuery?: XQuery;
     lazyLoadMaxRows: number;
@@ -20,7 +27,11 @@ export interface XAutoCompleteBaseProps {
     valueForm?: JSX.Element;
     idField?: string;
     onAddRow?: (inputValue: string) => void;
+    insertButtonTooltip?: string;
+    updateButtonTooltip?: string;
+    searchButtonTooltip?: string;
     minLength?: number;
+    buttonsLayout: "splitButton" | "buttons";
     width?: string;
     scrollHeight?: string;
     inputClassName?: string;
@@ -35,6 +46,7 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
         lazyLoadMaxRows: number;
         splitQueryValue: boolean;
         minLength: number;
+        buttonsLayout: string;
         scrollHeight: string;
     };
     autoCompleteRef: any;
@@ -49,6 +61,7 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     };
     suggestionsLoadedForOSS: boolean;
     wasOnChangeCalled: boolean;
+    xEntity: XEntity | undefined;
     formDialogObjectId: number | undefined;
     formDialogInitValuesForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
@@ -72,10 +85,10 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     formDialogOnHide(): void;
     searchDialogOnChoose(chosenRow: any): void;
     searchDialogOnHide(): void;
-    createInsertItem(splitButtonItems: MenuItem[]): void;
-    createUpdateItem(splitButtonItems: MenuItem[]): void;
-    createSearchItem(splitButtonItems: MenuItem[]): void;
-    createDropdownItem(splitButtonItems: MenuItem[]): void;
+    createInsertItem(buttonItems: XButtonItem[]): void;
+    createUpdateItem(buttonItems: XButtonItem[]): void;
+    createSearchItem(buttonItems: XButtonItem[]): void;
+    createDropdownItem(buttonItems: XButtonItem[]): void;
     onOpenDropdown(e: any): void;
     openDropdown(e: any): void;
     onEditAssocValue(): void;
@@ -88,3 +101,4 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     createSearchBrowseParams(): XSearchBrowseParams;
     render(): React.JSX.Element;
 }
+export {};

package/lib/components/XAutoCompleteBase.js

@@ -129,6 +129,7 @@ var dialog_1 = require("primereact/dialog");
 var XUtils_1 = require("./XUtils");
 var button_1 = require("primereact/button");
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
+var XUtilsMetadataCommon_1 = require("../serverApi/XUtilsMetadataCommon");
 var XAutoCompleteBase = /** @class */ (function (_super) {
     __extends(XAutoCompleteBase, _super);
     function XAutoCompleteBase(props) {
@@ -145,6 +146,20 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         };
         _this.suggestionsLoadedForOSS = false;
         _this.wasOnChangeCalled = false;
+        var entity;
+        if (_this.getXSuggestionsLoadType() === "suggestions") {
+            // if (this.props.suggestionsEntity === undefined) {
+            //     throw "If prop suggestions is used, then also prop suggestionsEntity must be defined.";
+            // }
+            entity = _this.props.suggestionsEntity;
+        }
+        else {
+            if (_this.props.suggestionsQuery === undefined) {
+                throw "prop suggestionsQuery must be defined. (prop suggestions is not used)";
+            }
+            entity = _this.props.suggestionsQuery.entity;
+        }
+        _this.xEntity = entity ? XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXEntity(entity) : undefined;
         _this.completeMethod = _this.completeMethod.bind(_this);
         _this.onChange = _this.onChange.bind(_this);
         _this.onSelect = _this.onSelect.bind(_this);
@@ -487,10 +502,11 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             this.setFocusToInput();
         }
     };
-    XAutoCompleteBase.prototype.createInsertItem = function (splitButtonItems) {
+    XAutoCompleteBase.prototype.createInsertItem = function (buttonItems) {
         var _this = this;
-        splitButtonItems.push({
+        buttonItems.push({
             icon: 'pi pi-plus',
+            tooltip: this.props.insertButtonTooltip,
             command: function (e) {
                 if (_this.props.onAddRow) {
                     // mame custom handler pre "plus" button
@@ -514,10 +530,11 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             }
         });
     };
-    XAutoCompleteBase.prototype.createUpdateItem = function (splitButtonItems) {
+    XAutoCompleteBase.prototype.createUpdateItem = function (buttonItems) {
         var _this = this;
-        splitButtonItems.push({
+        buttonItems.push({
             icon: 'pi pi-pencil',
+            tooltip: this.props.updateButtonTooltip,
             command: function (e) {
                 if (_this.state.inputChanged) {
                     alert("Value \"".concat(_this.state.inputValueState, "\" was not found among valid values, please enter some valid value."));
@@ -541,18 +558,19 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         //     }
         // },
     };
-    XAutoCompleteBase.prototype.createSearchItem = function (splitButtonItems) {
+    XAutoCompleteBase.prototype.createSearchItem = function (buttonItems) {
         var _this = this;
-        splitButtonItems.push({
+        buttonItems.push({
             icon: 'pi pi-search',
+            tooltip: this.props.searchButtonTooltip,
             command: function (e) {
                 _this.setState({ searchDialogOpened: true });
             }
         });
     };
-    XAutoCompleteBase.prototype.createDropdownItem = function (splitButtonItems) {
+    XAutoCompleteBase.prototype.createDropdownItem = function (buttonItems) {
         var _this = this;
-        splitButtonItems.push({
+        buttonItems.push({
             icon: 'pi pi-chevron-down',
             command: function (e) {
                 // zobrazi cely suggestions list, zide sa ak chceme vidiet vsetky moznosti
@@ -633,7 +651,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
             displayValue = suggestion;
         }
         else {
-            displayValue = XUtilsCommon_1.XUtilsCommon.createDisplayValue(suggestion, this.getFields());
+            displayValue = XUtilsCommon_1.XUtilsCommon.createDisplayValue(suggestion, this.xEntity, this.getFields());
         }
         return displayValue;
     };
@@ -654,37 +672,45 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
-        var dropdownButton;
+        var buttons;
         if (!readOnly) {
             if (this.props.searchBrowse || this.props.valueForm || this.props.onAddRow) {
-                // mame searchBrowse alebo CRUD operacie, potrebujeme SplitButton
-                var splitButtonItems = [];
+                // mame searchBrowse alebo CRUD operacie, potrebujeme viac buttonov alebo SplitButton
+                var buttonItems = [];
                 if (this.props.valueForm || this.props.onAddRow) {
-                    this.createInsertItem(splitButtonItems);
+                    this.createInsertItem(buttonItems);
                 }
                 if (this.props.valueForm) {
-                    this.createUpdateItem(splitButtonItems);
+                    this.createUpdateItem(buttonItems);
                 }
                 if (this.props.searchBrowse && !readOnly) {
-                    this.createSearchItem(splitButtonItems);
+                    this.createSearchItem(buttonItems);
+                }
+                this.createDropdownItem(buttonItems);
+                if (this.props.buttonsLayout === "buttons") {
+                    buttons = buttonItems.map(function (value) { return react_1.default.createElement(button_1.Button, { icon: value.icon, tooltip: value.tooltip, tooltipOptions: { position: 'top' }, onClick: function (e) { return value.command(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() }); });
+                }
+                else {
+                    // buttonsLayout === "splitButton"
+                    // tooltip-y by trebalo pridat...
+                    var splitButtonItems = buttonItems.map(function (value) { return { icon: value.icon, command: value.command }; });
+                    buttons = [react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly })];
                 }
-                this.createDropdownItem(splitButtonItems);
-                dropdownButton = react_1.default.createElement(splitbutton_1.SplitButton, { model: splitButtonItems, className: 'x-splitbutton-only-dropdown' + XUtils_1.XUtils.mobileCssSuffix(), menuClassName: 'x-splitbutton-only-dropdown-menu' + XUtils_1.XUtils.mobileCssSuffix(), disabled: readOnly });
             }
             else {
                 // mame len 1 operaciu - dame jednoduchy button
-                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
+                buttons = [react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", onClick: function (e) { return _this.onOpenDropdown(e); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() })];
             }
         }
         else {
             // readOnly
             // ak mame valueForm a mame asociovany objekt, umoznime editovat asociovany objekt
             if (this.props.valueForm && this.props.value !== null) {
-                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-pencil", onClick: function (e) { return _this.onEditAssocValue(); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() });
+                buttons = [react_1.default.createElement(button_1.Button, { icon: "pi pi-pencil", tooltip: this.props.updateButtonTooltip, tooltipOptions: { position: 'top' }, onClick: function (e) { return _this.onEditAssocValue(); }, className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix() })];
             }
             else {
                 // dame disablovany button (z estetickych dovodov, zachovame sirku)
-                dropdownButton = react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: true });
+                buttons = [react_1.default.createElement(button_1.Button, { icon: "pi pi-chevron-down", className: 'x-dropdownbutton' + XUtils_1.XUtils.mobileCssSuffix(), disabled: true })];
             }
         }
         // vypocitame inputValue
@@ -701,8 +727,8 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         // <DobrovolnikForm id={this.formDialogObjectId} object={this.formDialogInitValuesForInsert} onSaveOrCancel={this.formDialogOnSaveOrCancel}/>
         // formgroup-inline lepi SplitButton na autocomplete a zarovna jeho vysku
         return (react_1.default.createElement("div", { className: "x-auto-complete-base", style: { width: this.props.width } },
-            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName })),
-            dropdownButton,
+            react_1.default.createElement(autocomplete_1.AutoComplete, __assign({ value: inputValue, suggestions: this.state.filteredSuggestions, completeMethod: this.completeMethod, itemTemplate: this.itemTemplate, onChange: this.onChange, onSelect: this.onSelect, onBlur: this.onBlur, minLength: this.props.minLength, scrollHeight: this.props.scrollHeight, ref: this.autoCompleteRef, readOnly: readOnly, disabled: readOnly }, XUtils_1.XUtils.createTooltipOrErrorProps(error), { inputClassName: this.props.inputClassName, showEmptyMessage: true })),
+            buttons,
             this.props.valueForm != undefined ?
                 react_1.default.createElement(dialog_1.Dialog, { className: "x-dialog-without-header", visible: this.state.formDialogOpened, onHide: this.formDialogOnHide }, react_1.default.cloneElement(this.props.valueForm, {
                     id: this.formDialogObjectId, initValues: this.formDialogInitValuesForInsert, onSaveOrCancel: this.formDialogOnSaveOrCancel
@@ -717,6 +743,7 @@ var XAutoCompleteBase = /** @class */ (function (_super) {
         lazyLoadMaxRows: 10,
         splitQueryValue: true,
         minLength: 1,
+        buttonsLayout: "buttons",
         scrollHeight: '15rem' // primereact has 200px
     };
     return XAutoCompleteBase;

package/lib/serverApi/XUtilsCommon.d.ts

@@ -1,3 +1,4 @@
+import { XEntity, XField } from "./XEntityMetadata";
 export declare class XUtilsCommon {
     static newLine: string;
     static getValueByPath(object: any, path: string): any;
@@ -9,7 +10,9 @@ export declare class XUtilsCommon {
     static getPathToAssocAndField(path: string): [string | null, string];
     static isSingleField(path: string): boolean;
     static getPrefixAndField(path: string): [string | null, string];
-    static createDisplayValue(object: any, fields: string[]): string;
+    static createDisplayValue(object: any, xEntity: XEntity | undefined, fields: string[]): string;
+    static createDisplayValueForField(object: any, xEntity: XEntity | undefined, field: string): string;
+    static displayValueAsUI(prefix: string | null, value: any, xField: XField | undefined): string;
     static objectAsJSON(value: any): string;
     static arrayCreateMap<ID, T>(array: T[], idField: string): Map<ID, T>;
     static getDayName(date: Date | null | undefined): string | undefined;

package/lib/serverApi/XUtilsCommon.js

@@ -37,6 +37,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dateFormat = exports.XUtilsCommon = void 0;
+var XUtilsMetadataCommon_1 = require("./XUtilsMetadataCommon");
+var XUtilsConversions_1 = require("./XUtilsConversions");
 // funkcie spolocne pre Web i pre Server
 var XUtilsCommon = /** @class */ (function () {
     function XUtilsCommon() {
@@ -168,26 +170,18 @@ var XUtilsCommon = /** @class */ (function () {
             return [prefix, pathOnly];
         }
     };
-    XUtilsCommon.createDisplayValue = function (object, fields) {
+    XUtilsCommon.createDisplayValue = function (object, xEntity, fields) {
         var e_2, _a;
         var displayValue = "";
         try {
             for (var fields_1 = __values(fields), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
                 var field = fields_1_1.value;
-                // TODO - konverzie na spravny typ/string
-                var _b = __read(XUtilsCommon.getPrefixAndField(field), 2), prefix = _b[0], fieldOnly = _b[1];
-                var value = XUtilsCommon.getValueByPath(object, fieldOnly);
-                if (value !== null && value !== undefined) {
-                    var valueStr = value.toString(); // TODO - spravnu konverziu
-                    if (valueStr !== "") {
-                        if (displayValue !== "") {
-                            displayValue += " ";
-                        }
-                        if (prefix) {
-                            displayValue += prefix;
-                        }
-                        displayValue += valueStr;
+                var valueStr = XUtilsCommon.createDisplayValueForField(object, xEntity, field);
+                if (valueStr !== "") {
+                    if (displayValue !== "") {
+                        displayValue += " ";
                     }
+                    displayValue += valueStr;
                 }
             }
         }
@@ -200,6 +194,62 @@ var XUtilsCommon = /** @class */ (function () {
         }
         return displayValue;
     };
+    XUtilsCommon.createDisplayValueForField = function (object, xEntity, field) {
+        var e_3, _a;
+        // pouziva sa podobny algoritmus ako v XLazyDataTable - metoda bodyTemplate
+        // (ale nie je to take komplexne ako v XLazyDataTable - nevie renderovat napr. html (rich text))
+        var _b = __read(XUtilsCommon.getPrefixAndField(field), 2), prefix = _b[0], fieldOnly = _b[1];
+        var xField = undefined;
+        if (xEntity) {
+            xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, fieldOnly);
+        }
+        var displayValue;
+        var valueOrValueList = XUtilsCommon.getValueOrValueListByPath(object, fieldOnly);
+        if (Array.isArray(valueOrValueList)) {
+            // zatial je zoznam hodnot OneToMany asociacie oddeleny " ", nedat zoznam napr. do zatvoriek [<zoznam>] ?
+            displayValue = "";
+            try {
+                for (var valueOrValueList_1 = __values(valueOrValueList), valueOrValueList_1_1 = valueOrValueList_1.next(); !valueOrValueList_1_1.done; valueOrValueList_1_1 = valueOrValueList_1.next()) {
+                    var value = valueOrValueList_1_1.value;
+                    var valueAsUI = XUtilsCommon.displayValueAsUI(prefix, value, xField);
+                    if (valueAsUI !== "") {
+                        if (displayValue !== "") {
+                            displayValue += " ";
+                        }
+                        displayValue += valueAsUI;
+                    }
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (valueOrValueList_1_1 && !valueOrValueList_1_1.done && (_a = valueOrValueList_1.return)) _a.call(valueOrValueList_1);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
+        else {
+            displayValue = XUtilsCommon.displayValueAsUI(prefix, valueOrValueList, xField);
+        }
+        return displayValue;
+    };
+    XUtilsCommon.displayValueAsUI = function (prefix, value, xField) {
+        var displayValue;
+        if (xField) {
+            // null hodnoty konvertuje na ""
+            displayValue = (0, XUtilsConversions_1.convertValue)(xField, value, true, XUtilsConversions_1.AsUIType.Text); // Text - boolean sa konvertuje na ano/nie
+        }
+        else {
+            // nemame entity, nevieme spravne konvertovat (ale casto nam staci aj takato jednoducha konverzia)
+            displayValue = (value !== null && value !== undefined) ? value.toString() : "";
+        }
+        if (displayValue !== "") {
+            if (prefix) {
+                displayValue = prefix + displayValue;
+            }
+        }
+        return displayValue;
+    };
     XUtilsCommon.objectAsJSON = function (value) {
         // sem treba dat nejaku pre nas vhodnu serializaciu
         // zatial provizorne robene cez antipatern - modifikaciu prototype funcii primitivnych typov
@@ -223,7 +273,7 @@ var XUtilsCommon = /** @class */ (function () {
         return json;
     };
     XUtilsCommon.arrayCreateMap = function (array, idField) {
-        var e_3, _a;
+        var e_4, _a;
         var idRowMap = new Map();
         try {
             for (var array_1 = __values(array), array_1_1 = array_1.next(); !array_1_1.done; array_1_1 = array_1.next()) {
@@ -233,12 +283,12 @@ var XUtilsCommon = /** @class */ (function () {
                 }
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (array_1_1 && !array_1_1.done && (_a = array_1.return)) _a.call(array_1);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_4) throw e_4.error; }
         }
         return idRowMap;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",