ods-component-lib 1.18.234 → 1.18.235

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Functions.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 export declare const checkboxCellComponent: (props: any) => React.JSX.Element;
 export declare const statusCellComponent: (props: any) => React.JSX.Element;
-export declare const minimalHeaderCellComponent: (data: any, __el: any) => React.JSX.Element;
 export declare const mapCustomTask: (item: any) => any;
 export declare const setSelectedKeys: (datasource: any[], key?: string, selectedKeys?: number[] | string[]) => any[];

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Types.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { IColumnProps, IGanttOptions, IItemProps } from "devextreme-react/gantt";
+import { SortingProcessType, SortingType } from "../../../utils/customTypes";
+export declare type SortingMode = "single" | "multiple" | "none";
+export declare const enum EnumDateDirection {
+    prevMonth = "previousMonth",
+    nextMonth = "nextMonth"
+}
 export interface IMenuLinkItem {
     text: string;
     url: string;
@@ -24,6 +30,9 @@ export interface ICheckboxColumnChange {
     dataField: string;
 }
 export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOptions> {
+    /**
+     * Set reference object to access Gantt component props
+     */
     /**
      * Set columns for listview.
      */
@@ -52,6 +61,10 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
      * Set true if it' s visible.
      */
     showDateFilter?: boolean;
+    /**
+     * ClientSideSorting means Gantt's default sorting, but sorting have to be managed programmacitally if ServerSideSorting is chosen
+     */
+    sortingProcess?: SortingProcessType;
     /**
      * This is a selection event that fired when selection is changed.
      */
@@ -60,11 +73,16 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
      * This is a date range event that fired when date range is changed.
      */
     onDateRangeChange?(e: IDateRangeChange): void;
+    /**
+     * Triggered after sorting changed
+     */
+    onSortingChanged?(sortedColumns: ISortedColumn[], headerCellProps?: any): void;
 }
 export interface IOdsTimelineColumnProps extends IColumnProps {
     isMinimized?: boolean;
     isStatusColumn?: boolean;
     isCheckboxColumn?: boolean;
+    sortingFieldName?: string;
 }
 export interface IOdsTimelineStatusColumnProps extends IOdsTimelineColumnProps {
     onStatusColumnChange(e: IStatusColumnChange): void;
@@ -79,7 +97,9 @@ export interface IOdsTimelineDateFilter extends IItemProps {
     nextText?: string;
     onFilterRangeChange(e: IDateRangeChange): void;
 }
-export declare const enum DateDirection {
-    prevMonth = "previousMonth",
-    nextMonth = "nextMonth"
+export interface ISortedColumn {
+    sortingFieldName: string;
+    sortType: SortingType;
+    sortIndex: number;
+    sortingText: string;
 }

package/dist/index.css

@@ -230,7 +230,22 @@ tr._2CvVM._3Xrp3._19iuB._3udtX {
 ._3sOBn {
   vertical-align: middle !important;
 }
-
+
+._ww084:has(._2Ljgj) {
+  width: 100%;
+}
+
+._2Ljgj{
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+._2dILO {
+  flex: 1;
+  align-content: center;
+}
 ._3n8UJ {
   background-color: lightgreen;
 }

package/dist/index.js

@@ -38563,11 +38563,6 @@ var statusCellComponent = function statusCellComponent(props) {
     }
   });
 };
-var minimalHeaderCellComponent = function minimalHeaderCellComponent(data, __el) {
-  return React__default.createElement("div", {
-    className: "minimalHeaderCell"
-  }, data.data.column.caption);
-};
 var mapCustomTask = function mapCustomTask(item) {
   return _extends({
     isSelected: false
@@ -38723,8 +38718,12 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     multiSelectionEnabled = props.multiSelectionEnabled,
     toolbarVisible = props.toolbarVisible,
     showDateFilter = props.showDateFilter,
+    sorting = props.sorting,
+    sortingProcess = props.sortingProcess,
     onCustomSelectionChanged = props.onCustomSelectionChanged,
-    onDateRangeChange = props.onDateRangeChange;
+    onDateRangeChange = props.onDateRangeChange,
+    onSortingChanged = props.onSortingChanged;
+  var refGantt = React.useRef(null);
   var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
     startDate = _useState[0],
     setStartDate = _useState[1];
@@ -38734,6 +38733,13 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   var _useState3 = React.useState([]),
     timelineTasks = _useState3[0],
     setTimelineTasks = _useState3[1];
+  var _useState4 = React.useState([]),
+    sortedColumns = _useState4[0],
+    setSortedColumns = _useState4[1];
+  var originalSortingMode = sorting.mode === undefined || sorting.mode === "" ? "none" : sorting.mode;
+  var sortingMode = sortingProcess == "ServerSideSorting" ? "none" : originalSortingMode;
+  var showSortIndexes = sortingProcess == "ServerSideSorting" ? false : sorting.showSortIndexes;
+  var sortingActive = sortingProcess == "ServerSideSorting" && originalSortingMode != "none";
   React.useEffect(function () {
     setTimelineTasks(multiSelectionEnabled ? setSelectedKeys(customTasks.map(mapCustomTask), customTaskKey, customSelectedKeys) : customTasks);
   }, [customTasks]);
@@ -38742,6 +38748,17 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       return item.isSelected == true;
     });
   };
+  var customClearSorting = function customClearSorting() {
+    if (sortingProcess === "ServerSideSorting") {
+      setSortedColumns([]);
+    } else {
+      refGantt.current.instance.clearSorting();
+    }
+    onSortingChanged && onSortingChanged([], undefined);
+  };
+  var getSortedColumns = function getSortedColumns() {
+    return sortedColumns;
+  };
   var updateSelectionData = function updateSelectionData(keyValue, isSelected) {
     setTimelineTasks(function (prev) {
       return prev.map(function (item) {
@@ -38752,6 +38769,98 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
       });
     });
   };
+  var minimalHeaderCellComponent = function minimalHeaderCellComponent(data) {
+    return customHeaderCellComponent(data, true);
+  };
+  var customHeaderCellComponent = function customHeaderCellComponent(props, isMinimized) {
+    var _ref;
+    var _isMinimized = (_ref = isMinimized != null ? isMinimized : props.data.column.isMinimized) != null ? _ref : false;
+    if (sortingActive && props.data.column.allowSorting) {
+      return React__default.createElement("div", {
+        className: "sortingHeaderCell",
+        onClick: function onClick(e) {
+          if (Boolean(props.data.column.allowSorting)) {
+            if (e.shiftKey === true && e.ctrlKey === false) {
+              onSorting(props.data, 2);
+            } else if (e.shiftKey === false && e.ctrlKey === false) {
+              onSorting(props.data, 1);
+            } else if (e.shiftKey === false && e.ctrlKey === true) {
+              onRemoveSorting(props.data);
+            }
+          }
+        }
+      }, React__default.createElement("span", {
+        className: _isMinimized ? "headerCaption minimalHeaderCell" : "headerCaption"
+      }, props.data.column.caption), getSortIcon(props.data.column));
+    }
+    return React__default.createElement("div", {
+      className: _isMinimized ? "minimalHeaderCell" : ""
+    }, props.data.column.caption);
+  };
+  var getSortIcon = function getSortIcon(column) {
+    var sortingFieldName = getSortingFieldName(column);
+    var sortedColumn = sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn) {
+      return sortedColumn.sortType === "ASC" ? React__default.createElement(outline.UpArrow2Icon, null) : React__default.createElement(outline.DownArrow2Icon, null);
+    }
+    return undefined;
+  };
+  var getSortingFieldName = function getSortingFieldName(column) {
+    var _column$sortingFieldN;
+    return (_column$sortingFieldN = column.sortingFieldName) != null ? _column$sortingFieldN : column.dataField;
+  };
+  var onSorting = function onSorting(headerCellProps, sortingMode) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    var prevSortIndex = sortedColumn === null || sortedColumn === void 0 ? void 0 : sortedColumn.sortIndex;
+    var newSortedColumn = {
+      sortingFieldName: sortingFieldName,
+      sortType: "ASC",
+      sortIndex: sortingMode == 2 ? sortedColumn === undefined ? sortedColumns.length : sortedColumns.length - 1 : 0,
+      sortingText: sortingFieldName + " ASC"
+    };
+    if (sortedColumn) {
+      newSortedColumn.sortType = sortedColumn.sortType == "ASC" ? "DESC" : "ASC";
+      newSortedColumn.sortingText = sortingFieldName + " " + newSortedColumn.sortType;
+    }
+    var newSortedColumns = sortingMode == 2 ? [].concat(sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }), [newSortedColumn]) : [newSortedColumn];
+    if (sortingMode == 2 && sortedColumn !== undefined) {
+      newSortedColumns = newSortedColumns.map(function (item) {
+        if (item.sortingFieldName != sortingFieldName && item.sortIndex > prevSortIndex) {
+          item.sortIndex = item.sortIndex - 1;
+        }
+        return item;
+      });
+    }
+    setSortedColumns(newSortedColumns);
+    onSortingChanged && onSortingChanged(newSortedColumns, headerCellProps);
+  };
+  var onRemoveSorting = function onRemoveSorting(headerCellProps) {
+    var sortingFieldName = getSortingFieldName(headerCellProps.column);
+    var sortedColumn = sortedColumns.find(function (item) {
+      return item.sortingFieldName == sortingFieldName;
+    });
+    if (sortedColumn === undefined) {
+      return;
+    }
+    var prevSortIndex = sortedColumn.sortIndex;
+    var newSortedColumns = sortedColumns.filter(function (item) {
+      return item.sortingFieldName != sortingFieldName;
+    }).map(function (item) {
+      if (item.sortIndex > prevSortIndex) {
+        item.sortIndex = item.sortIndex - 1;
+      }
+      return item;
+    });
+    setSortedColumns(newSortedColumns);
+    onSortingChanged && onSortingChanged(newSortedColumns, headerCellProps);
+  };
   var onTimelineDateRangeChange = function onTimelineDateRangeChange(e) {
     setStartDate(e.startDate);
     setEndDate(e.endDate);
@@ -38767,7 +38876,9 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
   var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
   React.useImperativeHandle(ref, function () {
     return {
-      getSelectedRowsData: getSelectedRowsData
+      getSelectedRowsData: getSelectedRowsData,
+      getSortedColumns: getSortedColumns,
+      customClearSorting: customClearSorting
     };
   });
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(gantt.Gantt, Object.assign({
@@ -38778,7 +38889,13 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
     taskContentRender: function taskContentRender(params) {
       return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
     }
-  }, props), toolbarVisible ? React__default.createElement(gantt.Toolbar, null, showDateFilter ? React__default.createElement(gantt.Item, {
+  }, props, {
+    ref: refGantt,
+    sorting: {
+      mode: sortingMode,
+      showSortIndexes: false
+    }
+  }), toolbarVisible ? React__default.createElement(gantt.Toolbar, null, showDateFilter ? React__default.createElement(gantt.Item, {
     key: "OdsTimelineTable_ToolbarItem_DateFilter",
     component: function component(props) {
       return OdsTimelineDateFilter(_extends({}, props, {
@@ -38810,16 +38927,22 @@ var OdsTimelineTable = React.forwardRef(function (props, ref) {
         minWidth: 50,
         cssClass: "cellCenteredVertically",
         cellComponent: checkboxCellComponent,
-        headerCellComponent: minimalHeaderCellComponent
+        headerCellComponent: minimalHeaderCellComponent,
+        allowSorting: false
       }, columnProps));
     } else {
       return React__default.createElement(gantt.Column, Object.assign({
-        headerCellComponent: columnProps.isMinimized && minimalHeaderCellComponent
+        headerCellComponent: function headerCellComponent(props) {
+          return customHeaderCellComponent(props);
+        }
       }, columnProps));
     }
   }), React__default.createElement(gantt.Tasks, {
     dataSource: timelineTasks
-  }), children));
+  }), children, React__default.createElement(gantt.Sorting, {
+    mode: sortingMode,
+    showSortIndexes: showSortIndexes
+  })));
 });
 
 /**