From b9f9d956bf0c50739909bc71e1e69f10a2d79773 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 3 Feb 2023 11:39:05 +0300
Subject: [PATCH 1/3] fix: RowHeighInj for sharing row height between
 components

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/TextArea.vue  | 24 ++----------
 .../nc-gui/components/smartsheet/Grid.vue     | 37 ++++++++++---------
 .../nc-gui/components/virtual-cell/QrCode.vue | 25 ++-----------
 .../virtual-cell/barcode/Barcode.vue          | 36 ++++++++----------
 packages/nc-gui/context/index.ts              |  1 +
 5 files changed, 43 insertions(+), 80 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 96dc64ebdf..86d0564e2e 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import type { GridType } from 'nocodb-sdk'
 import type { VNodeRef } from '@vue/runtime-core'
-import { ActiveViewInj, EditModeInj, inject, useVModel } from '#imports'
+import { EditModeInj, RowHeightInj, inject, useVModel } from '#imports'
 
 const props = defineProps<{
   modelValue?: string | number
@@ -11,30 +10,13 @@ const emits = defineEmits(['update:modelValue'])
 
 const editEnabled = inject(EditModeInj)
 
-const { showNull } = useGlobal()
+const rowHeight = inject(RowHeightInj)
 
-const view = inject(ActiveViewInj, ref())
+const { showNull } = useGlobal()
 
 const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
 
 const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
-
-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
-      default:
-        return 1
-    }
-  }
-})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index db9ce5f061..0ff5b5a5c0 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -17,6 +17,7 @@ import {
   ReadonlyInj,
   ReloadRowDataHookInj,
   ReloadViewDataHookInj,
+  RowHeightInj,
   SmartsheetStoreEvents,
   computed,
   createEventHook,
@@ -362,6 +363,23 @@ function scrollToCell(row?: number | null, col?: number | null) {
   }
 }
 
+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
+      default:
+        return 1
+    }
+  }
+})
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -374,6 +392,8 @@ provide(PaginationDataInj, paginationData)
 
 provide(ChangePageInj, changePage)
 
+provide(RowHeightInj, rowHeight)
+
 const disableUrlOverlay = ref(false)
 provide(CellUrlDisableOverlayInj, disableUrlOverlay)
 
@@ -672,23 +692,6 @@ const closeAddColumnDropdown = () => {
   columnOrder.value = null
   addColumnDropdown.value = false
 }
-
-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
-      default:
-        return 1
-    }
-  }
-})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue
index 4ba96f3ab7..4343923e1f 100644
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
-import type { GridType } from 'nocodb-sdk'
-import { ActiveViewInj } from '#imports'
+import { RowHeightInj } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
 
-const view = inject(ActiveViewInj, ref())
-
 const cellValue = inject(CellValueInj)
 
 const qrValue = computed(() => String(cellValue?.value))
@@ -15,22 +12,7 @@ const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOf
 
 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
-      default:
-        return 1
-    }
-  }
-})
+const rowHeight = inject(RowHeightInj)
 
 const qrCode = useQRCode(qrValue, {
   width: 150,
@@ -69,13 +51,14 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning } = us
     {{ $t('labels.qrCodeValueTooLong') }}
   </div>
   <img
-    v-if="showQrCode"
+    v-if="showQrCode && rowHeight"
     class="mx-auto"
     :style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
     :src="qrCode"
     alt="QR Code"
     @click="showQrModal"
   />
+  <img v-else-if="showQrCode" class="mx-auto" :src="qrCode" alt="QR Code" @click="showQrModal" />
   <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('msg.warning.nonEditableFields.computedFieldUnableToClear') }}
   </div>
diff --git a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index 8fa34136e4..53a61a3d77 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import type { ComputedRef } from 'vue'
-import type { GridType } from 'nocodb-sdk'
 import JsBarcodeWrapper from './JsBarcodeWrapper.vue'
-import { ActiveViewInj } from '#imports'
+import { RowHeightInj } from '#imports'
 
 const maxNumberOfAllowedCharsForBarcodeValue = 100
 
-const view = inject(ActiveViewInj, ref())
-
 const cellValue = inject(CellValueInj)
 
 const column = inject(ColumnInj)
@@ -35,22 +32,7 @@ const showBarcode = computed(() => barcodeValue?.value.length > 0 && !tooManyCha
 
 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
-      default:
-        return 1
-    }
-  }
-})
+const rowHeight = inject(RowHeightInj)
 </script>
 
 <template>
@@ -65,7 +47,7 @@ const rowHeight = computed(() => {
     <JsBarcodeWrapper v-if="showBarcode" :barcode-value="barcodeValue" :barcode-format="barcodeMeta.barcodeFormat" />
   </a-modal>
   <JsBarcodeWrapper
-    v-if="showBarcode"
+    v-if="showBarcode && rowHeight"
     :barcode-value="barcodeValue"
     :barcode-format="barcodeMeta.barcodeFormat"
     :custom-style="{ height: rowHeight ? `${rowHeight * 1.4}rem` : `1.4rem` }"
@@ -77,6 +59,18 @@ const rowHeight = computed(() => {
       </div>
     </template>
   </JsBarcodeWrapper>
+  <JsBarcodeWrapper
+    v-else-if="showBarcode"
+    :barcode-value="barcodeValue"
+    :barcode-format="barcodeMeta.barcodeFormat"
+    @on-click-barcode="showBarcodeModal"
+  >
+    <template #barcodeRenderError>
+      <div class="text-left text-wrap mt-2 text-[#e65100] text-xs" data-testid="barcode-invalid-input-message">
+        {{ $t('msg.warning.barcode.renderError') }}
+      </div>
+    </template>
+  </JsBarcodeWrapper>
 
   <div v-if="tooManyCharsForBarcode" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
     {{ $t('labels.barcodeValueTooLong') }}
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 1b7a53e790..134fc3a273 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -21,6 +21,7 @@ export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injecti
 export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<ViewType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<Ref<boolean>> = Symbol('readonly-injection')
+export const RowHeightInj: InjectionKey<ComputedRef<1 | 2 | 4 | 6 | undefined>> = Symbol('row-height-injection')
 /** when bool is passed, it indicates if a loading spinner should be visible while reloading */
 export const ReloadViewDataHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-data-injection')
 export const ReloadViewMetaHookInj: InjectionKey<EventHook<boolean | void>> = Symbol('reload-view-meta-injection')

From 284fea2462ee2318564330e2efb8930dbbc2aceb Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 3 Feb 2023 11:44:59 +0300
Subject: [PATCH 2/3] fix: use debounced refresh for resize observer

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/ClampedText.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
index 7f82b67421..fce0bd1b85 100644
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ b/packages/nc-gui/components/cell/ClampedText.vue
@@ -8,9 +8,13 @@ const wrapper = ref()
 
 const key = ref(0)
 
+const debouncedRefresh = useDebounceFn(() => {
+  key.value++
+}, 500)
+
 onMounted(() => {
   const observer = new ResizeObserver(() => {
-    key.value++
+    debouncedRefresh()
   })
 
   observer.observe(wrapper.value)

From a0db4eb7abc531ef20140bd4c00b0a8f106d14f4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 3 Feb 2023 11:50:19 +0300
Subject: [PATCH 3/3] fix: use text length as key instead of text

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/ClampedText.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
index fce0bd1b85..4d8c83eb46 100644
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ b/packages/nc-gui/components/cell/ClampedText.vue
@@ -24,7 +24,7 @@ onMounted(() => {
 <template>
   <div ref="wrapper">
     <text-clamp
-      :key="key + props.value"
+      :key="`clamp-${key}-${props.value?.toString().length || 0}`"
       class="w-full h-full break-all"
       :text="`${props.value || ''}`"
       :max-lines="props.lines"