|
|
|
@ -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 onDecode = async (qrCodeValue: string) => { |
|
|
|
|
showQrCodeScanner.value = 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 (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) { |
|
|
|
|
// 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 |
|
|
|
|
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 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> |
|
|
|
|