fix: pagination and totals mock

Author: jacovinus

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

@@ -2,24 +2,45 @@
  * Cardinality totals
  * A view for the delete actions on the cardinality main view
  */
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { totalsMock } from "../api/mock";
 import { cx } from "@emotion/css";
 import { PROCESS_HEADERS } 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";
 
 export default function CardinalityTotals({ isLoading }) {
+    const Maintainance = useMaintenance();
+
     const theme = useTheme();
-    const [totals, setTotals] = useState(totalsMock);
+    const [totals, setTotals] = useState(Maintainance ?? totalsMock);
     const [sort, setSort] = useState("asc");
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+
+    function paginateTotals(data) {
+        const startIndex = page * rowsPerPage;
+        const endIndex = startIndex + rowsPerPage;
+        return data.slice(startIndex, endIndex);
+    }
+
+    useEffect(() => {
+        getMaintenance()
+            .then((res) => res.json())
+            .then((data) => {
+                setTotals(paginateTotals(data));
+            });
+    }, []);
+
+    useEffect(() => {
+        setTotals(paginateTotals(Maintainance));
+    }, [page]);
 
     const sortByProperty = useCallback(
         (column: string) => {
-
             const numberCols = [
                 "series_created",
                 "series_dropped",
@@ -30,12 +51,16 @@ export default function CardinalityTotals({ isLoading }) {
 
             const columnName = column.split(" ").join("_").toLocaleLowerCase();
 
-            setTotals((prev) => {
-                let prevCols = [...prev];
+            setTotals(() => {
+                let items = [...Maintainance];
+
                 if (numberCols.includes(columnName)) {
-                    return prevCols.sortColByNumber(columnName, sort);
+                    items.sortColByNumber(columnName, sort);
+                    return paginateTotals(items);
                 }
-                return prevCols.sortColByString(columnName, sort);
+
+                items.sortColByString(columnName, sort);
+                return paginateTotals(items);
             });
 
             setSort((prev) => (prev === "asc" ? "desc" : "asc"));
@@ -45,10 +70,10 @@ export default function CardinalityTotals({ isLoading }) {
 
     return (
         <div className={cx(TotalRowStyle(theme))}>
-            <div className="total-rows-header"
-            >
+            <div className="total-rows-header">
                 Fingerprints in Maintainance mode
             </div>
+
             <div className="table">
                 <div className="table-header">
                     {PROCESS_HEADERS?.map((header) => (
@@ -61,11 +86,12 @@ export default function CardinalityTotals({ isLoading }) {
                         </div>
                     ))}
                 </div>
-                <>
+
+                <div className="table-body">
                     {totals?.length ? (
                         totals?.map((total, key) => (
                             <TotalsRow
-                            key={key}
+                                key={key}
                                 isLoading={isLoading}
                                 headers={PROCESS_HEADERS}
                                 total={total}
@@ -74,8 +100,44 @@ export default function CardinalityTotals({ isLoading }) {
                     ) : (
                         <> no totals </>
                     )}
-                </>
+                </div>
             </div>
+            <TotalsPagination
+                page={page}
+                totalPages={Maintainance.length / rowsPerPage}
+                setPage={setPage}
+                rowsPerPage={rowsPerPage}
+                setRowsPerPage={setRowsPerPage}
+            />
         </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/style.tsx

@@ -13,6 +13,14 @@ export const TotalRowStyle = (theme: QrynTheme) => css`
         border-radius: 3px;
         background: ${theme.shadow};
     }
+    .table-container {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        width: 100%;
+        overflow-y: auto;
+        max-height: 600px;
+    }
     .table {
         display: table;
         width: 100%;
@@ -27,15 +35,20 @@ export const TotalRowStyle = (theme: QrynTheme) => css`
             letter-spacing: 1px;
             cursor: pointer;
             margin: 1px;
-           padding-top:20px;
-           padding-bottom:4px;
+            padding-top: 20px;
+            padding-bottom: 4px;
             &:hover {
                 background: ${theme.deep};
             }
         }
     }
-    .table-row {
+    .table-body {
         display: table-row-group;
+        max-height: 600px;
+        overflow-y: auto;
+    }
+    .table-row {
+        display: table-row;
         &:hover {
             background: ${theme.deep};
         }
@@ -47,14 +60,36 @@ export const TotalRowStyle = (theme: QrynTheme) => css`
         padding: 10px;
         max-width: 10%;
     }
+    .table-footer {
+        display: flex;
+        font-size: 10px;
+        text-transform: uppercase;
+        align-items:center;
+        gap: 4px;
+        padding: 4px 0px;
+        margin: 0px 4px;
+        border-radius: 3px;
+        background: ${theme.shadow};
+
+        button {
+            padding: 4px 12px;
+            color: white;
+            border: none;
+            background: ${theme.primary};
+            border-radius: 3px;
+            border-color: ${theme.primaryAccent};
+            cursor: pointer;
+            outline: none;
+        }
+    }
 
     button {
         padding: 4px 12px;
         color: white;
         border: none;
-        background: theme.primary;
+        background: ${theme.primary};
         border-radius: 3px;
-        border-color: theme.primaryDark;
+        border-color: ${theme.primaryAccent};
         cursor: pointer;
         outline: none;
     }

packages/main/plugins/Cardinality/TotalsPanel/useMaintenance.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+// this is for test purposes
+export async function getMaintenance() {
+    return await fetch("http://localhost:8081/api/v1/maintenance")
+}
+
+
+export function useMaintenance () {
+
+    const [maintenance, setMaintenance] = useState([]);
+
+    useEffect(() => {
+        getMaintenance()
+            .then((res) => res.json())
+            .then((data) => {
+             
+                setMaintenance(data);
+            });
+    },[]);
+
+
+
+
+    return maintenance;
+}