Add row context

This commit is contained in:
Matthias Mair 2024-08-28 00:00:46 +02:00
parent 313cb4758e
commit 5875aeb726
No known key found for this signature in database
GPG Key ID: A593429DDA23B66A
5 changed files with 58 additions and 16 deletions

View File

@ -46,12 +46,13 @@
"@uiw/react-split": "^5.9.3", "@uiw/react-split": "^5.9.3",
"@vanilla-extract/css": "^1.15.5", "@vanilla-extract/css": "^1.15.5",
"axios": "^1.7.5", "axios": "^1.7.5",
"clsx": "^2.1.0", "clsx": "^2.1.1",
"codemirror": ">=6.0.0", "codemirror": ">=6.0.0",
"dayjs": "^1.11.13", "dayjs": "^1.11.13",
"embla-carousel-react": "^8.2.0", "embla-carousel-react": "^8.2.0",
"fuse.js": "^7.0.0", "fuse.js": "^7.0.0",
"html5-qrcode": "^2.3.8", "html5-qrcode": "^2.3.8",
"mantine-contextmenu": "^7.11.3",
"mantine-datatable": "^7.11.3", "mantine-datatable": "^7.11.3",
"qrcode": "^1.5.4", "qrcode": "^1.5.4",
"react": "^18.3.1", "react": "^18.3.1",

View File

@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
import { MantineProvider, createTheme } from '@mantine/core'; import { MantineProvider, createTheme } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals'; import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications'; import { Notifications } from '@mantine/notifications';
import { ContextMenuProvider } from 'mantine-contextmenu';
import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal'; import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal';
import { LicenseModal } from '../components/modals/LicenseModal'; import { LicenseModal } from '../components/modals/LicenseModal';
@ -38,6 +39,7 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
return ( return (
<MantineProvider theme={myTheme} colorSchemeManager={colorSchema}> <MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
<ContextMenuProvider>
<LanguageContext> <LanguageContext>
<ModalsProvider <ModalsProvider
labels={{ confirm: t`Submit`, cancel: t`Cancel` }} labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
@ -52,6 +54,7 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
{children} {children}
</ModalsProvider> </ModalsProvider>
</LanguageContext> </LanguageContext>
</ContextMenuProvider>
</MantineProvider> </MantineProvider>
); );
} }

View File

@ -5,6 +5,7 @@ import '@mantine/dates/styles.css';
import '@mantine/notifications/styles.css'; import '@mantine/notifications/styles.css';
import '@mantine/spotlight/styles.css'; import '@mantine/spotlight/styles.css';
import * as Sentry from '@sentry/react'; import * as Sentry from '@sentry/react';
import 'mantine-contextmenu/styles.layer.css';
import 'mantine-datatable/styles.css'; import 'mantine-datatable/styles.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';

View File

@ -12,11 +12,18 @@ import {
} from '@mantine/core'; } from '@mantine/core';
import { import {
IconBarcode, IconBarcode,
IconEdit,
IconEye,
IconFilter, IconFilter,
IconRefresh, IconRefresh,
IconTrash IconTrash
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import {
ContextMenuContent,
ContextMenuItemOptions,
useContextMenu
} from 'mantine-contextmenu';
import { import {
DataTable, DataTable,
DataTableCellClickHandler, DataTableCellClickHandler,
@ -112,6 +119,7 @@ export type InvenTreeTableProps<T = any> = {
modelType?: ModelType; modelType?: ModelType;
rowStyle?: (record: T, index: number) => any; rowStyle?: (record: T, index: number) => any;
modelField?: string; modelField?: string;
onRowContextMenu?: (record: T, event: any) => void;
}; };
/** /**
@ -158,6 +166,7 @@ export function InvenTreeTable<T = any>({
const [fieldNames, setFieldNames] = useState<Record<string, string>>({}); const [fieldNames, setFieldNames] = useState<Record<string, string>>({});
const navigate = useNavigate(); const navigate = useNavigate();
const { showContextMenu } = useContextMenu();
// Construct table filters - note that we can introspect filter labels from column names // Construct table filters - note that we can introspect filter labels from column names
const filters: TableFilter[] = useMemo(() => { const filters: TableFilter[] = useMemo(() => {
@ -587,6 +596,28 @@ export function InvenTreeTable<T = any>({
[props.onRowClick, props.onCellClick] [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 // pagination refresth table if pageSize changes
function updatePageSize(newData: number) { function updatePageSize(newData: number) {
tableState.setPageSize(newData); tableState.setPageSize(newData);
@ -741,6 +772,7 @@ export function InvenTreeTable<T = any>({
}} }}
recordsPerPageOptions={PAGE_SIZES} recordsPerPageOptions={PAGE_SIZES}
onRecordsPerPageChange={updatePageSize} onRecordsPerPageChange={updatePageSize}
onRowContextMenu={handleRowContextMenu}
/> />
</Box> </Box>
</Stack> </Stack>

View File

@ -3260,7 +3260,7 @@ clsx@^1.1.1:
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== 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" version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@ -4533,6 +4533,11 @@ make-dir@^4.0.0:
dependencies: dependencies:
semver "^7.5.3" 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: mantine-datatable@^7.11.3:
version "7.11.3" version "7.11.3"
resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.11.3.tgz#e36a52db3b91420ab3c7fab75abf028c83b782aa" resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.11.3.tgz#e36a52db3b91420ab3c7fab75abf028c83b782aa"