@inventreedb/ui 0.0.1

package/src/tables/InvenTreeTableHeader.tsx

@@ -0,0 +1,257 @@
+import { t } from '@lingui/core/macro';
+import {
+  ActionIcon,
+  Alert,
+  Group,
+  Indicator,
+  Space,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconBarcode,
+  IconDownload,
+  IconExclamationCircle,
+  IconFilter,
+  IconRefresh,
+  IconTrash
+} from '@tabler/icons-react';
+import { useMemo, useState } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+
+import type { TableFilter } from '@lib/types/Filters';
+import type { TableState } from '@lib/types/Tables';
+import { showNotification } from '@mantine/notifications';
+import { Boundary } from '../components/Boundary';
+import { ActionButton } from '../components/buttons/ActionButton';
+import { ButtonMenu } from '../components/buttons/ButtonMenu';
+import { PrintingActions } from '../components/buttons/PrintingActions';
+import useDataExport from '../hooks/UseDataExport';
+import { useDeleteApiFormModal } from '../hooks/UseForm';
+import { TableColumnSelect } from './ColumnSelect';
+import { FilterSelectDrawer } from './FilterSelectDrawer';
+import type { InvenTreeTableProps } from './InvenTreeTable';
+import { TableSearchInput } from './Search';
+
+/**
+ * Render a composite header for an InvenTree table
+ */
+export default function InvenTreeTableHeader({
+  tableUrl,
+  tableState,
+  tableProps,
+  hasSwitchableColumns,
+  columns,
+  filters,
+  toggleColumn
+}: Readonly<{
+  tableUrl?: string;
+  tableState: TableState;
+  tableProps: InvenTreeTableProps<any>;
+  hasSwitchableColumns: boolean;
+  columns: any;
+  filters: TableFilter[];
+  toggleColumn: (column: string) => void;
+}>) {
+  // Filter list visibility
+  const [filtersVisible, setFiltersVisible] = useState<boolean>(false);
+
+  // Construct export filters
+  const exportFilters = useMemo(() => {
+    const filters: Record<string, any> = {};
+
+    // Add in any additional parameters which have a defined value
+    for (const [key, value] of Object.entries(tableProps.params ?? {})) {
+      if (value != undefined) {
+        filters[key] = value;
+      }
+    }
+
+    // Add in active filters
+    if (tableState.filterSet.activeFilters) {
+      tableState.filterSet.activeFilters.forEach((filter) => {
+        filters[filter.name] = filter.value;
+      });
+    }
+
+    // Allow overriding of query parameters
+    if (tableState.queryFilters) {
+      for (const [key, value] of tableState.queryFilters) {
+        if (value != undefined) {
+          filters[key] = value;
+        }
+      }
+    }
+
+    return filters;
+  }, [tableProps.params, tableState.filterSet, tableState.queryFilters]);
+
+  const exportModal = useDataExport({
+    url: tableUrl ?? '',
+    enabled: !!tableUrl && tableProps?.enableDownload != false,
+    filters: exportFilters,
+    searchTerm: tableState.searchTerm
+  });
+
+  const deleteRecords = useDeleteApiFormModal({
+    url: tableUrl ?? '',
+    title: t`Delete Selected Items`,
+    preFormContent: (
+      <Alert
+        color='red'
+        title={t`Are you sure you want to delete the selected items?`}
+      >
+        {t`This action cannot be undone`}
+      </Alert>
+    ),
+    initialData: {
+      items: tableState.selectedIds
+    },
+    fields: {
+      items: {
+        hidden: true
+      }
+    },
+    successMessage: t`Items deleted`,
+    onFormError: (response) => {
+      showNotification({
+        id: 'bulk-delete-error',
+        title: t`Error`,
+        message: t`Failed to delete items`,
+        color: 'red',
+        icon: <IconExclamationCircle />,
+        autoClose: 5000
+      });
+    },
+    onFormSuccess: () => {
+      tableState.clearSelectedRecords();
+      tableState.refreshTable();
+
+      if (tableProps.afterBulkDelete) {
+        tableProps.afterBulkDelete();
+      }
+    }
+  });
+
+  const hasCustomSearch = useMemo(() => {
+    return tableState.queryFilters.has('search');
+  }, [tableState.queryFilters]);
+
+  const hasCustomFilters = useMemo(() => {
+    if (hasCustomSearch) {
+      return tableState.queryFilters.size > 1;
+    } else {
+      return tableState.queryFilters.size > 0;
+    }
+  }, [hasCustomSearch, tableState.queryFilters]);
+
+  return (
+    <>
+      {exportModal.modal}
+      {deleteRecords.modal}
+      {tableProps.enableFilters && (filters.length ?? 0) > 0 && (
+        <Boundary label={`InvenTreeTableFilterDrawer-${tableState.tableKey}`}>
+          <FilterSelectDrawer
+            availableFilters={filters}
+            filterSet={tableState.filterSet}
+            opened={filtersVisible}
+            onClose={() => setFiltersVisible(false)}
+          />
+        </Boundary>
+      )}
+      {(hasCustomFilters || hasCustomSearch) && (
+        <Alert
+          color='yellow'
+          withCloseButton
+          title={t`Custom table filters are active`}
+          onClose={() => tableState.clearQueryFilters()}
+        />
+      )}
+      <Group justify='apart' grow wrap='nowrap'>
+        <Group justify='left' key='custom-actions' gap={5} wrap='nowrap'>
+          <PrintingActions
+            items={tableState.selectedIds}
+            modelType={tableProps.modelType}
+            enableLabels={tableProps.enableLabels}
+            enableReports={tableProps.enableReports}
+          />
+          {(tableProps.barcodeActions?.length ?? 0) > 0 && (
+            <ButtonMenu
+              key='barcode-actions'
+              icon={<IconBarcode />}
+              label={t`Barcode Actions`}
+              tooltip={t`Barcode Actions`}
+              actions={tableProps.barcodeActions ?? []}
+            />
+          )}
+          {tableProps.enableBulkDelete && (
+            <ActionButton
+              disabled={!tableState.hasSelectedRecords}
+              icon={<IconTrash />}
+              color='red'
+              tooltip={t`Delete selected records`}
+              onClick={() => {
+                deleteRecords.open();
+              }}
+            />
+          )}
+          {tableProps.tableActions?.map((group, idx) => (
+            <Fragment key={idx}>{group}</Fragment>
+          ))}
+        </Group>
+        <Space />
+        <Group justify='right' gap={5} wrap='nowrap'>
+          {tableProps.enableSearch && (
+            <TableSearchInput
+              disabled={hasCustomSearch}
+              searchCallback={(term: string) => tableState.setSearchTerm(term)}
+            />
+          )}
+          {tableProps.enableRefresh && (
+            <ActionIcon variant='transparent' aria-label='table-refresh'>
+              <Tooltip label={t`Refresh data`}>
+                <IconRefresh
+                  onClick={() => {
+                    tableState.refreshTable();
+                    tableState.clearSelectedRecords();
+                  }}
+                />
+              </Tooltip>
+            </ActionIcon>
+          )}
+          {hasSwitchableColumns && (
+            <TableColumnSelect
+              columns={columns}
+              onToggleColumn={toggleColumn}
+            />
+          )}
+          {tableProps.enableFilters && filters.length > 0 && (
+            <Indicator
+              size='xs'
+              label={tableState.filterSet.activeFilters?.length ?? 0}
+              disabled={tableState.filterSet.activeFilters?.length == 0}
+            >
+              <ActionIcon
+                disabled={hasCustomFilters}
+                variant='transparent'
+                aria-label='table-select-filters'
+              >
+                <Tooltip label={t`Table Filters`}>
+                  <IconFilter
+                    onClick={() => setFiltersVisible(!filtersVisible)}
+                  />
+                </Tooltip>
+              </ActionIcon>
+            </Indicator>
+          )}
+          {tableUrl && tableProps.enableDownload && (
+            <ActionIcon variant='transparent' aria-label='table-export-data'>
+              <Tooltip label={t`Download data`} position='bottom'>
+                <IconDownload onClick={exportModal.open} />
+              </Tooltip>
+            </ActionIcon>
+          )}
+        </Group>
+      </Group>
+    </>
+  );
+}

package/src/tables/RowActions.tsx

@@ -0,0 +1,176 @@
+import { t } from '@lingui/core/macro';
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import {
+  IconArrowRight,
+  IconCircleX,
+  IconCopy,
+  IconDots,
+  IconEdit,
+  IconTrash
+} from '@tabler/icons-react';
+import { type ReactNode, useMemo, useState } from 'react';
+import type { NavigateFunction } from 'react-router-dom';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { cancelEvent } from '../functions/events';
+import { navigateToLink } from '../functions/navigation';
+import { getDetailUrl } from '../functions/urls';
+
+// Type definition for a table row action
+export type RowAction = {
+  title?: string;
+  tooltip?: string;
+  color?: string;
+  icon?: ReactNode;
+  onClick?: (event: any) => void;
+  hidden?: boolean;
+  disabled?: boolean;
+};
+
+type RowModelProps = {
+  modelType: ModelType;
+  modelId: number;
+  navigate: NavigateFunction;
+};
+
+export type RowViewProps = RowAction & RowModelProps;
+
+// Component for viewing a row in a table
+export function RowViewAction(props: RowViewProps): RowAction {
+  return {
+    ...props,
+    color: undefined,
+    icon: <IconArrowRight />,
+    onClick: (event: any) => {
+      const url = getDetailUrl(props.modelType, props.modelId);
+      navigateToLink(url, props.navigate, event);
+    }
+  };
+}
+
+// Component for duplicating a row in a table
+export function RowDuplicateAction(props: RowAction): RowAction {
+  return {
+    ...props,
+    title: t`Duplicate`,
+    color: 'green',
+    icon: <IconCopy />
+  };
+}
+
+// Component for editing a row in a table
+export function RowEditAction(props: RowAction): RowAction {
+  return {
+    ...props,
+    title: t`Edit`,
+    color: 'blue',
+    icon: <IconEdit />
+  };
+}
+
+// Component for deleting a row in a table
+export function RowDeleteAction(props: RowAction): RowAction {
+  return {
+    ...props,
+    title: t`Delete`,
+    color: 'red',
+    icon: <IconTrash />
+  };
+}
+
+// Component for cancelling a row in a table
+export function RowCancelAction(props: RowAction): RowAction {
+  return {
+    ...props,
+    title: t`Cancel`,
+    color: 'red',
+    icon: <IconCircleX />
+  };
+}
+
+/**
+ * Component for displaying actions for a row in a table.
+ * Displays a simple dropdown menu with a list of actions.
+ */
+export function RowActions({
+  title,
+  actions,
+  disabled = false,
+  index
+}: {
+  title?: string;
+  disabled?: boolean;
+  actions: RowAction[];
+  index?: number;
+}): ReactNode {
+  // Prevent default event handling
+  // Ref: https://icflorescu.github.io/mantine-datatable/examples/links-or-buttons-inside-clickable-rows-or-cells
+  function openMenu(event: any) {
+    cancelEvent(event);
+    setOpened(!opened);
+  }
+
+  const [opened, setOpened] = useState(false);
+
+  const visibleActions = useMemo(() => {
+    return actions.filter((action) => !action.hidden);
+  }, [actions]);
+
+  // Render a single action icon
+  function RowActionIcon(action: Readonly<RowAction>) {
+    return (
+      <Tooltip
+        withinPortal={true}
+        label={action.tooltip ?? action.title}
+        key={action.title}
+        position='left'
+      >
+        <Menu.Item
+          color={action.color}
+          leftSection={action.icon}
+          onClick={(event) => {
+            // Prevent clicking on the action from selecting the row itself
+            cancelEvent(event);
+            action.onClick?.(event);
+            setOpened(false);
+          }}
+          disabled={action.disabled || false}
+        >
+          {action.title}
+        </Menu.Item>
+      </Tooltip>
+    );
+  }
+
+  return (
+    visibleActions.length > 0 && (
+      <Menu
+        withinPortal={true}
+        disabled={disabled}
+        position='bottom-end'
+        opened={opened}
+        onChange={setOpened}
+      >
+        <Menu.Target>
+          <Tooltip withinPortal={true} label={title || t`Actions`}>
+            <ActionIcon
+              key={`row-action-menu-${index ?? ''}`}
+              aria-label={`row-action-menu-${index ?? ''}`}
+              onClick={openMenu}
+              disabled={disabled}
+              variant='subtle'
+              color='gray'
+            >
+              <IconDots />
+            </ActionIcon>
+          </Tooltip>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {visibleActions.map((action) => (
+            <RowActionIcon key={action.title} {...action} />
+          ))}
+        </Menu.Dropdown>
+      </Menu>
+    )
+  );
+}

package/src/tables/RowExpansionIcon.tsx

@@ -0,0 +1,16 @@
+import { ActionIcon } from '@mantine/core';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+
+export default function RowExpansionIcon({
+  enabled,
+  expanded
+}: Readonly<{
+  enabled: boolean;
+  expanded: boolean;
+}>) {
+  return (
+    <ActionIcon size='sm' variant='transparent' disabled={!enabled}>
+      {expanded ? <IconChevronDown /> : <IconChevronRight />}
+    </ActionIcon>
+  );
+}

package/src/tables/Search.tsx

@@ -0,0 +1,42 @@
+import { t } from '@lingui/core/macro';
+import { CloseButton, TextInput } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+
+export function TableSearchInput({
+  disabled,
+  searchCallback
+}: Readonly<{
+  disabled?: boolean;
+  searchCallback: (searchTerm: string) => void;
+}>) {
+  const [value, setValue] = useState<string>('');
+  const [searchText] = useDebouncedValue(value, 500);
+
+  useEffect(() => {
+    searchCallback(searchText);
+  }, [searchText]);
+
+  return (
+    <TextInput
+      value={value}
+      disabled={disabled}
+      aria-label='table-search-input'
+      leftSection={<IconSearch />}
+      placeholder={t`Search`}
+      onChange={(event) => setValue(event.target.value)}
+      rightSection={
+        value.length > 0 ? (
+          <CloseButton
+            size='xs'
+            onClick={() => {
+              setValue('');
+              searchCallback('');
+            }}
+          />
+        ) : null
+      }
+    />
+  );
+}

package/src/tables/TableHoverCard.tsx

@@ -0,0 +1,91 @@
+import { t } from '@lingui/core/macro';
+import { Divider, Group, HoverCard, Stack, Text } from '@mantine/core';
+import { IconInfoCircle } from '@tabler/icons-react';
+import { type ReactNode, useMemo } from 'react';
+
+import { InvenTreeIcon, type InvenTreeIconType } from '../functions/icons';
+
+/*
+ * A custom hovercard element for displaying extra information in a table cell.
+ * If a table cell has extra information available,
+ * it can be displayed as a drop-down hovercard when the user hovers over the cell.
+ */
+export function TableHoverCard({
+  value, // The value of the cell
+  extra, // The extra information to display
+  title, // The title of the hovercard
+  icon, // The icon to display
+  iconColor // The icon color
+}: Readonly<{
+  value: any;
+  extra?: ReactNode;
+  title?: string;
+  icon?: InvenTreeIconType;
+  iconColor?: string;
+}>) {
+  const extraItems: ReactNode = useMemo(() => {
+    if (Array.isArray(extra)) {
+      if (extra.length == 0) {
+        return null;
+      }
+
+      return (
+        <Stack gap='xs'>
+          {extra.map((item, idx) => (
+            <div key={`item-${idx}-${item}`}>{item}</div>
+          ))}
+        </Stack>
+      );
+    } else {
+      return extra;
+    }
+  }, [extra]);
+
+  // If no extra information presented, just return the raw value
+  if (!extraItems) {
+    return value;
+  }
+
+  return (
+    <HoverCard withinPortal={true} closeDelay={20} openDelay={250}>
+      <HoverCard.Target>
+        <Group gap='xs' justify='space-between' wrap='nowrap'>
+          {value}
+          <InvenTreeIcon
+            icon={icon ?? 'info'}
+            iconProps={{ size: 16, color: iconColor ?? 'blue' }}
+          />
+        </Group>
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        <Stack gap='xs'>
+          <Group gap='xs' justify='left'>
+            <IconInfoCircle size='16' color='blue' />
+            <Text fw='bold'>{title}</Text>
+          </Group>
+          <Divider />
+          {extraItems}
+        </Stack>
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+}
+
+/**
+ * Custom hovercard for displaying projectcode detail in a table
+ */
+export function ProjectCodeHoverCard({ projectCode }: { projectCode: any }) {
+  return projectCode ? (
+    <TableHoverCard
+      value={projectCode?.code}
+      title={t`Project Code`}
+      extra={
+        projectCode && (
+          <Text key='project-code'>{projectCode?.description}</Text>
+        )
+      }
+    />
+  ) : (
+    '-'
+  );
+}