built out the functionality for the table

src/reports/MiPCA/GateReports.tsx

@@ -1,6 +1,11 @@
-import { Button, DialogActions, DialogContent, DialogTitle } from "@mui/material"
+import { Button, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material"
 import ResponsiveDialog from "common/ResponsiveDialog"
+import ResponsiveTable from "common/ResponsiveTable"
+import { GetDefaultDateRange } from "common/time/DateRange"
+import DateSelect from "common/time/DateSelect"
+import { cloneDeep } from "lodash"
 import { Gate } from "models/Gate"
+import { Moment } from "moment"
 import { pond } from "protobuf-ts/pond"
 import { useGateAPI } from "providers"
 import React, { useEffect, useState } from "react"
@@ -15,40 +20,123 @@ export default function GateReports(props: Props){
   const {gate, open, onClose} = props
   const gateAPI = useGateAPI()
   const [allGates, setAllGates] = useState<Gate[]>([])
+  const [displayedGates, setDisplayedGates] = useState<Gate[]>([])
+  const [pagesize, setPageSize] = useState(10)
+  const [page, setPage] = useState(0)
+  const [gateKeys, setGateKeys] = useState<string[]>([])
+  const [selectedTableRows,setSelectedTableRows] = useState<number[]>([])
   const [reportData, setReportData] = useState<pond.GateReportData[]>([])
+  const [loadingReportData, setLoadingReportData] = useState(false)
+  const defaultDateRange = GetDefaultDateRange();
+  const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
+  const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
 
   //load all of the gates for the user/team
   useEffect(()=>{
-    if(gate) return //if there was a gate passed in we dont need to load them
     if(open){
-      gateAPI.listGates(0, 0).then(resp => {
-        console.log(resp.data)
-      }).catch(err => {
+      if(gate) {
+        setGateKeys([gate])
+        return 
+      } else {
+        gateAPI.listGates(0, 0).then(resp => {
+          if(resp.data.gates){
+            setAllGates(resp.data.gates.map(g => Gate.create(g)))
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+      }
 
-      })
     }
   },[gate, open])
 
+  useEffect(()=>{
+    let start = page*pagesize
+    let offset = pagesize
+    setDisplayedGates(allGates.slice(start, start+offset))
+  },[allGates, page, pagesize])
+
   //selection table to select which gates to generate a report
   const gateTable = () => {
+    return (
+      <ResponsiveTable<Gate> 
+        columns={[
+          {
+            title: "Gate",
+            render: row => <Typography>{row.name}</Typography>
+          }
+        ]}
+        selectedRows={selectedTableRows}
+        rowSelect={(gate, tableIndex, checked) => {
+          let rowIndexes = cloneDeep(selectedTableRows)
+          let keys = cloneDeep(gateKeys)
+          if(checked){
+            if(!selectedTableRows.includes(tableIndex)) rowIndexes.push(tableIndex)
+            if(!gateKeys.includes(gate.key)) keys.push(gate.key)
+          }else{
+            if(rowIndexes.includes(tableIndex)) rowIndexes.splice(rowIndexes.indexOf(tableIndex), 1)
+            if(keys.includes(gate.key)) keys.splice(keys.indexOf(gate.key), 1)
+          }
+          setSelectedTableRows(rowIndexes)
+          setGateKeys(keys)
+        }}
+        rows={displayedGates} 
+        total={allGates.length} 
+        pageSize={pagesize} 
+        page={page} 
+        setPage={(page) => {
+          setPage(page)
+        }} 
+        handleRowsPerPageChange={(event) => {
+          setPageSize(event.target.value)
+        }} />
+    )
+  }
 
+  //two text field select boxes to select the start and end dates
+  const dateSelect = () => {
+    return (
+      <DateSelect
+        startDate={startDate}
+        endDate={endDate}
+        updateDateRange={(start, end) => {
+          setStartDate(start)
+          setEndDate(end)
+        }}
+        label="Build Reports For"
+      />
+    )
   }
 
   /**
    * new api call for gates that takes in an array of gate keys to build the report data for
-   * this call will return an array/map of the gate report data
+   * this call will return an array of the gate report data
    * in the return loop through the data building a pdf report for each one
    */
+  const generateReports = () => {
+    setLoadingReportData(true)
+    gateAPI.gateReportData(gateKeys, startDate.toISOString(), endDate.toISOString()).then(resp => {
+      //in the response use the data to build the pdf's
+    }).catch(err => {
+      
+    }).finally(()=>{
+      //in the finally set the loading to false
+      setLoadingReportData(false)
+    })
+  }
 
   return (
     <ResponsiveDialog open={open} onClose={onClose}>
       <DialogTitle>Gate Reports</DialogTitle>
       <DialogContent>
-
+        {dateSelect()}
+        {!gate && gateTable()}
       </DialogContent>
       <DialogActions>
         <Button>Close</Button>
-        <Button>Generate Reports</Button>
+        <Button onClick={()=>{
+          generateReports()
+        }}>Generate Reports</Button>
       </DialogActions>
     </ResponsiveDialog>
   )