added to transaction api and built the submit function

src/bin/BinTransactions.tsx

@@ -1,3 +1,4 @@
+import { CheckOutlined } from "@mui/icons-material";
 import { Autocomplete, Box, Button, Card, DialogActions, DialogContent, DialogTitle, TextField, Typography } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import ResponsiveTable from "common/ResponsiveTable";
@@ -9,7 +10,7 @@ import { Transaction } from "models/Transaction";
 import moment from "moment";
 import ObjectDescriber from "objects/ObjectDescriber";
 import { pond } from "protobuf-ts/pond";
-import { useBinAPI, useContractAPI, useFieldAPI, useGrainBagAPI, useTransactionAPI } from "providers";
+import { useBinAPI, useContractAPI, useFieldAPI, useGrainBagAPI, useSnackbar, useTransactionAPI } from "providers";
 import React from "react";
 import { useCallback, useEffect, useState } from "react";
 import TransactionDataDisplay from "transactions/transactionDataDisplay";
@@ -31,6 +32,7 @@ export default function BinTransactions(props: Props){
   const [possibleTransactionMatches, setPossibleTransactionMatches] = useState<Transaction[]>([])
   const [tablePage, setTablePage] = useState(0)
   const [tablePageSize, setTablePageSize] = useState(10)
+  const { openSnack } = useSnackbar();
   const [total, setTotal] = useState(0)
 
   const [binOptions, setBinOptions] = useState<Option[]>([])
@@ -106,8 +108,32 @@ export default function BinTransactions(props: Props){
   },[state, bin, loadTransactionsFor])
 
   const submit = () => {
-    //submit approval
-      //in the response if it succeeded remove (not reject but fully delete it) the matched transaction
+    let transaction = cloneDeep(selectedTransaction)
+    if(transaction){
+      if(selectedMatch){
+        if (transaction.transaction.fromKey === ""){
+          transaction.transaction.fromObject = selectedMatch.transaction.fromObject
+          transaction.transaction.fromKey = selectedMatch.transaction.fromKey
+        }
+        if (transaction.transaction.toKey === ""){
+          transaction.transaction.toObject = selectedMatch.transaction.toObject
+          transaction.transaction.toKey = selectedMatch.transaction.toKey
+        }
+      }
+      //submit approval
+      transactionAPI.submitApproval(transaction.transaction.key, true, transaction.transaction).then(resp => {
+        //in the response if it succeeded remove (not reject but fully delete it) the matched transaction
+        if(selectedMatch){
+          transactionAPI.removeTransaction(selectedMatch.transaction.key).then(resp => {
+            openSnack("Updated and matched transactions")
+          }).catch(err => {
+
+          })
+        }else{
+          openSnack("Updated Transaction")
+        }
+      })
+    }
   }
 
   const reject = () => {
@@ -145,9 +171,10 @@ export default function BinTransactions(props: Props){
         <DialogContent>
           <Box>
             <Typography>{getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT ? weight + " mT" : bushels + " bushels"} of {grainTransaction.subtype} {grainDisplay} moved</Typography>
-            <Typography>From</Typography>
+            <Typography margin={1} fontWeight={650}>From:</Typography>
             {/*Object type selection*/}
               <Autocomplete
+                sx={{marginY: 1}}
                 disabled={fromDisabled}
                 id="autoFromTypes"
                 value={fromType}
@@ -158,7 +185,7 @@ export default function BinTransactions(props: Props){
                 ]}
                 getOptionLabel={(option: pond.ObjectType) => ObjectDescriber(option).name}
                 fullWidth
-                onChange={(e, val) => {
+                onChange={(_, val) => {
                   setFromType(val ?? pond.ObjectType.OBJECT_TYPE_UNKNOWN)
                   //based on what it is changed to need to load data if it is not already loaded
                   if(val === pond.ObjectType.OBJECT_TYPE_BIN){
@@ -175,13 +202,14 @@ export default function BinTransactions(props: Props){
               />
               {/* object selection */}
               <Autocomplete
+                sx={{marginY: 1}}
                 disabled={fromDisabled}
                 id="autoFromObjects"
                 value={fromOption}
                 options={getOptions(fromType)}
                 getOptionLabel={(option: Option) => option.label}
                 fullWidth
-                onChange={(e, val) => {
+                onChange={(_, val) => {
                   setFromOption(val ?? undefined)
                   //once one is selected get the transactions for it that are requiring approval
                   transactionAPI.listTransactionsFor(0, 0, "asc", val?.value, pond.TransactionState.TRANSACTION_STATE_APPROVAL_REQUIRED).then(resp => {
@@ -197,8 +225,9 @@ export default function BinTransactions(props: Props){
                 }}
                 renderInput={params => <TextField {...params} label="From" />}
               />
-            <Typography>To</Typography>
+            <Typography margin={1} fontWeight={650}>To:</Typography>
             <Autocomplete
+                sx={{marginY: 1}}
                 disabled={toDisabled}
                 id="autoFromTypes"
                 value={toType}
@@ -209,7 +238,7 @@ export default function BinTransactions(props: Props){
                 ]}
                 getOptionLabel={(option: pond.ObjectType) => ObjectDescriber(option).name}
                 fullWidth
-                onChange={(e, val) => {
+                onChange={(_, val) => {
                   setToType(val ?? pond.ObjectType.OBJECT_TYPE_UNKNOWN)
                   //based on what it is changed to need to load data if it is not already loaded
                   if(val === pond.ObjectType.OBJECT_TYPE_BIN){
@@ -225,13 +254,14 @@ export default function BinTransactions(props: Props){
                 renderInput={params => <TextField {...params} label="Type" />}
               />
               <Autocomplete
+                sx={{marginY: 1}}
                 disabled={toDisabled}
                 id="autoFromObjects"
                 value={toOption}
                 options={getOptions(toType)}
                 getOptionLabel={(option: Option) => option.label}
                 fullWidth
-                onChange={(e, val) => {
+                onChange={(_, val) => {
                   //once one is selected get the transactions for it that are requiring approval
                   transactionAPI.listTransactionsFor(0, 0, "asc", val?.value, pond.TransactionState.TRANSACTION_STATE_APPROVAL_REQUIRED).then(resp => {
                     let matches: Transaction[] = []
@@ -248,12 +278,41 @@ export default function BinTransactions(props: Props){
                 renderInput={params => <TextField {...params} label="From" />}
               />
           </Box>
-          <Box>
+          <Box paddingTop={1}>
+            <Typography variant="h6">Possible matching Transactions</Typography>
+            <Typography>Pick a transaction below if you want to match them together</Typography>
             {possibleTransactionMatches.map(t => {
+              // get the display information for the transaction
+              const grainTransaction = t.transaction.transaction?.grainTransaction ?? pond.GrainTransaction.create()
+              const bushels = grainTransaction.bushels ?? 0
+              const weight = bushels / grainTransaction.bushelsPerTonne
+              let graintype = grainTransaction.grainType ?? pond.Grain.GRAIN_INVALID
+              const grainDisplay = graintype === pond.Grain.GRAIN_CUSTOM
+                ? grainTransaction.customGrain
+                : GrainDescriber(grainTransaction.grainType).name
               return (
-                <Typography>
-                  {t.transaction.timestamp}
-                </Typography>
+                <Card sx={{marginTop: 1, padding: 1}}>
+                  <Box display="flex" justifyContent="space-between" height={40}>
+                    <Typography sx={{fontWeight: 650, margin: "auto", marginLeft: 0}}>
+                      {moment(t.transaction.timestamp).fromNow()}
+                    </Typography>
+                    <Box>
+                      {selectedMatch?.transaction.key === t.transaction.key && <CheckOutlined htmlColor="green" />}
+                    </Box>
+                  </Box>
+                  <Box display="flex" justifyContent="space-between">
+                    <Typography sx={{margin: "auto", marginLeft: 0}}>{getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT ? weight + " mT" : bushels + " bushels"} of {grainTransaction.subtype} {grainDisplay} moved</Typography>
+                    <Button 
+                      variant="contained"
+                      disabled={selectedMatch?.transaction.key === t.transaction.key}
+                      color="primary"
+                      onClick={()=>{
+                        setselectedMatch(t)
+                      }}>
+                        Set Match
+                    </Button>
+                  </Box>
+                </Card>
               )
             })}
           </Box>