@inventreedb/ui 0.0.1

package/src/components/barcodes/BarcodeCameraInput.tsx

@@ -0,0 +1,207 @@
+import { t } from '@lingui/core/macro';
+import { ActionIcon, Container, Group, Select, Stack } from '@mantine/core';
+import { useDocumentVisibility, useLocalStorage } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import {
+  IconCamera,
+  IconPlayerPlayFilled,
+  IconPlayerStopFilled,
+  IconX
+} from '@tabler/icons-react';
+import { type CameraDevice, Html5Qrcode } from 'html5-qrcode';
+import { useEffect, useState } from 'react';
+import Expand from '../items/Expand';
+import type { BarcodeInputProps } from './BarcodeInput';
+
+export default function BarcodeCameraInput({
+  onScan
+}: Readonly<BarcodeInputProps>) {
+  const [qrCodeScanner, setQrCodeScanner] = useState<Html5Qrcode | null>(null);
+  const [camId, setCamId] = useLocalStorage<CameraDevice | null>({
+    key: 'camId',
+    defaultValue: null
+  });
+  const [cameras, setCameras] = useState<any[]>([]);
+  const [cameraValue, setCameraValue] = useState<string | null>(null);
+  const [scanningEnabled, setScanningEnabled] = useState<boolean>(false);
+  const [wasAutoPaused, setWasAutoPaused] = useState<boolean>(false);
+  const documentState = useDocumentVisibility();
+
+  let lastValue = '';
+
+  // Mount QR code once we are loaded
+  useEffect(() => {
+    setQrCodeScanner(new Html5Qrcode('reader'));
+
+    // load cameras
+    Html5Qrcode.getCameras().then((devices) => {
+      if (devices?.length) {
+        setCameras(devices);
+      }
+    });
+  }, []);
+
+  // set camera value from id
+  useEffect(() => {
+    if (camId) {
+      setCameraValue(camId.id);
+    }
+  }, [camId]);
+
+  // Stop/start when leaving or reentering page
+  useEffect(() => {
+    if (scanningEnabled && documentState === 'hidden') {
+      btnStopScanning();
+      setWasAutoPaused(true);
+    } else if (wasAutoPaused && documentState === 'visible') {
+      btnStartScanning();
+      setWasAutoPaused(false);
+    }
+  }, [documentState]);
+
+  // Scanner functions
+  function onScanSuccess(decodedText: string) {
+    qrCodeScanner?.pause();
+
+    // dedouplication
+    if (decodedText === lastValue) {
+      qrCodeScanner?.resume();
+      return;
+    }
+    lastValue = decodedText;
+
+    // submit value upstream
+    onScan?.(decodedText);
+
+    qrCodeScanner?.resume();
+  }
+
+  function onScanFailure(error: string) {
+    if (
+      error !=
+      'QR code parse error, error = NotFoundException: No MultiFormat Readers were able to detect the code.'
+    ) {
+      console.warn(`Code scan error = ${error}`);
+    }
+  }
+
+  function btnStartScanning() {
+    if (camId && qrCodeScanner && !scanningEnabled) {
+      qrCodeScanner
+        .start(
+          camId.id,
+          { fps: 10, qrbox: { width: 250, height: 250 } },
+          (decodedText) => {
+            onScanSuccess(decodedText);
+          },
+          (errorMessage) => {
+            onScanFailure(errorMessage);
+          }
+        )
+        .catch((err: string) => {
+          showNotification({
+            title: t`Error while scanning`,
+            message: err,
+            color: 'red',
+            icon: <IconX />
+          });
+        });
+      setScanningEnabled(true);
+    }
+  }
+
+  function btnStopScanning() {
+    if (qrCodeScanner && scanningEnabled) {
+      qrCodeScanner.stop().catch((err: string) => {
+        showNotification({
+          title: t`Error while stopping`,
+          message: err,
+          color: 'red',
+          icon: <IconX />
+        });
+      });
+      setScanningEnabled(false);
+    }
+  }
+
+  // on value change
+  useEffect(() => {
+    if (cameraValue === null) return;
+    if (cameraValue === camId?.id) {
+      return;
+    }
+
+    const cam = cameras.find((cam) => cam.id === cameraValue);
+
+    // stop scanning if cam changed while scanning
+    if (qrCodeScanner && scanningEnabled) {
+      // stop scanning
+      qrCodeScanner.stop().then(() => {
+        // change ID
+        setCamId(cam);
+        // start scanning
+        qrCodeScanner.start(
+          cam.id,
+          { fps: 10, qrbox: { width: 250, height: 250 } },
+          (decodedText) => {
+            onScanSuccess(decodedText);
+          },
+          (errorMessage) => {
+            onScanFailure(errorMessage);
+          }
+        );
+      });
+    } else {
+      setCamId(cam);
+    }
+  }, [cameraValue]);
+
+  const placeholder = t`Start scanning by selecting a camera and pressing the play button.`;
+
+  return (
+    <Stack gap='xs'>
+      <Group gap='xs' preventGrowOverflow>
+        <Expand>
+          <Select
+            leftSection={<IconCamera />}
+            value={cameraValue}
+            onChange={setCameraValue}
+            data={cameras.map((device) => {
+              return { value: device.id, label: device.label };
+            })}
+          />
+        </Expand>
+
+        {scanningEnabled ? (
+          <ActionIcon
+            size='lg'
+            color='red'
+            onClick={btnStopScanning}
+            title={t`Stop scanning`}
+            variant='transparent'
+          >
+            <IconPlayerStopFilled />
+          </ActionIcon>
+        ) : (
+          <ActionIcon
+            size='lg'
+            color='green'
+            onClick={btnStartScanning}
+            title={t`Start scanning`}
+            disabled={!camId}
+            variant='transparent'
+          >
+            <IconPlayerPlayFilled />
+          </ActionIcon>
+        )}
+      </Group>
+      {scanningEnabled ? (
+        <Container px={0} id='reader' w={'100%'} mih='300px' />
+      ) : (
+        <Container px={0} id='reader' w={'100%'}>
+          {placeholder}
+        </Container>
+      )}
+    </Stack>
+  );
+}

package/src/components/barcodes/BarcodeInput.tsx

@@ -0,0 +1,127 @@
+import { t } from '@lingui/core/macro';
+import {
+  Alert,
+  Box,
+  Card,
+  Divider,
+  LoadingOverlay,
+  SegmentedControl,
+  type SegmentedControlItem,
+  Stack,
+  Tooltip
+} from '@mantine/core';
+import { IconCamera, IconScan } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+
+import { useLocalStorage } from '@mantine/hooks';
+import { useGlobalSettingsState } from '../../states/SettingsState';
+import { Boundary } from '../Boundary';
+import BarcodeCameraInput from './BarcodeCameraInput';
+import BarcodeKeyboardInput from './BarcodeKeyboardInput';
+
+export type BarcodeInputProps = {
+  onScan: (barcode: string) => void;
+  processing?: boolean;
+  error?: string;
+  label?: string;
+  actionText?: string;
+};
+
+export function BarcodeInput({
+  onScan,
+  error,
+  processing,
+  label = t`Barcode`,
+  actionText = t`Scan`
+}: Readonly<BarcodeInputProps>) {
+  const globalSettings = useGlobalSettingsState();
+
+  const [barcode, setBarcode] = useState<string>('');
+
+  const [inputType, setInputType] = useLocalStorage<string | null>({
+    key: 'barcodeInputType',
+    defaultValue: 'scanner'
+  });
+
+  const scanningOptions: SegmentedControlItem[] = useMemo(() => {
+    const options: SegmentedControlItem[] = [];
+
+    if (globalSettings.isSet('BARCODE_WEBCAM_SUPPORT', true)) {
+      options.push({
+        value: 'camera',
+        label: (
+          <Tooltip label={t`Camera Input`}>
+            <IconCamera size={20} aria-label='barcode-input-camera' />
+          </Tooltip>
+        )
+      });
+    }
+
+    options.push({
+      value: 'scanner',
+      label: (
+        <Tooltip label={t`Scanner Input`}>
+          <IconScan size={20} aria-label='barcode-input-scanner' />
+        </Tooltip>
+      )
+    });
+
+    return options;
+  }, [globalSettings]);
+
+  const onScanBarcode = useCallback(
+    (barcode: string) => {
+      setBarcode(barcode);
+      onScan(barcode);
+    },
+    [onScan]
+  );
+
+  const scannerInput = useMemo(() => {
+    switch (inputType) {
+      case 'camera':
+        return <BarcodeCameraInput onScan={onScanBarcode} />;
+      case 'scanner':
+      default:
+        return <BarcodeKeyboardInput onScan={onScanBarcode} />;
+    }
+  }, [inputType, onScan]);
+
+  return (
+    <Box>
+      <Boundary label='BarcodeInput'>
+        <LoadingOverlay visible={processing} />
+        <Stack gap='xs'>
+          <SegmentedControl
+            aria-label='barcode-input-type'
+            size='xs'
+            data={scanningOptions}
+            value={inputType || 'scanner'}
+            onChange={setInputType}
+          />
+          <Divider />
+          <Card p='sm' withBorder>
+            {barcode ? (
+              <Alert color='blue' title={t`Barcode Data`} p='xs'>
+                {barcode}
+              </Alert>
+            ) : (
+              <Alert color='yellow' title={t`No barcode data`} p='xs'>
+                {t`Scan or enter barcode data`}
+              </Alert>
+            )}
+            {error && (
+              <Alert color='red' title={t`Error`} p='xs'>
+                {error}
+              </Alert>
+            )}
+          </Card>
+
+          <Card p='sm' withBorder>
+            {scannerInput}
+          </Card>
+        </Stack>
+      </Boundary>
+    </Box>
+  );
+}

package/src/components/barcodes/BarcodeKeyboardInput.tsx

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

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

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