Browse Source

code scanner for forms - WIP

pull/5114/head
Daniel Spaude 2 years ago
parent
commit
f3817f1858
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 35
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

35
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@ -1,5 +1,7 @@
<script lang="ts" setup>
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { ref } from 'vue'
import { StreamBarcodeReader } from 'vue-barcode-reader'
import { useSharedFormStoreOrThrow } from '#imports'
const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
@ -17,6 +19,28 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
}
const showCodeScannerOverlay = ref(false)
const scannerIsReady = ref(false)
const onLoaded = async () => {
scannerIsReady.value = true
}
const showScannerIsLoadingMessage = computed(() => !scannerIsReady.value)
const onDecode = async (codeValue: string) => {
if (!showScannerField.value) {
return
}
try {
showCodeScannerOverlay.value = false
alert(`you scanned "${codeValue}"`)
} catch (error) {
console.error(error)
}
}
</script>
<template>
@ -109,16 +133,12 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
{{ field.description }}
</div>
<div>
SCANNER PLACEHOLDER
<a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true">
<div class="flex items-center gap-1">
<QrCodeScan />
<span class="!text-xs font-weight-normal">
{{ $t('activity.findRowByCodeScan') }}</span
>
<span class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span>
</div>
</a-button>
<a-modal
@ -134,7 +154,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<div class="relative flex flex-col h-full">
<div>
<StreamBarcodeReader
v-show="showScannerField"
v-show="scannerIsReady"
@decode="onDecode"
@loaded="onLoaded"
></StreamBarcodeReader>
@ -145,9 +165,6 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</div>
</a-modal>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save