Browse Source

feat: Barcode row height support

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/4840/head
mertmit 2 years ago
parent
commit
2ec329fa8b
  1. 22
      packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
  2. 12
      packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue

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

@ -1,8 +1,13 @@
<script setup lang="ts">
import JsBarcodeWrapper from './JsBarcodeWrapper.vue'
import { ComputedRef } from 'vue'
import { GridType } from 'nocodb-sdk'
import { ActiveViewInj } from '#imports'
const maxNumberOfAllowedCharsForBarcodeValue = 100
const view = inject(ActiveViewInj, ref())
const cellValue = inject(CellValueInj)
const column = inject(ColumnInj)
@ -29,6 +34,22 @@ const handleModalOkClick = () => (modalVisible.value = false)
const showBarcode = computed(() => barcodeValue?.value.length > 0 && !tooManyCharsForBarcode.value)
const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = useShowNotEditableWarning()
const rowHeight = computed(() => {
if ((view.value?.view as GridType)?.row_height !== undefined) {
switch ((view.value?.view as GridType)?.row_height) {
case 0:
return 1
case 1:
return 2
case 2:
return 4
case 3:
return 6
}
}
})
</script>
<template>
@ -46,6 +67,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
v-if="showBarcode"
:barcode-value="barcodeValue"
:barcode-format="barcodeMeta.barcodeFormat"
:custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
@on-click-barcode="showBarcodeModal"
>
<template #barcodeRenderError>

12
packages/nc-gui/components/virtual-cell/barcode/JsBarcodeWrapper.vue

@ -5,11 +5,12 @@ import { onMounted } from '#imports'
const props = defineProps({
barcodeValue: { type: String, required: true },
barcodeFormat: { type: String, required: true },
customStyle: { type: Object, required: false },
})
const emit = defineEmits(['onClickBarcode'])
const barcodeSvgRef = ref(null)
const barcodeSvgRef = ref<HTMLElement>()
const errorForCurrentInput = ref(false)
const generate = () => {
@ -17,6 +18,13 @@ const generate = () => {
JsBarcode(barcodeSvgRef.value, String(props.barcodeValue), {
format: props.barcodeFormat,
})
if (props.customStyle) {
if (barcodeSvgRef.value) {
for (const key in props.customStyle) {
barcodeSvgRef.value.style.setProperty(key, props.customStyle[key])
}
}
}
errorForCurrentInput.value = false
} catch (e) {
console.log('e', e)
@ -29,7 +37,7 @@ const onBarcodeClick = (ev: MouseEvent) => {
emit('onClickBarcode')
}
watch([() => props.barcodeValue, () => props.barcodeFormat], generate)
watch([() => props.barcodeValue, () => props.barcodeFormat, () => props.customStyle], generate)
onMounted(generate)
</script>

Loading…
Cancel
Save