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

package/FindParam.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/serverApi/FindParam';

package/FindParam.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/serverApi/FindParam.js');

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-2023 Michal Rakus
+
+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.

package/XButtonIconNarrow.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XButtonIconNarrow';

package/XButtonIconNarrow.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XButtonIconNarrow.js');

package/XButtonIconSmall.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XButtonIconSmall';

package/XButtonIconSmall.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XButtonIconSmall.js');

package/XFieldChangeEvent.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XFieldChangeEvent';

package/XFieldChangeEvent.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XFieldChangeEvent.js');

package/XInputTextarea.d.ts

@@ -0,0 +1,3 @@
+// generated by gulp
+
+export * from './lib/components/XInputTextarea';

package/XInputTextarea.js

@@ -0,0 +1,5 @@
+// generated by gulp
+
+'use strict';
+
+module.exports = require('./lib/components/XInputTextarea.js');

package/gulpfile.js

@@ -17,12 +17,15 @@ function generateApi(cb) {
         "./lib/components/XAutoComplete",
         "./lib/components/XAutoCompleteBase",
         "./lib/components/XButton",
+        "./lib/components/XButtonIconNarrow",
+        "./lib/components/XButtonIconSmall",
         "./lib/components/XBrowse",
         "./lib/components/XChangePasswordForm",
         "./lib/components/XCheckbox",
         "./lib/components/XDropdown",
         "./lib/components/XEnvVars",
         "./lib/components/XErrors",
+        "./lib/components/XFieldChangeEvent",
         "./lib/components/XFormBase",
         "./lib/components/XFormBaseT",
         "./lib/components/XFormDataTable2",
@@ -32,6 +35,7 @@ function generateApi(cb) {
         "./lib/components/XInputDate",
         "./lib/components/XInputDecimal",
         "./lib/components/XInputText",
+        "./lib/components/XInputTextarea",
         "./lib/components/XLazyDataTable",
         "./lib/components/XLoginDialog",
         "./lib/components/XLoginForm",
@@ -42,6 +46,7 @@ function generateApi(cb) {
         "./lib/components/XUtilsConversions",
         "./lib/components/XUtilsMetadata",
 
+        "./lib/serverApi/FindParam",
         "./lib/serverApi/XUtilsCommon",
 
         "./lib/administration/XUserBrowse",

package/lib/administration/XBrowseMetaBrowse.js

@@ -7,7 +7,7 @@ exports.XBrowseMetaBrowse = void 0;
 var XLazyDataTable_1 = require("../components/XLazyDataTable");
 var react_1 = __importDefault(require("react"));
 var XBrowseMetaForm_1 = require("./XBrowseMetaForm");
-exports.XBrowseMetaBrowse = function (props) {
+var XBrowseMetaBrowse = function (props) {
     var onEdit = function (selectedRow) {
         // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
         props.openForm(react_1.default.createElement(XBrowseMetaForm_1.XBrowseMetaForm, { id: selectedRow.idXBrowseMeta }));
@@ -18,3 +18,4 @@ exports.XBrowseMetaBrowse = function (props) {
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "browseId", header: "Browse ID", width: "17rem" }),
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "rows", header: "Rows" })));
 };
+exports.XBrowseMetaBrowse = XBrowseMetaBrowse;

package/lib/administration/XBrowseMetaForm.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 __());
@@ -54,7 +56,7 @@ var XBrowseMetaForm = /** @class */ (function (_super) {
             react_1.default.createElement(XFormFooter_1.XFormFooter, { form: this })));
     };
     XBrowseMetaForm = __decorate([
-        XFormBase_1.Form("XBrowseMeta")
+        (0, XFormBase_1.Form)("XBrowseMeta")
     ], XBrowseMetaForm);
     return XBrowseMetaForm;
 }(XFormBase_1.XFormBase));

package/lib/administration/XUserBrowse.js

@@ -14,7 +14,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -44,7 +44,7 @@ var XLazyDataTable_1 = require("../components/XLazyDataTable");
 var react_1 = __importDefault(require("react"));
 var XUserForm_1 = require("./XUserForm");
 var XUtils_1 = require("../components/XUtils");
-exports.XUserBrowse = function (props) {
+var XUserBrowse = function (props) {
     var onAddRow = function () {
         // openForm pridavame automaticky v XFormNavigator3 pri renderovani komponentu
         props.openForm(react_1.default.createElement(XUserForm_1.XUserForm, { object: { enabled: true } }));
@@ -81,6 +81,7 @@ exports.XUserBrowse = function (props) {
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "name", header: "Name", width: "17rem" }),
         react_1.default.createElement(XLazyDataTable_1.XLazyColumn, { field: "enabled", header: "Enabled" })));
 };
+exports.XUserBrowse = XUserBrowse;
 // zatial nepouzivane - prichystane do buducnosti
 // ak by sme mali class komponenty, dal by sa pouzit decorator, pri formularoch mame class komponenty
 XUtils_1.XUtils.registerAppBrowse(react_1.default.createElement(exports.XUserBrowse, null), "XUser");

package/lib/administration/XUserForm.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 __());
@@ -36,7 +38,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -179,7 +181,7 @@ var XUserForm = /** @class */ (function (_super) {
             react_1.default.createElement(XFormFooter_1.XFormFooter, { form: this })));
     };
     XUserForm = __decorate([
-        XFormBase_1.Form("XUser"),
+        (0, XFormBase_1.Form)("XUser"),
         __metadata("design:paramtypes", [Object])
     ], XUserForm);
     return XUserForm;

package/lib/components/SearchTableParams.d.ts

@@ -1,5 +1,11 @@
+import { DataTableFilterMetaData } from "primereact/datatable";
+import { XCustomFilter } from "../serverApi/FindParam";
+export interface XFieldFilter {
+    field: string;
+    constraint: DataTableFilterMetaData;
+}
 export interface SearchTableParams {
     onChoose: (chosenRow: any) => void;
-    displayField: string;
-    filter: string | undefined;
+    displayFieldFilter?: XFieldFilter;
+    customFilter?: XCustomFilter;
 }

package/lib/components/SourceCodeLinkEntity.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SourceCodeLinkEntity = void 0;
 var react_1 = __importDefault(require("react"));
-exports.SourceCodeLinkEntity = function (props) {
+var SourceCodeLinkEntity = function (props) {
     return (react_1.default.createElement("div", { className: "flex justify-content-center" },
-        react_1.default.createElement("a", { className: "source-code-link", href: "https://github.com/michalrakus/demo-nest-server-app/blob/master/src/model/" + props.sourceCodeFile, target: "_blank", rel: "noopener noreferrer" },
+        react_1.default.createElement("a", { className: "source-code-link", href: "https://github.com/michalrakus/demo-nest-server-app/blob/master/src/model/".concat(props.sourceCodeFile), target: "_blank", rel: "noopener noreferrer" },
             "Source code entity: ",
             props.sourceCodeFile)));
 };
+exports.SourceCodeLinkEntity = SourceCodeLinkEntity;

package/lib/components/XAutoComplete.d.ts

@@ -1,28 +1,31 @@
 import React from "react";
-import { XFormComponent, XFormComponentProps } from "./XFormComponent";
+import { XFilterProp, XFormComponent, XFormComponentProps } from "./XFormComponent";
 import { XAssoc } from "../serverApi/XEntityMetadata";
 import { OperationType } from "./XUtils";
 import { XError } from "./XErrors";
-export interface XAutoCompleteProps extends XFormComponentProps {
+import { XObject } from "./XObject";
+export interface XAutoCompleteProps extends XFormComponentProps<XObject> {
     assocField: string;
-    displayField: string;
+    displayField: string | ((suggestion: any) => string);
     searchTable?: any;
     assocForm?: any;
+    filter?: XFilterProp;
     size?: number;
     inputStyle?: React.CSSProperties;
 }
-export declare class XAutoComplete extends XFormComponent<XAutoCompleteProps> {
+export declare class XAutoComplete extends XFormComponent<XObject, XAutoCompleteProps> {
     protected xAssoc: XAssoc;
     protected errorInBase: string | undefined;
     state: {
         suggestions: any[];
     };
     constructor(props: XAutoCompleteProps);
+    getDisplayFieldOrId(): string;
     componentDidMount(): void;
     readAndSetSuggestions(): Promise<void>;
-    getFieldForEdit(): string | undefined;
-    checkNotNull(): boolean;
-    getValueFromObject(): any;
+    getField(): string;
+    isNotNull(): boolean;
+    getValue(): any | null;
     onChangeAutoCompleteBase(object: any, objectChange: OperationType): void;
     onErrorChangeAutoCompleteBase(error: string | undefined): void;
     validate(): {

package/lib/components/XAutoComplete.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 __());
@@ -27,7 +29,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -69,10 +71,22 @@ var XAutoComplete = /** @class */ (function (_super) {
         };
         _this.onChangeAutoCompleteBase = _this.onChangeAutoCompleteBase.bind(_this);
         _this.onErrorChangeAutoCompleteBase = _this.onErrorChangeAutoCompleteBase.bind(_this);
-        props.form.addField(props.assocField + '.' + props.displayField);
+        props.form.addField(props.assocField + '.' + _this.getDisplayFieldOrId());
         return _this;
     }
+    XAutoComplete.prototype.getDisplayFieldOrId = function () {
+        // toto je hack - ak ratame displayField cez funkciu, tak nam potom chyba (hociaky) atribut asociovaneho objektu
+        // podobne ako na XFormDataTable2, podsunieme id-ckovy atribut
+        if (typeof this.props.displayField === 'string') {
+            return this.props.displayField; // vsetko ok
+        }
+        else {
+            // v displayField mame funkciu, zistime id-ckovy atribut
+            return XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName).idField;
+        }
+    };
     XAutoComplete.prototype.componentDidMount = function () {
+        console.log("volany XAutoComplete.componentDidMount()");
         this.readAndSetSuggestions();
     };
     XAutoComplete.prototype.readAndSetSuggestions = function () {
@@ -80,41 +94,31 @@ var XAutoComplete = /** @class */ (function (_super) {
             var suggestions;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchMany('findRows', { entity: this.xAssoc.entityName, sortMeta: { field: this.props.displayField, order: 1 } })];
+                    case 0: return [4 /*yield*/, XUtils_1.XUtils.fetchRows(this.xAssoc.entityName, this.getFilterBase(this.props.filter), typeof this.props.displayField === 'string' ? this.props.displayField : undefined)];
                     case 1:
                         suggestions = _a.sent();
+                        // ak mame funkciu, zosortujeme tu
+                        if (typeof this.props.displayField === 'function') {
+                            suggestions = XUtils_1.XUtils.arraySort(suggestions, this.props.displayField);
+                        }
                         this.setState({ suggestions: suggestions });
                         return [2 /*return*/];
                 }
             });
         });
     };
-    XAutoComplete.prototype.getFieldForEdit = function () {
-        var _a;
-        // TODO - zohladnit aj aktualny readOnly stav
-        var readOnly = (_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false;
-        if (!readOnly) {
-            return this.props.assocField;
-        }
-        return undefined;
+    XAutoComplete.prototype.getField = function () {
+        return this.props.assocField;
     };
-    XAutoComplete.prototype.checkNotNull = function () {
-        var _a;
-        // TODO - zohladnit aj aktualny readOnly stav
-        return !this.xAssoc.isNullable && !((_a = this.props.readOnly) !== null && _a !== void 0 ? _a : false);
+    XAutoComplete.prototype.isNotNull = function () {
+        return !this.xAssoc.isNullable;
     };
-    XAutoComplete.prototype.getValueFromObject = function () {
-        var object = this.props.form.state.object;
-        var assocObject = object !== null ? object[this.props.assocField] : null;
-        // ak je undefined, pre istotu dame na null, null je standard
-        if (assocObject === undefined) {
-            assocObject = null;
-        }
+    XAutoComplete.prototype.getValue = function () {
+        var assocObject = this.getValueFromObject();
         return assocObject;
     };
     XAutoComplete.prototype.onChangeAutoCompleteBase = function (object, objectChange) {
-        var error = this.validateOnChange(object);
-        this.props.form.onFieldChange(this.props.assocField, object, error);
+        this.onValueChangeBase(object, this.props.onChange, objectChange);
         if (objectChange !== XUtils_1.OperationType.None) {
             // zmenil sa zaznam dobrovolnika v DB
             // zatial len refreshneme z DB
@@ -129,30 +133,22 @@ var XAutoComplete = /** @class */ (function (_super) {
     // overrides method in XFormComponent
     XAutoComplete.prototype.validate = function () {
         if (this.errorInBase) {
-            var field = this.getFieldForEdit();
-            if (field) {
-                // error message dame na onChange, mohli by sme aj na onSet (predtym onBlur), je to jedno viac-menej
-                return { field: field, xError: { onChange: this.errorInBase } };
-            }
+            // error message dame na onChange, mohli by sme aj na onSet (predtym onBlur), je to jedno viac-menej
+            return { field: this.getField(), xError: { onChange: this.errorInBase, fieldLabel: this.getLabel() } };
         }
         // zavolame povodnu metodu
         return _super.prototype.validate.call(this);
     };
     XAutoComplete.prototype.render = function () {
-        var _a, _b, _c, _d;
         var xEntityAssoc = XUtilsMetadata_1.XUtilsMetadata.getXEntity(this.xAssoc.entityName);
-        var xDisplayField = XUtilsMetadata_1.XUtilsMetadata.getXFieldByPath(xEntityAssoc, this.props.displayField);
-        var label = (_a = this.props.label) !== null && _a !== void 0 ? _a : this.props.assocField;
-        if (this.checkNotNull()) {
-            label = XUtils_1.XUtils.markNotNull(label);
-        }
-        var readOnly = (_b = this.props.readOnly) !== null && _b !== void 0 ? _b : false;
-        var size = (_c = this.props.size) !== null && _c !== void 0 ? _c : xDisplayField.length;
-        var labelStyle = (_d = this.props.labelStyle) !== null && _d !== void 0 ? _d : { width: XUtils_1.XUtils.FIELD_LABEL_WIDTH };
+        //const xDisplayField = XUtilsMetadata.getXFieldByPath(xEntityAssoc, this.props.displayField);
+        // TODO - readOnly
+        // TODO - size
+        //const size = this.props.size ?? xDisplayField.length;
         // div className="col" nam zabezpeci aby XAutoCompleteBase nezaberal celu dlzku grid-u (ma nastaveny width=100% vdaka "formgroup-inline")
         return (react_1.default.createElement("div", { className: "field grid" },
-            react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: labelStyle }, label),
-            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValueFromObject(), suggestions: this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase })));
+            react_1.default.createElement("label", { htmlFor: this.props.assocField, className: "col-fixed", style: this.getLabelStyle() }, this.getLabel()),
+            react_1.default.createElement(XAutoCompleteBase_1.XAutoCompleteBase, { value: this.getValue(), suggestions: this.state.suggestions, onChange: this.onChangeAutoCompleteBase, field: this.props.displayField, valueForm: this.props.assocForm, idField: xEntityAssoc.idField, error: this.getError(), onErrorChange: this.onErrorChangeAutoCompleteBase })));
     };
     return XAutoComplete;
 }(XFormComponent_1.XFormComponent));

package/lib/components/XAutoCompleteBase.d.ts

@@ -1,13 +1,14 @@
-import { Component } from "react";
+import React, { Component } from "react";
+import { AutoCompleteChangeEvent } from "primereact/autocomplete";
 import { OperationType } from "./XUtils";
 export interface XAutoCompleteBaseProps {
     value: any;
     suggestions: any[];
     onChange: (object: any, objectChange: OperationType) => void;
-    field: string;
+    field: string | ((suggestion: any) => string);
     valueForm?: any;
     idField?: string;
-    maxlength?: number;
+    maxLength?: number;
     error?: string;
     onErrorChange: (error: string | undefined) => void;
     setFocusOnCreate?: boolean;
@@ -25,17 +26,19 @@ export declare class XAutoCompleteBase extends Component<XAutoCompleteBaseProps>
     formDialogInitObjectForInsert: any | undefined;
     constructor(props: XAutoCompleteBaseProps);
     componentDidMount(): void;
+    getDisplayValue(suggestion: any): string;
     completeMethod(event: {
         query: string;
     }): void;
-    onChange(e: any): void;
+    onChange(e: AutoCompleteChangeEvent): void;
     onSelect(e: any): void;
-    onBlur(e: any): void;
+    onBlur(e: React.FocusEvent<HTMLInputElement>): void;
     createErrorMessage(): string;
     setFocusToInput(): void;
     setObjectValue(object: any, objectChange: OperationType): void;
     formDialogOnSaveOrCancel(object: any | null, objectChange: OperationType): void;
     formDialogOnHide(): void;
     computeInputValue(): any;
+    itemTemplate(suggestion: any, index: number): React.ReactNode;
     render(): JSX.Element;
 }