From e7a15b77ec6c1ad0a24efe2d8fe53b97e93d46f4 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Thu, 1 Dec 2022 20:14:58 +0300
Subject: [PATCH] Barcode column type - WIP (mainly FE related code)

---
 .../nc-gui/components/smartsheet/Form.vue     |  6 +-
 .../components/smartsheet/VirtualCell.vue     |  2 +
 .../smartsheet/column/BarcodeOptions.vue      | 68 +++++++++++++++++++
 .../smartsheet/column/EditOrAdd.vue           |  1 +
 .../smartsheet/column/FormulaOptions.vue      |  2 +-
 .../smartsheet/column/LookupOptions.vue       |  2 +-
 .../smartsheet/column/QrCodeOptions.vue       |  4 +-
 .../toolbar/FieldListAutoCompleteDropdown.vue |  2 +-
 .../components/virtual-cell/Barcode.vue       |  0
 packages/nc-gui/composables/useSharedView.ts  |  1 +
 packages/nc-gui/composables/useViewData.ts    |  1 +
 packages/nc-gui/lang/en.json                  |  1 +
 packages/nc-gui/utils/columnUtils.ts          |  6 ++
 packages/nc-gui/utils/virtualCell.ts          |  1 +
 .../src/lib/columnRules/QrCodeRules.ts        |  2 +-
 packages/nocodb/src/lib/models/Column.ts      |  4 +-
 16 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue
 create mode 100644 packages/nc-gui/components/virtual-cell/Barcode.vue

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 30b7da12c7..19a9482c63 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/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() {
diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index dcf44f2c06..fe7f463ac8 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue b/packages/nc-gui/components/smartsheet/column/BarcodeOptions.vue
new file mode 100644
index 0000000000..0033598bb2
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index f7a63fe1de..144c9f043c 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/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" />
diff --git a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
index 1ccb069b43..76b0124440 100644
--- a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
+++ b/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)
 
diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index 1bb039bc7d..c98e83512f 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue b/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
index be08672d7a..3b7dd7d993 100644
--- a/packages/nc-gui/components/smartsheet/column/QrCodeOptions.vue
+++ b/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 {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 96937c4a71..60201376cd 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/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 */
diff --git a/packages/nc-gui/components/virtual-cell/Barcode.vue b/packages/nc-gui/components/virtual-cell/Barcode.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index c28df9ac7e..6d5569de44 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/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)
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index aa3c30391e..643d23100a 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/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 ')
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c2cb7b8909..39e1b1028b 100644
--- a/packages/nc-gui/lang/en.json
+++ b/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",
diff --git a/packages/nc-gui/utils/columnUtils.ts b/packages/nc-gui/utils/columnUtils.ts
index 54569a8cea..eebd3514a5 100644
--- a/packages/nc-gui/utils/columnUtils.ts
+++ b/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,
diff --git a/packages/nc-gui/utils/virtualCell.ts b/packages/nc-gui/utils/virtualCell.ts
index c5f705a0ee..92ab9eb7cb 100644
--- a/packages/nc-gui/utils/virtualCell.ts
+++ b/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
diff --git a/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts b/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
index 1d02ae702f..e14c7e1757 100644
--- a/packages/nocodb-sdk/src/lib/columnRules/QrCodeRules.ts
+++ b/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,
diff --git a/packages/nocodb/src/lib/models/Column.ts b/packages/nocodb/src/lib/models/Column.ts
index ec1a872b9e..b4dd1f74f3 100644
--- a/packages/nocodb/src/lib/models/Column.ts
+++ b/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,