From 77fb5a6bcff909c900fa2403742616dddcfc7937 Mon Sep 17 00:00:00 2001 From: Carter Date: Tue, 7 Jan 2025 14:02:39 -0600 Subject: [PATCH] added ability to prepend paths to smart breadcrumb --- src/common/ResponsiveTable.tsx | 17 +++++++++++++---- src/common/SmartBreadcrumb.tsx | 12 +++++++++++- src/pages/Devices.tsx | 34 ++++++++++++++++++++-------------- src/pages/Group.tsx | 7 +++---- src/pages/Groups.tsx | 4 ++-- 5 files changed, 49 insertions(+), 25 deletions(-) diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx index 11d87a9..4939e70 100644 --- a/src/common/ResponsiveTable.tsx +++ b/src/common/ResponsiveTable.tsx @@ -85,6 +85,7 @@ interface Props { renderMobile?: (row: T) => JSX.Element; hideKeys?: boolean; onRowClick?: (row: T) => void; + actions?: string | JSX.Element; } export default function ResponsiveTable(props: Props) { @@ -106,7 +107,8 @@ export default function ResponsiveTable(props: Props) { noDataMessage, renderMobile, hideKeys, - onRowClick + onRowClick, + actions } = props const classes = useStyles(); @@ -334,9 +336,16 @@ export default function ResponsiveTable(props: Props) { - {setSearchText && - {searchBar()} - } + + + {actions && actions} + + + {setSearchText && + {searchBar()} + } + + diff --git a/src/common/SmartBreadcrumb.tsx b/src/common/SmartBreadcrumb.tsx index b252502..dd6c283 100644 --- a/src/common/SmartBreadcrumb.tsx +++ b/src/common/SmartBreadcrumb.tsx @@ -58,6 +58,7 @@ interface Props { paddingRight?: number; paddingTop?: number; paddingBottom?: number; + prependPaths?: string[]; } interface LinkRouterProps extends LinkProps { @@ -68,6 +69,7 @@ interface LinkRouterProps extends LinkProps { const LinkRouter = (props: LinkRouterProps) => ; export default function SmartBreadcrumb(props: Props) { + const prependPaths = props.prependPaths; const theme = useTheme(); const location = useLocation(); const isMobile = useMobile(); @@ -75,6 +77,12 @@ export default function SmartBreadcrumb(props: Props) { const { loading, reload } = props; const groupID = (): string => { + let index = prependPaths?.indexOf("groups") + if (index !== undefined && index > -1) { + if (prependPaths && prependPaths[index+1]) { + return prependPaths[index+1] + } + } const regexMatch = or(location.pathname.match(/\/groups\/([^/]+)/), []) // console.log(or(regexMatch[1], "0").toString()) return or(regexMatch[1], "0").toString(); @@ -254,12 +262,14 @@ export default function SmartBreadcrumb(props: Props) { // console.log(breadcrumbMap) let links: ReactNode[] = []; - const pathnames = location.pathname.split("/").filter((x: any) => x); + let pathnames = location.pathname.split("/").filter((x: any) => x); const blacklist = breadcrumbBlacklist(); if (pathnames.length < 1) { return [linkComponent("/", "Dashboard", true)]; } + + if (prependPaths) pathnames.unshift(...prependPaths) pathnames.forEach((_value: any, index: any) => { diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index c734374..3e1780b 100644 --- a/src/pages/Devices.tsx +++ b/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([]); 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([]) + const [devices, setDevices] = useState([]) const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState(false); const [groupsLoading, setGroupsLoading] = useState(false) - // const [groups, setGroups] = useState([]); + const [groups, setGroups] = useState([]); 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[] => { + const columns = (): Column[] => { 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; // disabled?: boolean; @@ -395,8 +400,8 @@ export default function Devices() { } onClick={() => openGroupSettings(undefined, "add")} /> - - title={} + + title={} subtitle={subtitle()} rows={devices} columns={columns()} @@ -408,6 +413,7 @@ export default function Devices() { onRowClick={toDevice} setSearchText={setSearch} isLoading={devicesLoading} + actions={getGroup() && } /> { 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 = () => { diff --git a/src/pages/Groups.tsx b/src/pages/Groups.tsx index 1493e84..8b2ef90 100644 --- a/src/pages/Groups.tsx +++ b/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)