ods-component-lib 1.16.9 → 1.17.1

package/dist/components/devextreme/OdsRemoteDataGrid.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./DxDataGrid.css";
+declare function OdsRemoteDataGrid(props: any): React.JSX.Element;
+export default OdsRemoteDataGrid;

package/dist/index.d.ts

@@ -44,6 +44,7 @@ import OdsLogin from "./components/custom/OdsLogin";
 import OdsDataGrid from "./components/devextreme/OdsDataGrid";
 import OdsDisplayGrid from "./components/devextreme/OdsDisplayGrid";
 import OdsProfDataGrid from "./components/devextreme/OdsProfDataGrid";
+import OdsRemoteDataGrid from "./components/devextreme/OdsRemoteDataGrid";
 import DxTreeList from "./components/devextreme/treeview/DxTreeList";
 import DxTreeView from "./components/devextreme/treeview/DxTreeView";
 export { OdsButton };
@@ -94,3 +95,4 @@ export { DxTreeView };
 export { DxTreeList };
 export { OdsDisplayGrid };
 export { OdsProfDataGrid };
+export { OdsRemoteDataGrid };

package/dist/index.js

@@ -20,6 +20,7 @@ var exceljs = require('exceljs');
 var fileSaverEs = require('file-saver-es');
 var moment = _interopDefault(require('moment'));
 var devextremeReact = require('devextreme-react');
+var AspNetData = require('devextreme-aspnet-data-nojquery');
 var treeView = require('devextreme-react/tree-view');
 
 function _extends() {
@@ -1335,7 +1336,8 @@ function grid(props) {
       key: col.dataField
     }, col, {
       headerCellRender: headerCellRender,
-      cellRender: customizeBooleanColumnRender
+      cellRender: customizeBooleanColumnRender,
+      calculateCellValue: col.calculateCellValue
     }), col.required && React__default.createElement(dataGrid.RequiredRule, {
       message: col.requiredMessage
     }), col.dataField === 'IsActive' && React__default.createElement(dataGrid.HeaderFilter, {
@@ -1784,6 +1786,202 @@ function OdsProfDataGrid(props) {
   })))));
 }
 
+var exportFormats$3 = ['xlsx', 'pdf'];
+var searchEditorOptions$3 = {
+  placeholder: 'Search column'
+};
+var renderMenuItem$2 = function renderMenuItem() {
+  return React__default.createElement(dataGrid.Export, {
+    enabled: true,
+    allowExportSelectedData: true,
+    formats: exportFormats$3
+  });
+};
+var customizeBooleanColumnRender$2 = function customizeBooleanColumnRender(e) {
+  if (e.column.dataField === 'IsActive' || e.column.dataField === 'Status') {
+    var tagColor = e.value ? 'green' : 'gold';
+    return React__default.createElement(antd.Tag, {
+      color: tagColor
+    }, e.value ? 'Active' : 'Passive');
+  }
+  if (e.column.dataType === 'datetime') {
+    if (e.value !== null) {
+      var date = moment(e.value);
+      var offsetMinutes = date.utcOffset();
+      var sign = offsetMinutes >= 0 ? '+' : '-';
+      var hours = Math.floor(Math.abs(offsetMinutes) / 60);
+      var minutes = Math.abs(offsetMinutes) % 60;
+      var formattedOffset = "(UTC" + sign + hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0') + ")";
+      var formatedDate = date.format('DD.MM.YYYY HH.mm') + " " + formattedOffset;
+      return formatedDate;
+    }
+  }
+  return e.value;
+};
+function OdsRemoteDataGrid(props) {
+  return grid$2(props);
+}
+function grid$2(props) {
+  var _ref;
+  var headerCellRender = function headerCellRender(colProperties) {
+    return React__default.createElement("th", {
+      className: "dx-datagrid-headers"
+    }, colProperties.column.caption);
+  };
+  var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
+  var onExporting = function onExporting(e) {
+    if (e.format === 'xlsx') {
+      var workbook = new exceljs.Workbook();
+      excel_exporter.exportDataGrid({
+        component: e.component,
+        worksheet: workbook.addWorksheet('Main sheet'),
+        autoFilterEnabled: true
+      }).then(function () {
+        workbook.xlsx.writeBuffer().then(function (buffer) {
+          fileSaverEs.saveAs(new Blob([buffer], {
+            type: 'application/octet-stream'
+          }), fileName + '.xlsx');
+        });
+      });
+    } else {
+      var doc = new jsPDF();
+      pdf_exporter.exportDataGrid({
+        jsPDFDocument: doc,
+        component: e.component,
+        indent: 5
+      }).then(function () {
+        doc.save(fileName + '.pdf');
+      });
+    }
+  };
+  var dataSource = AspNetData.createStore({
+    key: props.keyExpr,
+    loadUrl: props.loadUrl
+  });
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "odsDatagrid",
+    style: {
+      width: "100%",
+      overflowX: 'auto'
+    }
+  }, React__default.createElement(dataGrid.DataGrid, {
+    dataSource: dataSource,
+    onRowInserted: props.onRowInserted,
+    onRowUpdated: props.onRowUpdated,
+    onRowRemoved: props.onRowRemoved,
+    onSaving: props.onSaving,
+    onEditCanceling: props.onEditCanceling,
+    onExporting: onExporting,
+    height: (_ref = props.height !== undefined) != null ? _ref : props.height,
+    allowColumnResizing: true,
+    allowColumnReordering: true,
+    showRowLines: true,
+    showBorders: true,
+    columnAutoWidth: true,
+    columnResizingMode: "widget",
+    paging: {
+      pageSize: props.pageSize ? props.pageSize : 20
+    },
+    remoteOperations: true
+  }, React__default.createElement(dataGrid.SearchPanel, {
+    visible: true
+  }), React__default.createElement(dataGrid.FilterRow, {
+    visible: true
+  }), React__default.createElement(dataGrid.HeaderFilter, {
+    visible: true
+  }), React__default.createElement(dataGrid.Selection, {
+    mode: "multiple",
+    deferred: true
+  }), React__default.createElement(dataGrid.Scrolling, {
+    mode: "infinite"
+  }), React__default.createElement(dataGrid.StateStoring, {
+    enabled: true,
+    type: "localStorage",
+    storageKey: props.exportFileName + "Storage"
+  }), React__default.createElement(dataGrid.ColumnChooser, {
+    enabled: true,
+    mode: "select"
+  }, React__default.createElement(dataGrid.Position, {
+    my: "right top",
+    at: "right bottom",
+    of: ".dx-datagrid-column-chooser-button"
+  }), React__default.createElement(dataGrid.ColumnChooserSearch, {
+    enabled: true,
+    editorOptions: searchEditorOptions$3
+  }), React__default.createElement(dataGrid.ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), props.editEnable === true && React__default.createElement(dataGrid.Editing, {
+    mode: props.edit.mode,
+    allowUpdating: props.edit.allowUpdating,
+    allowDeleting: props.edit.allowDeleting,
+    allowAdding: props.edit.allowAdding,
+    useIcons: true
+  }, props.edit.mode === "popup" && React__default.createElement(dataGrid.Popup, {
+    title: props.popupTitle,
+    showTitle: true,
+    width: 700,
+    height: 300,
+    showCloseButton: false
+  }), React__default.createElement(dataGrid.Form, null, props.formItems.map(function (formItem) {
+    return React__default.createElement(form.Item, {
+      itemType: formItem.itemType,
+      colCount: formItem.colCount,
+      colSpan: formItem.colSpan
+    }, formItem.items.map(function (subItem) {
+      return React__default.createElement(form.Item, {
+        key: subItem.dataField,
+        dataField: subItem.dataField
+      });
+    }));
+  }))), props.columns.map(function (col) {
+    return React__default.createElement(dataGrid.Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerCellRender: headerCellRender,
+      cellRender: customizeBooleanColumnRender$2
+    }), col.required && React__default.createElement(dataGrid.RequiredRule, {
+      message: col.requiredMessage
+    }), col.dataField === 'IsActive' && React__default.createElement(dataGrid.HeaderFilter, {
+      dataSource: [{
+        text: 'All',
+        value: null
+      }, {
+        text: 'Active',
+        value: true
+      }, {
+        text: 'Passive',
+        value: false
+      }]
+    }));
+  }), React__default.createElement(dataGrid.Toolbar, null, React__default.createElement(dataGrid.Item, {
+    location: "after"
+  }, React__default.createElement(OdsButton, {
+    type: "primary",
+    onClick: props.onAddButton
+  }, "Add New")), React__default.createElement(dataGrid.Item, {
+    name: "searchPanel"
+  }), React__default.createElement(dataGrid.Item, {
+    name: "columnChooserButton"
+  }), React__default.createElement(dataGrid.Item, {
+    name: "exportButton"
+  }), React__default.createElement(dataGrid.Item, {
+    menuItemRender: renderMenuItem$2
+  })), React__default.createElement(dataGrid.Summary, null, React__default.createElement(dataGrid.TotalItem, {
+    column: "Id",
+    summaryType: "count",
+    displayFormat: "{0} Total Data"
+  }), props.sumaryRowItems && props.sumaryRowItems.map(function (item) {
+    return React__default.createElement(dataGrid.TotalItem, {
+      column: item.columnName,
+      summaryType: item.aggregateFn,
+      valueFormat: item.valueFormat ? item.valueFormat : "",
+      displayFormat: "Total: {0}"
+    });
+  })))));
+}
+
 var DxTreeList = function DxTreeList(props) {
   var _useState = React.useState(props.dataSource),
     dataSource = _useState[0];
@@ -1891,6 +2089,7 @@ exports.OdsRadio = OdsRadio;
 exports.OdsRadioGroup = OdsRadioGroup;
 exports.OdsRangeTimepicker = OdsRangeTimepicker;
 exports.OdsRate = OdsRate;
+exports.OdsRemoteDataGrid = OdsRemoteDataGrid;
 exports.OdsSearch = OdsSearch;
 exports.OdsSelect = OdsSelect;
 exports.OdsSelectableTable = OdsSelectableTable;