Skip to content

Commit ed05661

Browse files
pull[bot]pull[bot]
authored
Merge pull request #192 from KelvinTegelaar/dev
[pull] dev from KelvinTegelaar:dev
2 parents d2c067b + a7d8e88 commit ed05661

File tree

6 files changed

+146
-123
lines changed

6 files changed

+146
-123
lines changed

‎src/components/CippComponents/CippCodeBlock.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ export const CippCodeBlock = (props) => {
5353
height={editorHeight}
5454
options={{
5555
wordWrap: true,
56-
56+
lineNumbers: showLineNumbers ? "on" : "off",
57+
minimap: { enabled: showLineNumbers},
5758
}}
5859
{...other}
5960
/>
@@ -66,11 +67,10 @@ export const CippCodeBlock = (props) => {
6667
showLineNumbers={showLineNumbers}
6768
startingLineNumber={startingLineNumber}
6869
wrapLongLines={wrapLongLines}
69-
7070
>
7171
{code}
7272
</SyntaxHighlighter>
7373
)}
7474
</CodeContainer>
7575
);
76-
};
76+
};

‎src/components/CippComponents/CippOffCanvas.jsx‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { Drawer, Box, Grid } from "@mui/material";
1+
import { Drawer, Box, Grid, IconButton } from "@mui/material";
22
import { CippPropertyListCard } from "../CippCards/CippPropertyListCard";
33
import { getCippTranslation } from "../../utils/get-cipp-translation";
44
import { getCippFormatting } from "../../utils/get-cipp-formatting";
5+
import { useMediaQuery } from "@mui/system";
6+
import CloseIcon from "@mui/icons-material/Close";
57

68
export const CippOffCanvas = (props) => {
79
const {
@@ -16,6 +18,7 @@ export const CippOffCanvas = (props) => {
1618
size = "sm",
1719
} = props;
1820

21+
const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
1922
const extendedInfo = extendedInfoFields.map((field) => {
2023
const value = field.split(".").reduce((acc, part) => acc && acc[part], extendedData);
2124
if (value === undefined || value === null) {
@@ -43,20 +46,24 @@ export const CippOffCanvas = (props) => {
4346
}
4447
});
4548

46-
var drawerWidth = 400;
47-
switch (size) {
48-
case "sm":
49-
drawerWidth = 400;
50-
break;
51-
case "md":
52-
drawerWidth = 600;
53-
break;
54-
case "lg":
55-
drawerWidth = 800;
56-
break;
57-
case "xl":
58-
drawerWidth = 1000;
59-
break;
49+
if (mdDown) {
50+
drawerWidth = "100%";
51+
} else {
52+
var drawerWidth = 400;
53+
switch (size) {
54+
case "sm":
55+
drawerWidth = 400;
56+
break;
57+
case "md":
58+
drawerWidth = 600;
59+
break;
60+
case "lg":
61+
drawerWidth = 800;
62+
break;
63+
case "xl":
64+
drawerWidth = 1000;
65+
break;
66+
}
6067
}
6168

6269
return (
@@ -72,6 +79,17 @@ export const CippOffCanvas = (props) => {
7279
open={visible}
7380
onClose={onClose}
7481
>
82+
<IconButton
83+
onClick={onClose}
84+
sx={{
85+
position: "absolute",
86+
top: 16,
87+
right: 8,
88+
zIndex: 1,
89+
}}
90+
>
91+
<CloseIcon />
92+
</IconButton>
7593
{/* Force vertical stacking in a column layout */}
7694
<Box
7795
sx={{ overflowY: "auto", maxHeight: "100%", display: "flex", flexDirection: "column" }}

‎src/components/CippTable/CIPPTableToptoolbar.js‎

Lines changed: 96 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DeveloperMode, SevereCold, Sync, Tune, ViewColumn } from "@mui/icons-material";
1+
import { DeveloperMode, SevereCold, Sync, Tune, ViewColumn, MoreVert } from "@mui/icons-material";
22
import {
33
Button,
44
Checkbox,
@@ -28,6 +28,7 @@ import { CippCodeBlock } from "../CippComponents/CippCodeBlock";
2828
import { ApiGetCall } from "../../api/ApiCall";
2929
import GraphExplorerPresets from "/src/data/GraphExplorerPresets.json";
3030
import CippGraphExplorerFilter from "./CippGraphExplorerFilter";
31+
import { useMediaQuery } from "@mui/material";
3132

3233
export const CIPPTableToptoolbar = ({
3334
api,
@@ -53,6 +54,7 @@ export const CIPPTableToptoolbar = ({
5354
const columnPopover = usePopover();
5455
const filterPopover = usePopover();
5556

57+
const mdDown = useMediaQuery((theme) => theme.breakpoints.down("md"));
5658
const settings = useSettings();
5759
const router = useRouter();
5860
const createDialog = useDialog();
@@ -64,6 +66,10 @@ export const CIPPTableToptoolbar = ({
6466
const pageName = router.pathname.split("/").slice(1).join("/");
6567
const currentTenant = useSettings()?.currentTenant;
6668

69+
const [actionMenuAnchor, setActionMenuAnchor] = useState(null);
70+
const handleActionMenuOpen = (event) => setActionMenuAnchor(event.currentTarget);
71+
const handleActionMenuClose = () => setActionMenuAnchor(null);
72+
6773
useEffect(() => {
6874
//if usedData changes, deselect all rows
6975
table.toggleAllRowsSelected(false);
@@ -330,105 +336,99 @@ export const CIPPTableToptoolbar = ({
330336
</Tooltip>
331337

332338
<MRT_GlobalFilterTextField table={table} />
333-
<Tooltip title="Preset Filters">
334-
<IconButton onClick={filterPopover.handleOpen} ref={filterPopover.anchorRef}>
335-
<SvgIcon>
336-
<Tune />
337-
</SvgIcon>
338-
</IconButton>
339-
</Tooltip>
340-
<Menu
341-
anchorEl={filterPopover.anchorRef.current}
342-
open={filterPopover.open}
343-
onClose={filterPopover.handleClose}
344-
MenuListProps={{ dense: true }}
345-
>
346-
<MenuItem onClick={() => setTableFilter("", "reset", "")}>
347-
<ListItemText primary="Reset all filters" />
348-
</MenuItem>
349-
{api?.url === "/api/ListGraphRequest" && (
350-
<MenuItem
351-
onClick={() => {
352-
filterPopover.handleClose();
353-
setFilterCanvasVisible(true);
354-
}}
355-
>
356-
<ListItemText primary="Edit filters" />
357-
</MenuItem>
358-
)}
359-
<Divider />
360-
{filterList?.map((filter) => (
361-
<MenuItem
362-
key={filter.id}
363-
onClick={() => {
364-
filterPopover.handleClose();
365-
setTableFilter(filter.value, filter.type, filter.filterName);
366-
}}
339+
{mdDown ? (
340+
<>
341+
<Tooltip title="Actions">
342+
<IconButton onClick={handleActionMenuOpen}>
343+
<MoreVert />
344+
</IconButton>
345+
</Tooltip>
346+
<Menu
347+
anchorEl={actionMenuAnchor}
348+
open={Boolean(actionMenuAnchor)}
349+
onClose={handleActionMenuClose}
367350
>
368-
<ListItemText primary={filter.filterName} />
369-
</MenuItem>
370-
))}
371-
</Menu>
372-
<MRT_ToggleFiltersButton table={table} />
373-
<Tooltip title="Toggle Column Visibility">
374-
<IconButton onClick={columnPopover.handleOpen} ref={columnPopover.anchorRef}>
375-
<ViewColumn />
376-
</IconButton>
377-
</Tooltip>
378-
<Menu
379-
anchorEl={columnPopover.anchorRef.current}
380-
open={columnPopover.open}
381-
onClose={columnPopover.handleClose}
382-
MenuListProps={{ dense: true }}
383-
>
384-
<MenuItem onClick={resetToPreferedVisibility}>
385-
<ListItemText primary="Reset to preferred columns" />
386-
</MenuItem>
387-
<MenuItem onClick={saveAsPreferedColumns}>
388-
<ListItemText primary="Save as preferred columns" />
389-
</MenuItem>
390-
<MenuItem onClick={resetToDefaultVisibility}>
391-
<ListItemText primary="Delete preferred columns" />
392-
</MenuItem>
393-
{table
394-
.getAllColumns()
395-
.filter((column) => !column.id.startsWith("mrt-"))
396-
.map((column) => (
397-
<MenuItem
398-
key={column.id}
399-
onClick={() =>
400-
setColumnVisibility({
401-
...columnVisibility,
402-
[column.id]: !column.getIsVisible(),
403-
})
404-
}
405-
>
406-
<Checkbox checked={column.getIsVisible()} />
407-
<ListItemText primary={getCippTranslation(column.id)} />
351+
<MenuItem onClick={filterPopover.handleOpen}>
352+
<SvgIcon>
353+
<Tune />
354+
</SvgIcon>
355+
<ListItemText primary="Preset Filters" />
408356
</MenuItem>
409-
))}
410-
</Menu>
411-
{exportEnabled && (
357+
<MenuItem onClick={columnPopover.handleOpen}>
358+
<SvgIcon>
359+
<ViewColumn />
360+
</SvgIcon>
361+
<ListItemText primary="Toggle Column Visibility" />
362+
</MenuItem>
363+
{exportEnabled && (
364+
<>
365+
<MenuItem>
366+
<PDFExportButton
367+
rows={table.getFilteredRowModel().rows}
368+
columns={usedColumns}
369+
reportName={title}
370+
columnVisibility={columnVisibility}
371+
sx={{ pl: 0 }}
372+
/>
373+
<ListItemText primary="Export PDF" />
374+
</MenuItem>
375+
<MenuItem>
376+
<CSVExportButton
377+
reportName={title}
378+
columnVisibility={columnVisibility}
379+
rows={table.getFilteredRowModel().rows}
380+
columns={usedColumns}
381+
sx={{ pl: 0 }}
382+
/>{" "}
383+
<ListItemText primary="Export CSV" />
384+
</MenuItem>
385+
</>
386+
)}
387+
<MenuItem onClick={() => setOffcanvasVisible(true)}>
388+
<SvgIcon>
389+
<DeveloperMode />
390+
</SvgIcon>
391+
<ListItemText primary="View API Response" />
392+
</MenuItem>
393+
</Menu>
394+
</>
395+
) : (
412396
<>
413-
<PDFExportButton
414-
rows={table.getFilteredRowModel().rows}
415-
columns={usedColumns}
416-
reportName={title}
417-
columnVisibility={columnVisibility}
418-
/>
419-
<CSVExportButton
420-
reportName={title}
421-
columnVisibility={columnVisibility}
422-
rows={table.getFilteredRowModel().rows}
423-
columns={usedColumns}
424-
/>
397+
<Tooltip title="Preset Filters">
398+
<IconButton onClick={filterPopover.handleOpen} ref={filterPopover.anchorRef}>
399+
<SvgIcon>
400+
<Tune />
401+
</SvgIcon>
402+
</IconButton>
403+
</Tooltip>
404+
<Tooltip title="Toggle Column Visibility">
405+
<IconButton onClick={columnPopover.handleOpen} ref={columnPopover.anchorRef}>
406+
<ViewColumn />
407+
</IconButton>
408+
</Tooltip>
409+
{exportEnabled && (
410+
<>
411+
<PDFExportButton
412+
rows={table.getFilteredRowModel().rows}
413+
columns={usedColumns}
414+
reportName={title}
415+
columnVisibility={columnVisibility}
416+
/>
417+
<CSVExportButton
418+
reportName={title}
419+
columnVisibility={columnVisibility}
420+
rows={table.getFilteredRowModel().rows}
421+
columns={usedColumns}
422+
/>
423+
</>
424+
)}
425+
<Tooltip title="View API Response">
426+
<IconButton onClick={() => setOffcanvasVisible(true)}>
427+
<DeveloperMode />
428+
</IconButton>
429+
</Tooltip>
425430
</>
426431
)}
427-
<Tooltip title="View API Response">
428-
<IconButton onClick={() => setOffcanvasVisible(true)}>
429-
<DeveloperMode />
430-
</IconButton>
431-
</Tooltip>
432432
{
433433
//add a little icon with how many rows are selected
434434
(table.getIsAllRowsSelected() || table.getIsSomeRowsSelected()) && (
@@ -451,6 +451,7 @@ export const CIPPTableToptoolbar = ({
451451
type="editor"
452452
code={JSON.stringify(usedData, null, 2)}
453453
editorHeight="1000px"
454+
showLineNumbers={!mdDown}
454455
/>
455456
</Stack>
456457
</CippOffCanvas>

‎src/components/csvExportButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const csvConfig = mkConfig({
99
});
1010

1111
export const CSVExportButton = (props) => {
12-
const { rows, columns, reportName, columnVisibility } = props;
12+
const { rows, columns, reportName, columnVisibility, ...other } = props;
1313

1414
const handleExportRows = (rows) => {
1515
const rowData = rows.map((row) => row.original);
@@ -37,7 +37,7 @@ export const CSVExportButton = (props) => {
3737
return (
3838
<Tooltip title="Export to CSV">
3939
<span>
40-
<IconButton disabled={rows.length === 0} onClick={() => handleExportRows(rows)}>
40+
<IconButton disabled={rows.length === 0} onClick={() => handleExportRows(rows)} {...other}>
4141
<BackupTableTwoTone />
4242
</IconButton>
4343
</span>

‎src/components/pdfExportButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import autoTable from "jspdf-autotable";
55
import { getCippFormatting } from "../utils/get-cipp-formatting";
66

77
export const PDFExportButton = (props) => {
8-
const { rows, columns, reportName, columnVisibility } = props;
8+
const { rows, columns, reportName, columnVisibility, ...other } = props;
99

1010
const handleExportRows = (rows) => {
1111
const unit = "pt";
@@ -41,7 +41,7 @@ export const PDFExportButton = (props) => {
4141
return (
4242
<Tooltip title="Export to PDF">
4343
<span>
44-
<IconButton disabled={rows.length === 0} onClick={() => handleExportRows(rows)}>
44+
<IconButton disabled={rows.length === 0} onClick={() => handleExportRows(rows)} {...other}>
4545
<PictureAsPdf />
4646
</IconButton>
4747
</span>

0 commit comments

Comments
 (0)