Feature/auto confirm barcode scanner (#12859)

* Add autoConfirm scan

* Don't auto confirm if validation fails

* Set status light to red if invalid
This commit is contained in:
melohagan 2024-01-25 12:08:00 +00:00 committed by GitHub
parent a0b2ab45cf
commit 830563fead
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 2 deletions

View File

@ -3969,6 +3969,12 @@
"key": "allowManualEntry", "key": "allowManualEntry",
"defaultValue": false "defaultValue": false
}, },
{
"type": "boolean",
"label": "Auto confirm",
"key": "autoConfirm",
"defaultValue": false
},
{ {
"type": "boolean", "type": "boolean",
"label": "Play sound on scan", "label": "Play sound on scan",

View File

@ -14,11 +14,13 @@
export let value export let value
export let disabled = false export let disabled = false
export let allowManualEntry = false export let allowManualEntry = false
export let autoConfirm = false
export let scanButtonText = "Scan code" export let scanButtonText = "Scan code"
export let beepOnScan = false export let beepOnScan = false
export let beepFrequency = 2637 export let beepFrequency = 2637
export let customFrequency = 1046 export let customFrequency = 1046
export let preferredCamera = "environment" export let preferredCamera = "environment"
export let validator
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -41,6 +43,9 @@
beep() beep()
} }
dispatch("change", decodedText) dispatch("change", decodedText)
if (autoConfirm && !validator?.(decodedText)) {
camModal?.hide()
}
} }
} }
@ -127,7 +132,11 @@
<div class="scanner-video-wrapper"> <div class="scanner-video-wrapper">
{#if value && !manualMode} {#if value && !manualMode}
<div class="scanner-value field-display"> <div class="scanner-value field-display">
{#if validator?.(value)}
<StatusLight negative />
{:else}
<StatusLight positive /> <StatusLight positive />
{/if}
{value} {value}
</div> </div>
{/if} {/if}
@ -183,11 +192,16 @@
</div> </div>
{#if cameraEnabled === true} {#if cameraEnabled === true}
<div class="code-wrap"> <div class="code-wrap">
{#if value} {#if value && !validator?.(value)}
<div class="scanner-value"> <div class="scanner-value">
<StatusLight positive /> <StatusLight positive />
{value} {value}
</div> </div>
{:else if value && validator?.(value)}
<div class="scanner-value">
<StatusLight negative />
{value}
</div>
{:else} {:else}
<div class="scanner-value"> <div class="scanner-value">
<StatusLight neutral /> <StatusLight neutral />

View File

@ -11,6 +11,7 @@
export let defaultValue = "" export let defaultValue = ""
export let onChange export let onChange
export let allowManualEntry export let allowManualEntry
export let autoConfirm
export let scanButtonText export let scanButtonText
export let beepOnScan export let beepOnScan
export let beepFrequency export let beepFrequency
@ -49,11 +50,13 @@
on:change={handleUpdate} on:change={handleUpdate}
disabled={fieldState.disabled || fieldState.readonly} disabled={fieldState.disabled || fieldState.readonly}
{allowManualEntry} {allowManualEntry}
{autoConfirm}
scanButtonText={scanText} scanButtonText={scanText}
{beepOnScan} {beepOnScan}
{beepFrequency} {beepFrequency}
{customFrequency} {customFrequency}
{preferredCamera} {preferredCamera}
validator={fieldState.validator}
/> />
{/if} {/if}
</Field> </Field>