Sort naturally between tasks of equal dates (#2296)

Author: jadmsaadaot

epictrack-web/src/components/workPlan/event/EventList.tsx

@@ -11,7 +11,7 @@ import {
 import Moment from "moment";
 import { WorkplanContext } from "../WorkPlanContext";
 import { MRT_RowSelectionState } from "material-react-table";
-import { dateUtils } from "../../../utils";
+import { dateUtils, naturalSortCollator } from "../../../utils";
 import { Box, Button, Divider, Grid, Tooltip, Typography } from "@mui/material";
 import { Palette } from "../../../styles/theme";
 import { IconProps } from "../../icons/type";
@@ -231,7 +231,7 @@ const EventList = () => {
                 (eventX.type === EVENT_TYPE.TASK &&
                   eventY.type === EVENT_TYPE.TASK)
               ) {
-                return eventX.id < eventY.id ? -1 : 1;
+                return naturalSortCollator.compare(eventX.name, eventY.name);
               }
               // MILESTONE should shows first, then TASK
               if (

epictrack-web/src/utils/index.ts

@@ -1,19 +1,22 @@
 import dateUtils from "./dateUtils";
 
+export const naturalSortCollator = new Intl.Collator("en-GB", {
+  numeric: true,
+  ignorePunctuation: true,
+  sensitivity: "base",
+});
 const sort = (collection: any[], sortField: string) => {
-  const collator = new Intl.Collator("en-GB", {
-    numeric: true,
-    ignorePunctuation: true,
-    sensitivity: "base",
-  });
   const keys = sortField.split(".");
   if (keys.length > 1) {
     return collection.sort(function (a, b) {
-      return collator.compare(a[keys[0]][keys[1]], b[keys[0]][keys[1]]);
+      return naturalSortCollator.compare(
+        a[keys[0]][keys[1]],
+        b[keys[0]][keys[1]]
+      );
     });
   } else {
     return collection.sort(function (a, b) {
-      return collator.compare(a[sortField], b[sortField]);
+      return naturalSortCollator.compare(a[sortField], b[sortField]);
     });
   }
 };