ods-component-lib 1.18.2 → 1.18.4

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

@@ -1,26 +1,30 @@
 import React from 'react';
 import { IDataGridOptions, IButtonProps, ISelectionProps, IEditingProps } from 'devextreme-react/data-grid';
 interface IOdsDataGridProps extends IDataGridOptions {
-    token?: string;
     isApplyButtonClicked?: boolean;
     language: string;
-    requestData?: any;
-    apiUrl?: string;
     exportFileName: string;
     filterEnabledShow: boolean;
     pageTitle?: string;
     toolbarButtonGroup?: IButtonGroup[];
     actionButtonGroup?: IButtonGroup[];
-    key: string;
     columns: any[];
-    pageSize: number;
+    pageSize?: number;
     actionColumnEnable: boolean;
     selectOptions?: ISelectOptions;
     columnChooserPositionDisabled?: boolean;
     pagingEnable?: boolean;
     edit?: IEditingoptions;
     isServerSide: boolean;
-    actionColumnCaption?: string;
+    axiosRequest?: IAxiosProps;
+}
+interface IAxiosProps {
+    token: string;
+    requestData?: any;
+    apiUrl: string;
+    environmentUrl: string;
+    requestQueryString?: string;
+    requestType: string;
 }
 interface IEditingoptions extends IEditingProps {
     formItems?: any[];
@@ -35,5 +39,5 @@ interface IButtonGroup extends IButtonProps {
     onclick?: React.MouseEventHandler<HTMLElement>;
     actionPermission?: boolean;
 }
-declare const OdsRemoteDataGrid: (props: IOdsDataGridProps) => React.JSX.Element;
-export default OdsRemoteDataGrid;
+declare const _default: React.MemoExoticComponent<(props: IOdsDataGridProps) => React.JSX.Element>;
+export default _default;

package/dist/index.css

@@ -1,87 +1,4 @@
 
-:root {
-    --colorText: #000000E0;
-    --controlItemBgActive:#E6F4FF
-  }
-
-tr._2CvVM._3udtX._32nFu{
-  background: var(--controlItemBgActive, #E6F4FF) !important;
-  display: flex;
-  align-items: center;
-  flex: 1 0 0;
-}
-
-._2jY0l {
-    padding-top: 10px !important;
-}
-
-._36VXO {
-  width: 100%;
-}
-
-div._1veiV {
-  max-width: 100% !important;
-}
-
-tr:first-child {
-  background-color:  #E6F4FF !important; /* Replace with your desired background color */
-}
-
-
-._q4jkZ > ._1UPzZ, ._q4jkZ > ._1XbNt {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-._q4jkZ ._1UPzZ, ._1GEDH + ._1UPzZ, ._1UPzZ._4V16J {
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-._q4jkZ > ._1GEDH, ._q4jkZ > ._1UPzZ, ._q4jkZ > ._1XbNt {
-  border-left: 1px solid rgba(0, 0, 0, 0.06);
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 5px;
-}
-
-._q4jkZ > ._3mbXf, ._q4jkZ > ._1GEDH {
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-._1GEDH ._2NiLf ._2CvVM > td {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  /* border-right: 1px solid rgba(0, 108, 198, 1); */
-}
-
-._36VXO ._3udtX > td {
-  border-left: 1px solid rgba(0, 0, 0, 0.06);
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-}
-
-._1GEDH {
-  border-bottom: none; 
-}
-
-._1GEDH {
-  color: #000000E0;
-}
-
-._pljbP {
-  border-radius: 6px;
-}
-
-._3nKdN, ._23Fql {
-  background-color: #E6F4FF;
-}
-
-._1hTxK._3umXw {
-  background-color: #E6F4FF;
-}
-
-._3XxAq{
-  max-width: 230px;
-  min-width: 230px;
-}
-
-
 
 ._q4jkZ > ._1UPzZ, ._q4jkZ > ._1XbNt {
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
@@ -192,9 +109,10 @@ tr._2CvVM._3Xrp3._19iuB._3udtX {
 }
 
 ._36VXO._8U8_Y._q4jkZ {
-  border-radius: 16px;
+  border-radius: 16px ;
 }
 
+
 ._3mbXf {
   border-radius: 6px;
 }

package/dist/index.js

@@ -16487,8 +16487,6 @@ function OdsDataGridNew(props) {
     }, buttonGroupItem.label));
   }), React__default.createElement(DataGrid.Item, {
     name: "searchPanel"
-  }), React__default.createElement(DataGrid.Item, {
-    name: "applyFilterButton"
   }), React__default.createElement(DataGrid.Item, {
     name: "columnChooserButton"
   }), React__default.createElement(DataGrid.Item, {
@@ -16558,17 +16556,18 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   var gridRef = React.useRef(null);
   var headers = new Headers({
     'Content-Type': 'application/json',
-    'Authorization': 'Bearer ' + props.token,
-    "Accept-Language": props.language
+    'Authorization': 'Bearer ' + (props.axiosRequest ? props.axiosRequest.token : ""),
+    "Accept-Language": props.language != "" ? props.language : 'EN'
   });
   React.useEffect(function () {
     if (props.isApplyButtonClicked) {
       totalPageCount = 1;
       loadedPageCount = 1;
       totalRecordCount = 0;
+      setData([]);
       fetchData();
     }
-  }, [props.isApplyButtonClicked]);
+  }, [props.isApplyButtonClicked, props.axiosRequest.requestData]);
   React.useEffect(function () {
     localization.locale(localStorage.getItem("locale"));
     localization.loadMessages(JSON.parse(localStorage.getItem("localTranslation")));
@@ -16578,10 +16577,13 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
       props.actionButtonGroup.push({
         icon: 'kebabMenu',
         visible: true,
-        disabled: false
+        disabled: false,
+        onclick: openActionKebab
       });
     }
+    console.log(props.actionButtonGroup);
   }, [props.actionButtonGroup]);
+  var openActionKebab = function openActionKebab() {};
   var handleRef = function handleRef(instance) {
     if (instance) {
       gridRef.current = instance;
@@ -16589,35 +16591,44 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   };
   var fetchData = function fetchData() {
     try {
-      var apiUrl = process.env.REACT_APP_API_MASTERDATA_URL + "" + props.apiUrl;
-      props.requestData.PaginatedRequest.PageNumber = loadedPageCount;
-      props.requestData.PaginatedRequest.PageSize = props.pageSize;
-      var requestOptions = {
-        method: 'POST',
-        headers: headers,
-        body: JSON.stringify(props.requestData)
-      };
-      var _temp = _finallyRethrows(function () {
-        return _catch(function () {
-          return Promise.resolve(fetch(apiUrl, requestOptions)).then(function (response) {
-            return Promise.resolve(response.json()).then(function (newData) {
-              setData(function (prevData) {
-                return [].concat(prevData, newData.Data);
+      setIsLoading(true);
+      var _temp2 = function () {
+        if (props.isServerSide) {
+          var apiUrl = props.axiosRequest.environmentUrl + "" + props.axiosRequest.apiUrl;
+          if (props.axiosRequest.requestData.PaginatedRequest !== undefined) {
+            props.axiosRequest.requestData.PaginatedRequest.PageNumber = loadedPageCount;
+            props.axiosRequest.requestData.PaginatedRequest.PageSize = props.pageSize;
+          }
+          if (props.axiosRequest.requestQueryString !== undefined) {
+            apiUrl = apiUrl + "?" + props.axiosRequest.requestQueryString;
+          }
+          var requestOptions = {
+            method: props.axiosRequest.requestType,
+            headers: headers,
+            body: JSON.stringify(props.axiosRequest.requestData)
+          };
+          var _temp = _finallyRethrows(function () {
+            return _catch(function () {
+              return Promise.resolve(fetch(apiUrl, requestOptions)).then(function (response) {
+                return Promise.resolve(response.json()).then(function (newData) {
+                  setData(function (prevData) {
+                    return [].concat(prevData, newData.Data);
+                  });
+                  totalPageCount = newData.PageCount;
+                  totalRecordCount = newData.RowCount;
+                });
               });
-              totalPageCount = newData.PageCount;
-              totalRecordCount = newData.RowCount;
-              setIsLoading(false);
+            }, function (error) {
+              console.error('Error fetching data:', error);
             });
+          }, function (_wasThrown, _result) {
+            if (_wasThrown) throw _result;
+            return _result;
           });
-        }, function (error) {
-          console.error('Error fetching data:', error);
-        });
-      }, function (_wasThrown, _result) {
-        setIsLoading(false);
-        if (_wasThrown) throw _result;
-        return _result;
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -16628,10 +16639,8 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
       if (dxScrollable != null) {
         dxScrollable.off("scroll");
         dxScrollable.on("scroll", function (args) {
-          if (args.reachedBottom && !isLoading) {
-            if (!isLoading) {
-              getServerSide("reachedBottom");
-            }
+          if (args.reachedBottom) {
+            getServerSide("reachedBottom");
           }
         });
       }
@@ -16639,14 +16648,16 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   };
   var onEditorPreparing = function onEditorPreparing(e) {
     if (e.row !== undefined && e.parentType === 'dataRow') {
-      var disableScrolling = function disableScrolling() {
-        gridRef.current.instance.option('scrolling.mode', 'none');
-      };
-      var enableScrolling = function enableScrolling() {
-        gridRef.current.instance.option('scrolling.mode', 'virtual');
-      };
-      e.editorOptions.onFocusIn = disableScrolling;
-      e.editorOptions.onFocusOut = enableScrolling;
+      if (props.isServerSide) {
+        var disableScrolling = function disableScrolling() {
+          gridRef.current.instance.option('scrolling.mode', 'none');
+        };
+        var enableScrolling = function enableScrolling() {
+          gridRef.current.instance.option('scrolling.mode', 'virtual');
+        };
+        e.editorOptions.onFocusIn = disableScrolling;
+        e.editorOptions.onFocusOut = enableScrolling;
+      }
     }
   };
   var getServerSide = function getServerSide(type) {
@@ -16732,21 +16743,9 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     }
     return result;
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: "odsDatagrid",
-    style: {
-      width: "100%",
-      overflowX: 'hidden',
-      overflowY: "hidden",
-      marginTop: "10px",
-      backgroundColor: token.colorBgContainer
-    }
-  }, React__default.createElement(DataGrid__default, {
-    style: {
-      borderRadius: token.borderRadiusLG * 2
-    },
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(DataGrid__default, {
     keyExpr: props.keyExpr,
-    dataSource: data,
+    dataSource: props.isServerSide ? data : props.dataSource,
     onContentReady: onContentReady,
     showBorders: true,
     columnAutoWidth: false,
@@ -16754,7 +16753,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     onSaving: props.onSaving,
     ref: handleRef,
     onExporting: onExporting,
-    height: window.innerHeight - 200,
+    height: props.height == undefined ? window.innerHeight - 164 : props.height,
     allowColumnResizing: true,
     columnResizingMode: "nextColumn",
     onRowClick: props.onRowClick,
@@ -16769,6 +16768,8 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
       enabled: false
     },
     repaintChangesOnly: true,
+    focusedRowEnabled: false,
+    filterSyncEnabled: true,
     wordWrapEnabled: props.wordWrapEnabled ? props.wordWrapEnabled : false,
     columnFixing: {
       enabled: true
@@ -16793,7 +16794,7 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     dataField: "Actions",
     fixed: true,
     allowSorting: false,
-    caption: props.actionColumnCaption,
+    caption: "Actions",
     type: "buttons",
     showInColumnChooser: false
   }, props.actionButtonGroup && Array.isArray(props.actionButtonGroup) && props.actionButtonGroup.map(function (buttonItem) {
@@ -16828,7 +16829,15 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
         dataField: subItem.dataField
       });
     }));
-  })))), React__default.createElement(DataGrid.Scrolling, {
+  })))), React__default.createElement(DataGrid.Paging, {
+    defaultPageSize: props.pageSize
+  }), props.pagingEnable && React__default.createElement(DataGrid.Pager, {
+    visible: false,
+    displayMode: "full",
+    showPageSizeSelector: false,
+    showNavigationButtons: false,
+    showInfo: false
+  }), React__default.createElement(DataGrid.Scrolling, {
     showScrollbar: "always",
     scrollByContent: true,
     scrollByThumb: true,
@@ -16853,12 +16862,6 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   }), ((_props$selectOptions = props.selectOptions) === null || _props$selectOptions === void 0 ? void 0 : _props$selectOptions.selectEnable) && React__default.createElement(DataGrid.Selection, {
     mode: (_props$selectOptions$ = (_props$selectOptions2 = props.selectOptions) === null || _props$selectOptions2 === void 0 ? void 0 : _props$selectOptions2.mode) != null ? _props$selectOptions$ : "multiple",
     deferred: (_props$selectOptions$2 = (_props$selectOptions3 = props.selectOptions) === null || _props$selectOptions3 === void 0 ? void 0 : _props$selectOptions3.deferred) != null ? _props$selectOptions$2 : true
-  }), props.pagingEnable && React__default.createElement(DataGrid.Pager, {
-    visible: false,
-    displayMode: "full",
-    showPageSizeSelector: false,
-    showNavigationButtons: false,
-    showInfo: false
   }), React__default.createElement(DataGrid.ColumnChooser, {
     enabled: true,
     mode: "select"
@@ -16919,8 +16922,9 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
     type: "custom",
     customLoad: customLoad,
     customSave: customSave
-  }))));
+  })));
 };
+var OdsRemoteDataGrid$1 = React__default.memo(OdsRemoteDataGrid);
 
 exports.DxTreeList = DxTreeList;
 exports.DxTreeView = DxTreeView;
@@ -16961,7 +16965,7 @@ exports.OdsRadio = OdsRadio;
 exports.OdsRadioGroup = OdsRadioGroup;
 exports.OdsRangeTimepicker = OdsRangeTimepicker;
 exports.OdsRate = OdsRate;
-exports.OdsRemoteDataGrid = OdsRemoteDataGrid;
+exports.OdsRemoteDataGrid = OdsRemoteDataGrid$1;
 exports.OdsSearch = OdsSearch;
 exports.OdsSelect = OdsSelect;
 exports.OdsSelectableTable = OdsSelectableTable;