QR Scanner: little refactoring and clenaup

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>

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",