Browse Source

Barcode column type - WIP (mainly FE related code)

pull/4641/head
flisowna 2 years ago
parent
commit
e7a15b77ec
  1. 6
      packages/nc-gui/components/smartsheet/Form.vue
  2. 2
      packages/nc-gui/components/smartsheet/VirtualCell.vue
  3. 68
      packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue
  4. 1
      packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
  5. 2
      packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
  6. 2
      packages/nc-gui/components/smartsheet/column/LookupOptions.vue
  7. 4
      packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
  8. 2
      packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
  9. 0
      packages/nc-gui/components/virtual-cell/Barcode.vue
  10. 1
      packages/nc-gui/composables/useSharedView.ts
  11. 1
      packages/nc-gui/composables/useViewData.ts
  12. 1
      packages/nc-gui/lang/en.json
  13. 6
      packages/nc-gui/utils/columnUtils.ts
  14. 1
      packages/nc-gui/utils/virtualCell.ts
  15. 2
      packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
  16. 4
      packages/nocodb/src/lib/models/Column.ts

6
packages/nc-gui/components/smartsheet/Form.vue

@ -33,7 +33,7 @@ provide(IsGalleryInj, ref(false))
// todo: generate hideCols based on default values // todo: generate hideCols based on default values
const hiddenCols = ['created_at', 'updated_at'] const hiddenCols = ['created_at', 'updated_at']
const hiddenColTypes = [UITypes.Rollup, UITypes.Lookup, UITypes.Formula, UITypes.QrCode, UITypes.SpecificDBType] const hiddenColTypes = [UITypes.Rollup, UITypes.Lookup, UITypes.Formula, UITypes.QrCode, UITypes.Barcode, UITypes.SpecificDBType]
const state = useGlobal() const state = useGlobal()
@ -229,7 +229,9 @@ async function addAllColumns() {
} }
function shouldSkipColumn(col: Record<string, any>) { function shouldSkipColumn(col: Record<string, any>) {
return isDbRequired(col) || !!col.required || (!!col.rqd && !col.cdf) || col.uidt === UITypes.QrCode return (
isDbRequired(col) || !!col.required || (!!col.rqd && !col.cdf) || col.uidt === UITypes.QrCode || col.uidt === UITypes.Barcode
)
} }
async function removeAllColumns() { async function removeAllColumns() {

2
packages/nc-gui/components/smartsheet/VirtualCell.vue

@ -14,6 +14,7 @@ import {
isLookup, isLookup,
isMm, isMm,
isQrCode, isQrCode,
isBarcode,
isRollup, isRollup,
provide, provide,
toRef, toRef,
@ -59,6 +60,7 @@ function onNavigate(dir: NavigateDir, e: KeyboardEvent) {
<LazyVirtualCellRollup v-else-if="isRollup(column)" /> <LazyVirtualCellRollup v-else-if="isRollup(column)" />
<LazyVirtualCellFormula v-else-if="isFormula(column)" /> <LazyVirtualCellFormula v-else-if="isFormula(column)" />
<LazyVirtualCellQrCode v-else-if="isQrCode(column)" /> <LazyVirtualCellQrCode v-else-if="isQrCode(column)" />
<LazyVirtualCellBarcode v-else-if="isBarcode(column)" />
<LazyVirtualCellCount v-else-if="isCount(column)" /> <LazyVirtualCellCount v-else-if="isCount(column)" />
<LazyVirtualCellLookup v-else-if="isLookup(column)" /> <LazyVirtualCellLookup v-else-if="isLookup(column)" />
</div> </div>

68
packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue

@ -0,0 +1,68 @@
<script setup lang="ts">
import type { UITypes } from 'nocodb-sdk'
import { AllowedColumnTypesForQrAndBarcodes } from 'nocodb-sdk'
import type { SelectProps } from 'ant-design-vue'
import { useVModel } from '#imports'
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref())
const reloadDataHook = inject(ReloadViewDataHookInj)!
const { fields, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
const vModel = useVModel(props, 'modelValue', emit)
const { setAdditionalValidations, validateInfos, column } = useColumnCreateStoreOrThrow()
const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
return fields.value
?.filter(
(el) =>
el.fk_column_id &&
// AllowedColumnTypesForQrCode.map((el) => el.toString()).includes(metaColumnById.value[el.fk_column_id].uidt),
AllowedColumnTypesForQrAndBarcodes.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes),
)
.map((field) => {
return {
value: field.fk_column_id,
label: field.title,
}
})
})
onMounted(() => {
// set default value
vModel.value.fk_qr_value_column_id = (column?.value?.colOptions as Record<string, any>)?.fk_qr_value_column_id || ''
})
setAdditionalValidations({
fk_qr_value_column_id: [{ required: true, message: 'Required' }],
})
</script>
<template>
<a-row>
<a-col :span="24">
<a-form-item
class="flex w-1/2 pb-2 nc-qr-code-value-column-select"
:label="$t('labels.qrCodeValueColumn')"
v-bind="validateInfos.fk_qr_value_column_id"
>
<a-select
v-model:value="vModel.fk_qr_value_column_id"
:options="columnsAllowedAsQrValue"
placeholder="Select a column for the Barcode value"
@click.stop
/>
</a-form-item>
</a-col>
</a-row>
</template>

1
packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@ -171,6 +171,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
<LazySmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" /> <LazySmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
<LazySmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" /> <LazySmartsheetColumnQrCodeOptions v-if="formState.uidt === UITypes.QrCode" v-model="formState" />
<LazySmartsheetColumnBarcodeOptions v-if="formState.uidt === UITypes.Barcode" v-model="formState" />
<LazySmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" /> <LazySmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
<LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" /> <LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
<LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" /> <LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />

2
packages/nc-gui/components/smartsheet/column/FormulaOptions.vue

@ -26,7 +26,7 @@ const props = defineProps<{
const emit = defineEmits(['update:value']) const emit = defineEmits(['update:value'])
const uiTypesNotSupportedInFormulas = [UITypes.QrCode] const uiTypesNotSupportedInFormulas = [UITypes.QrCode, UITypes.Barcode]
const vModel = useVModel(props, 'value', emit) const vModel = useVModel(props, 'value', emit)

2
packages/nc-gui/components/smartsheet/column/LookupOptions.vue

@ -55,7 +55,7 @@ const columns = $computed(() => {
} }
return metas[selectedTable.id].columns.filter((c: any) => { return metas[selectedTable.id].columns.filter((c: any) => {
return !(isSystemColumn(c) || c.uidt === UITypes.QrCode) return !(isSystemColumn(c) || c.uidt === UITypes.QrCode || c.uidt === UITypes.Barcode)
}) })
}) })
</script> </script>

4
packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { UITypes } from 'nocodb-sdk' import type { UITypes } from 'nocodb-sdk'
import { AllowedColumnTypesForQrCode } from 'nocodb-sdk' import { AllowedColumnTypesForQrAndBarcodes } from 'nocodb-sdk'
import type { SelectProps } from 'ant-design-vue' import type { SelectProps } from 'ant-design-vue'
import { useVModel } from '#imports' import { useVModel } from '#imports'
@ -28,7 +28,7 @@ const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
(el) => (el) =>
el.fk_column_id && el.fk_column_id &&
// AllowedColumnTypesForQrCode.map((el) => el.toString()).includes(metaColumnById.value[el.fk_column_id].uidt), // AllowedColumnTypesForQrCode.map((el) => el.toString()).includes(metaColumnById.value[el.fk_column_id].uidt),
AllowedColumnTypesForQrCode.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes), AllowedColumnTypesForQrAndBarcodes.includes(metaColumnById.value[el.fk_column_id].uidt as UITypes),
) )
.map((field) => { .map((field) => {
return { return {

2
packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue

@ -21,7 +21,7 @@ const localValue = computed({
const options = computed<SelectProps['options']>(() => const options = computed<SelectProps['options']>(() =>
meta.value?.columns meta.value?.columns
?.filter((c: ColumnType) => { ?.filter((c: ColumnType) => {
if (c.uidt === UITypes.QrCode) { if (c.uidt === UITypes.QrCode || c.uidt === UITypes.Barcode) {
return false return false
} else if (isSort) { } else if (isSort) {
/** ignore hasmany and manytomany relations if it's using within sort menu */ /** ignore hasmany and manytomany relations if it's using within sort menu */

0
packages/nc-gui/components/virtual-cell/Barcode.vue

1
packages/nc-gui/composables/useSharedView.ts

@ -40,6 +40,7 @@ export function useSharedView() {
f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Rollup &&
f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Lookup &&
f.uidt !== UITypes.Formula && f.uidt !== UITypes.Formula &&
f.uidt !== UITypes.Barcode &&
f.uidt !== UITypes.QrCode, f.uidt !== UITypes.QrCode,
) )
.sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order) .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)

1
packages/nc-gui/composables/useViewData.ts

@ -292,6 +292,7 @@ export function useViewData(
if ( if (
col.uidt === UITypes.Formula || col.uidt === UITypes.Formula ||
col.uidt === UITypes.QrCode || col.uidt === UITypes.QrCode ||
col.uidt === UITypes.Barcode ||
col.uidt === UITypes.Rollup || col.uidt === UITypes.Rollup ||
col.au || col.au ||
col.cdf?.includes(' on update ') col.cdf?.includes(' on update ')

1
packages/nc-gui/lang/en.json

@ -249,6 +249,7 @@
"sqlOutput": "SQL Output", "sqlOutput": "SQL Output",
"addOption": "Add option", "addOption": "Add option",
"qrCodeValueColumn": "Column with QR code value", "qrCodeValueColumn": "Column with QR code value",
"barcodeValueColumn": "Column with Barcode value",
"qrCodeValueTooLong": "Too many characters for a QR code", "qrCodeValueTooLong": "Too many characters for a QR code",
"aggregateFunction": "Aggregate function", "aggregateFunction": "Aggregate function",
"dbCreateIfNotExists": "Database : create if not exists", "dbCreateIfNotExists": "Database : create if not exists",

6
packages/nc-gui/utils/columnUtils.ts

@ -2,6 +2,7 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes, UITypes } from 'nocodb-sdk' import { RelationTypes, UITypes } from 'nocodb-sdk'
import LinkVariant from '~icons/mdi/link-variant' import LinkVariant from '~icons/mdi/link-variant'
import QrCodeScan from '~icons/mdi/qrcode-scan' import QrCodeScan from '~icons/mdi/qrcode-scan'
import BarcodeScan from '~icons/mdi/barcode-scan'
import FormatColorText from '~icons/mdi/format-color-text' import FormatColorText from '~icons/mdi/format-color-text'
import TextSubject from '~icons/mdi/text-subject' import TextSubject from '~icons/mdi/text-subject'
import JSONIcon from '~icons/mdi/code-json' import JSONIcon from '~icons/mdi/code-json'
@ -131,6 +132,11 @@ const uiTypes = [
icon: QrCodeScan, icon: QrCodeScan,
virtual: 1, virtual: 1,
}, },
{
name: UITypes.Barcode,
icon: BarcodeScan,
virtual: 1,
},
{ {
name: UITypes.Geometry, name: UITypes.Geometry,
icon: RulerSquareCompass, icon: RulerSquareCompass,

1
packages/nc-gui/utils/virtualCell.ts

@ -17,4 +17,5 @@ export const isLookup = (column: ColumnType) => column.uidt === UITypes.Lookup
export const isRollup = (column: ColumnType) => column.uidt === UITypes.Rollup export const isRollup = (column: ColumnType) => column.uidt === UITypes.Rollup
export const isFormula = (column: ColumnType) => column.uidt === UITypes.Formula export const isFormula = (column: ColumnType) => column.uidt === UITypes.Formula
export const isQrCode = (column: ColumnType) => column.uidt === UITypes.QrCode export const isQrCode = (column: ColumnType) => column.uidt === UITypes.QrCode
export const isBarcode = (column: ColumnType) => column.uidt === UITypes.Barcode
export const isCount = (column: ColumnType) => column.uidt === UITypes.Count export const isCount = (column: ColumnType) => column.uidt === UITypes.Count

2
packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts

@ -1,6 +1,6 @@
import UITypes from '../UITypes'; import UITypes from '../UITypes';
export const AllowedColumnTypesForQrCode = [ export const AllowedColumnTypesForQrAndBarcodes = [
UITypes.Formula, UITypes.Formula,
UITypes.SingleLineText, UITypes.SingleLineText,
UITypes.LongText, UITypes.LongText,

4
packages/nocodb/src/lib/models/Column.ts

@ -7,7 +7,7 @@ import Model from './Model';
import NocoCache from '../cache/NocoCache'; import NocoCache from '../cache/NocoCache';
import { import {
ColumnReqType, ColumnReqType,
AllowedColumnTypesForQrCode, AllowedColumnTypesForQrAndBarcodes,
ColumnType, ColumnType,
UITypes, UITypes,
} from 'nocodb-sdk'; } from 'nocodb-sdk';
@ -954,7 +954,7 @@ export default class Column<T = any> implements ColumnType {
} }
// get qr code columns and delete if target type is not supported by QR code column type // get qr code columns and delete if target type is not supported by QR code column type
if (!AllowedColumnTypesForQrCode.includes(updateObj.uidt)) { if (!AllowedColumnTypesForQrAndBarcodes.includes(updateObj.uidt)) {
const qrCodeCols = await ncMeta.metaList2( const qrCodeCols = await ncMeta.metaList2(
null, null,
null, null,

Loading…
Cancel
Save