@michalrakus/x-react-web-lib 1.38.2 → 1.38.3

package/lib/components/XFormComponentDT.js

@@ -55,7 +55,9 @@ var XFormComponentDT = /** @class */ (function (_super) {
             // if the length of field is 2 or more, then readOnly
             readOnly = true;
         }
-        // formReadOnlyBase is called on the level XFormDataTable2
+        // formReadOnlyBase is called on the level XFormDataTable2 and XFormPanelList
+        // the reason is (probably) that in XFormDataTable2 and XFormPanelList we know the assoc name whereas here in component we know only field name
+        // (assoc name is param of formReadOnlyBase)
         // else if (this.props.form.formReadOnlyBase("xxx")) {
         //     readOnly = true;
         // }

package/lib/components/XInputDate.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { XFormComponentProps } from "./XFormComponent";
 import { XInput } from "./XInput";
 import { XDateScale } from "../serverApi/XUtilsConversions";
-export interface XInputDateProps extends XFormComponentProps<number> {
+export interface XInputDateProps extends XFormComponentProps<Date> {
     field: string;
     scale?: XDateScale;
 }

package/lib/components/XLazyDataTable/XLazyDataTable.d.ts

@@ -23,6 +23,10 @@ export interface XOptionalCustomFilter {
     label: string;
     filter: XCustomFilter;
 }
+export interface XAssocToSort {
+    assoc: string;
+    sortField: string;
+}
 export interface XEditModeHandlers {
     onStart: () => void;
     onSave: () => void;
@@ -92,6 +96,7 @@ export interface XLazyDataTableProps {
     sortField?: string | DataTableSortMeta[];
     fullTextSearch?: boolean | string[];
     fields?: string[];
+    assocsToSort?: XAssocToSort[];
     multilineSwitch?: boolean;
     multilineSwitchInitValue?: XMultilineRenderType;
     multilineSwitchFewLinesCount?: number;
@@ -157,6 +162,8 @@ export interface XLazyColumnProps {
     aggregateType?: XAggregateFunction;
     columnViewStatus: XViewStatusOrBoolean;
     filterElement?: XFilterElementProp;
+    className?: string;
+    style?: React.CSSProperties;
     body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
 }
 export type XLazyColumnType = {

package/lib/components/XLazyDataTable/XLazyDataTable.js

@@ -209,11 +209,15 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
             for (var columns_2 = __values(columns), columns_2_1 = columns_2.next(); !columns_2_1.done; columns_2_1 = columns_2.next()) {
                 var column = columns_2_1.value;
                 var xLazyColumn = column; // nevedel som to krajsie...
+                // in some situations, this would be suitable, but for dynamic hide/show columns it can cause crash
+                // better place for initializing filters is probably creating columns - function(child)
+                //if (XUtils.xViewStatus(xLazyColumn.props.columnViewStatus) !== XViewStatus.Hidden) {
                 var field = xLazyColumn.props.field;
                 var xField = XUtilsMetadataCommon_1.XUtilsMetadataCommon.getXFieldByPath(xEntity, field);
                 // TODO column.props.dropdownInFilter - pre "menu" by bolo fajn mat zoznam "enumov"
                 var filterMatchMode = getInitFilterMatchMode(xLazyColumn.props, xField);
                 filtersInit[field] = createFilterItem(props.filterDisplay, { value: null, matchMode: filterMatchMode });
+                //}
             }
         }
         catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -619,6 +623,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                     return [4 /*yield*/, findByFilter(findParam)];
                 case 1:
                     findResult = _a.sent();
+                    sortAssocsToSort(findResult);
                     setValue(findResult);
                     setupExpandedRows(findResult, multilineSwitchValue);
                     setLoading(false);
@@ -635,8 +640,44 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
             }
         });
     }); };
+    var sortAssocsToSort = function (findResult) {
+        var e_4, _a, e_5, _b;
+        if (props.assocsToSort) {
+            if (findResult.rowList) {
+                try {
+                    for (var _c = __values(findResult.rowList), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var row = _d.value;
+                        try {
+                            // sorting in javascript (avoid of sorting in DB)
+                            for (var _e = (e_5 = void 0, __values(props.assocsToSort)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                var assocToSort = _f.value;
+                                var assocRowList = row[assocToSort.assoc];
+                                if (assocRowList) {
+                                    row[assocToSort.assoc] = XUtilsCommon_1.XUtilsCommon.arraySort(assocRowList, assocToSort.sortField);
+                                }
+                            }
+                        }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        finally {
+                            try {
+                                if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                        }
+                    }
+                }
+                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                finally {
+                    try {
+                        if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                    }
+                    finally { if (e_4) throw e_4.error; }
+                }
+            }
+        }
+    };
     var setupExpandedRows = function (findResult, multilineSwitchValue) {
-        var e_4, _a;
+        var e_6, _a;
         if (props.rowExpansionTemplate) {
             var expandedRowsLocal = {};
             if (findResult.rowList) {
@@ -652,12 +693,12 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                         }
                     }
                 }
-                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                catch (e_6_1) { e_6 = { error: e_6_1 }; }
                 finally {
                     try {
                         if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                     }
-                    finally { if (e_4) throw e_4.error; }
+                    finally { if (e_6) throw e_6.error; }
                 }
             }
             setExpandedRows(expandedRowsLocal);
@@ -700,7 +741,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
     var getFields = function (addPropsFields) {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_5, _a;
+        var e_7, _a;
         var fields = [];
         var columns = dataTableEl.current.props.children;
         try {
@@ -709,12 +750,12 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                 fields.push(column.props.field);
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (columns_3_1 && !columns_3_1.done && (_a = columns_3.return)) _a.call(columns_3);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         if (addPropsFields) {
             if (props.fields) {
@@ -726,7 +767,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
     var getHeaders = function () {
         // krasne zobrazi cely objekt!
         //console.log(dataTableEl.current);
-        var e_6, _a;
+        var e_8, _a;
         var headers = [];
         var columns = dataTableEl.current.props.children;
         try {
@@ -736,17 +777,17 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                 headers.push(column.props.header);
             }
         }
-        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+        catch (e_8_1) { e_8 = { error: e_8_1 }; }
         finally {
             try {
                 if (columns_4_1 && !columns_4_1.done && (_a = columns_4.return)) _a.call(columns_4);
             }
-            finally { if (e_6) throw e_6.error; }
+            finally { if (e_8) throw e_8.error; }
         }
         return headers;
     };
     var getWidths = function () {
-        var e_7, _a;
+        var e_9, _a;
         var _b;
         // vrati sirky stlpcov napr. ['7.75rem', '20rem', '8.5rem', '8.5rem', '6rem']
         // nevracia aktualne sirky stlpcov (po manualnom rozsireni) ale tie ktore boli nastavene/vypocitane v kode
@@ -758,17 +799,17 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                 widths.push((_b = column.props.headerStyle) === null || _b === void 0 ? void 0 : _b.width);
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
         finally {
             try {
                 if (columns_5_1 && !columns_5_1.done && (_a = columns_5.return)) _a.call(columns_5);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_9) throw e_9.error; }
         }
         return widths;
     };
     var getFieldSetIds = function () {
-        var e_8, _a;
+        var e_10, _a;
         var fieldSetIds = [];
         // warning note: props.children are used to get props of XLazyColumn whereas dataTableEl.current.props.children are used to get props of Primereact DataTable
         var columns = props.children;
@@ -780,12 +821,12 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                 }
             }
         }
-        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (columns_6_1 && !columns_6_1.done && (_a = columns_6.return)) _a.call(columns_6);
             }
-            finally { if (e_8) throw e_8.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         return fieldSetIds;
     };
@@ -870,7 +911,7 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
         setFormDialogState({ opened: false });
     };
     var onClickRemoveRow = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var reread_1, e_9, e_10;
+        var reread_1, e_11, e_12;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -885,8 +926,8 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                     reread_1 = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    e_9 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_9);
+                    e_11 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_11);
                     return [3 /*break*/, 4];
                 case 4:
                     if (reread_1) {
@@ -908,8 +949,8 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
                     _a.sent();
                     return [3 /*break*/, 9];
                 case 8:
-                    e_10 = _a.sent();
-                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_10);
+                    e_12 = _a.sent();
+                    XUtils_1.XUtils.showErrorMessage((0, XLocale_1.xLocaleOption)('removeRowFailed'), e_12);
                     return [3 /*break*/, 9];
                 case 9:
                     loadData();
@@ -1146,6 +1187,9 @@ exports.XLazyDataTable = (0, react_1.forwardRef)(function (_a, ref) {
         else {
             bodyValue = valueAsUI(rowDataValue, xField, columnProps.contentType, columnProps.fieldSetId);
         }
+        if (columnProps.className || columnProps.style) {
+            bodyValue = react_1.default.createElement("div", { className: columnProps.className, style: columnProps.style }, bodyValue);
+        }
         return bodyValue;
     };
     // in order that row expansion works like standard row, we wrap row expansion into div

package/lib/components/XUtils.js

@@ -582,7 +582,9 @@ var XUtils = exports.XUtils = /** @class */ (function () {
             // if the length of field is 2 or more, then readOnly
             isReadOnly = true;
         }
-        // formReadOnlyBase is called on the level XFormDataTable2
+        // formReadOnlyBase is called on the level XFormDataTable2 and XFormPanelList
+        // the reason is (probably) that in XFormDataTable2 and XFormPanelList we know the assoc name whereas here in component we know only field name
+        // (assoc name is param of formReadOnlyBase)
         // else if (this.props.form.formReadOnlyBase("xxx")) {
         //     isReadOnly = true;
         // }

package/package.json

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