From d84eb431b6c16466123f6dfd115b82bf5c3f9364 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Mon, 5 Dec 2022 17:49:45 +0300
Subject: [PATCH] WIP barcode dynamic value

---
 .../virtual-cell/{ => barcode}/Barcode.vue    | 25 +++----
 .../virtual-cell/barcode/JsBarcodeWrapper.ts  | 67 +++++++++++++++++++
 packages/nc-gui/lang/en.json                  |  1 +
 packages/nc-gui/plugins/ant.ts                |  4 +-
 4 files changed, 78 insertions(+), 19 deletions(-)
 rename packages/nc-gui/components/virtual-cell/{ => barcode}/Barcode.vue (61%)
 create mode 100644 packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts

diff --git a/packages/nc-gui/components/virtual-cell/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
similarity index 61%
rename from packages/nc-gui/components/virtual-cell/Barcode.vue
rename to packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index 097656f47f..e7878bcf7e 100644
--- a/packages/nc-gui/components/virtual-cell/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -1,5 +1,6 @@
  <script setup lang="ts">
-import VueBarcode from '@chenfengyuan/vue-barcode'
+// import VueBarcode from '@chenfengyuan/vue-barcode'
+import JsBarcodeWrapper from './JsBarcodeWrapper'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
@@ -9,13 +10,6 @@ const barcodeValue = computed(() => String(cellValue?.value))
 
 const tooManyCharsForQrCode = computed(() => barcodeValue?.value.length > maxNumberOfAllowedCharsForQrValue)
 
-// const barcode = VueBarcode(barcodeValue, {
-//   width: 150,
-// })
-
-// const barcodeLarge = VueBarcode(barcodeValue, {
-//   width: 600,
-// })
 
 const modalVisible = ref(false)
 
@@ -30,7 +24,6 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
 </script>
 
 <template>
-  <vue-barcode value="barcodeValue"></vue-barcode>
   <a-modal
     v-model:visible="modalVisible"
     :class="{ active: modalVisible }"
@@ -39,23 +32,21 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     @ok="handleModalOkClick"
   >
     <template #footer>
-      <div class="mr-4" data-testid="nc-qr-code-large-value-label">heja</div>
+      <div class="mr-4" data-testid="nc-qr-code-large-value-label">{{ barcodeValue }}</div>
     </template>
-    <!-- <img v-if="barcodeValue && !tooManyCharsForQrCode" :src="qrCodeLarge" alt="QR Code" /> -->
+    <JsBarcodeWrapper v-if="barcodeValue && !tooManyCharsForQrCode" tag="svg" :value="barcodeValue" width="3" />
   </a-modal>
   <div @click="showQrModal">
-    <VueBarcode value="barcodeValue"></VueBarcode>
+    <JsBarcodeWrapper v-if="barcodeValue && !tooManyCharsForQrCode" :value="barcodeValue" width="1"></JsBarcodeWrapper>
   </div>
 
-  <!-- <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
-    {{ $t('labels.qrCodeValueTooLong') }}
+  <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+    {{ $t('labels.barcodeValueTooLong') }}
   </div>
- <img v-if="qrValue && !tooManyCharsForQrCode" :src="qrCode" alt="QR Code" @click="showQrModal" /> -->
-  <!-- <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+  <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>
   <div v-if="showClearNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.qrFieldsCannotBeDirectlyChanged') }}
   </div>
-  -->
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts
new file mode 100644
index 0000000000..511e4c74aa
--- /dev/null
+++ b/packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts
@@ -0,0 +1,67 @@
+import { defineComponent, h } from 'vue'
+import JsBarcode from 'jsbarcode'
+
+// TODO: add proper reference for the origin of this code here
+export default defineComponent({
+  name: 'JsBarcodeWrapper',
+
+  props: {
+    /**
+     * The value of the bar code.
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
+
+    /**
+     * The options for the bar code generator.
+     * {@link https://github.com/lindell/JsBarcode#options}
+     */
+    options: {
+      type: Object,
+      default: undefined,
+    },
+
+    /**
+     * The tag name of the component's root element.
+     */
+    tag: {
+      type: String,
+      default: 'canvas',
+    },
+  },
+
+  watch: {
+    $props: {
+      deep: true,
+      immediate: true,
+
+      /**
+       * Update the bar code when props changed.
+       */
+      handler() {
+        if (this.$el) {
+          this.generate()
+        }
+      },
+    },
+  },
+
+  mounted() {
+    this.generate()
+  },
+
+  methods: {
+    /**
+     * Generate bar code.
+     */
+    generate() {
+      JsBarcode(this.$el, String(this.value), this.options)
+    },
+  },
+
+  render() {
+    return h(this.tag, this.$slots.default)
+  },
+})
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 39e1b1028b..d3f97bf83a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -251,6 +251,7 @@
     "qrCodeValueColumn": "Column with QR code value",
     "barcodeValueColumn": "Column with Barcode value",
     "qrCodeValueTooLong": "Too many characters for a QR code",
+    "barcodeValueTooLong": "Too many characters for a barcode",
     "aggregateFunction": "Aggregate function",
     "dbCreateIfNotExists": "Database : create if not exists",
     "clientKey": "Client Key",
diff --git a/packages/nc-gui/plugins/ant.ts b/packages/nc-gui/plugins/ant.ts
index 5ee06e280c..b1b5b403ff 100644
--- a/packages/nc-gui/plugins/ant.ts
+++ b/packages/nc-gui/plugins/ant.ts
@@ -1,9 +1,9 @@
 import { Menu as AntMenu, Modal as AntModal, message } from 'ant-design-vue'
-import VueBarcode from '@chenfengyuan/vue-barcode'
+// import VueBarcode from '@chenfengyuan/vue-barcode'
 import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component(VueBarcode.name, VueBarcode)
+  // nuxtApp.vueApp.component(VueBarcode.name, VueBarcode)
   nuxtApp.vueApp.component(AntMenu.name, AntMenu)
   nuxtApp.vueApp.component(AntModal.name, AntModal)
   message.config({