@inventreedb/ui 0.0.1 → 0.0.3

package/src/components/barcodes/BarcodeCameraInput.tsx

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

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

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