Barcode column type - WIP (mainly FE related code)

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

@@ -33,7 +33,7 @@ provide(IsGalleryInj, ref(false))
 // todo: generate hideCols based on default values
 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()
 
@@ -229,7 +229,9 @@ async function addAllColumns() {
 }
 
 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() {

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

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

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>

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" />
         <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" />
         <LazySmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
         <LazySmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />

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

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

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

@@ -55,7 +55,7 @@ const columns = $computed(() => {
   }
 
   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>

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

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

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

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

packages/nc-gui/composables/useSharedView.ts

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

packages/nc-gui/composables/useViewData.ts

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

packages/nc-gui/lang/en.json

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

packages/nc-gui/utils/columnUtils.ts

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

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 isFormula = (column: ColumnType) => column.uidt === UITypes.Formula
 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

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

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

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

@@ -7,7 +7,7 @@ import Model from './Model';
 import NocoCache from '../cache/NocoCache';
 import {
   ColumnReqType,
-  AllowedColumnTypesForQrCode,
+  AllowedColumnTypesForQrAndBarcodes,
   ColumnType,
   UITypes,
 } 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
-    if (!AllowedColumnTypesForQrCode.includes(updateObj.uidt)) {
+    if (!AllowedColumnTypesForQrAndBarcodes.includes(updateObj.uidt)) {
       const qrCodeCols = await ncMeta.metaList2(
         null,
         null,