@inventreedb/ui 0.10.0 → 0.11.0

package/dist/types/Plugins.d.ts

@@ -9,6 +9,7 @@ import { ApiFormModalProps, BulkEditApiFormModalProps, StockOperationProps } fro
 import { UseModalReturn } from './Modals';
 import { RenderInstanceProps } from './Rendering';
 import { SettingsStateProps } from './Settings';
+import { InvenTreeTableRenderProps } from './Tables';
 import { UserStateProps } from './User';
 export interface PluginProps {
     name: string;
@@ -39,6 +40,9 @@ export type InvenTreeFormsContext = {
     edit: (props: ApiFormModalProps) => UseModalReturn;
     stockActions: StockAdjustmentFormsContext;
 };
+export type InvenTreeTablesContext<T extends Record<string, any>> = {
+    renderTable: (props: InvenTreeTableRenderProps<T>) => React.ReactNode;
+};
 export type ImporterDrawerContext = {
     open: (sessionId: number, options?: {
         onClose?: () => void;
@@ -53,20 +57,22 @@ export type ImporterDrawerContext = {
  *
  * @param version - The version of the running InvenTree software stack
  * @param api - The Axios API instance (see ../states/ApiState.tsx)
+ * @param queryClient - The Tanstack QueryClient instance (see ../states/QueryState.tsx)
  * @param user - The current user instance (see ../states/UserState.tsx)
  * @param userSettings - The current user settings (see ../states/SettingsState.tsx)
  * @param globalSettings - The global settings (see ../states/SettingsState.tsx)
+ * @param modelInformation - A dictionary of available model information
+ * @param renderInstance - A component function for rendering a model instance
+ * @param host - The current host URL
+ * @param i18n - The i18n instance for translations (from @lingui/core)
+ * @param locale - The current locale string (e.g. 'en' / 'de')
  * @param navigate - The navigation function (see react-router-dom)
  * @param theme - The current Mantine theme
+ * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')
  * @param forms - A set of functions for opening various API forms (see ../components/Forms.tsx)
+ * @param tables - A set of functions for rendering API tables
  * @param importer - A set of functions for controlling the global importer drawer (see ../components/importer/GlobalImporterDrawer.tsx)
- * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')
- * @param host - The current host URL
- * @param i18n - The i18n instance for translations (from @lingui/core)
- * @param locale - The current locale string (e.g. 'en' / 'de')
  * @param model - The model type associated with the rendered component (if applicable)
- * @param modelInformation - A dictionary of available model information
- * @param renderInstance - A component function for rendering a model instance
  * @param id - The ID (primary key) of the model instance for the plugin (if applicable)
  * @param instance - The model instance data (if available)
  * @param reloadContent - A function which can be called to reload the plugin content
@@ -87,9 +93,10 @@ export type InvenTreePluginContext = {
     locale: string;
     navigate: NavigateFunction;
     theme: MantineTheme;
+    colorScheme: MantineColorScheme;
     forms: InvenTreeFormsContext;
+    tables: InvenTreeTablesContext<any>;
     importer: ImporterDrawerContext;
-    colorScheme: MantineColorScheme;
     model?: ModelType | string;
     id?: string | number | null;
     instance?: any;

package/dist/types/Plugins.js

@@ -1,4 +1,4 @@
-const INVENTREE_PLUGIN_VERSION = "0.10.0";
+const INVENTREE_PLUGIN_VERSION = "0.11.0";
 const INVENTREE_REACT_VERSION = "19.2.4";
 const INVENTREE_REACT_DOM_VERSION = (
   // @ts-ignore

package/dist/types/Plugins.js.map

@@ -1 +1 @@
-{"version":3,"file":"Plugins.js","sources":["../../lib/types/Plugins.tsx"],"sourcesContent":["import type { I18n } from '@lingui/core';\nimport type { MantineColorScheme, MantineTheme } from '@mantine/core';\nimport type { QueryClient } from '@tanstack/react-query';\nimport type { AxiosInstance } from 'axios';\nimport type { NavigateFunction } from 'react-router-dom';\nimport type { ModelDict } from '../enums/ModelInformation';\nimport type { ModelType } from '../enums/ModelType';\nimport type {\n  ApiFormModalProps,\n  BulkEditApiFormModalProps,\n  StockOperationProps\n} from './Forms';\nimport type { UseModalReturn } from './Modals';\nimport type { RenderInstanceProps } from './Rendering';\nimport type { SettingsStateProps } from './Settings';\nimport type { UserStateProps } from './User';\n\nexport interface PluginProps {\n  name: string;\n  slug: string;\n  version: null | string;\n}\n\nexport interface PluginVersion {\n  inventree: string;\n  react: string;\n  reactDom: string;\n  mantine: string;\n}\n\nexport type StockAdjustmentFormsContext = {\n  addStock: (props: StockOperationProps) => UseModalReturn;\n  assignStock: (props: StockOperationProps) => UseModalReturn;\n  changeStatus: (props: StockOperationProps) => UseModalReturn;\n  countStock: (props: StockOperationProps) => UseModalReturn;\n  deleteStock: (props: StockOperationProps) => UseModalReturn;\n  mergeStock: (props: StockOperationProps) => UseModalReturn;\n  removeStock: (props: StockOperationProps) => UseModalReturn;\n  transferStock: (props: StockOperationProps) => UseModalReturn;\n  returnStock: (props: StockOperationProps) => UseModalReturn;\n};\n\nexport type InvenTreeFormsContext = {\n  bulkEdit: (props: BulkEditApiFormModalProps) => UseModalReturn;\n  create: (props: ApiFormModalProps) => UseModalReturn;\n  delete: (props: ApiFormModalProps) => UseModalReturn;\n  edit: (props: ApiFormModalProps) => UseModalReturn;\n  stockActions: StockAdjustmentFormsContext;\n};\n\nexport type ImporterDrawerContext = {\n  open: (sessionId: number, options?: { onClose?: () => void }) => void;\n  close: () => void;\n  isOpen: () => boolean;\n  sessionId: () => number | null;\n};\n\n/**\n * A set of properties which are passed to a plugin,\n * for rendering an element in the user interface.\n *\n * @param version - The version of the running InvenTree software stack\n * @param api - The Axios API instance (see ../states/ApiState.tsx)\n * @param user - The current user instance (see ../states/UserState.tsx)\n * @param userSettings - The current user settings (see ../states/SettingsState.tsx)\n * @param globalSettings - The global settings (see ../states/SettingsState.tsx)\n * @param navigate - The navigation function (see react-router-dom)\n * @param theme - The current Mantine theme\n * @param forms - A set of functions for opening various API forms (see ../components/Forms.tsx)\n * @param importer - A set of functions for controlling the global importer drawer (see ../components/importer/GlobalImporterDrawer.tsx)\n * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')\n * @param host - The current host URL\n * @param i18n - The i18n instance for translations (from @lingui/core)\n * @param locale - The current locale string (e.g. 'en' / 'de')\n * @param model - The model type associated with the rendered component (if applicable)\n * @param modelInformation - A dictionary of available model information\n * @param renderInstance - A component function for rendering a model instance\n * @param id - The ID (primary key) of the model instance for the plugin (if applicable)\n * @param instance - The model instance data (if available)\n * @param reloadContent - A function which can be called to reload the plugin content\n * @param reloadInstance - A function which can be called to reload the model instance\n * @param context - Any additional context data which may be passed to the plugin\n */\nexport type InvenTreePluginContext = {\n  version: PluginVersion;\n  api: AxiosInstance;\n  queryClient: QueryClient;\n  user: UserStateProps;\n  userSettings: SettingsStateProps;\n  globalSettings: SettingsStateProps;\n  modelInformation: ModelDict;\n  renderInstance: (props: Readonly<RenderInstanceProps>) => React.ReactNode;\n  host: string;\n  i18n: I18n;\n  locale: string;\n  navigate: NavigateFunction;\n  theme: MantineTheme;\n  forms: InvenTreeFormsContext;\n  importer: ImporterDrawerContext;\n  colorScheme: MantineColorScheme;\n  model?: ModelType | string;\n  id?: string | number | null;\n  instance?: any;\n  reloadContent?: () => void;\n  reloadInstance?: () => void;\n  context?: any;\n};\n\n/*\n * The version of the InvenTree plugin context interface.\n * This number should be incremented if the interface changes.\n */\n\n// @ts-ignore\nexport const INVENTREE_PLUGIN_VERSION: string = __INVENTREE_LIB_VERSION__;\n// @ts-ignore\nexport const INVENTREE_REACT_VERSION: string = __INVENTREE_REACT_VERSION__;\n// @ts-ignore\nexport const INVENTREE_REACT_DOM_VERSION: string =\n  // @ts-ignore\n  __INVENTREE_REACT_DOM_VERSION__;\n// @ts-ignore\nexport const INVENTREE_MANTINE_VERSION: string = __INVENTREE_MANTINE_VERSION__;\n"],"names":["INVENTREE_PLUGIN_VERSION","__INVENTREE_LIB_VERSION__","INVENTREE_REACT_VERSION","__INVENTREE_REACT_VERSION__","INVENTREE_REACT_DOM_VERSION","__INVENTREE_REACT_DOM_VERSION__","INVENTREE_MANTINE_VERSION","__INVENTREE_MANTINE_VERSION__"],"mappings":"AAkHO,MAAMA,2BAAmCC;AAEzC,MAAMC,0BAAkCC;AAExC,MAAMC;AAAAA;AAAAA,EAEXC;AAAAA;AAEK,MAAMC,4BAAoCC;"}
+{"version":3,"file":"Plugins.js","sources":["../../lib/types/Plugins.tsx"],"sourcesContent":["import type { I18n } from '@lingui/core';\nimport type { MantineColorScheme, MantineTheme } from '@mantine/core';\nimport type { QueryClient } from '@tanstack/react-query';\nimport type { AxiosInstance } from 'axios';\nimport type { NavigateFunction } from 'react-router-dom';\nimport type { ModelDict } from '../enums/ModelInformation';\nimport type { ModelType } from '../enums/ModelType';\nimport type {\n  ApiFormModalProps,\n  BulkEditApiFormModalProps,\n  StockOperationProps\n} from './Forms';\nimport type { UseModalReturn } from './Modals';\nimport type { RenderInstanceProps } from './Rendering';\nimport type { SettingsStateProps } from './Settings';\nimport type { InvenTreeTableRenderProps } from './Tables';\nimport type { UserStateProps } from './User';\n\nexport interface PluginProps {\n  name: string;\n  slug: string;\n  version: null | string;\n}\n\nexport interface PluginVersion {\n  inventree: string;\n  react: string;\n  reactDom: string;\n  mantine: string;\n}\n\nexport type StockAdjustmentFormsContext = {\n  addStock: (props: StockOperationProps) => UseModalReturn;\n  assignStock: (props: StockOperationProps) => UseModalReturn;\n  changeStatus: (props: StockOperationProps) => UseModalReturn;\n  countStock: (props: StockOperationProps) => UseModalReturn;\n  deleteStock: (props: StockOperationProps) => UseModalReturn;\n  mergeStock: (props: StockOperationProps) => UseModalReturn;\n  removeStock: (props: StockOperationProps) => UseModalReturn;\n  transferStock: (props: StockOperationProps) => UseModalReturn;\n  returnStock: (props: StockOperationProps) => UseModalReturn;\n};\n\nexport type InvenTreeFormsContext = {\n  bulkEdit: (props: BulkEditApiFormModalProps) => UseModalReturn;\n  create: (props: ApiFormModalProps) => UseModalReturn;\n  delete: (props: ApiFormModalProps) => UseModalReturn;\n  edit: (props: ApiFormModalProps) => UseModalReturn;\n  stockActions: StockAdjustmentFormsContext;\n};\n\nexport type InvenTreeTablesContext<T extends Record<string, any>> = {\n  renderTable: (props: InvenTreeTableRenderProps<T>) => React.ReactNode;\n};\n\nexport type ImporterDrawerContext = {\n  open: (sessionId: number, options?: { onClose?: () => void }) => void;\n  close: () => void;\n  isOpen: () => boolean;\n  sessionId: () => number | null;\n};\n\n/**\n * A set of properties which are passed to a plugin,\n * for rendering an element in the user interface.\n *\n * @param version - The version of the running InvenTree software stack\n * @param api - The Axios API instance (see ../states/ApiState.tsx)\n * @param queryClient - The Tanstack QueryClient instance (see ../states/QueryState.tsx)\n * @param user - The current user instance (see ../states/UserState.tsx)\n * @param userSettings - The current user settings (see ../states/SettingsState.tsx)\n * @param globalSettings - The global settings (see ../states/SettingsState.tsx)\n * @param modelInformation - A dictionary of available model information\n * @param renderInstance - A component function for rendering a model instance\n * @param host - The current host URL\n * @param i18n - The i18n instance for translations (from @lingui/core)\n * @param locale - The current locale string (e.g. 'en' / 'de')\n * @param navigate - The navigation function (see react-router-dom)\n * @param theme - The current Mantine theme\n * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')\n * @param forms - A set of functions for opening various API forms (see ../components/Forms.tsx)\n * @param tables - A set of functions for rendering API tables\n * @param importer - A set of functions for controlling the global importer drawer (see ../components/importer/GlobalImporterDrawer.tsx)\n * @param model - The model type associated with the rendered component (if applicable)\n * @param id - The ID (primary key) of the model instance for the plugin (if applicable)\n * @param instance - The model instance data (if available)\n * @param reloadContent - A function which can be called to reload the plugin content\n * @param reloadInstance - A function which can be called to reload the model instance\n * @param context - Any additional context data which may be passed to the plugin\n */\nexport type InvenTreePluginContext = {\n  version: PluginVersion;\n  api: AxiosInstance;\n  queryClient: QueryClient;\n  user: UserStateProps;\n  userSettings: SettingsStateProps;\n  globalSettings: SettingsStateProps;\n  modelInformation: ModelDict;\n  renderInstance: (props: Readonly<RenderInstanceProps>) => React.ReactNode;\n  host: string;\n  i18n: I18n;\n  locale: string;\n  navigate: NavigateFunction;\n  theme: MantineTheme;\n  colorScheme: MantineColorScheme;\n  forms: InvenTreeFormsContext;\n  tables: InvenTreeTablesContext<any>;\n  importer: ImporterDrawerContext;\n  model?: ModelType | string;\n  id?: string | number | null;\n  instance?: any;\n  reloadContent?: () => void;\n  reloadInstance?: () => void;\n  context?: any;\n};\n\n/*\n * The version of the InvenTree plugin context interface.\n * This number should be incremented if the interface changes.\n */\n\n// @ts-ignore\nexport const INVENTREE_PLUGIN_VERSION: string = __INVENTREE_LIB_VERSION__;\n// @ts-ignore\nexport const INVENTREE_REACT_VERSION: string = __INVENTREE_REACT_VERSION__;\n// @ts-ignore\nexport const INVENTREE_REACT_DOM_VERSION: string =\n  // @ts-ignore\n  __INVENTREE_REACT_DOM_VERSION__;\n// @ts-ignore\nexport const INVENTREE_MANTINE_VERSION: string = __INVENTREE_MANTINE_VERSION__;\n"],"names":["INVENTREE_PLUGIN_VERSION","__INVENTREE_LIB_VERSION__","INVENTREE_REACT_VERSION","__INVENTREE_REACT_VERSION__","INVENTREE_REACT_DOM_VERSION","__INVENTREE_REACT_DOM_VERSION__","INVENTREE_MANTINE_VERSION","__INVENTREE_MANTINE_VERSION__"],"mappings":"AA0HO,MAAMA,2BAAmCC;AAEzC,MAAMC,0BAAkCC;AAExC,MAAMC;AAAAA;AAAAA,EAEXC;AAAAA;AAEK,MAAMC,4BAAoCC;"}

package/dist/types/Tables.d.ts

@@ -1,4 +1,5 @@
 import { MantineStyleProp } from '@mantine/core';
+import { AxiosInstance } from 'axios';
 import { DataTableCellClickHandler, DataTableRowExpansionProps } from 'mantine-datatable';
 import { ReactNode } from 'react';
 import { NavigateFunction, SetURLSearchParams } from 'react-router-dom';
@@ -174,4 +175,13 @@ export type InvenTreeTableProps<T = any> = {
     minHeight?: number;
     noHeader?: boolean;
 };
+export type InvenTreeTableRenderProps<T extends Record<string, any>> = {
+    url?: string;
+    tableState: TableState;
+    tableData?: T[];
+    columns: TableColumn<T>[];
+    props: InvenTreeTableProps<T>;
+    api: AxiosInstance;
+    navigate: NavigateFunction;
+};
 export {};

package/lib/components/Boundary.tsx

@@ -0,0 +1,46 @@
+import { t } from '@lingui/core/macro';
+import { Alert } from '@mantine/core';
+import { ErrorBoundary, type FallbackRender } from '@sentry/react';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { type ReactNode, useCallback } from 'react';
+
+export function DefaultFallback({
+  title
+}: Readonly<{ title: string }>): ReactNode {
+  return (
+    <Alert
+      color='red'
+      icon={<IconExclamationCircle />}
+      title={`${t`Error rendering component`}: ${title}`}
+    >
+      {t`An error occurred while rendering this component. Refer to the console for more information.`}
+    </Alert>
+  );
+}
+
+export function Boundary({
+  children,
+  label,
+  fallback
+}: Readonly<{
+  children: ReactNode;
+  label: string;
+  fallback?: React.ReactElement<any> | FallbackRender;
+}>): ReactNode {
+  const onError = useCallback(
+    (error: unknown, componentStack: string | undefined, eventId: string) => {
+      console.error(`ERR: Error rendering component: ${label}`);
+      console.error(error);
+    },
+    []
+  );
+
+  return (
+    <ErrorBoundary
+      fallback={fallback ?? <DefaultFallback title={label} />}
+      onError={onError}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+}

package/lib/components/CopyButton.tsx

@@ -0,0 +1,76 @@
+import { t } from '@lingui/core/macro';
+import {
+  ActionIcon,
+  type ActionIconVariant,
+  Button,
+  type DefaultMantineColor,
+  type FloatingPosition,
+  CopyButton as MantineCopyButton,
+  type MantineSize,
+  Text,
+  Tooltip
+} from '@mantine/core';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+
+import type { JSX } from 'react';
+
+export function CopyButton({
+  value,
+  label,
+  tooltip,
+  disabled,
+  tooltipPosition,
+  content,
+  size,
+  color = 'gray',
+  variant = 'transparent'
+}: Readonly<{
+  value: any;
+  label?: string;
+  tooltip?: string;
+  disabled?: boolean;
+  tooltipPosition?: FloatingPosition;
+  content?: JSX.Element;
+  size?: MantineSize;
+  color?: DefaultMantineColor;
+  variant?: ActionIconVariant;
+}>) {
+  const ButtonComponent = label ? Button : ActionIcon;
+
+  // Disable the copy button if we are not in a secure context, as the Clipboard API is not available
+  if (!window.isSecureContext) {
+    return null;
+  }
+
+  return (
+    <MantineCopyButton value={value}>
+      {({ copied, copy }) => (
+        <Tooltip
+          label={copied ? t`Copied` : (tooltip ?? t`Copy`)}
+          withArrow
+          position={tooltipPosition}
+        >
+          <ButtonComponent
+            disabled={disabled}
+            color={copied ? 'teal' : color}
+            onClick={(e: any) => {
+              e.stopPropagation();
+              e.preventDefault();
+              copy();
+            }}
+            variant={copied ? 'transparent' : (variant ?? 'transparent')}
+            size={size ?? 'sm'}
+          >
+            {copied ? <IconCheck /> : <IconCopy />}
+            {content}
+            {label && (
+              <Text p={size ?? 'sm'} size={size ?? 'sm'}>
+                {label}
+              </Text>
+            )}
+          </ButtonComponent>
+        </Tooltip>
+      )}
+    </MantineCopyButton>
+  );
+}

package/lib/components/CopyableCell.tsx

@@ -0,0 +1,51 @@
+import { Group } from '@mantine/core';
+import { useState } from 'react';
+import { CopyButton } from './CopyButton';
+
+/**
+ * A wrapper component that adds a copy button to cell content on hover
+ * This component is used to make table cells copyable without adding visual clutter
+ *
+ * @param children - The cell content to render
+ * @param value - The value to copy when the copy button is clicked
+ */
+export function CopyableCell({
+  children,
+  value
+}: Readonly<{
+  children: React.ReactNode;
+  value: string;
+}>) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <Group
+      gap={0}
+      p={0}
+      wrap='nowrap'
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      justify='space-between'
+      align='center'
+    >
+      {children}
+      {window.isSecureContext && isHovered && value != null && (
+        <span
+          style={{ position: 'relative' }}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              right: 0,
+              transform: 'translateY(-50%)'
+            }}
+          >
+            <CopyButton value={value} variant={'default'} />
+          </div>
+        </span>
+      )}
+    </Group>
+  );
+}

package/lib/components/InvenTreeTable.tsx

@@ -0,0 +1,63 @@
+import { Alert } from '@mantine/core';
+import {
+  INVENTREE_PLUGIN_VERSION,
+  type InvenTreePluginContext
+} from '../types/Plugins';
+import type {
+  InvenTreeTableProps,
+  TableColumn,
+  TableState
+} from '../types/Tables';
+
+/**
+ * Wrapper function which allows plugins to render an InvenTree component instance directly,
+ * in a similar way to the standard InvenTreeTable component.
+ *
+ * Note: The InventreePluginContext "context" object must be provided when rendering the table
+ *
+ */
+
+export default function InvenTreeTable({
+  url,
+  tableState,
+  tableData,
+  columns,
+  props,
+  context
+}: {
+  url?: string;
+  tableState: TableState;
+  tableData?: any[];
+  columns: TableColumn<any>[];
+  props: InvenTreeTableProps;
+  context: InvenTreePluginContext;
+}) {
+  if (!context?.tables?.renderTable) {
+    return (
+      <Alert title='Plugin Version Error' color='red'>
+        {
+          'The <InvenTreeTable> component cannot be rendered because the plugin context is missing the "renderTable" function.'
+        }
+        <br />
+        {
+          'This means that the InvenTree UI library version is incompatible with this plugin version.'
+        }
+        <br />
+        <b>Plugin Version:</b> {INVENTREE_PLUGIN_VERSION}
+        <br />
+        <b>UI Version:</b> {context?.version?.inventree || 'unknown'}
+        <br />
+      </Alert>
+    );
+  }
+
+  return context?.tables.renderTable({
+    url: url,
+    tableState: tableState,
+    tableData: tableData,
+    columns: columns,
+    props: props,
+    api: context.api,
+    navigate: context.navigate
+  });
+}

package/lib/components/TableColumnSelect.tsx

@@ -0,0 +1,40 @@
+import { t } from '@lingui/core/macro';
+import { ActionIcon, Checkbox, Divider, Menu, Tooltip } from '@mantine/core';
+import { IconAdjustments } from '@tabler/icons-react';
+
+export function TableColumnSelect({
+  columns,
+  onToggleColumn
+}: Readonly<{
+  columns: any[];
+  onToggleColumn: (columnName: string) => void;
+}>) {
+  return (
+    <Menu shadow='xs' closeOnItemClick={false}>
+      <Menu.Target>
+        <ActionIcon variant='transparent' aria-label='table-select-columns'>
+          <Tooltip label={t`Select Columns`} position='top-end'>
+            <IconAdjustments />
+          </Tooltip>
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown style={{ maxHeight: '400px', overflowY: 'auto' }}>
+        <Menu.Label>{t`Select Columns`}</Menu.Label>
+        <Divider />
+        {columns
+          .filter((col) => col.switchable ?? true)
+          .map((col) => (
+            <Menu.Item key={col.accessor}>
+              <Checkbox
+                checked={!col.hidden}
+                label={col.title || col.accessor}
+                onChange={() => onToggleColumn(col.accessor)}
+                radius='sm'
+              />
+            </Menu.Item>
+          ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/lib/enums/ApiEndpoints.tsx

@@ -64,7 +64,7 @@ export enum ApiEndpoints {
   content_type_list = 'contenttype/',
   icons = 'icons/',
   selectionlist_list = 'selection/',
-  selectionlist_detail = 'selection/:id/',
+  selectionentry_list = 'selection/:id/entry/',
 
   // Barcode API endpoints
   barcode = 'barcode/',

package/lib/enums/ModelInformation.tsx

@@ -287,6 +287,13 @@ export const ModelInformationDict: ModelDict = {
     api_endpoint: ApiEndpoints.selectionlist_list,
     icon: 'list_details'
   },
+  selectionentry: {
+    label: () => t`Selection Entry`,
+    label_multiple: () => t`Selection Entries`,
+    url_overview: '/settings/admin/part-parameters',
+    api_endpoint: ApiEndpoints.selectionentry_list,
+    icon: 'list_details'
+  },
   error: {
     label: () => t`Error`,
     label_multiple: () => t`Errors`,

package/lib/enums/ModelType.tsx

@@ -35,5 +35,6 @@ export enum ModelType {
   pluginconfig = 'pluginconfig',
   contenttype = 'contenttype',
   selectionlist = 'selectionlist',
+  selectionentry = 'selectionentry',
   error = 'error'
 }

package/lib/functions/Forms.tsx

@@ -0,0 +1,47 @@
+import type { ApiEndpoints } from '../enums/ApiEndpoints';
+import type { PathParams } from '../types/Core';
+import type { ApiFormFieldSet, ApiFormFieldType } from '../types/Forms';
+import { apiUrl } from './Api';
+
+/**
+ * Construct an API url from the provided ApiFormProps object
+ */
+export function constructFormUrl(
+  url: ApiEndpoints | string,
+  pk?: string | number,
+  pathParams?: PathParams,
+  queryParams?: URLSearchParams
+): string {
+  let formUrl = apiUrl(url, pk, pathParams);
+
+  if (queryParams) {
+    formUrl += `?${queryParams.toString()}`;
+  }
+
+  return formUrl;
+}
+
+export type NestedDict = { [key: string]: string | number | NestedDict };
+
+export function mapFields(
+  fields: ApiFormFieldSet,
+  fieldFunction: (path: string, value: ApiFormFieldType, key: string) => any,
+  _path?: string
+): NestedDict {
+  const res: NestedDict = {};
+
+  for (const [k, v] of Object.entries(fields)) {
+    const path = _path ? `${_path}.${k}` : k;
+    let value: any;
+
+    if (v.field_type === 'nested object' && v.children) {
+      value = mapFields(v.children, fieldFunction, path);
+    } else {
+      value = fieldFunction(path, v, k);
+    }
+
+    if (value !== undefined) res[k] = value;
+  }
+
+  return res;
+}

package/lib/functions/Notification.tsx

@@ -0,0 +1,50 @@
+import { t } from '@lingui/core/macro';
+import { notifications } from '@mantine/notifications';
+
+/**
+ * Show a notification that the feature is not yet implemented
+ */
+export function notYetImplemented() {
+  notifications.hide('not-implemented');
+
+  notifications.show({
+    title: t`Not implemented`,
+    message: t`This feature is not yet implemented`,
+    color: 'red',
+    id: 'not-implemented'
+  });
+}
+
+/**
+ * Show a notification that the user does not have permission to perform the action
+ */
+export function permissionDenied() {
+  notifications.show({
+    title: t`Permission Denied`,
+    message: t`You do not have permission to perform this action`,
+    color: 'red'
+  });
+}
+
+/**
+ * Display a notification on an invalid return code
+ */
+export function invalidResponse(returnCode: number) {
+  // TODO: Specific return code messages
+  notifications.show({
+    title: t`Invalid Return Code`,
+    message: t`Server returned status ${returnCode}`,
+    color: 'red'
+  });
+}
+
+/**
+ * Display a notification on timeout
+ */
+export function showTimeoutNotification() {
+  notifications.show({
+    title: t`Timeout`,
+    message: t`The request timed out`,
+    color: 'red'
+  });
+}

package/lib/functions/String.tsx

@@ -0,0 +1,38 @@
+/**
+ * Reduce an input string to a given length, adding an ellipsis if necessary
+ * @param str - String to shorten
+ * @param len - Length to shorten to
+ */
+export function shortenString({
+  str,
+  len = 100
+}: {
+  str: string | undefined;
+  len?: number;
+}) {
+  // Ensure that the string is a string
+  str = str ?? '';
+  str = str.toString();
+
+  // If the string is already short enough, return it
+  if (str.length <= len) {
+    return str;
+  }
+
+  // Otherwise, shorten it
+  const N = Math.floor(len / 2 - 1);
+
+  return `${str.slice(0, N)} ... ${str.slice(-N)}`;
+}
+
+/**
+ * Generate a short hash from a long string
+ */
+export function hashString(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash.toString(36);
+}

package/lib/hooks/UseFilterSet.tsx

@@ -0,0 +1,47 @@
+import { useLocalStorage } from '@mantine/hooks';
+import { useCallback, useMemo } from 'react';
+import type { FilterSetState, TableFilter } from '../types/Filters';
+
+export default function useFilterSet(
+  filterKey: string,
+  initialFilters?: TableFilter[]
+): FilterSetState {
+  // Array of active filters (saved to local storage)
+  const [storedFilters, setStoredFilters] = useLocalStorage<
+    TableFilter[] | null
+  >({
+    key: `inventree-filterset-${filterKey}`,
+    defaultValue: null,
+    sync: false,
+    getInitialValueInEffect: false
+  });
+
+  const activeFilters: TableFilter[] = useMemo(() => {
+    if (storedFilters == null) {
+      // If there are no stored filters, set initial values
+      const filters = initialFilters || [];
+      setStoredFilters(filters);
+      return filters;
+    }
+    return storedFilters || [];
+  }, [storedFilters]);
+
+  // Callback to clear all active filters from the table
+  const clearActiveFilters = useCallback(() => {
+    setStoredFilters([]);
+  }, []);
+
+  const setActiveFilters = useCallback(
+    (filters: TableFilter[]) => {
+      setStoredFilters(filters);
+    },
+    [setStoredFilters]
+  );
+
+  return {
+    filterKey,
+    activeFilters,
+    setActiveFilters,
+    clearActiveFilters
+  };
+}