@inventreedb/ui 0.0.1

package/src/components/barcodes/QRCode.tsx

@@ -0,0 +1,211 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Alert,
+  Box,
+  Button,
+  Code,
+  Divider,
+  Group,
+  Image,
+  Select,
+  Skeleton,
+  Stack,
+  Text
+} from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { useQuery } from '@tanstack/react-query';
+import QR from 'qrcode';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { api } from '../../App';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { CopyButton } from '../buttons/CopyButton';
+import type { QrCodeType } from '../items/ActionDropdown';
+
+import { extractErrorMessage } from '../../functions/api';
+import { BarcodeInput } from './BarcodeInput';
+
+type QRCodeProps = {
+  ecl?: 'L' | 'M' | 'Q' | 'H';
+  margin?: number;
+  data?: string;
+};
+
+export const QRCode = ({ data, ecl = 'Q', margin = 1 }: QRCodeProps) => {
+  const [qrCode, setQRCode] = useState<string>();
+
+  useEffect(() => {
+    if (!data) return setQRCode(undefined);
+
+    QR.toString(data, { errorCorrectionLevel: ecl, type: 'svg', margin }).then(
+      (svg) => {
+        setQRCode(`data:image/svg+xml;utf8,${encodeURIComponent(svg)}`);
+      }
+    );
+  }, [data, ecl]);
+
+  return (
+    <Box>
+      {qrCode ? (
+        <Image src={qrCode} alt='QR Code' />
+      ) : (
+        <Skeleton height={500} />
+      )}
+    </Box>
+  );
+};
+
+type InvenTreeQRCodeProps = {
+  mdl_prop: QrCodeType;
+  showEclSelector?: boolean;
+} & Omit<QRCodeProps, 'data'>;
+
+export const InvenTreeQRCode = ({
+  mdl_prop,
+  showEclSelector = true,
+  ecl: eclProp = 'Q',
+  ...props
+}: InvenTreeQRCodeProps) => {
+  const settings = useGlobalSettingsState();
+  const [ecl, setEcl] = useState(eclProp);
+
+  useEffect(() => {
+    if (eclProp) setEcl(eclProp);
+  }, [eclProp]);
+
+  const { data } = useQuery({
+    queryKey: ['qr-code', mdl_prop.model, mdl_prop.pk],
+    queryFn: async () => {
+      return api
+        .post(apiUrl(ApiEndpoints.barcode_generate), {
+          model: mdl_prop.model,
+          pk: mdl_prop.pk
+        })
+        .then((res) => res.data?.barcode ?? ('' as string))
+        .catch((error) => '');
+    }
+  });
+
+  const eclOptions = useMemo(
+    () => [
+      { value: 'L', label: t`Low (7%)` },
+      { value: 'M', label: t`Medium (15%)` },
+      { value: 'Q', label: t`Quartile (25%)` },
+      { value: 'H', label: t`High (30%)` }
+    ],
+    []
+  );
+
+  return (
+    <Stack>
+      <Divider />
+
+      {mdl_prop.hash ? (
+        <Alert variant='outline' color='red' title={t`Custom barcode`}>
+          <Trans>
+            A custom barcode is registered for this item. The shown code is not
+            that custom barcode.
+          </Trans>
+        </Alert>
+      ) : null}
+
+      <QRCode data={data} ecl={ecl} {...props} />
+
+      <Divider />
+
+      {data && settings.getSetting('BARCODE_SHOW_TEXT', 'false') && (
+        <Group
+          justify={showEclSelector ? 'space-between' : 'center'}
+          align='flex-start'
+          px={16}
+        >
+          <Stack gap={4} pt={2}>
+            <Text size='sm' fw={500}>
+              <Trans>Barcode Data:</Trans>
+            </Text>
+            <Group>
+              <Code>{data}</Code>
+              <CopyButton value={data} />
+            </Group>
+          </Stack>
+
+          {showEclSelector && (
+            <Select
+              allowDeselect={false}
+              label={t`Select Error Correction Level`}
+              value={ecl}
+              onChange={(v) =>
+                setEcl(v as Exclude<QRCodeProps['ecl'], undefined>)
+              }
+              data={eclOptions}
+            />
+          )}
+        </Group>
+      )}
+    </Stack>
+  );
+};
+
+export const QRCodeLink = ({ mdl_prop }: { mdl_prop: QrCodeType }) => {
+  const [error, setError] = useState<string>('');
+
+  const linkBarcode = useCallback((barcode: string) => {
+    api
+      .post(apiUrl(ApiEndpoints.barcode_link), {
+        [mdl_prop.model]: mdl_prop.pk,
+        barcode: barcode
+      })
+      .then((response) => {
+        setError('');
+        modals.closeAll();
+        location.reload();
+      })
+      .catch((error) => {
+        const msg = extractErrorMessage({
+          error: error,
+          field: 'error',
+          defaultMessage: t`Failed to link barcode`
+        });
+        setError(msg);
+      });
+  }, []);
+
+  return (
+    <Stack gap='xs'>
+      <Divider />
+      <BarcodeInput onScan={linkBarcode} actionText={t`Link`} error={error} />
+    </Stack>
+  );
+};
+
+export const QRCodeUnlink = ({ mdl_prop }: { mdl_prop: QrCodeType }) => {
+  function unlinkBarcode() {
+    api
+      .post(apiUrl(ApiEndpoints.barcode_unlink), {
+        [mdl_prop.model]: mdl_prop.pk
+      })
+      .then((response) => {
+        modals.closeAll();
+        location.reload();
+      });
+  }
+  return (
+    <Box>
+      <Stack gap='sm'>
+        <Divider />
+        <Text>
+          <Trans>This will remove the link to the associated barcode</Trans>
+        </Text>
+        <Divider />
+        <Group grow>
+          <Button color='red' onClick={unlinkBarcode}>
+            <Trans>Unlink Barcode</Trans>
+          </Button>
+        </Group>
+      </Stack>
+    </Box>
+  );
+};

package/src/components/buttons/ActionButton.tsx

@@ -0,0 +1,61 @@
+import {
+  ActionIcon,
+  type FloatingPosition,
+  Group,
+  Tooltip
+} from '@mantine/core';
+import type { ReactNode } from 'react';
+
+import { identifierString } from '../../functions/conversion';
+
+export type ActionButtonProps = {
+  icon?: ReactNode;
+  text?: string;
+  color?: string;
+  tooltip?: string;
+  variant?: string;
+  size?: number | string;
+  radius?: number | string;
+  disabled?: boolean;
+  onClick: (event?: any) => void;
+  hidden?: boolean;
+  tooltipAlignment?: FloatingPosition;
+};
+
+/**
+ * Construct a simple action button with consistent styling
+ */
+export function ActionButton(props: ActionButtonProps) {
+  const hidden = props.hidden ?? false;
+
+  return (
+    !hidden && (
+      <Tooltip
+        key={`tooltip-${props.tooltip ?? props.text}`}
+        disabled={!props.tooltip && !props.text}
+        label={props.tooltip ?? props.text}
+        position={props.tooltipAlignment ?? 'left'}
+      >
+        <ActionIcon
+          key={`action-icon-${props.tooltip ?? props.text}`}
+          disabled={props.disabled}
+          p={17}
+          radius={props.radius ?? 'xs'}
+          color={props.color}
+          size={props.size}
+          aria-label={`action-button-${identifierString(
+            props.tooltip ?? props.text ?? ''
+          )}`}
+          onClick={(event: any) => {
+            props.onClick(event);
+          }}
+          variant={props.variant ?? 'transparent'}
+        >
+          <Group gap='xs' wrap='nowrap'>
+            {props.icon}
+          </Group>
+        </ActionIcon>
+      </Tooltip>
+    )
+  );
+}

package/src/components/buttons/AddItemButton.tsx

@@ -0,0 +1,10 @@
+import { IconPlus } from '@tabler/icons-react';
+
+import { ActionButton, type ActionButtonProps } from './ActionButton';
+
+/**
+ * A generic icon button which is used to add or create a new item
+ */
+export function AddItemButton(props: Readonly<ActionButtonProps>) {
+  return <ActionButton {...props} color='green' icon={<IconPlus />} />;
+}

package/src/components/buttons/AdminButton.tsx

@@ -0,0 +1,91 @@
+import { t } from '@lingui/core/macro';
+import { IconUserStar } from '@tabler/icons-react';
+import { useCallback, useMemo } from 'react';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { generateUrl } from '../../functions/urls';
+import { useServerApiState } from '../../states/ApiState';
+import { useUserState } from '../../states/UserState';
+import { ModelInformationDict } from '../render/ModelType';
+import { ActionButton } from './ActionButton';
+
+export type AdminButtonProps = {
+  model: ModelType;
+  id: number | undefined;
+};
+
+/*
+ * A button that is used to navigate to the admin page for the selected item.
+ *
+ * This button is only rendered if:
+ * - The admin interface is enabled for the server
+ * - The selected model has an associated admin URL
+ * - The user has "superuser" role
+ * - The user has at least read rights for the selected item
+ */
+export default function AdminButton(props: Readonly<AdminButtonProps>) {
+  const user = useUserState();
+  const server = useServerApiState();
+
+  const enabled: boolean = useMemo(() => {
+    // Only users with superuser permission will see this button
+    if (!user || !user.isLoggedIn() || !user.isSuperuser()) {
+      return false;
+    }
+
+    const modelDef = ModelInformationDict[props.model];
+
+    // Check if the server has the admin interface enabled
+    if (!server.server.django_admin) {
+      return false;
+    }
+
+    // No admin URL associated with the model
+    if (!modelDef.admin_url) {
+      return false;
+    }
+
+    // No primary key provided
+    if (!props.id) {
+      return false;
+    }
+
+    return true;
+  }, [user, props.model, props.id]);
+
+  const openAdmin = useCallback(
+    (event: any) => {
+      const modelDef = ModelInformationDict[props.model];
+
+      if (!modelDef.admin_url) {
+        return;
+      }
+
+      // Generate the URL for the admin interface
+      const url = generateUrl(
+        `${server.server.django_admin}${modelDef.admin_url}${props.id}/`
+      );
+
+      if (event?.ctrlKey || event?.shiftKey) {
+        // Open the link in a new tab
+        window.open(url, '_blank');
+      } else {
+        window.open(url, '_self');
+      }
+    },
+    [props.model, props.id]
+  );
+
+  return (
+    <ActionButton
+      icon={<IconUserStar />}
+      color='blue'
+      size='lg'
+      variant='filled'
+      tooltip={t`Open in admin interface`}
+      hidden={!enabled}
+      onClick={openAdmin}
+      tooltipAlignment='bottom'
+    />
+  );
+}

package/src/components/buttons/ButtonMenu.tsx

@@ -0,0 +1,33 @@
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+
+/**
+ * A ButtonMenu is a button that opens a menu when clicked.
+ * It features a number of actions, which can be selected by the user.
+ */
+export function ButtonMenu({
+  icon,
+  actions,
+  tooltip = '',
+  label = ''
+}: Readonly<{
+  icon: any;
+  actions: React.ReactNode[];
+  label?: string;
+  tooltip?: string;
+}>) {
+  return (
+    <Menu shadow='xs'>
+      <Menu.Target>
+        <ActionIcon variant='default'>
+          <Tooltip label={tooltip}>{icon}</Tooltip>
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown>
+        {label && <Menu.Label>{label}</Menu.Label>}
+        {actions.map((action, i) => (
+          <Menu.Item key={`${i}-${action}`}>{action}</Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/src/components/buttons/CopyButton.tsx

@@ -0,0 +1,52 @@
+import { t } from '@lingui/core/macro';
+import {
+  ActionIcon,
+  Button,
+  CopyButton as MantineCopyButton,
+  type MantineSize,
+  Text,
+  Tooltip
+} from '@mantine/core';
+
+import { InvenTreeIcon } from '../../functions/icons';
+
+export function CopyButton({
+  value,
+  label,
+  content,
+  size
+}: Readonly<{
+  value: any;
+  label?: string;
+  content?: JSX.Element;
+  size?: MantineSize;
+}>) {
+  const ButtonComponent = label ? Button : ActionIcon;
+
+  return (
+    <MantineCopyButton value={value}>
+      {({ copied, copy }) => (
+        <Tooltip label={copied ? t`Copied` : t`Copy`} withArrow>
+          <ButtonComponent
+            color={copied ? 'teal' : 'gray'}
+            onClick={copy}
+            variant='transparent'
+            size={size ?? 'sm'}
+          >
+            {copied ? (
+              <InvenTreeIcon icon='check' />
+            ) : (
+              <InvenTreeIcon icon='copy' />
+            )}
+            {content}
+            {label && (
+              <Text p={size ?? 'sm'} size={size ?? 'sm'}>
+                {label}
+              </Text>
+            )}
+          </ButtonComponent>
+        </Tooltip>
+      )}
+    </MantineCopyButton>
+  );
+}

package/src/components/buttons/PrimaryActionButton.tsx

@@ -0,0 +1,40 @@
+import { Button, Tooltip } from '@mantine/core';
+
+import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';
+
+/**
+ * A "primary action" button for display on a page detail, (for example)
+ */
+export default function PrimaryActionButton({
+  title,
+  tooltip,
+  icon,
+  color,
+  hidden,
+  onClick
+}: Readonly<{
+  title: string;
+  tooltip?: string;
+  icon?: InvenTreeIconType;
+  color?: string;
+  hidden?: boolean;
+  onClick: () => void;
+}>) {
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <Tooltip label={tooltip ?? title} position='bottom' hidden={!tooltip}>
+      <Button
+        leftSection={icon && <InvenTreeIcon icon={icon} />}
+        color={color}
+        radius='sm'
+        p='xs'
+        onClick={onClick}
+      >
+        {title}
+      </Button>
+    </Tooltip>
+  );
+}

package/src/components/buttons/PrintingActions.tsx

@@ -0,0 +1,191 @@
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import type { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { ApiFormFieldSet } from '@lib/types/Forms';
+import { t } from '@lingui/core/macro';
+import { IconPrinter, IconReport, IconTags } from '@tabler/icons-react';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { api } from '../../App';
+import { extractAvailableFields } from '../../functions/forms';
+import useDataOutput from '../../hooks/UseDataOutput';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import {
+  useGlobalSettingsState,
+  useUserSettingsState
+} from '../../states/SettingsState';
+import { ActionDropdown } from '../items/ActionDropdown';
+
+export function PrintingActions({
+  items,
+  hidden,
+  enableLabels,
+  enableReports,
+  modelType
+}: {
+  items: number[];
+  hidden?: boolean;
+  enableLabels?: boolean;
+  enableReports?: boolean;
+  modelType?: ModelType;
+}) {
+  const userSettings = useUserSettingsState();
+  const globalSettings = useGlobalSettingsState();
+
+  const enabled = useMemo(() => items.length > 0, [items]);
+
+  const [pluginKey, setPluginKey] = useState<string>('');
+
+  const labelPrintingEnabled = useMemo(() => {
+    return enableLabels && globalSettings.isSet('LABEL_ENABLE');
+  }, [enableLabels, globalSettings]);
+
+  const reportPrintingEnabled = useMemo(() => {
+    return enableReports && globalSettings.isSet('REPORT_ENABLE');
+  }, [enableReports, globalSettings]);
+
+  const [labelId, setLabelId] = useState<number | undefined>(undefined);
+  const [reportId, setReportId] = useState<number | undefined>(undefined);
+
+  const labelProgress = useDataOutput({
+    title: t`Printing Labels`,
+    id: labelId
+  });
+
+  const reportProgress = useDataOutput({
+    title: t`Printing Reports`,
+    id: reportId
+  });
+
+  // Fetch available printing fields via OPTIONS request
+  const printingFields = useQuery({
+    enabled: labelPrintingEnabled,
+    queryKey: ['printingFields', modelType, pluginKey],
+    gcTime: 500,
+    queryFn: () =>
+      api
+        .options(apiUrl(ApiEndpoints.label_print), {
+          params: {
+            plugin: pluginKey || undefined
+          }
+        })
+        .then((response: any) => {
+          return extractAvailableFields(response, 'POST') || {};
+        })
+        .catch(() => {
+          return {};
+        })
+  });
+
+  const labelFields: ApiFormFieldSet = useMemo(() => {
+    const fields: ApiFormFieldSet = printingFields.data || {};
+
+    // Override field values
+    fields.template = {
+      ...fields.template,
+      filters: {
+        enabled: true,
+        model_type: modelType,
+        items: items.join(',')
+      }
+    };
+
+    fields.items = {
+      ...fields.items,
+      value: items,
+      hidden: true
+    };
+
+    fields['plugin'] = {
+      ...fields['plugin'],
+      value: userSettings.getSetting('LABEL_DEFAULT_PRINTER'),
+      filters: {
+        active: true,
+        mixin: 'labels'
+      },
+      onValueChange: (value: string, record?: any) => {
+        if (record?.key && record?.key != pluginKey) {
+          setPluginKey(record.key);
+        }
+      }
+    };
+
+    return fields;
+  }, [printingFields.data, items]);
+
+  const labelModal = useCreateApiFormModal({
+    url: apiUrl(ApiEndpoints.label_print),
+    title: t`Print Label`,
+    fields: labelFields,
+    timeout: 5000,
+    onClose: () => {
+      setPluginKey('');
+    },
+    submitText: t`Print`,
+    successMessage: null,
+    onFormSuccess: (response: any) => {
+      setPluginKey('');
+      setLabelId(response.pk);
+    }
+  });
+
+  const reportModal = useCreateApiFormModal({
+    title: t`Print Report`,
+    url: apiUrl(ApiEndpoints.report_print),
+    timeout: 5000,
+    fields: {
+      template: {
+        filters: {
+          enabled: true,
+          model_type: modelType,
+          items: items.join(',')
+        }
+      },
+      items: {
+        hidden: true,
+        value: items
+      }
+    },
+    submitText: t`Print`,
+    successMessage: null,
+    onFormSuccess: (response: any) => {
+      setReportId(response.pk);
+    }
+  });
+
+  if (!modelType) {
+    return null;
+  }
+
+  if (!labelPrintingEnabled && !reportPrintingEnabled) {
+    return null;
+  }
+
+  return (
+    !hidden && (
+      <>
+        {reportModal.modal}
+        {labelModal.modal}
+        <ActionDropdown
+          tooltip={t`Printing Actions`}
+          icon={<IconPrinter />}
+          disabled={!enabled}
+          actions={[
+            {
+              name: t`Print Labels`,
+              icon: <IconTags />,
+              onClick: () => labelModal.open(),
+              hidden: !labelPrintingEnabled
+            },
+            {
+              name: t`Print Reports`,
+              icon: <IconReport />,
+              onClick: () => reportModal.open(),
+              hidden: !reportPrintingEnabled
+            }
+          ]}
+        />
+      </>
+    )
+  );
+}