From 5875aeb726fe18e835ba001531eb49b8db1b7803 Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Wed, 28 Aug 2024 00:00:46 +0200 Subject: [PATCH 1/5] Add row context --- src/frontend/package.json | 3 +- src/frontend/src/contexts/ThemeContext.tsx | 31 +++++++++++---------- src/frontend/src/main.tsx | 1 + src/frontend/src/tables/InvenTreeTable.tsx | 32 ++++++++++++++++++++++ src/frontend/yarn.lock | 7 ++++- 5 files changed, 58 insertions(+), 16 deletions(-) diff --git a/src/frontend/package.json b/src/frontend/package.json index 2c4ea515cde5..1c499bcf1f5f 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -46,12 +46,13 @@ "@uiw/react-split": "^5.9.3", "@vanilla-extract/css": "^1.15.5", "axios": "^1.7.5", - "clsx": "^2.1.0", + "clsx": "^2.1.1", "codemirror": ">=6.0.0", "dayjs": "^1.11.13", "embla-carousel-react": "^8.2.0", "fuse.js": "^7.0.0", "html5-qrcode": "^2.3.8", + "mantine-contextmenu": "^7.11.3", "mantine-datatable": "^7.11.3", "qrcode": "^1.5.4", "react": "^18.3.1", diff --git a/src/frontend/src/contexts/ThemeContext.tsx b/src/frontend/src/contexts/ThemeContext.tsx index e5562c58fab0..0d734c13923e 100644 --- a/src/frontend/src/contexts/ThemeContext.tsx +++ b/src/frontend/src/contexts/ThemeContext.tsx @@ -2,6 +2,7 @@ import { t } from '@lingui/macro'; import { MantineProvider, createTheme } from '@mantine/core'; import { ModalsProvider } from '@mantine/modals'; import { Notifications } from '@mantine/notifications'; +import { ContextMenuProvider } from 'mantine-contextmenu'; import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal'; import { LicenseModal } from '../components/modals/LicenseModal'; @@ -38,20 +39,22 @@ export function ThemeContext({ children }: { children: JSX.Element }) { return ( - - - - {children} - - + + + + + {children} + + + ); } diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx index 3a3be69dc71a..bf22faedcd30 100644 --- a/src/frontend/src/main.tsx +++ b/src/frontend/src/main.tsx @@ -5,6 +5,7 @@ import '@mantine/dates/styles.css'; import '@mantine/notifications/styles.css'; import '@mantine/spotlight/styles.css'; import * as Sentry from '@sentry/react'; +import 'mantine-contextmenu/styles.layer.css'; import 'mantine-datatable/styles.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx index c5164e194648..f72496b4b7a5 100644 --- a/src/frontend/src/tables/InvenTreeTable.tsx +++ b/src/frontend/src/tables/InvenTreeTable.tsx @@ -12,11 +12,18 @@ import { } from '@mantine/core'; import { IconBarcode, + IconEdit, + IconEye, IconFilter, IconRefresh, IconTrash } from '@tabler/icons-react'; import { useQuery } from '@tanstack/react-query'; +import { + ContextMenuContent, + ContextMenuItemOptions, + useContextMenu +} from 'mantine-contextmenu'; import { DataTable, DataTableCellClickHandler, @@ -112,6 +119,7 @@ export type InvenTreeTableProps = { modelType?: ModelType; rowStyle?: (record: T, index: number) => any; modelField?: string; + onRowContextMenu?: (record: T, event: any) => void; }; /** @@ -158,6 +166,7 @@ export function InvenTreeTable({ const [fieldNames, setFieldNames] = useState>({}); const navigate = useNavigate(); + const { showContextMenu } = useContextMenu(); // Construct table filters - note that we can introspect filter labels from column names const filters: TableFilter[] = useMemo(() => { @@ -587,6 +596,28 @@ export function InvenTreeTable({ [props.onRowClick, props.onCellClick] ); + // Callback when a row is right-clicked + const handleRowContextMenu = ({ + record, + event + }: { + record: any; + event: any; + }) => { + if (props.onRowContextMenu) { + return props.onRowContextMenu(record, event); + } else if (props.rowActions) { + const rowActions = props.rowActions(record); + return showContextMenu( + rowActions.map((action) => ({ + key: action.title ?? '', + icon: action.icon, + onClick: action.onClick + })) + )(event); + } + }; + // pagination refresth table if pageSize changes function updatePageSize(newData: number) { tableState.setPageSize(newData); @@ -741,6 +772,7 @@ export function InvenTreeTable({ }} recordsPerPageOptions={PAGE_SIZES} onRecordsPerPageChange={updatePageSize} + onRowContextMenu={handleRowContextMenu} /> diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index 8e1fec119d17..b7a9ec321784 100644 --- a/src/frontend/yarn.lock +++ b/src/frontend/yarn.lock @@ -3260,7 +3260,7 @@ clsx@^1.1.1: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== -clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1: +clsx@^2.0.0, clsx@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== @@ -4533,6 +4533,11 @@ make-dir@^4.0.0: dependencies: semver "^7.5.3" +mantine-contextmenu@^7.11.3: + version "7.11.3" + resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.11.3.tgz#ce2243dd5069aa3acc6aae4fb8e169e90b3af5bf" + integrity sha512-E2YfK5AggpxBCAMRn6T/XDeq4fArJqNWmT78azrJSvB1ox/8v+oBznOxh4A2bgHJabp908M5puw+pnjGZ/AC5A== + mantine-datatable@^7.11.3: version "7.11.3" resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.11.3.tgz#e36a52db3b91420ab3c7fab75abf028c83b782aa" From 9053daddae4f519c2edbb6297c0b063c3359354f Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Thu, 14 Nov 2024 20:18:12 +0100 Subject: [PATCH 2/5] fix lockfile --- src/frontend/yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index 90656d264630..f3821f88ab33 100644 --- a/src/frontend/yarn.lock +++ b/src/frontend/yarn.lock @@ -3389,6 +3389,11 @@ make-dir@^4.0.0: dependencies: semver "^7.5.3" +mantine-contextmenu@^7.11.3: + version "7.12.2" + resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.12.2.tgz#60eb6b1aade5136737e894c1c2f3fa8dad22b1c0" + integrity sha512-HD/xrGTGkq51WIVOh97gG1C0Z+PgV6gBPzALrPmv14R4t8iBUEJEY1A9CUvnV/yNjxBas+AA+2flXMAc0wyBxw== + mantine-datatable@^7.12.4: version "7.12.4" resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.12.4.tgz#68e5b0ab4dc7e32b505139bf2b4d05fbb1922c0f" From 352ea82617d25f0c4ef7d8db0a62a82466f673b9 Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Thu, 14 Nov 2024 21:47:53 +0100 Subject: [PATCH 3/5] fix type --- src/frontend/src/tables/InvenTreeTable.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx index f31550460eeb..6dc79b1a24f5 100644 --- a/src/frontend/src/tables/InvenTreeTable.tsx +++ b/src/frontend/src/tables/InvenTreeTable.tsx @@ -1,7 +1,6 @@ import { t } from '@lingui/macro'; import {} from '@mantine/core'; import { Box, Stack } from '@mantine/core'; -import {} from '@tabler/icons-react'; import { useQuery } from '@tanstack/react-query'; import { useContextMenu } from 'mantine-contextmenu'; import { @@ -581,14 +580,18 @@ export function InvenTreeTable>({ if (props.onRowContextMenu) { return props.onRowContextMenu(record, event); } else if (props.rowActions) { - const rowActions = props.rowActions(record); - return showContextMenu( - rowActions.map((action) => ({ - key: action.title ?? '', - icon: action.icon, - onClick: action.onClick - })) - )(event); + const empty = () => {}; + const items = props.rowActions(record).map((action) => ({ + key: action.title ?? '', + title: action.title ?? '', + tooltip: action.tooltip, + color: action.color, + icon: action.icon, + onClick: action.onClick ?? empty, + hidden: action.hidden, + disabled: action.disabled + })); + return showContextMenu(items)(event); } }; From 0fd46bcad9e476a872bcc565a941b85b7495fa05 Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Thu, 14 Nov 2024 22:01:24 +0100 Subject: [PATCH 4/5] fix styling --- src/frontend/src/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx index b5c03459307a..b8377c396c43 100644 --- a/src/frontend/src/main.tsx +++ b/src/frontend/src/main.tsx @@ -5,7 +5,7 @@ import '@mantine/dates/styles.css'; import '@mantine/notifications/styles.css'; import '@mantine/spotlight/styles.css'; import * as Sentry from '@sentry/react'; -import 'mantine-contextmenu/styles.layer.css'; +import 'mantine-contextmenu/styles.css'; import 'mantine-datatable/styles.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; From 3708d24e031660394a89982f79f3e8d6657abd59 Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Thu, 14 Nov 2024 22:01:55 +0100 Subject: [PATCH 5/5] formatting fixes --- src/frontend/src/tables/InvenTreeTable.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx index 6dc79b1a24f5..7ca2aeca8883 100644 --- a/src/frontend/src/tables/InvenTreeTable.tsx +++ b/src/frontend/src/tables/InvenTreeTable.tsx @@ -1,5 +1,4 @@ import { t } from '@lingui/macro'; -import {} from '@mantine/core'; import { Box, Stack } from '@mantine/core'; import { useQuery } from '@tanstack/react-query'; import { useContextMenu } from 'mantine-contextmenu'; @@ -584,7 +583,6 @@ export function InvenTreeTable>({ const items = props.rowActions(record).map((action) => ({ key: action.title ?? '', title: action.title ?? '', - tooltip: action.tooltip, color: action.color, icon: action.icon, onClick: action.onClick ?? empty, @@ -693,8 +691,6 @@ export function InvenTreeTable>({ overflow: 'hidden' }) }} - recordsPerPageOptions={PAGE_SIZES} - onRecordsPerPageChange={updatePageSize} onRowContextMenu={handleRowContextMenu} {...optionalParams} />