refactor: cleanup and lint

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/cell/attachment/index.vue

@@ -2,9 +2,8 @@
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
 import {
+  ActiveCellInj,
   DropZoneRef,
   IsGalleryInj,
   IsKanbanInj,
@@ -14,6 +13,7 @@ import {
   openLink,
   ref,
   useDropZone,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useSmartsheetStoreOrThrow,
   watch,

packages/nc-gui/components/smartsheet/Grid.vue

@@ -363,7 +363,7 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
-onClickOutside(smartTable, (e: PointerEvent) => {
+onClickOutside(smartTable, (e) => {
   clearRangeRows()
   if (selected.col === null) return
 

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -16,7 +16,7 @@ watch(
     // todo: replace setTimeout
     setTimeout(() => {
       if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
-    }, 200
+    }, 200)
   },
   { immediate: true },
 )

packages/nc-gui/components/virtual-cell/Formula.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
+import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, refAutoReset, replaceUrlsWithLink, useProject } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
@@ -10,36 +10,22 @@ const cellValue = inject(CellValueInj)
 
 const { isPg } = useProject()
 
-const showEditFormulaWarning = ref(false)
-
-const showClearFormulaWarning = ref(false)
-
-const showEditFormulaWarningMessage = () => {
-  showEditFormulaWarning.value = true
-
-  setTimeout(() => {
-    showEditFormulaWarning.value = false
-  }, 3000)
-}
-const showClearFormulaWarningMessage = () => {
-  showClearFormulaWarning.value = true
-
-  setTimeout(() => {
-    showClearFormulaWarning.value = false
-  }, 3000)
-}
-
 const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 
+const timeout = 3000 // in ms
+
+const showEditFormulaWarning = refAutoReset(false, timeout)
+const showClearFormulaWarning = refAutoReset(false, timeout)
+
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      showEditFormulaWarningMessage()
+      showEditFormulaWarning.value = true
       break
     case 'Delete':
-      showClearFormulaWarningMessage()
+      showClearFormulaWarning.value = true
       break
   }
 })
@@ -55,7 +41,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       <span>ERR!</span>
     </a-tooltip>
 
-    <div class="p-2" @dblclick="showEditFormulaWarningMessage">
+    <div class="p-2" @dblclick="showEditFormulaWarning = true">
       <div v-if="urls" v-html="urls" />
 
       <div v-else>{{ result }}</div>

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -11,6 +11,7 @@ import {
   computed,
   inject,
   provide,
+  refAutoReset,
   useColumn,
   useMetas,
 } from '#imports'
@@ -47,32 +48,18 @@ provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 
-const showEditWarning = ref(false)
+const timeout = 3000 // in ms
 
-const showClearWarning = ref(false)
-
-const showEditWarningMessage = () => {
-  showEditWarning.value = true
-
-  setTimeout(() => {
-    showEditWarning.value = false
-  }, 3000)
-}
-const showClearWarningMessage = () => {
-  showClearWarning.value = true
-
-  setTimeout(() => {
-    showClearWarning.value = false
-  }, 3000)
-}
+const showEditWarning = refAutoReset(false, timeout)
+const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      showEditWarningMessage()
+      showEditWarning.value = true
       break
     case 'Delete':
-      showClearWarningMessage()
+      showClearWarning.value = true
       break
   }
 })

packages/nc-gui/components/virtual-cell/Rollup.vue

@@ -1,35 +1,20 @@
 <script setup lang="ts">
-import { CellValueInj, inject } from '#imports'
+import { CellValueInj, inject, refAutoReset } from '#imports'
 
 const value = inject(CellValueInj)
 
-const showEditWarning = ref(false)
+const timeout = 3000 // in ms
 
-const showClearWarning = ref(false)
-
-const showEditWarningMessage = () => {
-  showEditWarning.value = true
-
-  setTimeout(() => {
-    showEditWarning.value = false
-  }, 3000)
-}
-
-const showClearWarningMessage = () => {
-  showClearWarning.value = true
-
-  setTimeout(() => {
-    showClearWarning.value = false
-  }, 3000)
-}
+const showEditWarning = refAutoReset(false, timeout)
+const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      showEditWarningMessage()
+      showEditWarning.value = true
       break
     case 'Delete':
-      showClearWarningMessage()
+      showClearWarning.value = true
       break
   }
 })

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -5,16 +5,16 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
   ColumnInj,
   Empty,
+  IsPublicInj,
   computed,
   inject,
   ref,
   useLTARStoreOrThrow,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useVModel,
   watch,
 } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -115,15 +115,17 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
       e.stopPropagation()
       break
     case 'Enter':
-      const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
-      if (selectedRow) {
-        linkRow(selectedRow)
-        e.stopPropagation()
+      {
+        const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+        if (selectedRow) {
+          linkRow(selectedRow)
+          e.stopPropagation()
+        }
       }
       break
   }
 })
-const activeRow = (el: InstanceType<typeof Card>) => {
+const activeRow = (el?: InstanceType<typeof Card>) => {
   el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 </script>

packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

@@ -1,20 +1,21 @@
+import { isClient } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { onUnmounted, useEventListener } from '#imports'
 
 export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) {
-  const cleanup: Ref<ReturnType<typeof useEventListener> | null> = ref(null)
+  if (isClient) {
+    watch(selected, (nextVal, _, cleanup) => {
+      // bind listener when `selected` is truthy
+      if (nextVal) {
+        document.addEventListener('keyup', handler)
+        // if `selected` is falsy then remove the event handler
+      } else {
+        document.removeEventListener('keyup', handler)
+      }
 
-  watch(selected, (value) => {
-    if (value) {
-      cleanup.value = useEventListener('keydown', handler, true)
-    } else {
-      cleanup.value?.()
-    }
-  })
-
-  onUnmounted(() => cleanup.value?.())
-
-  return {
-    cleanup,
+      // cleanup is called whenever the watcher is re-evaluated or stopped
+      cleanup(() => {
+        document.removeEventListener('keyup', handler)
+      })
+    })
   }
 }

packages/nc-gui/utils/columnUtils.ts

@@ -24,7 +24,6 @@ import TimerOutline from '~icons/mdi/timer-outline'
 import Star from '~icons/mdi/star'
 import MathIntegral from '~icons/mdi/math-integral'
 import MovieRoll from '~icons/mdi/movie-roll'
-import Counter from '~icons/mdi/counter'
 import CalendarClock from '~icons/mdi/calendar-clock'
 import ID from '~icons/mdi/identifier'
 import RulerSquareCompass from '~icons/mdi/ruler-square-compass'