Browse Source

refactor: cleanup and lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
d682e56a3f
  1. 4
      packages/nc-gui/components/cell/attachment/index.vue
  2. 2
      packages/nc-gui/components/smartsheet/Grid.vue
  3. 2
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  4. 32
      packages/nc-gui/components/virtual-cell/Formula.vue
  5. 25
      packages/nc-gui/components/virtual-cell/Lookup.vue
  6. 27
      packages/nc-gui/components/virtual-cell/Rollup.vue
  7. 8
      packages/nc-gui/components/virtual-cell/components/ListItems.vue
  8. 25
      packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
  9. 1
      packages/nc-gui/utils/columnUtils.ts

4
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,

2
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

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

32
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>

25
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
}
})

27
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
}
})

8
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()
}
}
break
}
})
const activeRow = (el: InstanceType<typeof Card>) => {
const activeRow = (el?: InstanceType<typeof Card>) => {
el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
}
</script>

25
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)
watch(selected, (value) => {
if (value) {
cleanup.value = useEventListener('keydown', handler, true)
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 {
cleanup.value?.()
document.removeEventListener('keyup', handler)
}
})
onUnmounted(() => cleanup.value?.())
return {
cleanup,
// cleanup is called whenever the watcher is re-evaluated or stopped
cleanup(() => {
document.removeEventListener('keyup', handler)
})
})
}
}

1
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'

Loading…
Cancel
Save