barcode column type: fix FE issues (WIP)

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

@@ -3,8 +3,6 @@ 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
@@ -57,13 +55,19 @@ const supportedBarcodeFormats = [
 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 || ''
+  // vModel.value.meta.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' }],
+  barcode_format: [{ required: true, message: 'Required' }],
 })
+
+// set default meta value
+vModel.value.meta = {
+  barcodeFormat: supportedBarcodeFormats[0].value,
+  ...vModel.value.meta,
+}
 </script>
 
 <template>
@@ -81,18 +85,18 @@ setAdditionalValidations({
           @click.stop
         />
       </a-form-item>
-      <!-- <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"
+          v-model:value="vModel.meta.barcodeFormat"
           :options="supportedBarcodeFormats"
           placeholder="Select a Barcode format"
           @click.stop
         />
-      </a-form-item> -->
+      </a-form-item>
     </a-col>
   </a-row>
 </template>

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

@@ -5,6 +5,8 @@ const maxNumberOfAllowedCharsForQrValue = 2000
 
 const cellValue = inject(CellValueInj)
 
+const column = inject(ColumnInj)
+
 const barcodeValue = computed(() => String(cellValue?.value))
 
 const tooManyCharsForQrCode = computed(() => barcodeValue?.value.length > maxNumberOfAllowedCharsForQrValue)
@@ -16,6 +18,18 @@ const showQrModal = (ev: MouseEvent) => {
   modalVisible.value = true
 }
 
+const barcodeMeta = $computed(() => {
+  return {
+    barcodeFormat: 'CODE128',
+    ...(column?.value?.meta || {}),
+  }
+})
+
+const jsBarcodeOptions = $computed(() => ({
+  format: barcodeMeta.barcodeFormat,
+  // format: 'CODE128',
+}))
+
 const handleModalOkClick = () => (modalVisible.value = false)
 
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = useShowNotEditableWarning()
@@ -30,11 +44,19 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     :footer="null"
     @ok="handleModalOkClick"
   >
-    <JsBarcodeWrapper v-if="barcodeValue && !tooManyCharsForQrCode" tag="svg" :value="barcodeValue" width="3" />
+    <JsBarcodeWrapper
+      v-if="barcodeValue && !tooManyCharsForQrCode"
+      :options="jsBarcodeOptions"
+      tag="svg"
+      :value="barcodeValue"
+      width="3"
+    />
   </a-modal>
   <div @click="showQrModal">
+    FOO: {{ JSON.stringify(jsBarcodeOptions) }}
     <JsBarcodeWrapper
       v-if="barcodeValue && !tooManyCharsForQrCode"
+      :options="jsBarcodeOptions"
       tag="svg"
       class="w-full"
       :value="barcodeValue"
@@ -55,6 +77,6 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
 
 <style lang="scss">
 .amodal-wrapper {
-  width: 100px;
+  // width: 100px;
 }
 </style>

packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts

@@ -57,6 +57,7 @@ export default defineComponent({
      * Generate bar code.
      */
     generate() {
+      // debugger
       JsBarcode(this.$el, String(this.value), this.options)
     },
   },