WIP barcode format select for barcode

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

@@ -3,6 +3,8 @@ import type { UITypes } from 'nocodb-sdk'
 import { AllowedColumnTypesForQrAndBarcodes } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
 import { useVModel } from '#imports'
+import * as Ewa from '@chenfengyuan/vue-barcode'
+import * as Daniel from 'JsBarcode'
 
 const props = defineProps<{
   modelValue: any
@@ -38,13 +40,29 @@ const columnsAllowedAsQrValue = computed<SelectProps['options']>(() => {
     })
 })
 
+const supportedBarcodeFormats = [
+  { value: 'CODE128', label: 'CODE128' },
+  { value: 'UPC', label: 'UPC' },
+  { value: 'EAN13', label: 'EAN13' },
+  { value: 'EAN8', label: 'EAN8' },
+  { value: 'EAN5', label: 'EAN5' },
+  { value: 'EAN2', label: 'EAN2' },
+  { value: 'CODE39', label: 'CODE39' },
+  { value: 'ITF14', label: 'ITF14' },
+  { value: 'MSI', label: 'MSI' },
+  { value: 'PHARMACODE', label: 'pharmacode' },
+  { value: 'CODEBAR', label: 'codabar' },
+]
+
 onMounted(() => {
   // set default value
   vModel.value.fk_barcode_value_column_id = (column?.value?.colOptions as Record<string, any>)?.fk_barcode_value_column_id || ''
+  vModel.value.barcode_format = (column?.value?.colOptions as Record<string, any>)?.barcode_format || ''
 })
 
 setAdditionalValidations({
   fk_barcode_value_column_id: [{ required: true, message: 'Required' }],
+  barcode_format: [{ required: true, message: 'Required' }],
 })
 </script>
 
@@ -63,6 +81,18 @@ setAdditionalValidations({
           @click.stop
         />
       </a-form-item>
+      <a-form-item
+        class="flex w-1/2 pb-2 nc-qr-code-value-column-select"
+        :label="$t('labels.barcodeFormat')"
+        v-bind="validateInfos.barcode_format"
+      >
+        <a-select
+          v-model:value="vModel.barcode_format"
+          :options="supportedBarcodeFormats"
+          placeholder="Select a Barcode format"
+          @click.stop
+        />
+      </a-form-item>
     </a-col>
   </a-row>
 </template>

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

@@ -1,5 +1,4 @@
- <script setup lang="ts">
-// import VueBarcode from '@chenfengyuan/vue-barcode'
+<script setup lang="ts">
 import JsBarcodeWrapper from './JsBarcodeWrapper'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
@@ -10,7 +9,6 @@ const barcodeValue = computed(() => String(cellValue?.value))
 
 const tooManyCharsForQrCode = computed(() => barcodeValue?.value.length > maxNumberOfAllowedCharsForQrValue)
 
-
 const modalVisible = ref(false)
 
 const showQrModal = (ev: MouseEvent) => {
@@ -31,9 +29,6 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     :body-style="{ padding: '0px' }"
     @ok="handleModalOkClick"
   >
-    <template #footer>
-      <div class="mr-4" data-testid="nc-qr-code-large-value-label">{{ barcodeValue }}</div>
-    </template>
     <JsBarcodeWrapper v-if="barcodeValue && !tooManyCharsForQrCode" tag="svg" :value="barcodeValue" width="3" />
   </a-modal>
   <div @click="showQrModal">

packages/nc-gui/lang/en.json

@@ -250,6 +250,7 @@
     "addOption": "Add option",
     "qrCodeValueColumn": "Column with QR code value",
     "barcodeValueColumn": "Column with Barcode value",
+    "barcodeFormat": "Barcode format",
     "qrCodeValueTooLong": "Too many characters for a QR code",
     "barcodeValueTooLong": "Too many characters for a barcode",
     "aggregateFunction": "Aggregate function",