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

package/lib/components/XUtilsConversions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsUI = exports.dateFromModel = exports.numberAsUI = exports.numberFromUI = exports.stringAsUI = exports.stringFromUI = void 0;
+exports.datetimeFormatUI = exports.dateFormatCalendar = exports.dateFormatUI = exports.timeFromModel = exports.datetimeAsUI = exports.dateAsUI = exports.dateFromModel = exports.numberFromModel = exports.numberAsUI = exports.numberFromUI = exports.stringAsUI = exports.stringFromUI = void 0;
 var XUtilsCommon_1 = require("../serverApi/XUtilsCommon");
 function stringFromUI(stringValue) {
     var value;
@@ -40,6 +40,19 @@ function numberAsUI(value, fractionDigits) {
     }
 }
 exports.numberAsUI = numberAsUI;
+// v modeli na klientovi by mal byt vzdy number, teraz je tam niekedy string (z json-u zo servera) a niekedy number (z komponentu)
+// provizorne zatial takato konverzia
+function numberFromModel(value) {
+    var numberValue = null;
+    if (typeof value === 'string') {
+        numberValue = parseFloat(value);
+    }
+    else if (typeof value === 'number') {
+        numberValue = value;
+    }
+    return numberValue;
+}
+exports.numberFromModel = numberFromModel;
 // v modeli na klientovi by mal byt vzdy Date, teraz je tam niekedy string (z json-u zo servera) a niekedy Date (z komponentu)
 // provizorne zatial takato konverzia
 function dateFromModel(value) {
@@ -55,7 +68,7 @@ function dateFromModel(value) {
 exports.dateFromModel = dateFromModel;
 function dateAsUI(value) {
     if (value !== null) {
-        return XUtilsCommon_1.dateFormat(value, dateFormatUI());
+        return (0, XUtilsCommon_1.dateFormat)(value, dateFormatUI());
     }
     else {
         return "";
@@ -64,7 +77,7 @@ function dateAsUI(value) {
 exports.dateAsUI = dateAsUI;
 function datetimeAsUI(value) {
     if (value !== null) {
-        return XUtilsCommon_1.dateFormat(value, datetimeFormatUI());
+        return (0, XUtilsCommon_1.dateFormat)(value, datetimeFormatUI());
     }
     else {
         return "";
@@ -82,6 +95,14 @@ function timeFromModel(value) {
             // mame '19:30:00' -> pridame hociaky rok aby sme skonvertovali na validny Date
             rowDataCasStr = '1970-01-01 ' + rowDataCasStr;
         }
+        // na safari nefunguje konverzia new Date('2021-06-07 19:30:00') - vrati NaN
+        // preto string prehodime na '2021-06-07T19:30:00+01:00'
+        // 19:30:00 je cas z timezony Central Europe (taka je nastavena na nodejs)), preto oznacime tento cas touto timezonou
+        // (spravne riesenie je posielat time cez json vzdy vo formate '2021-06-07T18:30:00Z', v tomto formate chodia aj datetime atributy)
+        rowDataCasStr = rowDataCasStr.replace(' ', 'T');
+        if (!rowDataCasStr.endsWith('Z') && rowDataCasStr.indexOf('+') === -1) {
+            rowDataCasStr += '+01:00'; // Central Europe timezone
+        }
         timeValue = new Date(rowDataCasStr);
     }
     else if (typeof value === 'object' && value instanceof Date) {

package/lib/components/XUtilsMetadata.d.ts

@@ -11,6 +11,8 @@ export declare class XUtilsMetadata {
     static getXFieldByPathStr(entity: string, path: string): XField;
     static getXAssocToOne(xEntity: XEntity, assocField: string): XAssoc;
     static getXAssocToMany(xEntity: XEntity, assocField: string): XAssoc;
+    static getXAssocToOneByAssocEntity(xEntity: XEntity, assocEntityName: string): XAssoc;
+    static getXAssocToManyByAssocEntity(xEntity: XEntity, assocEntityName: string): XAssoc;
     static getXEntityForAssocToOne(xEntity: XEntity, assocField: string): XEntity;
     static getXEntityForAssocToMany(xEntity: XEntity, assocField: string): XEntity;
     static getXFieldList(xEntity: XEntity): XField[];
@@ -22,11 +24,12 @@ export declare class XUtilsMetadata {
         size?: number;
     };
     static CHAR_SIZE: number;
-    static computeColumnWidth(xField: XField, formColumnType: string | undefined, header: string | undefined): string | undefined;
+    static computeColumnWidth(xField: XField, filterMenuInFilterRow: boolean, formColumnType: string | undefined, header: string | undefined, sortableButtonInHeader: boolean, filterButtonInHeader: boolean): string | undefined;
     static computeColumnWidthBase(charSize?: number, paddingAndOther?: number): number | undefined;
     static getXBrowseMeta(entity: string, browseId?: string): XBrowseMeta;
     static setXBrowseMeta(entity: string, browseId: string | undefined, xBrowseMeta: XBrowseMeta): void;
     static getXBrowseFormMetaKey(entity: string, browseId?: string): string;
     private static getXAssoc;
+    private static getXAssocByAssocEntity;
     private static getXEntityForAssoc;
 }

package/lib/components/XUtilsMetadata.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]) {
@@ -109,7 +109,7 @@ var XUtilsMetadata = /** @class */ (function () {
     XUtilsMetadata.getXEntity = function (entity) {
         var xEntity = XUtilsMetadata.xEntityMap[entity];
         if (xEntity === undefined) {
-            throw "Entity " + entity + " was not found in entity metadata";
+            throw "Entity ".concat(entity, " was not found in entity metadata");
         }
         return xEntity;
     };
@@ -117,7 +117,7 @@ var XUtilsMetadata = /** @class */ (function () {
         // TODO - pozor, vo fieldMap su aj asociacie, trebalo by zmenit vytvaranie metadat tak aby tam tie asociacie neboli
         var xField = xEntity.fieldMap[field];
         if (xField === undefined) {
-            throw "Field " + field + " was not found in entity " + xEntity.name;
+            throw "Field ".concat(field, " was not found in entity ").concat(xEntity.name);
         }
         return xField;
     };
@@ -141,6 +141,12 @@ var XUtilsMetadata = /** @class */ (function () {
     XUtilsMetadata.getXAssocToMany = function (xEntity, assocField) {
         return XUtilsMetadata.getXAssoc(xEntity, xEntity.assocToManyMap, assocField);
     };
+    XUtilsMetadata.getXAssocToOneByAssocEntity = function (xEntity, assocEntityName) {
+        return XUtilsMetadata.getXAssocByAssocEntity(xEntity, xEntity.assocToOneMap, assocEntityName);
+    };
+    XUtilsMetadata.getXAssocToManyByAssocEntity = function (xEntity, assocEntityName) {
+        return XUtilsMetadata.getXAssocByAssocEntity(xEntity, xEntity.assocToManyMap, assocEntityName);
+    };
     XUtilsMetadata.getXEntityForAssocToOne = function (xEntity, assocField) {
         return XUtilsMetadata.getXEntityForAssoc(XUtilsMetadata.getXAssocToOne(xEntity, assocField));
     };
@@ -192,7 +198,7 @@ var XUtilsMetadata = /** @class */ (function () {
             size = precision;
         }
         else {
-            throw "XInputDecimal: field " + xField.name + " has unsupported type " + xField.type + ". Supported types are decimal and number.";
+            throw "XInputDecimal: field ".concat(xField.name, " has unsupported type ").concat(xField.type, ". Supported types are decimal and number.");
         }
         var min = undefined;
         var max = undefined;
@@ -203,7 +209,7 @@ var XUtilsMetadata = /** @class */ (function () {
         }
         return { useGrouping: useGrouping, fractionDigits: fractionDigits, min: min, max: max, size: size };
     };
-    XUtilsMetadata.computeColumnWidth = function (xField, formColumnType, header) {
+    XUtilsMetadata.computeColumnWidth = function (xField, filterMenuInFilterRow, formColumnType, header, sortableButtonInHeader, filterButtonInHeader) {
         var width;
         if (formColumnType === undefined) {
             // lazy datatable (no inputs, no buttons, only text and padding)
@@ -224,7 +230,7 @@ var XUtilsMetadata = /** @class */ (function () {
                 width = 1.43 + 0.5 + 0.5; // checkbox ma sirku 20px
             }
             else {
-                throw "XField " + xField.name + ": unknown xField.type = " + xField.type;
+                throw "XField ".concat(xField.name, ": unknown xField.type = ").concat(xField.type);
             }
         }
         else {
@@ -248,10 +254,10 @@ var XUtilsMetadata = /** @class */ (function () {
                     width = 1.43 + 0.5 + 0.5; // checkbox ma sirku 20px
                 }
                 else {
-                    throw "XField " + xField.name + ": unknown xField.type = " + xField.type;
+                    throw "XField ".concat(xField.name, ": unknown xField.type = ").concat(xField.type);
                 }
             }
-            else if (formColumnType === "dropdown" || formColumnType === "searchButton" || formColumnType === "autoComplete") {
+            else if (formColumnType === "dropdown" || formColumnType === "autoComplete" || formColumnType === "searchButton") {
                 // vyratame sirku inputu
                 var padding = 0.21 + 0.07 + 0.5; // padding is 2.94px + 1px border + 7px padding in input
                 if (xField.type === "string") {
@@ -268,7 +274,7 @@ var XUtilsMetadata = /** @class */ (function () {
                     width = XUtilsMetadata.computeColumnWidthBase(10 + 9, padding + padding); // napr. 31.12.2021 03:03:00
                 }
                 else {
-                    throw "XField " + xField.name + ": xField.type = " + xField.type + " not implemented for dropdown/searchButton/autoComplete";
+                    throw "XField ".concat(xField.name, ": xField.type = ").concat(xField.type, " not implemented for dropdown/autoComplete/searchButton");
                 }
                 // pridame sirku buttonu
                 if (formColumnType === "dropdown") {
@@ -276,22 +282,36 @@ var XUtilsMetadata = /** @class */ (function () {
                         width += 2; // button for dropdown
                     }
                 }
+                else if (formColumnType === "autoComplete") {
+                    if (width !== undefined) {
+                        width += 1.56; // button for auto complete
+                    }
+                }
                 else if (formColumnType === "searchButton") {
                     if (width !== undefined) {
                         width += 2.18; // button for search button
                     }
                 }
-                else if (formColumnType === "autoComplete") {
-                    throw "XField " + xField.name + ": computing button width not implemented for autoComplete";
-                }
             }
             else {
                 throw "Unknown prop type = " + formColumnType;
             }
         }
+        if (filterMenuInFilterRow) {
+            // if the column has width of 25 characters or more, then the input field can be shorter
+            if (width !== undefined && width < 25 * XUtilsMetadata.CHAR_SIZE) {
+                width += 1.25; // filter menu icon
+            }
+        }
         // ak je label dlhsi ako sirka stlpca, tak sirka stlpca bude podla label-u
         if (header !== undefined) {
-            var widthHeader = XUtilsMetadata.computeColumnWidthBase(header.length, 0.5 + 0.5 + 1.28 + 0.5); // padding (7px) + space (7px) + sort icon (18px) + padding (7px)
+            var widthHeader = XUtilsMetadata.computeColumnWidthBase(header.length, 0.5); // padding (7px)
+            if (sortableButtonInHeader && widthHeader !== undefined) {
+                widthHeader += 0.5 + 1.28; // sort icon (25px = 7px (space/margin) + 18px (icon body))
+            }
+            if (filterButtonInHeader && widthHeader !== undefined) {
+                widthHeader += 1.5; // filter icon (21px = 14px (icon body) + 7px (right padding))
+            }
             if (widthHeader !== undefined) {
                 if (width === undefined || widthHeader > width) {
                     width = widthHeader;
@@ -329,10 +349,38 @@ var XUtilsMetadata = /** @class */ (function () {
     XUtilsMetadata.getXAssoc = function (xEntity, assocMap, assocField) {
         var xAssoc = assocMap[assocField];
         if (xAssoc === undefined) {
-            throw "Assoc " + assocField + " was not found in entity = " + xEntity.name;
+            throw "Assoc ".concat(assocField, " was not found in entity = ").concat(xEntity.name);
         }
         return xAssoc;
     };
+    XUtilsMetadata.getXAssocByAssocEntity = function (xEntity, assocMap, assocEntityName) {
+        var e_2, _a;
+        var xAssocFound = undefined;
+        try {
+            for (var _b = __values(Object.entries(assocMap)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), key = _d[0], xAssoc = _d[1];
+                if (xAssoc.entityName === assocEntityName) {
+                    if (xAssocFound === undefined) {
+                        xAssocFound = xAssoc;
+                    }
+                    else {
+                        throw "In entity ".concat(xEntity.name, " found more then 1 assoc for assocEntityName = ").concat(assocEntityName);
+                    }
+                }
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        if (xAssocFound === undefined) {
+            throw "Assoc for assocEntityName = ".concat(assocEntityName, " not found in entity ").concat(xEntity.name);
+        }
+        return xAssocFound;
+    };
     XUtilsMetadata.getXEntityForAssoc = function (xAssoc) {
         return XUtilsMetadata.getXEntity(xAssoc.entityName);
     };

package/lib/components/useXToken.js

@@ -27,7 +27,7 @@ function useXToken() {
         }
         return xToken;
     };
-    var _a = __read(react_1.useState(getXToken()), 2), xToken = _a[0], setXToken = _a[1];
+    var _a = __read((0, react_1.useState)(getXToken()), 2), xToken = _a[0], setXToken = _a[1];
     XUtils_1.XUtils.setXToken(xToken);
     var saveXToken = function (xToken) {
         if (xToken !== null) {

package/lib/serverApi/ExportImportParam.d.ts

@@ -1,12 +1,12 @@
-import { Filters, SortMeta } from "./FindParam";
+import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
 export declare enum ExportType {
     Csv = "csv",
     Json = "json"
 }
 export interface ExportParam {
     exportType: ExportType;
-    filters: Filters;
-    multiSortMeta?: SortMeta[];
+    filters: DataTableFilterMeta;
+    multiSortMeta?: DataTableSortMeta[];
     entity: string;
     fields: string[];
     csvParam?: CsvParam;

package/lib/serverApi/FindParam.d.ts

@@ -1,25 +1,23 @@
-export interface FilterValue {
-    value: string;
-    matchMode: 'startsWith' | 'equals';
-}
-export interface Filters {
-    [field: string]: FilterValue;
-}
-export interface SortMeta {
-    field: string;
-    order: 1 | -1;
-}
+import { DataTableFilterMeta, DataTableSortMeta } from "primereact/datatable";
 export declare enum ResultType {
     OnlyRowCount = 0,
     RowCountAndPagedRows = 1,
     AllRows = 2
 }
+export interface XCustomFilterValues {
+    [key: string]: any;
+}
+export interface XCustomFilter {
+    filter: string;
+    values: XCustomFilterValues;
+}
 export interface FindParam {
     resultType: ResultType;
     first?: number;
     rows?: number;
-    filters: Filters;
-    multiSortMeta?: SortMeta[];
+    filters?: DataTableFilterMeta;
+    customFilter?: XCustomFilter;
+    multiSortMeta?: DataTableSortMeta[];
     entity: string;
-    fields: string[];
+    fields?: string[];
 }

package/lib/serverApi/FindParam.js

@@ -1,6 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultType = void 0;
+// TODO - replaced with DataTableFilterMetaData
+// export interface FilterValue {
+//     value : string;
+//     matchMode : 'startsWith' | 'equals'; // matchMode ma konstanty napr. startsWith
+// }
+// TODO - replaced with DataTableFilterMeta
+// export interface Filters {
+//     [field: string]: FilterValue; // specialny typ pre object (dictionary) ktory ma dynamicky pocet propertiesov
+// }
+// TODO - replace with DataTableSortMeta
+// export interface SortMeta {
+//     field : string;
+//     order : 1 | -1; // hodnoty 1 alebo -1
+// }
 var ResultType;
 (function (ResultType) {
     ResultType[ResultType["OnlyRowCount"] = 0] = "OnlyRowCount";

package/lib/serverApi/XUtilsCommon.d.ts

@@ -7,5 +7,6 @@ export declare class XUtilsCommon {
     static objectAsJSON(value: any): string;
     static getDayName(date: Date | null | undefined): string | undefined;
     static dateAddDays(date: Date | null, days: number): Date | null;
+    static findFirstMatch(pattern: RegExp, value: string): string | null;
 }
 export declare const dateFormat: any;

package/lib/serverApi/XUtilsCommon.js

@@ -64,11 +64,11 @@ var XUtilsCommon = /** @class */ (function () {
             // TODO - ak pre datetime nastavime vsetky zlozky casu na 00:00:00, tak sformatuje hodnotu ako datum a spravi chybu pri zapise do DB - zapise  1:00:00
             var dateStr;
             if (this.getHours() === 0 && this.getMinutes() === 0 && this.getSeconds() === 0) {
-                dateStr = exports.dateFormat(this, 'yyyy-mm-dd');
+                dateStr = (0, exports.dateFormat)(this, 'yyyy-mm-dd');
             }
             else {
                 // jedna sa o datetime
-                dateStr = exports.dateFormat(this, 'yyyy-mm-dd HH:MM:ss');
+                dateStr = (0, exports.dateFormat)(this, 'yyyy-mm-dd HH:MM:ss');
             }
             return dateStr;
         };
@@ -89,6 +89,10 @@ var XUtilsCommon = /** @class */ (function () {
         }
         return result;
     };
+    XUtilsCommon.findFirstMatch = function (pattern, value) {
+        var match = pattern.exec(value);
+        return match != null ? match[0] : null;
+    };
     XUtilsCommon.newLine = '\n';
     return XUtilsCommon;
 }());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@michalrakus/x-react-web-lib",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "",
   "scripts": {
     "clean": "rimraf lib",
@@ -18,33 +18,32 @@
     "preinstall": "npx only-allow pnpm"
   },
   "author": "Michal Rakus",
-  "license": "ISC",
-  "dependencies": {},
+  "license": "MIT",
+  "dependencies": {
+    "dateformat": "^4.6.3",
+    "lodash": "^4.17.21"
+  },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/classnames": "^2.2.10",
-    "@types/jest": "^24.9.1",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^12.12.67",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.5",
-    "@types/react-transition-group": "^4.2.4",
-    "axios": "^0.19.0",
-    "classnames": "^2.2.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.0",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.15.3",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-transition-group": "^4.4.5",
+    "gulp": "^4.0.2",
+    "rimraf": "^4.4.0",
+    "typescript": "^4.9.5"
+  },
+  "peerDependencies": {
     "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
-    "primereact": "6.0.2",
-    "lodash": "^4.17.21",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "3.4.3",
-    "react-transition-group": "^4.4.1",
-    "gulp": "^4.0.2",
-    "rimraf": "^3.0.2",
-    "typescript": "^3.2.1",
-    "dateformat": "^4.4.1"
+    "primereact": "~9.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5"
   },
   "files": [
     "lib/**/*",