Merge branch '212-sorting-time-column-doesnt-work-beta'

Author: RafaelGB

package.json

@@ -63,7 +63,7 @@
 		"react-dom": "18.2.0",
 		"react-csv": "2.2.2",
 		"react-popper": "2.3.0",
-		"@tanstack/react-table": "8.3.1",
+		"@tanstack/react-table": "8.3.3",
 		"@tanstack/match-sorter-utils": "8.1.1",
 		"react-select": "5.4.0",
 		"react-color": "2.19.3",

src/cdm/HeaderActionModel.ts

@@ -1,4 +1,3 @@
-import { SortedType } from "cdm/DatabaseModel";
 import { HeaderMenuProps } from "cdm/HeaderModel";
 
 export type HeaderActionResponse = {

src/components/DefaultHeader.tsx

@@ -54,6 +54,7 @@ export default function DefaultHeader(headerProps: DatabaseHeaderProps) {
   const created: boolean = false;
   /** Properties of header */
   const { column, header, table } = headerProps;
+
   /** Column values */
   const { id, dataType, options, position, label, config } =
     column.columnDef as TableColumn;

src/components/Table.tsx

@@ -5,7 +5,6 @@ import {
   getFilteredRowModel,
   getExpandedRowModel,
   ColumnDef,
-  ColumnResizeMode,
   ColumnOrderState,
   flexRender,
   Table,
@@ -29,7 +28,6 @@ import {
   ActionTypes,
   DatabaseCore,
   DatabaseLimits,
-  DnDConfiguration,
   MetadataColumns,
   ResizeConfiguration,
 } from "helpers/Constants";
@@ -48,12 +46,14 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import TableCell from "components/TableCell";
 import getInitialColumnSizing from "components/behavior/InitialColumnSizeRecord";
+import customSortingFn from "components/behavior/CustomSortingFn";
 
 const defaultColumn: Partial<ColumnDef<RowDataType>> = {
   minSize: DatabaseLimits.MIN_COLUMN_HEIGHT,
   maxSize: DatabaseLimits.MAX_COLUMN_HEIGHT,
   cell: DefaultCell,
   header: DefaultHeader,
+  sortingFn: customSortingFn,
 };
 
 /**
@@ -179,6 +179,7 @@ export function Table(tableData: TableDataType) {
       columnSizing: columnSizing,
       sorting: sorting,
     },
+
     onSortingChange: setSorting,
     onColumnSizingChange: (updater) => {
       let list: ColumnSizingState = null;

src/components/behavior/CustomSortingFn.ts

@@ -0,0 +1,34 @@
+import { Row } from "@tanstack/react-table";
+import { RowDataType } from "cdm/FolderModel";
+
+function customSortingFn(rowA: Row<RowDataType>, rowB: Row<RowDataType>, columnId: string): number {
+    const a = rowA.getValue(columnId);
+    const b = rowB.getValue(columnId);
+    if (areEqual(a, b)) {
+        return 0;
+    }
+    if (a == null) {
+        return -1;
+    }
+
+    if (b == null) {
+        return 1;
+    }
+
+    return fallback(a, b);
+}
+function areEqual(a: any, b: any): boolean {
+    // It is necessary?
+    if (a == null && b == null) {
+        return true;
+    }
+    return a === b;
+}
+
+function fallback(a: any, b: any): number {
+    return isNaN(a)
+        ? a.localeCompare(b)
+        : a - b;
+}
+
+export default customSortingFn;

src/components/portals/CalendarPortal.tsx

@@ -56,12 +56,13 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
       popperContainer={CalendarContainer}
       onBlur={() => setShowDatePicker(false)}
       autoFocus
+      placeholderText="Pick a date..."
     />
   ) : (
     <span className={`${c("calendar")}`} onClick={handleOnClick}>
       {DateTime.isDateTime(calendarState)
         ? (calendarState as unknown as DateTime).toFormat("yyyy-MM-dd")
-        : "Pick a date..."}
+        : null}
     </span>
   );
 };

src/components/portals/CalendarTimePortal.tsx

@@ -44,7 +44,7 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
     <span className="calendar-time">
       {DateTime.isDateTime(calendarTimeState)
         ? (calendarTimeState as DateTime).toFormat("yyyy-MM-dd h:mm a")
-        : "Invalid metadata date!"}
+        : null}
     </span>
   ) : (
     <div className="calendar-time">