Browse Source

feat: QrCode row height support

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/4840/head
mertmit 2 years ago
parent
commit
35b55ec127
  1. 21
      packages/nc-gui/components/virtual-cell/QrCode.vue

21
packages/nc-gui/components/virtual-cell/QrCode.vue

@ -1,8 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useQRCode } from '@vueuse/integrations/useQRCode' import { useQRCode } from '@vueuse/integrations/useQRCode'
import { GridType } from 'nocodb-sdk'
import { ActiveViewInj } from '#imports'
const maxNumberOfAllowedCharsForQrValue = 2000 const maxNumberOfAllowedCharsForQrValue = 2000
const view = inject(ActiveViewInj, ref())
const cellValue = inject(CellValueInj) const cellValue = inject(CellValueInj)
const qrValue = computed(() => String(cellValue?.value)) const qrValue = computed(() => String(cellValue?.value))
@ -11,6 +15,21 @@ const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOf
const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value) const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value)
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
}
}
})
const qrCode = useQRCode(qrValue, { const qrCode = useQRCode(qrValue, {
width: 150, width: 150,
}) })
@ -47,7 +66,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
<div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs"> <div v-if="tooManyCharsForQrCode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
{{ $t('labels.qrCodeValueTooLong') }} {{ $t('labels.qrCodeValueTooLong') }}
</div> </div>
<img v-if="showQrCode" :src="qrCode" alt="QR Code" @click="showQrModal" /> <img v-if="showQrCode" class="mx-auto" :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }" :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') }} {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
</div> </div>

Loading…
Cancel
Save