@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/barcodes/BarcodeKeyboardInput.tsx

@@ -1,50 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Button, FocusTrap, Stack, TextInput } from '@mantine/core';
-import { IconQrcode } from '@tabler/icons-react';
-import { useCallback, useState } from 'react';
-import type { BarcodeInputProps } from './BarcodeInput';
-
-export default function BarcodeKeyboardInput({
-  onScan,
-  actionText = t`Scan`
-}: Readonly<BarcodeInputProps>) {
-  const [text, setText] = useState<string>('');
-
-  const onTextScan = useCallback(
-    (barcode: string) => {
-      if (!!barcode) {
-        onScan(barcode);
-      }
-      setText('');
-    },
-    [onScan]
-  );
-
-  return (
-    <>
-      <Stack gap='sm'>
-        <FocusTrap active>
-          <TextInput
-            data-autofocus
-            aria-label='barcode-scan-keyboard-input'
-            value={text}
-            onChange={(event) => {
-              setText(event.currentTarget?.value);
-            }}
-            onKeyDown={(event) => {
-              if (event.code === 'Enter') {
-                onTextScan(text);
-              }
-            }}
-            placeholder={t`Enter barcode data`}
-            leftSection={<IconQrcode />}
-            w='100%'
-          />
-        </FocusTrap>
-        <Button fullWidth disabled={!text} onClick={() => onTextScan(text)}>
-          {actionText}
-        </Button>
-      </Stack>
-    </>
-  );
-}

package/src/components/barcodes/BarcodeScanDialog.tsx

@@ -1,101 +0,0 @@
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import type { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import { t } from '@lingui/core/macro';
-import { Box, Divider, Modal } from '@mantine/core';
-import { useCallback, useState } from 'react';
-import { type NavigateFunction, useNavigate } from 'react-router-dom';
-import { api } from '../../App';
-import { extractErrorMessage } from '../../functions/api';
-import { getDetailUrl } from '../../functions/urls';
-import { useUserState } from '../../states/UserState';
-import { StylishText } from '../items/StylishText';
-import { ModelInformationDict } from '../render/ModelType';
-import { BarcodeInput } from './BarcodeInput';
-
-export default function BarcodeScanDialog({
-  title,
-  opened,
-  onClose
-}: Readonly<{
-  title?: string;
-  opened: boolean;
-  onClose: () => void;
-}>) {
-  const navigate = useNavigate();
-
-  return (
-    <Modal
-      size='lg'
-      opened={opened}
-      onClose={onClose}
-      title={<StylishText size='xl'>{title ?? t`Scan Barcode`}</StylishText>}
-    >
-      <Divider />
-      <Box>
-        <ScanInputHandler navigate={navigate} onClose={onClose} />
-      </Box>
-    </Modal>
-  );
-}
-export function ScanInputHandler({
-  onClose,
-  navigate
-}: Readonly<{ onClose: () => void; navigate: NavigateFunction }>) {
-  const [error, setError] = useState<string>('');
-  const [processing, setProcessing] = useState<boolean>(false);
-  const user = useUserState();
-
-  const onScan = useCallback((barcode: string) => {
-    if (!barcode || barcode.length === 0) {
-      return;
-    }
-
-    setProcessing(true);
-
-    api
-      .post(apiUrl(ApiEndpoints.barcode), {
-        barcode: barcode
-      })
-      .then((response) => {
-        setError('');
-
-        const data = response.data ?? {};
-        let match = false;
-
-        // Find the matching model type
-        for (const model_type of Object.keys(ModelInformationDict)) {
-          if (data[model_type]?.['pk']) {
-            if (user.hasViewPermission(model_type as ModelType)) {
-              const url = getDetailUrl(
-                model_type as ModelType,
-                data[model_type]['pk']
-              );
-              onClose();
-              navigate(url);
-              match = true;
-              break;
-            }
-          }
-        }
-
-        if (!match) {
-          setError(t`No matching item found`);
-        }
-      })
-      .catch((error) => {
-        const _error = extractErrorMessage({
-          error: error,
-          field: 'error',
-          defaultMessage: t`Failed to scan barcode`
-        });
-
-        setError(_error);
-      })
-      .finally(() => {
-        setProcessing(false);
-      });
-  }, []);
-
-  return <BarcodeInput onScan={onScan} error={error} processing={processing} />;
-}

package/src/components/barcodes/BarcodeScanItem.tsx

@@ -1,23 +0,0 @@
-import type { ModelType } from '@lib/enums/ModelType';
-
-/**
- * Interface defining a single barcode scan item
- * @param id: Unique identifier for the scan
- * @param barcode: Scanned barcode data
- * @param data: Data returned from the server
- * @param instance: Instance of the scanned item (if discovered)
- * @param timestamp: Date and time of the scan
- * @param source: Source of the scan (e.g. 'barcode', 'QR code')
- * @param model: Model type of the scanned item
- * @param pk: Primary key of the scanned item
- */
-export interface BarcodeScanItem {
-  id: string;
-  barcode: string;
-  data?: any;
-  instance?: any;
-  timestamp: Date;
-  source: string;
-  model?: ModelType;
-  pk?: string;
-}

package/src/components/barcodes/QRCode.tsx

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

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

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

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

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

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

@@ -1,40 +0,0 @@
-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>
-  );
-}