@inventreedb/ui 0.0.1 → 0.0.2

package/src/tables/InvenTreeTableHeader.tsx

@@ -1,257 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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>
-        )
-      }
-    />
-  ) : (
-    '-'
-  );
-}