[PUI] Barcode scan

src/frontend/src/components/buttons/ScanButton.tsx

@@ -1,25 +1,86 @@
 import { t } from '@lingui/macro';
 import { ActionIcon } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
+import { showNotification } from '@mantine/notifications';
 import { IconQrcode } from '@tabler/icons-react';
+import { useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ApiEndpoints } from '../../enums/ApiEndpoints';
+import type { ModelType } from '../../enums/ModelType';
+import { getDetailUrl } from '../../functions/urls';
+import { useCreateApiFormModal } from '../../hooks/UseForm';
+import type { ApiFormFieldSet } from '../forms/fields/ApiFormField';
+import { ModelInformationDict } from '../render/ModelType';
 
 /**
  * A button which opens the QR code scanner modal
  */
 export function ScanButton() {
-  return (
-    <ActionIcon
-      onClick={() =>
-        openContextModal({
-          modal: 'qr',
-          title: t`Scan Barcode`,
-          innerProps: {}
-        })
+  const navigate = useNavigate();
+  const [scanError, setScanError] = useState<string | null>(null);
+
+  const fields: ApiFormFieldSet = useMemo(() => {
+    return {
+      barcode: {
+        error: scanError || undefined,
+        required: false
+      }
+    };
+  }, [scanError]);
+
+  const onScanSuccess = useCallback((data: any) => {
+    let match = false;
+
+    // Try to find a "match" for the scanned item
+    for (const model_type of Object.keys(ModelInformationDict)) {
+      const model = ModelInformationDict[model_type as ModelType];
+
+      if (model && data[model_type] && data[model_type]?.pk) {
+        // Found a match!
+        const url = getDetailUrl(model_type as ModelType, data[model_type].pk);
+        navigate(url);
+        match = true;
+        break;
       }
-      variant='transparent'
-      title={t`Open Barcode Scanner`}
-    >
-      <IconQrcode />
-    </ActionIcon>
+    }
+
+    if (!match) {
+      showNotification({
+        title: t`No Match`,
+        message: t`No matching item found for scanned barcode`,
+        color: 'red'
+      });
+    }
+  }, []);
+
+  const quickScan = useCreateApiFormModal({
+    title: t`Scan Barcode`,
+    url: ApiEndpoints.barcode,
+    fields: fields,
+    successMessage: '',
+    submitText: t`Scan`,
+    focus: 'barcode',
+    onFormSuccess: (data: any) => {
+      onScanSuccess(data);
+    },
+    onFormError: (error: any) => {
+      // Display error message
+      const response: any = error?.response?.data;
+      setScanError(response?.error ?? response?.barcode ?? null);
+    }
+  });
+
+  return (
+    <>
+      <ActionIcon
+        onClick={() => {
+          quickScan.open();
+        }}
+        variant='transparent'
+        title={t`Open Barcode Scanner`}
+      >
+        <IconQrcode />
+      </ActionIcon>
+      {quickScan.modal}
+    </>
   );
 }

src/frontend/src/components/forms/ApiForm.tsx

@@ -94,7 +94,7 @@ export interface ApiFormProps {
   postFormContent?: JSX.Element;
   successMessage?: string;
   onFormSuccess?: (data: any) => void;
-  onFormError?: () => void;
+  onFormError?: (response: any) => void;
   processFormData?: (data: any) => any;
   table?: TableState;
   modelType?: ModelType;
@@ -482,7 +482,7 @@ export function ApiForm({
           default:
             // Unexpected state on form success
             invalidResponse(response.status);
-            props.onFormError?.();
+            props.onFormError?.(response);
             break;
         }
 
@@ -534,26 +534,30 @@ export function ApiForm({
 
               processErrors(error.response.data);
               setNonFieldErrors(_nonFieldErrors);
+              props.onFormError?.(error);
 
               break;
             default:
               // Unexpected state on form error
               invalidResponse(error.response.status);
-              props.onFormError?.();
+              props.onFormError?.(error);
               break;
           }
         } else {
           showTimeoutNotification();
-          props.onFormError?.();
+          props.onFormError?.(error);
         }
 
         return error;
       });
   };
 
-  const onFormError = useCallback<SubmitErrorHandler<FieldValues>>(() => {
-    props.onFormError?.();
-  }, [props.onFormError]);
+  const onFormError = useCallback<SubmitErrorHandler<FieldValues>>(
+    (error: any) => {
+      props.onFormError?.(error);
+    },
+    [props.onFormError]
+  );
 
   if (optionsLoading || initialDataQuery.isFetching) {
     return (

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -46,6 +46,7 @@ export type ApiFormFieldChoice = {
  * @param required : Whether the field is required
  * @param hidden : Whether the field is hidden
  * @param disabled : Whether the field is disabled
+ * @param error : Optional error message to display
  * @param exclude : Whether to exclude the field from the submitted data
  * @param placeholder : The placeholder text to display
  * @param description : The description to display for the field
@@ -88,6 +89,7 @@ export type ApiFormFieldType = {
   child?: ApiFormFieldType;
   children?: { [key: string]: ApiFormFieldType };
   required?: boolean;
+  error?: string;
   choices?: ApiFormFieldChoice[];
   hidden?: boolean;
   disabled?: boolean;
@@ -256,7 +258,7 @@ export function ApiFormField({
             aria-label={`boolean-field-${fieldName}`}
             radius='lg'
             size='sm'
-            error={error?.message}
+            error={definition.error ?? error?.message}
             onChange={(event) => onChange(event.currentTarget.checked)}
           />
         );
@@ -277,7 +279,7 @@ export function ApiFormField({
             id={fieldId}
             aria-label={`number-field-${field.name}`}
             value={numericalValue}
-            error={error?.message}
+            error={definition.error ?? error?.message}
             decimalScale={definition.field_type == 'integer' ? 0 : 10}
             onChange={(value: number | string | null) => onChange(value)}
             step={1}
@@ -299,7 +301,7 @@ export function ApiFormField({
             ref={field.ref}
             radius='sm'
             value={value}
-            error={error?.message}
+            error={definition.error ?? error?.message}
             onChange={(payload: File | null) => onChange(payload)}
           />
         );
@@ -343,6 +345,7 @@ export function ApiFormField({
     booleanValue,
     control,
     controller,
+    definition,
     field,
     fieldId,
     fieldName,

src/frontend/src/components/forms/fields/ChoiceField.tsx

@@ -63,7 +63,7 @@ export function ChoiceField({
     <Select
       id={fieldId}
       aria-label={`choice-field-${field.name}`}
-      error={error?.message}
+      error={definition.error ?? error?.message}
       radius='sm'
       {...field}
       onChange={onChange}

src/frontend/src/components/forms/fields/DateField.tsx

@@ -61,7 +61,7 @@ export default function DateField({
       radius='sm'
       ref={field.ref}
       type={undefined}
-      error={error?.message}
+      error={definition.error ?? error?.message}
       value={dateValue ?? null}
       clearable={!definition.required}
       onChange={onChange}

src/frontend/src/components/forms/fields/IconField.tsx

@@ -50,7 +50,7 @@ export default function IconField({
           label={definition.label}
           description={definition.description}
           required={definition.required}
-          error={error?.message}
+          error={definition.error ?? error?.message}
           ref={field.ref}
           component='button'
           type='button'

src/frontend/src/components/forms/fields/RelatedModelField.tsx

@@ -284,7 +284,7 @@ export function RelatedModelField({
   return (
     <Input.Wrapper
       {...fieldDefinition}
-      error={error?.message}
+      error={definition.error ?? error?.message}
       styles={{ description: { paddingBottom: '5px' } }}
     >
       <Select

src/frontend/src/components/forms/fields/TableField.tsx

@@ -258,7 +258,7 @@ export function TableFieldExtraRow({
               fieldName={fieldName ?? 'field'}
               fieldDefinition={field}
               defaultValue={defaultValue}
-              error={error}
+              error={fieldDefinition.error ?? error}
             />
           </Group>
         </Table.Td>

src/frontend/src/components/forms/fields/TextField.tsx

@@ -56,15 +56,21 @@ export default function TextField({
       aria-label={`text-field-${field.name}`}
       type={definition.field_type}
       value={rawText || ''}
-      error={error?.message}
+      error={definition.error ?? error?.message}
       radius='sm'
       onChange={(event) => onTextChange(event.currentTarget.value)}
       onBlur={(event) => {
         if (event.currentTarget.value != value) {
           onChange(event.currentTarget.value);
         }
       }}
-      onKeyDown={(event) => onKeyDown(event.code)}
+      onKeyDown={(event) => {
+        if (event.code === 'Enter') {
+          // Bypass debounce on enter key
+          onChange(event.currentTarget.value);
+        }
+        onKeyDown(event.code);
+      }}
       rightSection={
         value && !definition.required ? (
           <IconX size='1rem' color='red' onClick={() => onTextChange('')} />

src/frontend/src/hooks/UseForm.tsx

@@ -48,9 +48,12 @@ export function useApiFormModal(props: ApiFormModalProps) {
         modalClose.current();
         props.onFormSuccess?.(data);
       },
-      onFormError: () => {
-        modalClose.current();
-        props.onFormError?.();
+      onFormError: (error: any) => {
+        if (props.onFormError) {
+          props.onFormError(error);
+        } else {
+          modalClose.current();
+        }
       }
     }),
     [props]