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