chore: work in progress

cncjs · Apr 8, 2024 · 59459e7 · 59459e7
1 parent ac8e678
commit 59459e7
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/src/app/components/BaseTable/BaseTable.jsx b/src/app/components/BaseTable/BaseTable.jsx
@@ -38,10 +38,15 @@ const getTextWidth = (text, font) => {
 
 const BaseTable = forwardRef((
   {
-    columns,
-    data,
     layout = 'flexbox', // One of: 'flexbox', 'table'
     variant = 'default', // One of: 'default', 'outline'
+
+    // table props
+    columns,
+    data,
+    rowSelection: rowSelectionProp,
+    onRowSelectionChange: onRowSelectionChangeProp,
+
     ...rest
   },
   ref,
@@ -56,8 +61,20 @@ const BaseTable = forwardRef((
     dark: 'rgba(255, 255, 255, 0.08)',
     light: 'rgba(0, 0, 0, 0.08)',
   }[colorMode];
+  const [rowSelection, setRowSelection] = useState(rowSelectionProp ?? {});
 
-  const [rowSelection, setRowSelection] = useState({});
+  useEffect(() => {
+    const isControlled = (rowSelectionProp !== undefined);
+    if (isControlled) {
+      setRowSelection(rowSelectionProp);
+    }
+  }, [rowSelectionProp]);
+
+  useEffect(() => {
+    if (typeof onRowSelectionChangeProp === 'function') {
+      onRowSelectionChangeProp(rowSelection);
+    }
+  }, [rowSelection, onRowSelectionChangeProp]);
 
   const table = useReactTable({
     data,
@@ -72,6 +89,10 @@ const BaseTable = forwardRef((
     // enableRowSelection: row => row.original.detections > 0, // or enable row selection conditionally per row
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
+    getRowId: (originalRow, index) => {
+      // Identify individual rows that are originating from any server-side operation
+      return originalRow.id;
+    },
   });
 
   const [tableWidth, setTableWidth] = useState(0);

diff --git a/src/app/pages/Administration/Commands/Commands.jsx b/src/app/pages/Administration/Commands/Commands.jsx
@@ -6,9 +6,12 @@ import {
   Icon,
   Tooltip,
 } from '@tonic-ui/react';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import BaseTable from 'app/components/BaseTable';
 import i18n from 'app/lib/i18n';
+//import { createFetchMachine } from 'app/machines';
+
+//const fetchMachine = createFetchMachine();
 
 const data = [
   { id: 1, enabled: true, title: 'G28', mtime: '2020-01-01 00:00:00', commands: 'xxx' },
@@ -20,6 +23,26 @@ const data = [
 ];
 
 const Commands = () => {
+  /*
+  const [state, setState] = useState({
+    api: {
+      err: false,
+      fetching: false,
+    },
+    pagination: {
+      page: 1,
+      pageLength: 10,
+      totalRecords: 0,
+    },
+    records: [],
+    modal: {
+      name: '',
+      params: {
+      },
+    },
+  });
+  */
+
   const columns = useMemo(() => ([
     {
       id: 'selection',
@@ -70,6 +93,11 @@ const Commands = () => {
     },
   ]), []);
 
+  const handleClickAdd = (event) => {
+  };
+  const handleClickRemove = (event) => {
+  };
+
   return (
     <Flex
       flexDirection="column"
@@ -89,10 +117,10 @@ const Commands = () => {
           columnGap="2x"
           rowGap="2x"
         >
-          <Button variant="primary">
+          <Button variant="primary" onClikc={handleClickAdd}>
             Add
           </Button>
-          <Button variant="secondary">
+          <Button variant="secondary" onClick={handleClickRemove}>
             Remove
           </Button>
         </Flex>
@@ -114,6 +142,9 @@ const Commands = () => {
         sx={{
           height: '100%',
         }}
+        onRowSelectionChange={(rowSelection) => {
+          console.log('### rowSelection:', rowSelection);
+        }}
       />
     </Flex>
   );