Fixes select one or all transactions

jembi · Sep 4, 2024 · e574312 · e574312
1 parent 7e5505d
commit e574312
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/packages/transaction-log/src/components/common/app.main.component.tsx b/packages/transaction-log/src/components/common/app.main.component.tsx
@@ -42,6 +42,7 @@ const App: React.FC = () => {
   const [method, setMethod] = useState(NO_FILTER)
   const [clients, setClients] = useState([])
   const [loading, setLoading] = useState(false)
+  const [timestampFilter, setTimestampFilter] = useState<string | null>(null)
 
   const fetchTransactionLogs = useCallback(
     async (timestampFilter?: string) => {
@@ -167,6 +168,16 @@ const App: React.FC = () => {
     fetchAvailableChannels(), fetchAvailableClients()
   }, [fetchTransactionLogs, fetchAvailableChannels, fetchAvailableClients])
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (timestampFilter) {
+        fetchTransactionLogs(timestampFilter)
+      }
+    }, 5000)
+
+    return () => clearInterval(interval)
+  }, [timestampFilter, fetchTransactionLogs])
+
   const handleTabChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setTabValue(newValue)
   }

diff --git a/packages/transaction-log/src/components/common/transactionlog.datatable.component.tsx b/packages/transaction-log/src/components/common/transactionlog.datatable.component.tsx
@@ -30,12 +30,18 @@ const TransactionLogTable: React.FC<{
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [openInNewTab, setOpenInNewTab] = useState(false)
   const [autoUpdate, setAutoUpdate] = useState(false)
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set())
+  const [selectAll, setSelectAll] = useState(false)
 
   const handleSettingsApply = () => {
     setSettingsOpen(false)
   }
 
-  const handleRowClick = (transaction: {_id: any}) => {
+  const handleRowClick = (event: React.MouseEvent, transaction: {_id: any}) => {
+    const nonClickableColumnClass = 'non-clickable-column'
+    if ((event.target as HTMLElement).closest(`.${nonClickableColumnClass}`)) {
+      return
+    }
     const transactionDetailsUrl = `/#!/transactions/${transaction._id}`
 
     if (openInNewTab) {
@@ -45,6 +51,28 @@ const TransactionLogTable: React.FC<{
     }
   }
 
+  const handleRowSelect = (rowIndex: number) => {
+    setSelectedRows(prevSelectedRows => {
+      const newSelectedRows = new Set(prevSelectedRows)
+      if (newSelectedRows.has(rowIndex)) {
+        newSelectedRows.delete(rowIndex)
+      } else {
+        newSelectedRows.add(rowIndex)
+      }
+      return newSelectedRows
+    })
+  }
+
+  const handleSelectAll = () => {
+    if (selectAll) {
+      setSelectedRows(new Set())
+    } else {
+      const allRowIndexes = transactions.map((_, index) => index)
+      setSelectedRows(new Set(allRowIndexes))
+    }
+    setSelectAll(!selectAll)
+  }
+
   return (
     <Box sx={{padding: '16px'}}>
       <Box
@@ -70,7 +98,7 @@ const TransactionLogTable: React.FC<{
             <TableHead>
               <TableRow>
                 <TableCell padding="checkbox">
-                  <Checkbox />
+                  <Checkbox checked={selectAll} onChange={handleSelectAll} />
                 </TableCell>
                 <TableCell>Type</TableCell>
                 <TableCell>Method</TableCell>
@@ -90,10 +118,16 @@ const TransactionLogTable: React.FC<{
                   key={index}
                   hover
                   style={{cursor: 'pointer'}}
-                  onClick={() => handleRowClick(transaction)}
+                  onClick={event => handleRowClick(event, transaction)}
                 >
-                  <TableCell padding="checkbox">
-                    <Checkbox />
+                  <TableCell
+                    padding="checkbox"
+                    className="non-clickable-column"
+                  >
+                    <Checkbox
+                      checked={selectedRows.has(index)}
+                      onChange={() => handleRowSelect(index)}
+                    />
                   </TableCell>
                   <TableCell>
                     <IconButton

diff --git a/packages/transaction-log/src/declarations.d.ts b/packages/transaction-log/src/declarations.d.ts
@@ -40,3 +40,4 @@ declare module '*.svg' {
 
 declare module '@jembi/openhim-core-api'
 declare module '@jembi/openhim-theme'
+declare module '@jembi/legacy-app'