ods-component-lib 1.19.6 → 1.19.7

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

@@ -0,0 +1,65 @@
+import { FC } from "react";
+import { TransferProps } from "antd";
+import "devextreme/dist/css/dx.light.css";
+import "./styles.css";
+interface Column {
+    title?: string;
+    dataIndex?: string;
+    key?: string;
+    caption?: string;
+    tooltip?: {
+        enable: boolean;
+    };
+    dataField?: string;
+    dataType?: "string" | "number" | "boolean" | "object" | "date" | "datetime";
+    calculateSortValue?: string;
+}
+interface AxiosProps {
+    token: string;
+    requestData?: any;
+    apiUrl: string;
+    environmentUrl: string;
+    requestQueryString?: any;
+    requestType: string;
+}
+interface SummaryRowOptions {
+    summaryLoadedDataLabel?: string;
+    summaryTotalDataLabel?: string;
+    summaryFilteredDataLabel?: string;
+    summaryTotalCount?: number;
+    summaryTotalPageCountLabel?: string;
+    summarySumLabel?: string;
+    summaryAvgLabel?: string;
+    summaryMinLabel?: string;
+    summaryMaxLabel?: string;
+    summaryCountLabel?: string;
+}
+interface OdsTransferProps<T = any> {
+    dataSource?: T[];
+    language: string;
+    pagingEnable?: boolean;
+    pageSize?: number;
+    isServerSide: boolean;
+    axiosRequest?: AxiosProps;
+    customSummary?: SummaryRowOptions;
+    dataGridPageName?: string;
+    columns: (string | Column)[];
+    pageTitle?: string;
+    keyExpr: string;
+    noDataText: string;
+    defaultPageSize: number;
+    targetItems?: T[];
+    noContentMainText: string;
+    noContentSubText: string;
+    onTargetChange?: (selectedItems: T[]) => void;
+    sourceTitle?: string;
+    targetTitle?: string;
+    displayPageTitle?: boolean;
+    className?: string;
+    rootClassName?: string;
+    showSearch?: boolean;
+    render?: TransferProps<T>["render"];
+    useCustomHeader?: boolean;
+}
+declare const OdsTransferV2: FC<OdsTransferProps>;
+export default OdsTransferV2;

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export { default as OdsServerSideDatagrid } from "./components/devextreme/OdsSer
  */
 export { default as OdsTimelineTable } from "./components/devextreme/OdsTimelineTable/OdsTimelineTable";
 export { default as OdsTransfer } from "./components/devextreme/OdsTransfer";
+export { default as OdsTransferV2 } from "./components/devextreme/OdsTransferV2";
 export { default as OdsFilter } from "./components/filter/OdsFilter";
 export { default as OdsFilterPlus } from "./components/filter/OdsFilterPlus";
 export { default as OdsFilterTagView } from "./components/filter/OdsFilterTagView";

package/dist/index.js

@@ -57830,7 +57830,7 @@ var getRequestHeaders = function getRequestHeaders(props) {
   });
 };
 var OdsTransfer = function OdsTransfer(props) {
-  var _props$targetItems, _props$axiosRequest4, _props$axiosRequest5, _props$axiosRequest0, _props$axiosRequest1, _props$axiosRequest10, _props$axiosRequest11, _props$axiosRequest12;
+  var _props$targetItems, _props$axiosRequest5, _props$axiosRequest6, _props$axiosRequest7, _props$axiosRequest8, _props$axiosRequest9, _props$axiosRequest0, _props$axiosRequest1, _props$axiosRequest10, _props$axiosRequest11;
   var initializeTargetItems = function initializeTargetItems(items) {
     return items.map(function (item) {
       return _extends({}, item, {
@@ -57856,29 +57856,22 @@ var OdsTransfer = function OdsTransfer(props) {
   var _useState5 = React.useState(data || []),
     transferDataSource = _useState5[0],
     setTransferDataSource = _useState5[1];
-  React.useEffect(function () {
-    var _props$axiosRequest, _props$axiosRequest2, _props$axiosRequest3;
-    if (props.axiosRequest && (_props$axiosRequest = props.axiosRequest) !== null && _props$axiosRequest !== void 0 && _props$axiosRequest.requestData && (Object.keys((_props$axiosRequest2 = props.axiosRequest) === null || _props$axiosRequest2 === void 0 ? void 0 : _props$axiosRequest2.requestData).length > 0 || (_props$axiosRequest3 = props.axiosRequest) !== null && _props$axiosRequest3 !== void 0 && _props$axiosRequest3.requestQueryString)) {
-      setData([]);
-      fetchData();
-    }
-  }, [(_props$axiosRequest4 = props.axiosRequest) === null || _props$axiosRequest4 === void 0 ? void 0 : _props$axiosRequest4.requestData, (_props$axiosRequest5 = props.axiosRequest) === null || _props$axiosRequest5 === void 0 ? void 0 : _props$axiosRequest5.requestQueryString]);
   var fetchData = React.useCallback(function () {
     try {
-      var _props$axiosRequest6, _props$axiosRequest6$, _props$axiosRequest7;
+      var _props$axiosRequest, _props$axiosRequest$r, _props$axiosRequest2;
       if (!props.axiosRequest) return Promise.resolve();
       var isGet = props.axiosRequest.requestType.toUpperCase() === "GET";
       var apiUrl = "" + props.axiosRequest.environmentUrl + props.axiosRequest.apiUrl;
-      if ((_props$axiosRequest6 = props.axiosRequest) !== null && _props$axiosRequest6 !== void 0 && (_props$axiosRequest6$ = _props$axiosRequest6.requestData) !== null && _props$axiosRequest6$ !== void 0 && _props$axiosRequest6$.PaginatedRequest) {
+      if ((_props$axiosRequest = props.axiosRequest) !== null && _props$axiosRequest !== void 0 && (_props$axiosRequest$r = _props$axiosRequest.requestData) !== null && _props$axiosRequest$r !== void 0 && _props$axiosRequest$r.PaginatedRequest) {
         props.axiosRequest.requestData.PaginatedRequest.PageSize = props.pageSize;
       }
-      if ((_props$axiosRequest7 = props.axiosRequest) !== null && _props$axiosRequest7 !== void 0 && _props$axiosRequest7.requestQueryString) {
-        var _props$axiosRequest8;
+      if ((_props$axiosRequest2 = props.axiosRequest) !== null && _props$axiosRequest2 !== void 0 && _props$axiosRequest2.requestQueryString) {
+        var _props$axiosRequest3;
         props.axiosRequest.requestQueryString.maxResultCount = props.pageSize;
         if (constants$3.loadedPageCount > 1 && constants$3.totalPageCount >= constants$3.loadedPageCount) {
           props.axiosRequest.requestQueryString.skipCount = ((constants$3.loadedPageCount - 1) * props.pageSize).toString();
         }
-        if (isGet && (_props$axiosRequest8 = props.axiosRequest) !== null && _props$axiosRequest8 !== void 0 && _props$axiosRequest8.requestQueryString) {
+        if (isGet && (_props$axiosRequest3 = props.axiosRequest) !== null && _props$axiosRequest3 !== void 0 && _props$axiosRequest3.requestQueryString) {
           var query = queryString.stringify(props.axiosRequest.requestQueryString);
           apiUrl = apiUrl + "?" + query;
         }
@@ -57888,8 +57881,8 @@ var OdsTransfer = function OdsTransfer(props) {
         headers: getRequestHeaders(props)
       };
       if (!isGet) {
-        var _props$axiosRequest9;
-        requestOptions.body = JSON.stringify((_props$axiosRequest9 = props.axiosRequest) === null || _props$axiosRequest9 === void 0 ? void 0 : _props$axiosRequest9.requestData);
+        var _props$axiosRequest4;
+        requestOptions.body = JSON.stringify((_props$axiosRequest4 = props.axiosRequest) === null || _props$axiosRequest4 === void 0 ? void 0 : _props$axiosRequest4.requestData);
       }
       var _temp = _finallyRethrows(function () {
         return _catch(function () {
@@ -57918,7 +57911,13 @@ var OdsTransfer = function OdsTransfer(props) {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [(_props$axiosRequest0 = props.axiosRequest) === null || _props$axiosRequest0 === void 0 ? void 0 : _props$axiosRequest0.requestData, (_props$axiosRequest1 = props.axiosRequest) === null || _props$axiosRequest1 === void 0 ? void 0 : _props$axiosRequest1.apiUrl, (_props$axiosRequest10 = props.axiosRequest) === null || _props$axiosRequest10 === void 0 ? void 0 : _props$axiosRequest10.environmentUrl, (_props$axiosRequest11 = props.axiosRequest) === null || _props$axiosRequest11 === void 0 ? void 0 : _props$axiosRequest11.requestQueryString, (_props$axiosRequest12 = props.axiosRequest) === null || _props$axiosRequest12 === void 0 ? void 0 : _props$axiosRequest12.requestType, props.pageSize, props.isServerSide]);
+  }, [(_props$axiosRequest5 = props.axiosRequest) === null || _props$axiosRequest5 === void 0 ? void 0 : _props$axiosRequest5.requestData, (_props$axiosRequest6 = props.axiosRequest) === null || _props$axiosRequest6 === void 0 ? void 0 : _props$axiosRequest6.apiUrl, (_props$axiosRequest7 = props.axiosRequest) === null || _props$axiosRequest7 === void 0 ? void 0 : _props$axiosRequest7.environmentUrl, (_props$axiosRequest8 = props.axiosRequest) === null || _props$axiosRequest8 === void 0 ? void 0 : _props$axiosRequest8.requestQueryString, (_props$axiosRequest9 = props.axiosRequest) === null || _props$axiosRequest9 === void 0 ? void 0 : _props$axiosRequest9.requestType, props.pageSize, props.isServerSide]);
+  React.useEffect(function () {
+    if (props.axiosRequest) {
+      setData([]);
+      fetchData();
+    }
+  }, [(_props$axiosRequest0 = props.axiosRequest) === null || _props$axiosRequest0 === void 0 ? void 0 : _props$axiosRequest0.requestData, (_props$axiosRequest1 = props.axiosRequest) === null || _props$axiosRequest1 === void 0 ? void 0 : _props$axiosRequest1.requestQueryString, (_props$axiosRequest10 = props.axiosRequest) === null || _props$axiosRequest10 === void 0 ? void 0 : _props$axiosRequest10.apiUrl, (_props$axiosRequest11 = props.axiosRequest) === null || _props$axiosRequest11 === void 0 ? void 0 : _props$axiosRequest11.environmentUrl]);
   var getTotalCount = function getTotalCount(response, data) {
     if (data !== null && data !== void 0 && data.PageCount || data !== null && data !== void 0 && data.RowCount) {
       constants$3.totalPageCount = data.PageCount;
@@ -58089,6 +58088,273 @@ var OdsTransfer = function OdsTransfer(props) {
   }));
 };
 
+var constants$4 = {
+  totalPageCount: 1,
+  loadedPageCount: 1,
+  totalRecordCount: 0
+};
+var getRequestHeaders$1 = function getRequestHeaders(props) {
+  var _props$axiosRequest;
+  return new Headers({
+    "Content-Type": "application/json",
+    Authorization: "Bearer " + (((_props$axiosRequest = props.axiosRequest) === null || _props$axiosRequest === void 0 ? void 0 : _props$axiosRequest.token) || ""),
+    "Accept-Language": props.language || "EN"
+  });
+};
+var removeDuplicates = function removeDuplicates(items, keyExpr) {
+  var seen = new Set();
+  return items.filter(function (item) {
+    var key = item[keyExpr];
+    return !seen.has(key) && seen.add(key);
+  });
+};
+var initializeTargetItems = function initializeTargetItems(items, keyExpr) {
+  return items.map(function (item) {
+    return _extends({}, item, {
+      key: item[keyExpr] || item["Id"]
+    });
+  });
+};
+var OdsTransferV2 = function OdsTransferV2(_ref) {
+  var _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    language = _ref.language,
+    _ref$pagingEnable = _ref.pagingEnable,
+    pagingEnable = _ref$pagingEnable === void 0 ? true : _ref$pagingEnable,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 10 : _ref$pageSize,
+    isServerSide = _ref.isServerSide,
+    axiosRequest = _ref.axiosRequest,
+    columns = _ref.columns,
+    pageTitle = _ref.pageTitle,
+    keyExpr = _ref.keyExpr,
+    noDataText = _ref.noDataText,
+    defaultPageSize = _ref.defaultPageSize,
+    _ref$targetItems = _ref.targetItems,
+    initialTargetItems = _ref$targetItems === void 0 ? [] : _ref$targetItems,
+    noContentMainText = _ref.noContentMainText,
+    noContentSubText = _ref.noContentSubText,
+    onTargetChange = _ref.onTargetChange,
+    _ref$sourceTitle = _ref.sourceTitle,
+    sourceTitle = _ref$sourceTitle === void 0 ? "Available Items" : _ref$sourceTitle,
+    _ref$targetTitle = _ref.targetTitle,
+    targetTitle = _ref$targetTitle === void 0 ? "Selected Items" : _ref$targetTitle,
+    _ref$displayPageTitle = _ref.displayPageTitle,
+    displayPageTitle = _ref$displayPageTitle === void 0 ? false : _ref$displayPageTitle,
+    className = _ref.className,
+    rootClassName = _ref.rootClassName,
+    _ref$showSearch = _ref.showSearch,
+    showSearch = _ref$showSearch === void 0 ? false : _ref$showSearch,
+    render = _ref.render,
+    _ref$useCustomHeader = _ref.useCustomHeader,
+    useCustomHeader = _ref$useCustomHeader === void 0 ? false : _ref$useCustomHeader;
+  var _useState = React.useState([]),
+    data = _useState[0],
+    setData = _useState[1];
+  var _useState2 = React.useState(initialTargetItems.map(function (item) {
+      return item[keyExpr];
+    })),
+    targetKeys = _useState2[0],
+    setTargetKeys = _useState2[1];
+  var _useState3 = React.useState(initializeTargetItems(initialTargetItems, keyExpr)),
+    targetItems = _useState3[0],
+    setTargetItems = _useState3[1];
+  var _useState4 = React.useState([]),
+    transferDataSource = _useState4[0],
+    setTransferDataSource = _useState4[1];
+  var _useState5 = React.useState([]),
+    selectedKeys = _useState5[0],
+    setSelectedKeys = _useState5[1];
+  var gridRef = React.useRef(null);
+  var fetchData = React.useCallback(function () {
+    try {
+      var _axiosRequest$request;
+      if (!axiosRequest || !isServerSide) return Promise.resolve();
+      var isGet = axiosRequest.requestType.toUpperCase() === "GET";
+      var apiUrl = "" + axiosRequest.environmentUrl + axiosRequest.apiUrl;
+      if ((_axiosRequest$request = axiosRequest.requestData) !== null && _axiosRequest$request !== void 0 && _axiosRequest$request.PaginatedRequest) {
+        axiosRequest.requestData.PaginatedRequest.PageSize = pageSize;
+      }
+      if (axiosRequest.requestQueryString) {
+        axiosRequest.requestQueryString.maxResultCount = pageSize;
+        if (constants$4.loadedPageCount > 1 && constants$4.totalPageCount >= constants$4.loadedPageCount) {
+          axiosRequest.requestQueryString.skipCount = ((constants$4.loadedPageCount - 1) * pageSize).toString();
+        }
+        if (isGet) {
+          var query = queryString.stringify(axiosRequest.requestQueryString);
+          apiUrl = apiUrl + "?" + query;
+        }
+      }
+      var requestOptions = {
+        method: axiosRequest.requestType,
+        headers: getRequestHeaders$1({
+          language: language,
+          axiosRequest: axiosRequest
+        }),
+        body: isGet ? undefined : JSON.stringify(axiosRequest.requestData)
+      };
+      var _temp = _catch(function () {
+        return Promise.resolve(fetch(apiUrl, requestOptions)).then(function (response) {
+          return Promise.resolve(response.json()).then(function (newData) {
+            var dataArray = newData.Data || newData;
+            setData(function (prevData) {
+              return constants$4.loadedPageCount === 1 ? dataArray : [].concat(prevData, dataArray);
+            });
+            constants$4.totalPageCount = newData.PageCount || Math.ceil((newData.rowCount || dataArray.length) / pageSize);
+            constants$4.totalRecordCount = newData.RowCount || parseInt(response.headers.get("x-total-count") || dataArray.length, 10);
+          });
+        });
+      }, function (error) {
+        console.error("Error fetching data:", error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [axiosRequest, pageSize, language, isServerSide]);
+  React.useEffect(function () {
+    if (isServerSide && axiosRequest) {
+      setData([]);
+      fetchData();
+    }
+  }, [axiosRequest === null || axiosRequest === void 0 ? void 0 : axiosRequest.requestData, axiosRequest === null || axiosRequest === void 0 ? void 0 : axiosRequest.requestQueryString, axiosRequest === null || axiosRequest === void 0 ? void 0 : axiosRequest.apiUrl, axiosRequest === null || axiosRequest === void 0 ? void 0 : axiosRequest.environmentUrl, fetchData, isServerSide]);
+  React.useEffect(function () {
+    var sourceData = isServerSide ? data : dataSource;
+    var combinedData = [].concat(sourceData, targetItems);
+    var uniqueData = removeDuplicates(combinedData, keyExpr).map(function (item) {
+      return _extends({}, item, {
+        key: item[keyExpr]
+      });
+    });
+    setTransferDataSource(uniqueData);
+  }, [data, dataSource, targetItems, keyExpr, isServerSide]);
+  var handleChange = React.useCallback(function (newTargetKeys, direction, moveKeys) {
+    setTargetKeys(newTargetKeys);
+    var selectedItems = transferDataSource.filter(function (item) {
+      return newTargetKeys.includes(item[keyExpr]);
+    });
+    var updatedItems = removeDuplicates(direction === "left" ? targetItems.filter(function (item) {
+      return !moveKeys.includes(item[keyExpr]);
+    }).concat(selectedItems) : [].concat(targetItems, selectedItems), keyExpr);
+    setTargetItems(updatedItems);
+    onTargetChange === null || onTargetChange === void 0 ? void 0 : onTargetChange(updatedItems);
+  }, [transferDataSource, targetItems, keyExpr, onTargetChange]);
+  var handleSelectChange = React.useCallback(function (sourceSelectedKeys, targetSelectedKeys) {
+    setSelectedKeys([].concat(sourceSelectedKeys, targetSelectedKeys));
+  }, []);
+  var CustomHeader = function CustomHeader(_ref2) {
+    var direction = _ref2.direction;
+    return React__default.createElement("div", {
+      className: "transfer-custom-header",
+      style: {
+        padding: "8px 16px",
+        borderBottom: "1px solid #f0f0f0",
+        fontWeight: "bold"
+      }
+    }, direction === "left" ? sourceTitle : targetTitle);
+  };
+  return React__default.createElement("div", null, isServerSide && React__default.createElement("style", null, ".dx-pager { display: none; }"), React__default.createElement(antd.Transfer, {
+    dataSource: transferDataSource,
+    targetKeys: targetKeys,
+    selectedKeys: selectedKeys,
+    onSelectChange: handleSelectChange,
+    onChange: handleChange,
+    showSelectAll: false,
+    titles: [sourceTitle, targetTitle],
+    render: render,
+    className: className,
+    rootClassName: rootClassName,
+    showSearch: showSearch
+  }, function (_ref3) {
+    var direction = _ref3.direction,
+      filteredItems = _ref3.filteredItems,
+      onItemSelectAll = _ref3.onItemSelectAll;
+    var isLeftEmpty = direction === "left" && filteredItems.length === 0;
+    var isRightEmpty = direction === "right" && targetKeys.length === 0;
+    var combinedDataSource = direction === "right" ? removeDuplicates([].concat(filteredItems, targetItems), keyExpr) : filteredItems;
+    return React__default.createElement("div", {
+      className: "customize-wrapper-content",
+      style: {
+        height: "100%",
+        overflow: "auto"
+      }
+    }, useCustomHeader && React__default.createElement(CustomHeader, {
+      direction: direction
+    }), isLeftEmpty || isRightEmpty ? React__default.createElement("div", {
+      className: "empty-list-items-container-wrapper",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        minHeight: "300px"
+      }
+    }, React__default.createElement(NoListItems, {
+      mainText: noContentMainText,
+      subText: noContentSubText
+    })) : React__default.createElement(DataGrid__default, {
+      dataSource: combinedDataSource,
+      keyExpr: keyExpr,
+      showBorders: true,
+      paging: {
+        enabled: pagingEnable,
+        pageSize: defaultPageSize
+      },
+      selection: {
+        mode: "multiple",
+        selectAllMode: "page",
+        showCheckBoxesMode: "always"
+      },
+      onSelectionChanged: function onSelectionChanged(_ref4) {
+        var selectedRowKeys = _ref4.selectedRowKeys,
+          currentDeselectedRowKeys = _ref4.currentDeselectedRowKeys;
+        onItemSelectAll(selectedRowKeys, true);
+        if (currentDeselectedRowKeys.length > 0) {
+          onItemSelectAll(currentDeselectedRowKeys, false);
+        }
+      },
+      columns: columns,
+      columnFixing: {
+        enabled: true
+      },
+      noDataText: noDataText,
+      ref: gridRef
+    }, React__default.createElement(DataGrid.FilterRow, {
+      visible: true
+    }), columns.map(function (column) {
+      return typeof column === "string" ? React__default.createElement(DataGrid.Column, {
+        key: column,
+        dataField: column,
+        caption: column,
+        headerFilter: {
+          visible: true
+        }
+      }) : React__default.createElement(DataGrid.Column, {
+        key: column.dataIndex,
+        dataField: column.dataField || column.dataIndex,
+        caption: column.caption || column.title,
+        dataType: column.dataType,
+        calculateSortValue: column.calculateSortValue,
+        headerFilter: {
+          visible: true
+        }
+      });
+    }), displayPageTitle && React__default.createElement(DataGrid.Toolbar, null, React__default.createElement(DataGrid.Item, {
+      location: "before",
+      cssClass: "toolbarTitleItem"
+    }, React__default.createElement(OdsTitle, {
+      level: 5,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        alignSelf: "stretch",
+        margin: 0
+      }
+    }, pageTitle)))));
+  }));
+};
+
 var _templateObject$E, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 var useStyles$c = antdStyle.createStyles(function (_ref, props) {
   var css = _ref.css,
@@ -58778,6 +59044,7 @@ exports.OdsTimelineTable = OdsTimelineTable;
 exports.OdsTimepicker = OdsTimepicker;
 exports.OdsTitle = OdsTitle;
 exports.OdsTransfer = OdsTransfer;
+exports.OdsTransferV2 = OdsTransferV2;
 exports.OdsTreeListMenu = OdsTreeListMenu;
 exports.OdsTreeSelect = OdsTreeSelect;
 exports.defaultAppearanceSettings = defaultAppearanceSettings;