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

Merge branch 'feature/style-cleanups-20240725' into feature/CE-1555-ops-overview-fix-accordion

Browse Source
This commit is contained in:
Tim Chamberlain
2024-08-09 13:44:52 -05:00
parent 93f5bb688c e604f47231
commit 9f04d897a1
6 changed files with 158 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/qqq/components/horseshoe/NavBar.tsx
View File

@ -25,6 +25,7 @@ import Autocomplete from "@mui/material/Autocomplete";
import Icon from "@mui/material/Icon"; import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemIcon from "@mui/material/ListItemIcon";
import {Theme} from "@mui/material/styles";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Toolbar from "@mui/material/Toolbar"; import Toolbar from "@mui/material/Toolbar";
import React, {useContext, useEffect, useRef, useState} from "react"; import React, {useContext, useEffect, useRef, useState} from "react";
@ -225,6 +226,19 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]);
///////////////////////////////////////////////////////////////////////////////////////////////
// set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears //
///////////////////////////////////////////////////////////////////////////////////////////////
const navbarRowRight = (theme: Theme, {isMini}: any) =>
{
return {
[theme.breakpoints.down("md")]: {
display: "none",
},
...navbarRow(theme, isMini)
}
};
return ( return (
<AppBar <AppBar
position={absolute ? "absolute" : navbarType} position={absolute ? "absolute" : navbarType}
@ -241,7 +255,7 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
<QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} /> <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
</Box> </Box>
{isMini ? null : ( {isMini ? null : (
<Box sx={(theme) => navbarRow(theme, {isMini})}> <Box sx={(theme) => navbarRowRight(theme, {isMini})}>
<Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}> <Box mt={"-0.25rem"} pb={"0.75rem"} pr={2} mr={-2} sx={{"& *": {cursor: "pointer !important"}}}>
{renderHistory()} {renderHistory()}
</Box> </Box>

28
src/qqq/components/widgets/tables/DataTable.tsx
View File

@ -321,16 +321,18 @@ function DataTable({
innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"}; innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
} }
///////////////////////////////////////////////////////////////////////////////////
// note - at one point, we had the table's sx including: whiteSpace: "nowrap"... //
///////////////////////////////////////////////////////////////////////////////////
return <Box sx={boxStyle}><Box sx={innerBoxStyle}> return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
<Table {...getTableProps()}> <Table {...getTableProps()} component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: gridTemplateColumns}}>
{ {
includeHead && ( includeHead && (
<Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}> headerGroups.map((headerGroup: any, i: number) => (
{headerGroups.map((headerGroup: any, i: number) => ( headerGroup.headers.map((column: any) => (
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", alignItems: "flex-end", gridTemplateColumns: gridTemplateColumns}}>
{headerGroup.headers.map((column: any) => (
column.type !== "hidden" && ( column.type !== "hidden" && (
<DataTableHeadCell <DataTableHeadCell
sx={{position: "sticky", top: 0, background: "white", zIndex: 10, alignItems: "flex-end"}}
key={i++} key={i++}
{...column.getHeaderProps(isSorted && column.getSortByToggleProps())} {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
align={column.align ? column.align : "left"} align={column.align ? column.align : "left"}
@ -340,13 +342,10 @@ function DataTable({
{column.render("header")} {column.render("header")}
</DataTableHeadCell> </DataTableHeadCell>
) )
))} ))
</TableRow> ))
))}
</Box>
) )
} }
<TableBody {...getTableBodyProps()}>
{rows.map((row: any, key: any) => {rows.map((row: any, key: any) =>
{ {
prepareRow(row); prepareRow(row);
@ -384,11 +383,11 @@ function DataTable({
} }
return ( return (
<TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}> row.cells.map((cell: any) => (
{row.cells.map((cell: any) => (
cell.column.type !== "hidden" && ( cell.column.type !== "hidden" && (
<DataTableBodyCell <DataTableBodyCell
key={key} key={key}
sx={{verticalAlign: "top", background: background}}
noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded} noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
depth={row.depth} depth={row.depth}
align={cell.column.align ? cell.column.align : "left"} align={cell.column.align ? cell.column.align : "left"}
@ -446,12 +445,9 @@ function DataTable({
} }
</DataTableBodyCell> </DataTableBodyCell>
) )
))} ))
</TableRow>
); );
})} })}
</TableBody>
</Table> </Table>
</Box></Box>; </Box></Box>;
} }

26
src/qqq/components/widgets/tables/TableCard.tsx
View File

@ -93,41 +93,25 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
/> />
: noRowsFoundHTML ? : noRowsFoundHTML ?
<Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}> <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
<MDTypography <MDTypography variant="subtitle2" color="secondary" fontWeight="regular">
variant="subtitle2" {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"}
color="secondary"
fontWeight="regular"
>
{
noRowsFoundHTML ? (
parse(noRowsFoundHTML)
) : "No rows found"
}
</MDTypography> </MDTypography>
</Box> </Box>
: :
<TableContainer sx={{boxShadow: "none"}}> <TableContainer sx={{boxShadow: "none"}}>
<Table> <Table component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr"}}>
<Box component="thead">
<TableRow sx={{alignItems: "flex-end"}} key="header">
{Array(8).fill(0).map((_, i) => {Array(8).fill(0).map((_, i) =>
<DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center"> <DataTableHeadCell key={`head-${i}`} sorted={false} width="auto" align="center">
<Skeleton width="100%" /> <Skeleton width="100%" />
</DataTableHeadCell> </DataTableHeadCell>
)} )}
</TableRow>
</Box>
<TableBody>
{Array(5).fill(0).map((_, i) => {Array(5).fill(0).map((_, i) =>
<TableRow sx={{verticalAlign: "top"}} key={`row-${i}`}> Array(8).fill(0).map((_, j) =>
{Array(8).fill(0).map((_, j) =>
<DataTableBodyCell key={`cell-${i}-${j}`} align="center"> <DataTableBodyCell key={`cell-${i}-${j}`} align="center">
<DefaultCell isFooter={false}><Skeleton /></DefaultCell> <DefaultCell isFooter={false}><Skeleton /></DefaultCell>
</DataTableBodyCell> </DataTableBodyCell>
)
)} )}
</TableRow>
)}
</TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
} }

10
src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
View File

@ -19,7 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import Box from "@mui/material/Box"; import {Box} from "@mui/material";
import {Theme} from "@mui/material/styles"; import {Theme} from "@mui/material/styles";
import colors from "qqq/assets/theme/base/colors"; import colors from "qqq/assets/theme/base/colors";
import {ReactNode} from "react"; import {ReactNode} from "react";
@ -30,13 +30,14 @@ interface Props
children: ReactNode; children: ReactNode;
noBorder?: boolean; noBorder?: boolean;
align?: "left" | "right" | "center"; align?: "left" | "right" | "center";
sx?: any;
} }
function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element
{ {
return ( return (
<Box <Box
component="td" component="div"
textAlign={align} textAlign={align}
py={1.5} py={1.5}
px={1.5} px={1.5}
@ -54,7 +55,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
}, },
"&:last-child": { "&:last-child": {
paddingRight: "1rem" paddingRight: "1rem"
} }, ...sx
})} })}
> >
<Box <Box
@ -72,6 +73,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
DataTableBodyCell.defaultProps = { DataTableBodyCell.defaultProps = {
noBorder: false, noBorder: false,
align: "left", align: "left",
sx: {}
}; };
export default DataTableBodyCell; export default DataTableBodyCell;

10
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -44,18 +44,14 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
return ( return (
<Box <Box
component="th" component="div"
width={width} width={width}
py={1.5} py={1.5}
px={1.5} px={1.5}
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({ sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
"&:nth-of-type(1)": { position: "sticky", top: 0, background: "white",
paddingLeft: "1rem" zIndex: 1 // so if body rows scroll behind it, they don't show through
},
"&:last-child": {
paddingRight: "1rem"
},
})} })}
> >
<Box <Box

6
src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java
View File

@ -56,8 +56,8 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
"label": "Sample Table Widget", "label": "Sample Table Widget",
"footerHTML": "<span class='material-icons-round notranslate MuiIcon-root MuiIcon-fontSizeInherit' aria-hidden='true'><span class='dashboard-schedule-icon'>schedule</span></span>Updated at 2023-10-17 09:11:38 AM CDT", "footerHTML": "<span class='material-icons-round notranslate MuiIcon-root MuiIcon-fontSizeInherit' aria-hidden='true'><span class='dashboard-schedule-icon'>schedule</span></span>Updated at 2023-10-17 09:11:38 AM CDT",
"columns": [ "columns": [
{ "type": "html", "header": "Id", "accessor": "id", "width": "1%" }, { "type": "html", "header": "Id", "accessor": "id", "width": "30px" },
{ "type": "html", "header": "Name", "accessor": "name", "width": "99%" } { "type": "html", "header": "Name", "accessor": "name", "width": "1fr" }
], ],
"rows": [ "rows": [
{ "id": "1", "name": "<a href='/setup/person/1'>Homer S.</a>" }, { "id": "1", "name": "<a href='/setup/person/1'>Homer S.</a>" },
@ -83,7 +83,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
// assert that the table widget rendered its header and some contents // // assert that the table widget rendered its header and some contents //
//////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////
qSeleniumLib.waitForSelectorContaining("#SampleTableWidget h6", "Sample Table Widget"); qSeleniumLib.waitForSelectorContaining("#SampleTableWidget h6", "Sample Table Widget");
qSeleniumLib.waitForSelectorContaining("#SampleTableWidget table a", "Homer S."); qSeleniumLib.waitForSelectorContaining("#SampleTableWidget a", "Homer S.");
qSeleniumLib.waitForSelectorContaining("#SampleTableWidget div", "Updated at 2023-10-17 09:11:38 AM CDT"); qSeleniumLib.waitForSelectorContaining("#SampleTableWidget div", "Updated at 2023-10-17 09:11:38 AM CDT");
///////////////////////////// /////////////////////////////