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

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

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

Loading…
Cancel
Save