QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: added widgets to tables

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-23 15:51:59 -05:00
parent 01916286b0
commit 67e65de66b
8 changed files with 288 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/qqq/components/QRecordSidebar/index.tsx
View File

@ -30,20 +30,46 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props
{
tableSections: QTableSection[];
widgetNames?: string[];
light?: boolean;
}
function QRecordSidebar({tableSections, light}: Props): JSX.Element
interface SidebarEntry
{
iconName: string;
name: string;
label: string;
}
function QRecordSidebar({tableSections, widgetNames, light}: Props): JSX.Element
{
/////////////////////////////////////////////////////////
// insert widgets after identity (first) table section //
/////////////////////////////////////////////////////////
const sidebarEntries = [] as SidebarEntry[];
tableSections.forEach((section, index) =>
{
if (index === 1 && widgetNames)
{
widgetNames.forEach((name) =>
{
sidebarEntries.push({iconName: "troubleshoot", name: name, label: name});
});
}
sidebarEntries.push({iconName: section.iconName, name: section.name, label: section.label});
});
return (
<Card sx={{borderRadius: ({borders: {borderRadius}}) => borderRadius.lg, position: "sticky", top: "1%"}}>
<MDBox component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
{
tableSections ? tableSections.map((section: QTableSection, key: number) => (
<MDBox key={`section-${section.name}`} component="li" pt={key === 0 ? 0 : 1}>
sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (
<MDBox key={`section-${entry.name}`} component="li" pt={key === 0 ? 0 : 1}>
<MDTypography
component="a"
href={`#${section.name}`}
href={`#${entry.name}`}
variant="button"
fontWeight="regular"
sx={({
@ -64,9 +90,9 @@ function QRecordSidebar({tableSections, light}: Props): JSX.Element
})}
>
<MDBox mr={1.5} lineHeight={1} color="black">
<Icon fontSize="small">{section.iconName}</Icon>
<Icon fontSize="small">{entry.iconName}</Icon>
</MDBox>
{section.label}
{entry.label}
</MDTypography>
</MDBox>
)) : null