Browse Source

QR Scanner: little refactoring and clenaup

pull/4898/head
Daniel Spaude 2 years ago
parent
commit
225086bf56
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 94
      packages/nc-gui/components/smartsheet/qr-scanner-button/QrScannerButton.vue
  2. 4
      packages/nc-gui/lang/en.json

94
packages/nc-gui/components/smartsheet/qr-scanner-button/QrScannerButton.vue

@ -1,6 +1,5 @@
<script setup lang="ts">
import type { SelectProps } from 'ant-design-vue'
import { UITypes } from 'nocodb-sdk'
import { ref } from 'vue'
import { StreamBarcodeReader } from 'vue-barcode-reader'
import { NOCO } from '#imports'
@ -16,16 +15,12 @@ const { project } = useProject()
const view = inject(ActiveViewInj, ref())
const qrCodeFieldOptions = ref<SelectProps['options']>([])
// interface Entry {
// name: string
// }
const codeFieldOptions = ref<SelectProps['options']>([])
onBeforeMount(init)
async function init() {
qrCodeFieldOptions.value = meta?.value?.columns!.map((field) => {
codeFieldOptions.value = meta?.value?.columns!.map((field) => {
return {
value: field.id,
label: field.title,
@ -33,39 +28,56 @@ async function init() {
})
}
const showQrCodeScanner = ref(false)
// const entry = ref<Entry | null>(null)
const showCodeScannerOverlay = ref(false)
const selectedCodeColumnIdToScanFor = ref('')
const lastScannedCode = ref('')
const scannerIsReady = ref(false)
const onLoaded = async () => {
scannerIsReady.value = true
}
const showScannerField = computed(() => scannerIsReady.value && selectedCodeColumnIdToScanFor.value !== '')
const showPleaseSelectColumnMessage = computed(() => !selectedCodeColumnIdToScanFor.value)
const showScannerIsLoadingMessage = computed(() => !!selectedCodeColumnIdToScanFor.value && !scannerIsReady.value)
const onDecode = async (qrCodeValue: string) => {
showQrCodeScanner.value = false
const onDecode = async (codeValue: string) => {
if (!showScannerField.value || codeValue === lastScannedCode.value) {
return
}
try {
const nameOfSelectedColumnToScanFor = meta.value?.columns?.find(
(column) => column.id === selectedCodeColumnIdToScanFor.value,
)?.title
const whereClause = `(${nameOfSelectedColumnToScanFor},eq,${qrCodeValue})`
// const foundRowsForQrCode = await $api.dbViewRow.findOne(NOCO, project.value!.id!, meta.value!.id!, view.value!.title!, {
const foundRowsForQrCode = (
const whereClause = `(${nameOfSelectedColumnToScanFor},eq,${codeValue})`
const foundRowsForCode = (
await $api.dbViewRow.list(NOCO, project.value!.id!, meta.value!.id!, view.value!.title!, {
where: whereClause,
})
).list
if (foundRowsForQrCode.length === 0) {
if (foundRowsForCode.length !== 1) {
showCodeScannerOverlay.value = true
lastScannedCode.value = codeValue
setTimeout(() => {
lastScannedCode.value = ''
}, 4000)
if (foundRowsForCode.length === 0) {
// extract into localisation file
message.info('No row found for this QR code')
showQrCodeScanner.value = true
return
} else if (foundRowsForQrCode.length > 1) {
// TODO: improve this message and extract into localisation file
message.warn('More than one row found for this QR code. Currently only unique QR codes are supported.')
showQrCodeScanner.value = true
message.info(`No row found for this code for column '${nameOfSelectedColumnToScanFor}'.`)
}
if (foundRowsForCode.length > 1) {
// extract into localisation file
message.warn('More than one row found for this code. Currently only unique codes are supported.')
}
return
}
message.info('Found row for this QR code - opening edit mode...')
const primaryKeyValueForFoundRow = extractPkFromRow(foundRowsForQrCode[0], meta!.value!.columns!)
showCodeScannerOverlay.value = false
lastScannedCode.value = ''
const primaryKeyValueForFoundRow = extractPkFromRow(foundRowsForCode[0], meta!.value!.columns!)
router.push({
query: {
@ -78,53 +90,47 @@ const onDecode = async (qrCodeValue: string) => {
}
}
const scannerIsReady = ref(false)
const onLoaded = async () => {
scannerIsReady.value = true
}
// TODO: ensure that when modal is closed, scannerIsReady gets set back to false
</script>
<template>
<div>
<a-button class="nc-btn-share-view nc-toolbar-btn" @click="showQrCodeScanner = true">
<a-button class="nc-btn-share-view nc-toolbar-btn" @click="showCodeScannerOverlay = true">
<div class="flex items-center gap-1">
<QrCodeScan />
<!-- Share View -->
<span class="!text-sm font-weight-normal"> {{ $t('activity.scanQrCode') }}</span>
<span class="!text-sm font-weight-normal"> {{ $t('activity.scanCode') }}</span>
</div>
</a-button>
<a-modal
v-model:visible="showQrCodeScanner"
:class="{ active: showQrCodeScanner }"
v-model:visible="showCodeScannerOverlay"
:class="{ active: showCodeScannerOverlay }"
:closable="false"
width="28rem"
centered
:footer="null"
wrap-class-name="nc-modal-generate-token"
destroy-on-close
@cancel="scannerIsReady = false"
>
<div class="relative flex flex-col h-full">
<a-form-item :label="$t('labels.qrCodeColumn')">
<a-form-item :label="$t('labels.columnToScanFor')">
<a-select
v-model:value="selectedCodeColumnIdToScanFor"
class="w-full"
:options="qrCodeFieldOptions"
:options="codeFieldOptions"
placeholder="Select a Code Field (QR or Barcode)"
not-found-content="No Code Field can be found. Please create one first."
/>
</a-form-item>
<!-- <qrcode-stream v-if="showQrCodeScanner" @decode="onDecode" style="width: 100%; height: 100%"></qrcode-stream> -->
<div>
<StreamBarcodeReader v-show="scannerIsReady" @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
<div v-if="!scannerIsReady">Loading the scanner...</div>
<StreamBarcodeReader v-show="showScannerField" @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
<div v-if="showPleaseSelectColumnMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
Please select a column
</div>
<div v-if="showScannerIsLoadingMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
Loading the scanner...
</div>
</div>
</div>
</a-modal>
<!-- <p v-if="entry">Entry found: {{ entry.name }}</p> -->
</div>
</template>

4
packages/nc-gui/lang/en.json

@ -215,7 +215,7 @@
"viewName": "View name",
"viewLink": "View Link",
"columnName": "Column Name",
"qrCodeColumn": "QR Code Column",
"columnToScanFor": "Column to scan",
"columnType": "Column Type",
"roleName": "Role Name",
"roleDescription": "Role Description",
@ -398,7 +398,7 @@
"changePwd": "Change Password",
"createView": "Create a View",
"shareView": "Share View",
"scanQrCode": "Scan QR Code",
"scanCode": "Find row by scan",
"listSharedView": "Shared View List",
"ListView": "Views List",
"copyView": "Copy view",

Loading…
Cancel
Save