added ability to prepend paths to smart breadcrumb

src/pages/Devices.tsx

@@ -13,9 +13,10 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { or } from "utils/types";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
-import { Group } from "models";
+import { Device, Group } from "models";
 import GroupSettings from "group/GroupSettings";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
+import GroupActions from "group/GroupActions";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -59,7 +60,6 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 export default function Devices() {
-  const [groups, setGroups] = useState<Group[]>([]);
   const isMobile = useMobile();
   const classes = useStyles();
   const navigate = useNavigate();
@@ -73,11 +73,11 @@ export default function Devices() {
   const [orderBy, ] = useState("name");
   const [search, setSearch] = useState("");
   const [total, setTotal] = useState(0);
-  const [devices, setDevices] = useState<pond.Device[]>([])
+  const [devices, setDevices] = useState<Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
 
   const [groupsLoading, setGroupsLoading] = useState(false)
-  // const [groups, setGroups] = useState<Group[]>([]);
+  const [groups, setGroups] = useState<Group[]>([]);
   const [groupLimit, ] = useState(10);
   const [groupPage, ] = useState(0);
   const [orderGroup, ] = useState<"asc" | "desc">("asc");
@@ -153,8 +153,7 @@ export default function Devices() {
       resp.data.groups?.forEach((group: pond.Group) => {
         newGroups.push(Group.create(group))
       })
-      updateGroups(newGroups)
-      // setTotalGroups(resp.data.total)
+      updateGroups(newGroups) 
     }).finally(() => {
       setGroupsLoading(false)
     })
@@ -177,18 +176,19 @@ export default function Devices() {
       getKeys(),
       getTypes()
     ).then(resp => {
-      setDevices(resp.data.devices)
+      let newDevices: Device[] = []
+      resp.data.devices.forEach(device => {
+        newDevices.push(Device.create(device))
+      })
+      setDevices(newDevices)
       setTotal(resp.data.total)
     }).finally(() => {
       setDevicesLoading(false)
     })
   }
 
-
-
   useEffect(() => {
     loadDevices()
-
   }, [limit, page, order, orderBy, search, tab])
 
   useEffect(() => {
@@ -205,7 +205,7 @@ export default function Devices() {
     return(`${basePath}/${appendage}`);
   };
 
-  const toDevice = (device: pond.Device) => {
+  const toDevice = (device: Device) => {
     navigate(appendToUrl(or(device.settings?.deviceId, "")), { state: {device: device} })
   };
 
@@ -214,7 +214,7 @@ export default function Devices() {
     if (newValue === "never") openGroupSettings(undefined, "add");
   };
 
-  const columns = (): Column<pond.Device>[] => {
+  const columns = (): Column<Device>[] => {
     return [
       {
         title: "State",
@@ -298,6 +298,11 @@ export default function Devices() {
     )
   }
 
+  const getGroup = () => {
+    let group = groups[parseInt(tab)-1]
+    return group
+  }
+
   // interface MyTabButtonProps {
     // onClick?: React.MouseEventHandler<HTMLButtonElement>;
     // disabled?: boolean;
@@ -395,8 +400,8 @@ export default function Devices() {
           <Tab wrapped value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
         </Tabs>
       </Box>
-      <ResponsiveTable<pond.Device>
-        title={<SmartBreadcrumb paddingBottom={1}/>}
+      <ResponsiveTable<Device>
+        title={<SmartBreadcrumb prependPaths={getGroup() && ["groups", getGroup().id().toString()]} groupName={getGroup() && getGroup().name()} paddingBottom={1}/>}
         subtitle={subtitle()}
         rows={devices}
         columns={columns()}
@@ -408,6 +413,7 @@ export default function Devices() {
         onRowClick={toDevice}
         setSearchText={setSearch}
         isLoading={devicesLoading}
+        actions={getGroup() && <GroupActions group={getGroup()} permissions={[]} devices={devices} refreshCallback={loadGroups}/>}
       />
       <ProvisionDevice
         isOpen={isProvisionDialogOpen}

src/pages/Group.tsx

@@ -1,4 +1,4 @@
-import { Box, Chip, Grid2, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, Grid2, Theme, Tooltip } from "@mui/material";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import { Device, Group } from "models"
 import { useEffect, useState } from "react"
@@ -14,7 +14,6 @@ import { appendToUrl } from "navigation/Router";
 import { getDeviceStateHelper } from "pbHelpers/DeviceState";
 import { makeStyles } from "@mui/styles";
 import { blue, green } from "@mui/material/colors";
-import { permissionToString } from "pbHelpers/Permission";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -75,8 +74,8 @@ export default function GroupPage() {
   const [limit, setLimit] = useState(0)
   const [total, setTotal] = useState(0)
   const [page, setPage] = useState(1)
-  const [order, setOrder] = useState<"asc" | "desc">("asc")
-  const [orderBy, setOrderBy] = useState("")
+  const [order, ] = useState<"asc" | "desc">("asc")
+  const [orderBy, ] = useState("")
   const [search, setSearch] = useState("")
 
   const loadGroup = () => {

src/pages/Groups.tsx

@@ -40,8 +40,8 @@ export default function GroupsPage() {
   const navigate = useNavigate()
   const [limit, setLimit] = useState(10)
   const [page, setPage] = useState(0)
-  const [order, setOrder] = useState<"asc" | "desc">("asc")
-  const [orderBy, setOrderBy] = useState("")
+  const [order, ] = useState<"asc" | "desc">("asc")
+  const [orderBy, ] = useState("")
   const [search, setSearch] = useState("")
   const [total, setTotal] = useState(0)
   const [loading, setLoading] = useState(false)