Merge branch 'table_load_more' into dev_environment

src/common/ResponsiveTable.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
+import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
 import { useEffect, useState } from "react";
@@ -99,6 +99,7 @@ interface Props<T> {
   order?: string;
   setOrder?: React.Dispatch<React.SetStateAction<"asc" | "desc">>;
   endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
+  loadMore?: () => void
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -131,7 +132,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     orderBy,
     setOrderBy,
     order, 
-    setOrder
+    setOrder,
+    loadMore
   } = props
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
@@ -320,13 +322,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
   if (isMobile || mobileView) return (
     <Box>
-      
       <Box className={classes.mobileTitleBox}>
         {renderTitle()}
         {renderSubtitle()}
         {setSearchText && searchBar()}
       </Box>
-      
       {rows.map((row, index) => {
         return (
           <Card className={classNames(classes.card)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
@@ -375,6 +375,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
           </Box>
         )
       }
+      {(loadMore && rows.length < total) &&
+        <Box>
+          <Button 
+            onClick={loadMore}
+            color="primary"
+            sx={{width: "100%"}} 
+            variant="contained">
+              Load More
+          </Button>
+        </Box>
+      }
     </Box>
   )
 

src/pages/DeviceComponent.tsx

@@ -23,6 +23,7 @@ import {
 } from "hooks";
 import InteractionChip from "interactions/InteractionChip";
 import InteractionSettings from "interactions/InteractionSettings";
+import { cloneDeep } from "lodash";
 // import MaterialTable from "material-table";
 import { Component, Device, deviceScope, Group, Interaction } from "models";
 import { convertedUnitMeasurement, MeasurementsFor, UnitMeasurement } from "models/UnitMeasurement";
@@ -450,7 +451,6 @@ export default function DeviceComponent() {
       // });
     })
     .catch((err: any) => {
-      
       // resolve({
       //   data: [],
       //   page: 0,
@@ -613,6 +613,32 @@ export default function DeviceComponent() {
           pageSize={pageSize}
           setPage={setPage}
           handleRowsPerPageChange={handleRowsPerPageChange}
+          loadMore={() => {
+            let currentRows = cloneDeep(rows)
+            let newOffset = rows.length
+            componentAPI.listUnitMeasurements(      
+              deviceID,
+              componentID,
+              startDate,
+              endDate,
+              pageSize,
+              newOffset,
+              order,
+              undefined,
+              getContextKeys(),
+              getContextTypes(),
+              showErrors,
+              as)
+              .then(resp => {
+                  let newRows = UnitMeasurement.convertMeasurements(
+                  resp.data.measurements.map(um => UnitMeasurement.any(um, user))
+                )
+                setRows(currentRows.concat(newRows))
+              }).catch(err => {
+                
+              })
+            
+          }}
         />
       </Grid>
     );

src/pages/Devices.tsx

@@ -26,6 +26,7 @@ import StatusPlenum from "common/StatusPlenum";
 import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
+import { cloneDeep } from "lodash";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -751,6 +752,41 @@ export default function Devices() {
         orderBy={orderBy}
         setOrderBy={setOrderBy}
         endTitleElement={preferencesButton}
+        loadMore={()=>{
+          let currentRows = cloneDeep(devices)
+          deviceAPI.list(
+            limit, 
+            currentRows.length,
+            order, 
+            orderBy, 
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            getKeys(),
+            getTypes(),
+            fieldContains,
+            search,
+            as
+          ).then(resp => {
+            let newDevices: Device[] = []
+            resp.data.devices.forEach(device => {
+              if (device.status?.plenum?.temperature) setHasPlenums(true)
+              if (device.status?.sen5x?.temperature) setHasSen5x(true)
+              if (device.status?.o2) setHasO2(true)
+              if (device.status?.co) setHasCo(true)
+              if (device.status?.co2) setHasCo2(true)
+              if (device.status?.no2) setHasNo2(true)
+              newDevices.push(Device.create(device))
+            })
+            setDevices(currentRows.concat(newDevices))
+          }).catch(err => {
+
+          })
+        }}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}

src/teams/TeamList.tsx

@@ -251,6 +251,47 @@ export default function TeamList() {
       isLoading={loading}
       renderGutter={isMobile ? renderGutter : undefined}
       hideKeys
+      loadMore={() => {
+        let current = cloneDeep(teams)
+        setLoading(true);
+        let newTeamPerms: Map<string | number, pond.Permission[]> = new Map();
+        let newTeamPrefs: Map<string | number, pond.TeamPreferences> = new Map();
+        let viewAs: string | undefined = as
+        if (as === team.key()) {
+          viewAs = undefined
+        }
+        teamAPI
+      .listTeams(limit, current.length, undefined, "name", undefined, undefined, " ", search)
+      .then(resp => {
+        setTotal(resp.data.total ? resp.data.total : 0);
+        let newTeams: Team[] = []
+        resp.data.teams.forEach(team => {
+          let u = viewAs ? viewAs : user.id();
+          let t = Team.create(team)
+          if (team.settings && u !== "") {
+            userAPI
+              .getUser(u, teamScope(team.settings.key))
+              .then(resp => {
+                newTeamPerms.set(t.key(), resp.permissions)
+                newTeamPrefs.set(t.key(), resp.preferences)
+                t.preferences = cloneDeep(resp.preferences)
+                t.permissions = cloneDeep(resp.permissions)
+              }).catch(() => {
+                snackbar.error("Error loading teams.")
+              })
+              .finally(() => {
+                setTeamPerms(newTeamPerms);
+                setTeamPrefs(newTeamPrefs);
+              });
+          }
+          newTeams.push(t)
+        });
+        setTeams(current.concat(newTeams));
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+      }}
     />
     <TeamSettings
       teamDialogOpen={teamDialogOpen}