Browse Source

WIP barcode dynamic value

pull/4641/head
flisowna 2 years ago
parent
commit
d84eb431b6
  1. 25
      packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
  2. 67
      packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.ts
  3. 1
      packages/nc-gui/lang/en.json
  4. 4
      packages/nc-gui/plugins/ant.ts

25
packages/nc-gui/components/virtual-cell/Barcode.vue → 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>

67
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)
},
})

1
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",

4
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({

Loading…
Cancel
Save