mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Add row context
This commit is contained in:
parent
313cb4758e
commit
5875aeb726
@ -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",
|
||||||
|
@ -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,20 +39,22 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
|
<MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
|
||||||
<LanguageContext>
|
<ContextMenuProvider>
|
||||||
<ModalsProvider
|
<LanguageContext>
|
||||||
labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
|
<ModalsProvider
|
||||||
modals={{
|
labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
|
||||||
qr: QrCodeModal,
|
modals={{
|
||||||
info: ServerInfoModal,
|
qr: QrCodeModal,
|
||||||
about: AboutInvenTreeModal,
|
info: ServerInfoModal,
|
||||||
license: LicenseModal
|
about: AboutInvenTreeModal,
|
||||||
}}
|
license: LicenseModal
|
||||||
>
|
}}
|
||||||
<Notifications />
|
>
|
||||||
{children}
|
<Notifications />
|
||||||
</ModalsProvider>
|
{children}
|
||||||
</LanguageContext>
|
</ModalsProvider>
|
||||||
|
</LanguageContext>
|
||||||
|
</ContextMenuProvider>
|
||||||
</MantineProvider>
|
</MantineProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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';
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user