- FIX: Fixed issues with germplasm autocomplete selection.

- ADD: Added QR code input to germplasm addition modal.
-

Author: sebastian-raubach

src/App.vue

@@ -6,6 +6,7 @@
 
         <v-img
           class="ms-4"
+          style="cursor: pointer" @click="$router.push('/')"
           src="/img/gridscore-next.svg"
           max-height="40"
           max-width="40"
@@ -111,7 +112,7 @@
 
     <ConfirmModal />
     <ChangelogModal />
-    <v-snackbar-queue timeout="6000" location="top" v-model="snackbarQueue" />
+    <v-snackbar-queue timeout="4000" location="top" v-model="snackbarQueue" />
     <v-overlay
       :model-value="loading"
       class="align-center justify-center"

src/components.d.ts

@@ -55,6 +55,7 @@ declare module 'vue' {
     PlotCanvas: typeof import('./components/data/PlotCanvas.vue')['default']
     PlotDataInformation: typeof import('./components/plot/PlotDataInformation.vue')['default']
     PlotInformation: typeof import('./components/plot/PlotInformation.vue')['default']
+    QRScanInput: typeof import('./components/inputs/QRScanInput.vue')['default']
     ReplicateHeatmap: typeof import('./components/chart/ReplicateHeatmap.vue')['default']
     ResponsiveButton: typeof import('./components/util/ResponsiveButton.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/inputs/GermplasmAutocomplete.vue

@@ -23,7 +23,7 @@
       :prepend-inner-icon="mdiMagnify"
     >
       <template #prepend>
-        <v-btn :icon="mdiQrcodeScan" v-tooltip:top="$t('tooltipScanQRCode')" @click="showCamera = !showCamera" :color="showCamera ? 'info' : undefined" />
+        <v-btn :icon="mdiQrcodeScan" v-tooltip:top="$t('tooltipScanQRCode')" @click="toggleCamera" :color="showCamera ? 'info' : undefined" />
       </template>
 
       <template #append v-if="supportsNfc">
@@ -40,11 +40,25 @@
       </template>
     </v-autocomplete>
 
-    <QrcodeStream
-      v-if="showCamera"
-      :formats="['qr_code', 'code_128', 'code_39', 'upc_a', 'upc_e']"
-      @detect="onDetect"
-    />
+    <v-bottom-sheet
+      v-if="scanInBottomSheet"
+      v-model="bottomSheetVisible"
+      inset
+      max-height="75vh"
+    >
+      <QrcodeStream
+        v-if="showCamera"
+        :formats="['qr_code', 'code_128', 'code_39', 'upc_a', 'upc_e']"
+        @detect="onDetect"
+      />
+    </v-bottom-sheet>
+    <template v-else>
+      <QrcodeStream
+        v-if="showCamera"
+        :formats="['qr_code', 'code_128', 'code_39', 'upc_a', 'upc_e']"
+        @detect="onDetect"
+      />
+    </template>
   </div>
 </template>
 
@@ -64,24 +78,39 @@
   const supportsNfc = ref(false)
   const showCamera = ref(false)
   const abortController = shallowRef<AbortController>()
+  const bottomSheetVisible = ref(false)
 
   export interface GermplasmAutoCompleteProps {
     trial: TrialPlus
     density?: 'default' | 'comfortable' | 'compact'
     multiple?: boolean
     label?: string
     hint?: string
+    scanInBottomSheet?: boolean
   }
 
   const compProps = withDefaults(defineProps<GermplasmAutoCompleteProps>(), {
     density: 'default',
     multiple: false,
     label: 'formLabelSearch',
+    scanInBottomSheet: false,
   })
 
   const searchField = useTemplateRef('searchField')
   const performanceMode = computed(() => store.storePerformanceMode === true || trialGermplasm.value.length > 1000)
 
+  function toggleCamera () {
+    if (compProps.scanInBottomSheet) {
+      bottomSheetVisible.value = true
+
+      nextTick(() => {
+        showCamera.value = !showCamera.value
+      })
+    } else {
+      showCamera.value = !showCamera.value
+    }
+  }
+
   function getTrialGermplasm () {
     const data = getTrialDataCached()
 
@@ -183,6 +212,10 @@
     getTrialGermplasm()
   })
 
+  watch(bottomSheetVisible, async () => {
+    showCamera.value = false
+  })
+
   onMounted(() => {
     supportsNfc.value = 'NDEFReader' in window
 

src/components/inputs/QRScanInput.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-textarea v-model="model" :label="label" :hint="hint" :persistent-hint="hint !== undefined && hint !== ''" v-if="textarea">
+    <template #append-inner>
+      <v-btn :icon="mdiQrcodeScan" v-tooltip:top="localTooltip" @click="showCamera = !showCamera" />
+    </template>
+  </v-textarea>
+  <v-text-field v-model="model" :label="label" :hint="hint" :persistent-hint="hint !== undefined && hint !== ''" v-else>
+    <template #append>
+      <v-btn :icon="mdiQrcodeScan" v-tooltip:top="localTooltip" @click="showCamera = !showCamera" />
+    </template>
+  </v-text-field>
+
+  <QrcodeStream
+    v-if="showCamera"
+    :formats="formats"
+    @detect="onDetect"
+  />
+</template>
+
+<script setup lang="ts">
+  import { mdiQrcodeScan } from '@mdi/js'
+  import { useI18n } from 'vue-i18n'
+  import { QrcodeStream, type BarcodeFormat, type DetectedBarcode } from 'vue-qrcode-reader'
+
+  const { t } = useI18n()
+
+  export interface QRScanInputProps {
+    label: string
+    hint?: string
+    tooltip?: string
+    textarea?: boolean
+    formats?: BarcodeFormat[]
+  }
+
+  const model = defineModel<string>()
+
+  const showCamera = ref(false)
+  const localTooltip = computed(() => compProps.tooltip || t('buttonScanQR'))
+
+  const compProps = withDefaults(defineProps<QRScanInputProps>(), {
+    textarea: false,
+    formats: () => ['qr_code'],
+  })
+
+  function onDetect (detectedCodes: DetectedBarcode[]) {
+    if (detectedCodes && detectedCodes.length > 0) {
+      let c = detectedCodes[0]?.rawValue
+
+      if (c) {
+        if (c.includes('/')) {
+          c = c.slice(c.lastIndexOf('/') + 1)
+        }
+
+        if (compProps.textarea && model.value) {
+          model.value += `\n${c}`
+        } else {
+          model.value = c
+        }
+        showCamera.value = false
+
+        nextTick(() => emit('code-scanned'))
+      }
+    }
+  }
+
+  const emit = defineEmits(['code-scanned'])
+</script>

src/components/modals/AddTrialGermplasmModal.vue

@@ -14,17 +14,17 @@
                 <v-btn value="pedigree" :text="$t('formCheckboxSetupShowPedigree')" :prepend-icon="mdiFamilyTree" />
               </v-btn-toggle>
 
-              <v-textarea
+              <QRScanInput
+                v-model="areaInput"
+                textarea
                 :label="$t('formLabelAddGermplasmName')"
                 :hint="$t('formDescriptionAddGermplasm')"
-                persistent-hint
-                v-model="areaInput"
-              >
-                <template #append-inner>
-                  <v-btn :icon="mdiPlus" v-tooltip:top="$t('buttonAdd')" @click="addFromInput" />
-                </template>
-              </v-textarea>
+                :tooltip="$t('tooltipScanQRCodeAddGermplasm')"
+                :formats="['qr_code', 'code_128', 'code_39', 'ean_8', 'ean_13']"
+              />
             </div>
+
+            <v-btn :prepend-icon="mdiPlus" color="primary" :disabled="areaInput === undefined || areaInput.trim().length === 0" class="mt-2" :text="$t('buttonAdd')" @click="addFromInput" />
           </template>
         </v-card>
 
@@ -42,7 +42,7 @@
         </v-virtual-scroll>
 
         <div class="">
-          <v-btn v-if="hasErrors || hasWarnings" @click="bottomSheetVisible = true" :text="$t('formFeedbackLayout', feedback.length)" :prepend-icon="hasErrors ? mdiAlertCircle : mdiAlert" :color="hasErrors ? 'error' : 'warning'" />
+          <v-btn v-if="hasErrors || hasWarnings" @click="bottomSheetVisible = true" :text="$t('formFeedbackLayout', feedback?.length || 0)" :prepend-icon="hasErrors ? mdiAlertCircle : mdiAlert" :color="hasErrors ? 'error' : 'warning'" />
         </div>
       </template>
 
@@ -82,6 +82,7 @@
   import emitter from 'tiny-emitter/instance'
   import type { LayoutFeedback } from '@/components/setup/GermplasmLayoutTable.vue'
   import { useI18n } from 'vue-i18n'
+  import QRScanInput from '@/components/inputs/QRScanInput.vue'
 
   const compProps = defineProps<{
     trial: TrialPlus
@@ -93,21 +94,21 @@
   const newGermplasm = ref<CellMetadata[]>([])
   const visibleFields = ref<('treatment' | 'friendlyName' | 'pedigree' | 'barcode')[]>([])
   const areaInput = ref<string>()
-  const feedback = ref<LayoutFeedback[]>([])
+  const feedback = ref<LayoutFeedback[] | undefined>()
   const bottomSheetVisible = ref(false)
 
   let uniqueNames = new Set<string>()
   let uniqueBarcodes = new Set<string>()
 
   const hasErrors = computed(() => feedback.value && feedback.value.some(f => f.type === 'error'))
   const hasWarnings = computed(() => feedback.value && feedback.value.some(f => f.type === 'warning'))
-  const canContinue = computed(() => canCheck.value && hasErrors.value === false)
+  const canContinue = computed(() => canCheck.value && feedback.value && hasErrors.value === false)
   const canCheck = computed(() => newGermplasm.value.length > 0)
 
   function show () {
     dialog.value = true
     areaInput.value = undefined
-    feedback.value = []
+    feedback.value = undefined
 
     getTrialData(compProps.trial.localId || '')
       .then(data => {
@@ -127,7 +128,7 @@
   function hide () {
     newGermplasm.value = []
     areaInput.value = undefined
-    feedback.value = []
+    feedback.value = undefined
     dialog.value = false
   }
   function check () {
@@ -138,7 +139,7 @@
       const barcode = cell.barcode
       if (barcode) {
         if (barcodeSet.has(barcode)) {
-          feedback.value.push({
+          feedback.value?.push({
             type: 'error',
             message: t('formFeedbackSetupDuplicateBarcode', { columnIndex: 1, rowIndex: index + 1, germplasm: cell.germplasm, rep: cell.rep, barcode: barcode }),
           })
@@ -148,7 +149,7 @@
 
       const displayName = `${cell.germplasm}|${cell.rep}`
       if (germplasmSet.has(displayName)) {
-        feedback.value.push({
+        feedback.value?.push({
           type: 'warning',
           message: t('formFeedbackSetupDuplicateGermplasmRep', { columnIndex: 1, rowIndex: index + 1, germplasm: cell.germplasm, rep: cell.rep || 'N/A' }),
         })
@@ -158,7 +159,7 @@
     })
   }
   function save () {
-    if (!feedback.value.some(f => f.type === 'error')) {
+    if (!feedback.value?.some(f => f.type === 'error')) {
       addTrialGermplasm(compProps.trial.localId || '', newGermplasm.value)
         .then(() => {
           emitter.emit('trials-updated')

src/components/trial/TrialImport.vue

@@ -28,16 +28,12 @@
           </template>
         </v-card>
 
-        <v-text-field v-model="shareCode" :label="$t('formLabelTrialImportCode')" :hint="$t('formDescriptionTrialImportCode')" persistent-hint>
-          <template #append>
-            <v-btn :icon="mdiQrcodeScan" v-tooltip:top="$t('buttonScanQR')" @click="showCamera = !showCamera" />
-          </template>
-        </v-text-field>
-
-        <QrcodeStream
-          v-if="showCamera"
-          :formats="['qr_code']"
-          @detect="onDetect"
+        <QRScanInput
+          v-model="shareCode"
+          :label="$t('formLabelTrialImportCode')"
+          :hint="$t('formDescriptionTrialImportCode')"
+          :tooltip="$t('buttonScanQR')"
+          @code-scanned="getTrial"
         />
 
         <p class="text-error mt-3 mb-0" v-if="serverError"><span v-html="serverError" /></p>
@@ -92,10 +88,10 @@
   import { coreStore } from '@/stores/app'
   import { UseOnline } from '@vueuse/components'
   import { useI18n } from 'vue-i18n'
-  import { QrcodeStream, type DetectedBarcode } from 'vue-qrcode-reader'
 
   import emitter from 'tiny-emitter/instance'
-  import { mdiFolderTable, mdiInformation, mdiLanDisconnect, mdiMagnify, mdiNotebookCheck, mdiNotebookPlus, mdiQrcodeScan } from '@mdi/js'
+  import { mdiFolderTable, mdiInformation, mdiLanDisconnect, mdiMagnify, mdiNotebookCheck, mdiNotebookPlus } from '@mdi/js'
+  import QRScanInput from '@/components/inputs/QRScanInput.vue'
 
   const compProps = defineProps<{
     code?: string
@@ -109,7 +105,6 @@
   const loadFromRemote = ref(false)
   const remoteUrl = ref<string>()
   const remoteToken = ref<string>()
-  const showCamera = ref(false)
   const bottomSheetVisible = ref(false)
   const trialGroup = ref<string>()
   const noChangeRequired = ref(false)
@@ -123,23 +118,6 @@
   const serverError = ref<string>()
   const infoMessage = ref<string>()
 
-  function onDetect (detectedCodes: DetectedBarcode[]) {
-    if (detectedCodes && detectedCodes.length > 0) {
-      let c = detectedCodes[0]?.rawValue
-
-      if (c) {
-        if (c.includes('/')) {
-          c = c.slice(c.lastIndexOf('/') + 1)
-        }
-
-        shareCode.value = c
-        showCamera.value = false
-
-        getTrial()
-      }
-    }
-  }
-
   function getTrial () {
     if (!shareCode.value) {
       return

src/pages/collect/grid.vue

@@ -72,6 +72,7 @@
       <GermplasmAutocomplete
         :trial="trial"
         v-model="searchMatch"
+        scan-in-bottom-sheet
         min-width="120px"
         max-width="min(50vw, 250px)"
         density="compact"

src/pages/collect/input.vue

@@ -49,7 +49,7 @@
 
   const trial = ref<TrialPlus>()
   const geolocation = ref<Geolocation>()
-  const searchMatch = ref<CellPlus[]>([])
+  const searchMatch = ref<CellPlus>()
 
   const dataEntryModal = useTemplateRef('dataEntryModal')
   const searchField = useTemplateRef('searchField')
@@ -120,9 +120,9 @@
   }
 
   watch(searchMatch, async newValue => {
-    if (newValue && newValue.length > 0 && newValue[0]) {
-      selectPlot(newValue[0].row || 0, newValue[0].column || 0)
-      searchMatch.value = []
+    if (newValue) {
+      selectPlot(newValue.row || 0, newValue.column || 0)
+      searchMatch.value = undefined
     }
   })