ods-component-lib 1.16.9 → 1.17.1

package/dist/index.modern.js

@@ -16,6 +16,7 @@ import { Workbook } from 'exceljs';
 import { saveAs } from 'file-saver-es';
 import moment from 'moment';
 import { CheckBox, Lookup, TreeList } from 'devextreme-react';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
 import { TreeView } from 'devextreme-react/tree-view';
 
 function _extends() {
@@ -1331,7 +1332,8 @@ function grid(props) {
       key: col.dataField
     }, col, {
       headerCellRender: headerCellRender,
-      cellRender: customizeBooleanColumnRender
+      cellRender: customizeBooleanColumnRender,
+      calculateCellValue: col.calculateCellValue
     }), col.required && React.createElement(RequiredRule, {
       message: col.requiredMessage
     }), col.dataField === 'IsActive' && React.createElement(HeaderFilter, {
@@ -1780,6 +1782,202 @@ function OdsProfDataGrid(props) {
   })))));
 }
 
+var exportFormats$3 = ['xlsx', 'pdf'];
+var searchEditorOptions$3 = {
+  placeholder: 'Search column'
+};
+var renderMenuItem$2 = function renderMenuItem() {
+  return React.createElement(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.createElement(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.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 Workbook();
+      exportDataGrid({
+        component: e.component,
+        worksheet: workbook.addWorksheet('Main sheet'),
+        autoFilterEnabled: true
+      }).then(function () {
+        workbook.xlsx.writeBuffer().then(function (buffer) {
+          saveAs(new Blob([buffer], {
+            type: 'application/octet-stream'
+          }), fileName + '.xlsx');
+        });
+      });
+    } else {
+      var doc = new jsPDF();
+      exportDataGrid$1({
+        jsPDFDocument: doc,
+        component: e.component,
+        indent: 5
+      }).then(function () {
+        doc.save(fileName + '.pdf');
+      });
+    }
+  };
+  var dataSource = createStore({
+    key: props.keyExpr,
+    loadUrl: props.loadUrl
+  });
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "odsDatagrid",
+    style: {
+      width: "100%",
+      overflowX: 'auto'
+    }
+  }, React.createElement(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.createElement(SearchPanel, {
+    visible: true
+  }), React.createElement(FilterRow, {
+    visible: true
+  }), React.createElement(HeaderFilter, {
+    visible: true
+  }), React.createElement(Selection, {
+    mode: "multiple",
+    deferred: true
+  }), React.createElement(Scrolling, {
+    mode: "infinite"
+  }), React.createElement(StateStoring, {
+    enabled: true,
+    type: "localStorage",
+    storageKey: props.exportFileName + "Storage"
+  }), React.createElement(ColumnChooser, {
+    enabled: true,
+    mode: "select"
+  }, React.createElement(Position, {
+    my: "right top",
+    at: "right bottom",
+    of: ".dx-datagrid-column-chooser-button"
+  }), React.createElement(ColumnChooserSearch, {
+    enabled: true,
+    editorOptions: searchEditorOptions$3
+  }), React.createElement(ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), props.editEnable === true && React.createElement(Editing, {
+    mode: props.edit.mode,
+    allowUpdating: props.edit.allowUpdating,
+    allowDeleting: props.edit.allowDeleting,
+    allowAdding: props.edit.allowAdding,
+    useIcons: true
+  }, props.edit.mode === "popup" && React.createElement(Popup, {
+    title: props.popupTitle,
+    showTitle: true,
+    width: 700,
+    height: 300,
+    showCloseButton: false
+  }), React.createElement(Form$1, null, props.formItems.map(function (formItem) {
+    return React.createElement(Item, {
+      itemType: formItem.itemType,
+      colCount: formItem.colCount,
+      colSpan: formItem.colSpan
+    }, formItem.items.map(function (subItem) {
+      return React.createElement(Item, {
+        key: subItem.dataField,
+        dataField: subItem.dataField
+      });
+    }));
+  }))), props.columns.map(function (col) {
+    return React.createElement(Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerCellRender: headerCellRender,
+      cellRender: customizeBooleanColumnRender$2
+    }), col.required && React.createElement(RequiredRule, {
+      message: col.requiredMessage
+    }), col.dataField === 'IsActive' && React.createElement(HeaderFilter, {
+      dataSource: [{
+        text: 'All',
+        value: null
+      }, {
+        text: 'Active',
+        value: true
+      }, {
+        text: 'Passive',
+        value: false
+      }]
+    }));
+  }), React.createElement(Toolbar, null, React.createElement(Item$1, {
+    location: "after"
+  }, React.createElement(OdsButton, {
+    type: "primary",
+    onClick: props.onAddButton
+  }, "Add New")), React.createElement(Item$1, {
+    name: "searchPanel"
+  }), React.createElement(Item$1, {
+    name: "columnChooserButton"
+  }), React.createElement(Item$1, {
+    name: "exportButton"
+  }), React.createElement(Item$1, {
+    menuItemRender: renderMenuItem$2
+  })), React.createElement(Summary, null, React.createElement(TotalItem, {
+    column: "Id",
+    summaryType: "count",
+    displayFormat: "{0} Total Data"
+  }), props.sumaryRowItems && props.sumaryRowItems.map(function (item) {
+    return React.createElement(TotalItem, {
+      column: item.columnName,
+      summaryType: item.aggregateFn,
+      valueFormat: item.valueFormat ? item.valueFormat : "",
+      displayFormat: "Total: {0}"
+    });
+  })))));
+}
+
 var DxTreeList = function DxTreeList(props) {
   var _useState = useState(props.dataSource),
     dataSource = _useState[0];
@@ -1852,5 +2050,5 @@ var DxTreeView = function DxTreeView(props) {
   }));
 };
 
-export { DxTreeList, DxTreeView, OdsAutoComplete, OdsBasicForm, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDateRangePicker as OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsLogin, OdsMessage, OdsModal, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProfDataGrid, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
+export { DxTreeList, DxTreeView, OdsAutoComplete, OdsBasicForm, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDateRangePicker as OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsLogin, OdsMessage, OdsModal, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProfDataGrid, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle };
 //# sourceMappingURL=index.modern.js.map