ods-component-lib 1.13.8 → 1.13.11

package/dist/index.d.ts

@@ -43,6 +43,7 @@ import OdsTitle from "./components/antd/typography/OdsTitle";
 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 DxTreeList from "./components/devextreme/treeview/DxTreeList";
 import DxTreeView from "./components/devextreme/treeview/DxTreeView";
 export { OdsButton };
@@ -92,3 +93,4 @@ export { OdsNotification };
 export { DxTreeView };
 export { DxTreeList };
 export { OdsDisplayGrid };
+export { OdsProfDataGrid };

package/dist/index.js

@@ -1206,7 +1206,7 @@ function grid(props) {
     }, colProperties.column.caption);
   };
   var fileName = props.exportFileName ? props.exportFileName + moment().format("YYYYMMDD") : "DatagridExportFile" + moment().format("YYYYMMDD");
-  var onExporting = React__default.useCallback(function (e) {
+  var onExporting = function onExporting(e) {
     if (e.format === 'excel') {
       var workbook = new exceljs.Workbook();
       excel_exporter.exportDataGrid({
@@ -1230,7 +1230,7 @@ function grid(props) {
         doc.save(fileName + '.pdf');
       });
     }
-  }, []);
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "odsDatagrid",
     style: {
@@ -1356,9 +1356,9 @@ function grid(props) {
       return React__default.createElement(dataGrid.Column, {
         type: "buttons",
         width: 110
-      }, React__default.createElement(React__default.Fragment, null, React__default.createElement(dataGrid.Button, {
+      }, React__default.createElement(React__default.Fragment, null, props.edit.allowUpdating && React__default.createElement(dataGrid.Button, {
         name: "edit"
-      }), React__default.createElement(dataGrid.Button, {
+      }), props.edit.allowDeleting && React__default.createElement(dataGrid.Button, {
         name: "delete"
       })));
     }
@@ -1450,6 +1450,267 @@ function grid$1(props) {
   })));
 }
 
+var exportFormats$2 = ['xlsx', 'pdf'];
+var searchEditorOptions$2 = {
+  placeholder: 'Search column'
+};
+var renderMenuItem$1 = function renderMenuItem() {
+  return React__default.createElement(dataGrid.Export, {
+    enabled: true,
+    allowExportSelectedData: true,
+    formats: exportFormats$2
+  });
+};
+var customizeBooleanColumnRender$1 = function customizeBooleanColumnRender(e) {
+  var tagColor = e.value ? 'green' : 'gold';
+  return React__default.createElement(antd.Tag, {
+    color: tagColor
+  }, e.value ? 'Active' : 'Passive');
+};
+function OdsDataGrid$1(props) {
+  return grid$2(props);
+}
+function grid$2(props) {
+  var _useState = React.useState(true),
+    showPageSizeSelector = _useState[0],
+    setShowPageSizeSelector = _useState[1];
+  var _useState2 = React.useState(true),
+    enablePaging = _useState2[0],
+    setEnablePaging = _useState2[1];
+  var _useState3 = React.useState(true),
+    loadPanelEnabled = _useState3[0],
+    setLoadPanelEnabled = _useState3[1];
+  var dataGridRef = React.useRef(null);
+  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 showPageSizeSelectorChange = function showPageSizeSelectorChange(value) {
+    setShowPageSizeSelector(value);
+  };
+  var onEnablePagingChange = function onEnablePagingChange(value) {
+    setEnablePaging(value);
+    refreshGrid();
+  };
+  var handleScrollingTypeChange = function handleScrollingTypeChange(newScrollingType) {
+    console.log(newScrollingType);
+    debugger;
+    refreshGrid();
+  };
+  var onContentReady = function onContentReady() {
+    setLoadPanelEnabled(false);
+  };
+  var refreshGrid = function refreshGrid() {
+    if (dataGridRef.current) {
+      dataGridRef.current.instance.refresh();
+    }
+  };
+  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: props.dataSource,
+    keyExpr: props.keyExpr,
+    allowColumnResizing: true,
+    columnResizingMode: "widget",
+    onRowInserted: props.onRowInserted,
+    onRowUpdated: props.onRowUpdated,
+    onRowRemoved: props.onRowRemoved,
+    onSaving: props.onSaving,
+    allowColumnReordering: true,
+    showRowLines: true,
+    showBorders: true,
+    ref: dataGridRef,
+    columnAutoWidth: false,
+    onEditCanceling: props.onEditCanceling,
+    onExporting: onExporting,
+    onContentReady: onContentReady
+  }, React__default.createElement(dataGrid.Paging, {
+    enabled: true,
+    defaultPageSize: props.pageSize
+  }), enablePaging && React__default.createElement(dataGrid.Pager, {
+    visible: true,
+    displayMode: "full",
+    showPageSizeSelector: showPageSizeSelector,
+    showNavigationButtons: true,
+    showInfo: true
+  }), props.searchEnable && React__default.createElement(dataGrid.SearchPanel, {
+    visible: true
+  }), props.filterEnable && React__default.createElement(dataGrid.FilterRow, {
+    visible: true
+  }), props.headerFilterEnable && React__default.createElement(dataGrid.HeaderFilter, {
+    visible: true
+  }), 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$2
+  }), React__default.createElement(dataGrid.ColumnChooserSelection, {
+    allowSelectAll: true,
+    selectByClick: true,
+    recursive: true
+  })), props.selectEnable && React__default.createElement(dataGrid.Selection, {
+    mode: "multiple",
+    deferred: true
+  }), React__default.createElement(dataGrid.Scrolling, {
+    mode: 'virtual'
+  }), React__default.createElement(dataGrid.LoadPanel, {
+    enabled: loadPanelEnabled
+  }), 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.exportEnable === true && React__default.createElement(dataGrid.Export, {
+    enabled: true,
+    allowExportSelectedData: true,
+    formats: exportFormats$2
+  }), props.columns.map(function (col) {
+    return React__default.createElement(dataGrid.Column, Object.assign({
+      key: col.dataField
+    }, col, {
+      headerCellRender: headerCellRender,
+      cellRender: col.dataField === 'IsActive' || col.dataField === 'Status' ? customizeBooleanColumnRender$1 : ""
+    }), 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
+      }]
+    }));
+  }), function () {
+    if (props.customPopup !== undefined) {
+      return React__default.createElement(dataGrid.Column, {
+        type: "buttons",
+        width: 110
+      }, React__default.createElement(dataGrid.Button, {
+        hint: "Edit",
+        visible: true,
+        disabled: false,
+        icon: "edit",
+        onClick: props.editButtonClick
+      }), React__default.createElement(dataGrid.Button, {
+        hint: "Delete",
+        visible: true,
+        disabled: false,
+        icon: "trash",
+        onClick: props.deleteButtonClick
+      }));
+    } else {
+      return React__default.createElement(dataGrid.Column, {
+        type: "buttons",
+        width: 110
+      }, React__default.createElement(React__default.Fragment, null, props.edit.allowUpdating && React__default.createElement(dataGrid.Button, {
+        name: "edit"
+      }), props.edit.allowDeleting && React__default.createElement(dataGrid.Button, {
+        name: "delete"
+      })));
+    }
+  }(), 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, {
+    location: "after"
+  }, React__default.createElement(devextremeReact.CheckBox, {
+    id: 'showPageSizes',
+    text: 'Show Page Size',
+    value: showPageSizeSelector,
+    onValueChange: showPageSizeSelectorChange
+  })), React__default.createElement(dataGrid.Item, {
+    location: "after"
+  }, React__default.createElement(devextremeReact.CheckBox, {
+    id: 'showPages',
+    text: 'Enable Paging',
+    value: enablePaging,
+    onValueChange: onEnablePagingChange
+  })), React__default.createElement(dataGrid.Item, {
+    location: "after"
+  }, React__default.createElement(OdsSelect, {
+    value: "standard",
+    options: [{
+      value: "standard",
+      label: "standard"
+    }, {
+      value: "virtual",
+      label: "Active"
+    }, {
+      value: "infinite",
+      label: "infinite"
+    }],
+    onChange: handleScrollingTypeChange
+  })), React__default.createElement(dataGrid.Item, {
+    name: "columnChooserButton"
+  }), React__default.createElement(dataGrid.Item, {
+    name: "searchPanel"
+  }), React__default.createElement(dataGrid.Item, {
+    name: "exportButton"
+  }), React__default.createElement(dataGrid.Item, {
+    menuItemRender: renderMenuItem$1
+  })))));
+}
+
 var DxTreeList = function DxTreeList(props) {
   var _useState = React.useState(props.dataSource),
     dataSource = _useState[0];
@@ -1552,6 +1813,7 @@ exports.OdsNotification = OdsNotification;
 exports.OdsParagraph = OdsParagraph;
 exports.OdsPassword = OdsPassword;
 exports.OdsPhoneInput = OdsPhoneInput;
+exports.OdsProfDataGrid = OdsDataGrid$1;
 exports.OdsRadio = OdsRadio;
 exports.OdsRadioGroup = OdsRadioGroup;
 exports.OdsRangeTimepicker = OdsRangeTimepicker;