fix: pagination

Author: jacovinus

packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx

@@ -5,13 +5,12 @@
 import { useCallback, useEffect, useState } from "react";
 import { totalsMock } from "../api/mock";
 import { cx } from "@emotion/css";
-import { PROCESS_HEADERS } from "./consts";
+import { PROCESS_HEADERS, NUMBER_COLS } from "./consts";
 import { TotalRowStyle } from "./style";
 import useTheme from "@ui/theme/useTheme";
-import { TotalsRow } from "./TotalsRow";
 import { getMaintenance, useMaintenance } from "./useMaintenance";
 import "./array_helper.mjs";
-
+import TotalsTable from "./TotalsTable";
 export default function CardinalityTotals({ isLoading }) {
     const Maintainance = useMaintenance();
 
@@ -41,20 +40,12 @@ export default function CardinalityTotals({ isLoading }) {
 
     const sortByProperty = useCallback(
         (column: string) => {
-            const numberCols = [
-                "series_created",
-                "series_dropped",
-                "to_sec",
-                "from_sec",
-                "created_sec",
-            ];
-
             const columnName = column.split(" ").join("_").toLocaleLowerCase();
 
             setTotals(() => {
                 let items = [...Maintainance];
 
-                if (numberCols.includes(columnName)) {
+                if (NUMBER_COLS.includes(columnName)) {
                     items.sortColByNumber(columnName, sort);
                     return paginateTotals(items);
                 }
@@ -71,73 +62,24 @@ export default function CardinalityTotals({ isLoading }) {
     return (
         <div className={cx(TotalRowStyle(theme))}>
             <div className="total-rows-header">
-                Fingerprints in Maintainance mode
+                {totals?.length > 0
+                    ? "Fingerprints in Maintainance mode"
+                    : "No Fingerprints in Maintainance mode"}
             </div>
 
-            <div className="table">
-                <div className="table-header">
-                    {PROCESS_HEADERS?.map((header) => (
-                        <div
-                            key={header}
-                            onClick={() => sortByProperty(header)}
-                            className="cell"
-                        >
-                            {header}
-                        </div>
-                    ))}
-                </div>
-
-                <div className="table-body">
-                    {totals?.length ? (
-                        totals?.map((total, key) => (
-                            <TotalsRow
-                                key={key}
-                                isLoading={isLoading}
-                                headers={PROCESS_HEADERS}
-                                total={total}
-                            />
-                        ))
-                    ) : (
-                        <> no totals </>
-                    )}
-                </div>
-            </div>
-            <TotalsPagination
-                page={page}
-                totalPages={Maintainance.length / rowsPerPage}
-                setPage={setPage}
-                rowsPerPage={rowsPerPage}
-                setRowsPerPage={setRowsPerPage}
-            />
+            {totals?.length > 0 && (
+                <TotalsTable
+                    headers={PROCESS_HEADERS}
+                    sortByProperty={sortByProperty}
+                    isLoading={isLoading}
+                    totals={totals}
+                    page={page}
+                    setPage={setPage}
+                    rowsPerPage={rowsPerPage}
+                    setRowsPerPage={setRowsPerPage}
+                    Maintainance={Maintainance}
+                />
+            )}
         </div>
     );
 }
-
-export const TotalsPagination = ({
-    page,
-    totalPages,
-    setPage,
-    rowsPerPage,
-    setRowsPerPage,
-}) => {
-    return (
-        <div className="table-footer">
-            <button onClick={() => setPage(() => 0)}>First</button>
-            <button onClick={() => setPage(() => Math.max(0, page - 1))}>
-                Prev
-            </button>
-            <button
-                onClick={() =>
-                    setPage(() => Math.min(totalPages - 1, page + 1))
-                }
-            >
-                Next
-            </button>
-            <button onClick={() => setPage(totalPages - 1)}>Last</button>
-
-            <p>
-                Page {page + 1} of {totalPages}
-            </p>
-        </div>
-    );
-};

packages/main/plugins/Cardinality/TotalsPanel/Pagination.tsx

@@ -0,0 +1,60 @@
+import FastForwardOutlinedIcon from "@mui/icons-material/FastForwardOutlined";
+import FastRewindOutlinedIcon from "@mui/icons-material/FastRewindOutlined";
+import SkipNextOutlinedIcon from "@mui/icons-material/SkipNextOutlined";
+import SkipPreviousOutlinedIcon from "@mui/icons-material/SkipPreviousOutlined";
+
+const TotalsPagination = ({
+    page,
+    totalPages,
+    setPage,
+    rowsPerPage,
+    setRowsPerPage,
+}) => {
+    return (
+        <div className="table-footer">
+            <button
+                className={page === 0 ? "disabled" : ""}
+                onClick={() => setPage(() => 0)}
+            >
+                <FastRewindOutlinedIcon
+                    style={{ height: "12px", width: "12px" }}
+                />{" "}
+                First
+            </button>
+            <button
+                className={page === 0 ? "disabled" : ""}
+                onClick={() => setPage(() => Math.max(0, page - 1))}
+            >
+                <SkipPreviousOutlinedIcon
+                    style={{ height: "12px", width: "12px" }}
+                />{" "}
+                Prev
+            </button>
+            <p>
+                Page {page + 1} of {totalPages}
+            </p>
+            <button
+                className={page === totalPages - 1 ? "disabled" : ""}
+                onClick={() =>
+                    setPage(() => Math.min(totalPages - 1, page + 1))
+                }
+            >
+                Next{" "}
+                <SkipNextOutlinedIcon
+                    style={{ height: "12px", width: "12px" }}
+                />
+            </button>
+            <button
+                className={page === totalPages - 1 ? "disabled" : ""}
+                onClick={() => setPage(totalPages - 1)}
+            >
+                Last{" "}
+                <FastForwardOutlinedIcon
+                    style={{ height: "12px", width: "12px" }}
+                />
+            </button>
+        </div>
+    );
+};
+
+export default TotalsPagination;

packages/main/plugins/Cardinality/TotalsPanel/TotalsTable.tsx

@@ -0,0 +1,53 @@
+import { TotalsRow } from "./TotalsRow";
+import TotalsPagination from "./Pagination";
+
+const TotalsTable = ({
+    headers,
+    sortByProperty,
+    isLoading,
+    totals,
+    page,
+    setPage,
+    rowsPerPage,
+    setRowsPerPage,
+    Maintainance,
+}) => {
+    return (
+        <>
+            <div className="table">
+                <div className="table-header">
+                    {headers?.map((header) => (
+                        <div
+                            key={header}
+                            onClick={() => sortByProperty(header)}
+                            className="cell"
+                        >
+                            {header}
+                        </div>
+                    ))}
+                </div>
+
+                <div className="table-body">
+                    {totals?.map((total, key) => (
+                        <TotalsRow
+                            key={key}
+                            isLoading={isLoading}
+                            headers={headers}
+                            total={total}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <TotalsPagination
+                page={page}
+                totalPages={Maintainance.length / rowsPerPage}
+                setPage={setPage}
+                rowsPerPage={rowsPerPage}
+                setRowsPerPage={setRowsPerPage}
+            />
+        </>
+    );
+};
+
+export default TotalsTable;

packages/main/plugins/Cardinality/TotalsPanel/consts.tsx

@@ -10,3 +10,11 @@ export const PROCESS_HEADERS = [
     "Logs",
     "Undo",
 ];
+
+export const NUMBER_COLS = [
+    "series_created",
+    "series_dropped",
+    "to_sec",
+    "from_sec",
+    "created_sec",
+];

packages/main/plugins/Cardinality/TotalsPanel/style.tsx

@@ -64,22 +64,40 @@ export const TotalRowStyle = (theme: QrynTheme) => css`
         display: flex;
         font-size: 10px;
         text-transform: uppercase;
-        align-items:center;
+        align-items: center;
         gap: 4px;
-        padding: 4px 0px;
+        padding: 4px 12px;
         margin: 0px 4px;
+        margin-top: 12px;
         border-radius: 3px;
         background: ${theme.shadow};
-
+        p {
+            margin: 0px 12px;
+        }
+        .disabled {
+            pointer-events: none;
+            opacity: 0.5;
+        }
         button {
             padding: 4px 12px;
             color: white;
             border: none;
-            background: ${theme.primary};
+            font-size: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 0;
+            gap: 4px;
+            background: ${theme.shadow};
             border-radius: 3px;
-            border-color: ${theme.primaryAccent};
+            border: 1px solid ${theme.deep};
             cursor: pointer;
             outline: none;
+            letter-spacing: 1px;
+
+            :hover {
+                background: ${theme.deep};
+            }
         }
     }