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",
"@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",

View File

@ -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,6 +39,7 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
return (
<MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
<ContextMenuProvider>
<LanguageContext>
<ModalsProvider
labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
@ -52,6 +54,7 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
{children}
</ModalsProvider>
</LanguageContext>
</ContextMenuProvider>
</MantineProvider>
);
}

View File

@ -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';

View File

@ -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<T = any> = {
modelType?: ModelType;
rowStyle?: (record: T, index: number) => any;
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 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<T = any>({
[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<T = any>({
}}
recordsPerPageOptions={PAGE_SIZES}
onRecordsPerPageChange={updatePageSize}
onRowContextMenu={handleRowContextMenu}
/>
</Box>
</Stack>

View File

@ -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"