mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
GitHub
115 changed files with 2005 additions and 356 deletions
@ -0,0 +1,12 @@
|
||||
<script setup lang="ts"> |
||||
const { toggleBetaFeature } = useBetaFeatureToggle() |
||||
</script> |
||||
|
||||
<template> |
||||
<a-tooltip placement="bottomRight"> |
||||
<template #title> |
||||
<span> Toggle Beta Features </span> |
||||
</template> |
||||
<mdi-test-tube class="cursor-pointer" data-testid="beta-feature-toggle-icon" @click="toggleBetaFeature" /> |
||||
</a-tooltip> |
||||
</template> |
||||
@ -1,15 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
function toggleGeodataFeature() { |
||||
geodataToggleState.show = !geodataToggleState.show |
||||
localStorage.setItem('geodataToggleState', JSON.stringify(geodataToggleState.show)) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-tooltip placement="bottomRight"> |
||||
<template #title> |
||||
<span> Toggle GeoData </span> |
||||
</template> |
||||
<mdi-map-marker class="cursor-pointer" data-testid="toggle-geodata-feature-icon" @click="toggleGeodataFeature" /> |
||||
</a-tooltip> |
||||
</template> |
||||
@ -0,0 +1,165 @@
|
||||
<script setup lang="ts"> |
||||
import type { SelectProps } from 'ant-design-vue' |
||||
import { ref } from 'vue' |
||||
import { StreamBarcodeReader } from 'vue-barcode-reader' |
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import { UITypes } from 'nocodb-sdk' |
||||
import { NOCO, storeToRefs } from '#imports' |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const route = useRoute() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const { project } = storeToRefs(useProject()) |
||||
|
||||
const { isMobileMode } = useGlobal() |
||||
|
||||
const view = inject(ActiveViewInj, ref()) |
||||
|
||||
const fieldOptionsOfSupportedColumnsToScanFor = computed<SelectProps['options']>( |
||||
() => |
||||
meta?.value |
||||
?.columns!.filter((column) => column.uidt && [UITypes.QrCode, UITypes.Barcode].includes(column.uidt)) |
||||
.map((field) => { |
||||
return { |
||||
value: field.id, |
||||
label: field.title, |
||||
} |
||||
}) || [], |
||||
) |
||||
|
||||
const getColumnToSearchForByBarOrQrCodeColumnId = (columnId: string): ColumnType => { |
||||
const qrOrBarcodeColumn = meta.value?.columns?.find((column) => column.id === columnId) |
||||
if (!qrOrBarcodeColumn) { |
||||
throw new Error('QrCode or BarCode Column not found') |
||||
} |
||||
let columnIdToSearchFor: string |
||||
if (qrOrBarcodeColumn.uidt === UITypes.QrCode) { |
||||
columnIdToSearchFor = (qrOrBarcodeColumn.colOptions as any).fk_qr_value_column_id |
||||
} else if (qrOrBarcodeColumn.uidt === UITypes.Barcode) { |
||||
columnIdToSearchFor = (qrOrBarcodeColumn.colOptions as any).fk_barcode_value_column_id |
||||
} else { |
||||
throw new Error('Column to scan for is not of supported type') |
||||
} |
||||
const columnToSearchFor = meta.value?.columns?.find((column) => column.id === columnIdToSearchFor) |
||||
if (!columnToSearchFor) { |
||||
throw new Error('Column to search for not found') |
||||
} |
||||
return columnToSearchFor |
||||
} |
||||
|
||||
const showCodeScannerOverlay = ref(false) |
||||
|
||||
const idOfSelectedColumnToScanFor = ref('') |
||||
const lastScannedCode = ref('') |
||||
|
||||
watch(fieldOptionsOfSupportedColumnsToScanFor, () => { |
||||
if (fieldOptionsOfSupportedColumnsToScanFor.value?.every((option) => option.value !== idOfSelectedColumnToScanFor.value)) { |
||||
idOfSelectedColumnToScanFor.value = '' |
||||
} |
||||
}) |
||||
|
||||
const scannerIsReady = ref(false) |
||||
|
||||
const onLoaded = async () => { |
||||
scannerIsReady.value = true |
||||
} |
||||
|
||||
const showScannerField = computed(() => scannerIsReady.value && idOfSelectedColumnToScanFor.value !== '') |
||||
const showPleaseSelectColumnMessage = computed(() => !idOfSelectedColumnToScanFor.value) |
||||
const showScannerIsLoadingMessage = computed(() => !!idOfSelectedColumnToScanFor.value && !scannerIsReady.value) |
||||
|
||||
const onDecode = async (codeValue: string) => { |
||||
if (!showScannerField.value || codeValue === lastScannedCode.value) { |
||||
return |
||||
} |
||||
try { |
||||
const selectedColumnToScanFor = getColumnToSearchForByBarOrQrCodeColumnId(idOfSelectedColumnToScanFor.value) |
||||
const whereClause = `(${selectedColumnToScanFor?.title},eq,${codeValue})` |
||||
const foundRowsForCode = ( |
||||
await $api.dbViewRow.list(NOCO, project.value.id!, meta.value!.id!, view.value!.title!, { |
||||
where: whereClause, |
||||
}) |
||||
).list |
||||
|
||||
if (foundRowsForCode.length !== 1) { |
||||
showCodeScannerOverlay.value = true |
||||
lastScannedCode.value = codeValue |
||||
setTimeout(() => { |
||||
lastScannedCode.value = '' |
||||
}, 4000) |
||||
if (foundRowsForCode.length === 0) { |
||||
message.info(t('msg.info.codeScanner.noRowFoundForCode')) |
||||
} |
||||
if (foundRowsForCode.length > 1) { |
||||
message.warn(t('msg.info.codeScanner.moreThanOneRowFoundForCode')) |
||||
showCodeScannerOverlay.value = false |
||||
lastScannedCode.value = '' |
||||
} |
||||
return |
||||
} |
||||
|
||||
showCodeScannerOverlay.value = false |
||||
lastScannedCode.value = '' |
||||
const primaryKeyValueForFoundRow = extractPkFromRow(foundRowsForCode[0], meta!.value!.columns!) |
||||
|
||||
router.push({ |
||||
query: { |
||||
...route.query, |
||||
rowId: primaryKeyValueForFoundRow, |
||||
}, |
||||
}) |
||||
} catch (error) { |
||||
console.error(error) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true"> |
||||
<div class="flex items-center gap-1"> |
||||
<MdiQrcodeScan /> |
||||
<span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span> |
||||
</div> |
||||
</a-button> |
||||
<a-modal |
||||
v-model:visible="showCodeScannerOverlay" |
||||
class="nc-overlay-find-row-by-scan" |
||||
: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"> |
||||
<div class="text-left text-wrap mt-2 text-xl mb-4">{{ $t('title.findRowByScanningCode') }}</div> |
||||
<a-form-item :label="$t('labels.columnToScanFor')" class="nc-dropdown-scanner-column-id"> |
||||
<a-select |
||||
v-model:value="idOfSelectedColumnToScanFor" |
||||
class="w-full" |
||||
:options="fieldOptionsOfSupportedColumnsToScanFor" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<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"> |
||||
{{ $t('msg.info.codeScanner.selectColumn') }} |
||||
</div> |
||||
<div v-if="showScannerIsLoadingMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs"> |
||||
{{ $t('msg.info.codeScanner.loadingScanner') }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-modal> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,22 @@
|
||||
import { reactive } from 'vue' |
||||
|
||||
const storedValue = localStorage.getItem('betaFeatureToggleState') |
||||
|
||||
const initialToggleState = storedValue ? JSON.parse(storedValue) : false |
||||
|
||||
const betaFeatureToggleState = reactive({ show: initialToggleState }) |
||||
|
||||
const toggleBetaFeature = () => { |
||||
betaFeatureToggleState.show = !betaFeatureToggleState.show |
||||
localStorage.setItem('betaFeatureToggleState', JSON.stringify(betaFeatureToggleState.show)) |
||||
} |
||||
|
||||
const _useBetaFeatureToggle = () => { |
||||
return { |
||||
betaFeatureToggleState, |
||||
toggleBetaFeature, |
||||
} |
||||
} |
||||
|
||||
const useBetaFeatureToggle = createSharedComposable(_useBetaFeatureToggle) |
||||
export { useBetaFeatureToggle } |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,7 @@
|
||||
import VueQrcodeReader from 'vue-qrcode-reader' |
||||
|
||||
import { defineNuxtPlugin } from 'nuxt/app' |
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => { |
||||
nuxtApp.vueApp.use(VueQrcodeReader) |
||||
}) |
||||
@ -0,0 +1,17 @@
|
||||
export function parseProp(v: any): any { |
||||
if (!v) return {} |
||||
try { |
||||
return typeof v === 'string' ? JSON.parse(v) : v |
||||
} catch { |
||||
return {} |
||||
} |
||||
} |
||||
|
||||
export function stringifyProp(v: any): string | undefined { |
||||
if (!v) return undefined |
||||
try { |
||||
return typeof v === 'string' ? v : JSON.stringify(v) |
||||
} catch { |
||||
return '{}' |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@
|
||||
import { MetaTable } from '../../utils/globals'; |
||||
import type { Knex } from 'knex'; |
||||
|
||||
const up = async (knex: Knex) => { |
||||
await knex.schema.alterTable(MetaTable.FORM_VIEW_COLUMNS, (table) => { |
||||
table.boolean('enable_scanner'); |
||||
}); |
||||
}; |
||||
|
||||
const down = async (knex) => { |
||||
await knex.schema.alterTable(MetaTable.FORM_VIEW_COLUMNS, (table) => { |
||||
table.dropColumns('enable_scanner'); |
||||
}); |
||||
}; |
||||
|
||||
export { up, down }; |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue