Add sorting to device and gw table. (#579)

Co-authored-by: Franka Schmid <fra.schmid@rational-online.com>
Co-authored-by: Orne Brocaar <info@brocaar.com>

ui/src/components/DataTable.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useCallback } from "react";
 
-import { Table } from "antd";
+import { Table, TableProps } from "antd";
 import type { ColumnsType } from "antd/es/table";
+import type { SorterResult } from "antd/es/table/interface";
 
 import SessionStore from "../stores/SessionStore";
 
@@ -10,7 +11,13 @@ export type GetPageCallbackFunc = (totalCount: number, rows: object[]) => void;
 interface IProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   columns: ColumnsType<any>;
-  getPage: (limit: number, offset: number, callbackFunc: GetPageCallbackFunc) => void;
+  getPage: (
+    limit: number,
+    offset: number,
+    orderBy: string | void,
+    orderByDesc: boolean | void,
+    callbackFunc: GetPageCallbackFunc,
+  ) => void;
   onRowsSelectChange?: (ids: string[]) => void;
   rowKey: string;
   refreshKey?: unknown;
@@ -21,33 +28,24 @@ function DataTable(props: IProps) {
   const [totalCount, setTotalCount] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(SessionStore.getRowsPerPage());
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [orderBy, setOrderBy] = useState<string>("");
+  const [orderByDesc, setOrderByDesc] = useState<boolean>(false);
   const [rows, setRows] = useState<object[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
-  const onChangePage = useCallback(
-    (page: number, pz?: number | void) => {
+  const loadPage = useCallback(
+    (page: number, pz: number, orderBy?: string | void, orderByDesc?: boolean | void) => {
       setLoading(true);
 
-      if (!pz) {
-        pz = pageSize;
-      }
-
-      props.getPage(pz, (page - 1) * pz, (totalCount: number, rows: object[]) => {
-        setCurrentPage(page);
+      props.getPage(pz, (page - 1) * pz, orderBy, orderByDesc, (totalCount: number, rows: object[]) => {
         setTotalCount(totalCount);
         setRows(rows);
-        setPageSize(pz || 0);
         setLoading(false);
       });
     },
     [props, pageSize],
   );
 
-  const onShowSizeChange = (page: number, pageSize: number) => {
-    onChangePage(page, pageSize);
-    SessionStore.setRowsPerPage(pageSize);
-  };
-
   const onRowsSelectChange = (ids: React.Key[]) => {
     const idss = ids as string[];
     if (props.onRowsSelectChange) {
@@ -55,9 +53,49 @@ function DataTable(props: IProps) {
     }
   };
 
+  const onChange: TableProps<object>["onChange"] = (pagination, filters, sorter, extra) => {
+    let page = pagination.current;
+    if (!page) {
+      page = currentPage;
+    }
+
+    let pz = pagination.pageSize;
+    if (!pz) {
+      pz = pageSize;
+    }
+    SessionStore.setRowsPerPage(pz);
+
+    let firstSorter: SorterResult<object> | void = undefined;
+    if (Array.isArray(sorter)) {
+      if (sorter.length) {
+        firstSorter = sorter[0];
+      }
+    } else {
+      firstSorter = sorter;
+    }
+    let sort: string | void = undefined;
+    if (firstSorter) {
+      if (firstSorter.columnKey) {
+        sort = firstSorter.columnKey.toString();
+        if (firstSorter.order === "descend") {
+          setOrderByDesc(true);
+        } else {
+          setOrderByDesc(false);
+        }
+      }
+    }
+    if (!sort) {
+      sort = orderBy;
+    }
+
+    setCurrentPage(page);
+    setPageSize(pz || 0);
+    setOrderBy(sort);
+  };
+
   useEffect(() => {
-    onChangePage(currentPage, pageSize);
-  }, [props, currentPage, pageSize, onChangePage]);
+    loadPage(currentPage, pageSize, orderBy, orderByDesc);
+  }, [props, currentPage, pageSize, orderBy, orderByDesc, loadPage]);
 
   const { getPage, refreshKey, ...otherProps } = props;
   let loadingProps = undefined;
@@ -73,9 +111,7 @@ function DataTable(props: IProps) {
       current: currentPage,
       total: totalCount,
       pageSize: pageSize,
-      onChange: onChangePage,
       showSizeChanger: true,
-      onShowSizeChange: onShowSizeChange,
     };
   }
 
@@ -92,6 +128,7 @@ function DataTable(props: IProps) {
       dataSource={rows}
       pagination={pagination || false}
       rowSelection={rowSelection}
+      onChange={onChange}
       {...otherProps}
     />
   );