@inventreedb/ui 0.0.1 → 0.0.3

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>
-  );
-}

package/src/components/buttons/PrintingActions.tsx

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