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 { onKeyDown } from '@vueuse/core'
import { useProvideAttachmentCell } from './utils' import { useProvideAttachmentCell } from './utils'
import { useSortable } from './sort' import { useSortable } from './sort'
import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
import { ActiveCellInj } from '~/context'
import { import {
ActiveCellInj,
DropZoneRef, DropZoneRef,
IsGalleryInj, IsGalleryInj,
IsKanbanInj, IsKanbanInj,
@ -14,6 +13,7 @@ import {
openLink, openLink,
ref, ref,
useDropZone, useDropZone,
useSelectedCellKeyupListener,
useSmartsheetRowStoreOrThrow, useSmartsheetRowStoreOrThrow,
useSmartsheetStoreOrThrow, useSmartsheetStoreOrThrow,
watch, 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 */ /** On clicking outside of table reset active cell */
const smartTable = ref(null) const smartTable = ref(null)
onClickOutside(smartTable, (e: PointerEvent) => { onClickOutside(smartTable, (e) => {
clearRangeRows() clearRangeRows()
if (selected.col === null) return if (selected.col === null) return

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

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

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

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

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

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

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

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

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

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

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

@ -1,20 +1,21 @@
import { isClient } from '@vueuse/core'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { onUnmounted, useEventListener } from '#imports'
export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) { 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) => {
watch(selected, (value) => { // bind listener when `selected` is truthy
if (value) { if (nextVal) {
cleanup.value = useEventListener('keydown', handler, true) document.addEventListener('keyup', handler)
// if `selected` is falsy then remove the event handler
} else { } else {
cleanup.value?.() document.removeEventListener('keyup', handler)
} }
})
onUnmounted(() => cleanup.value?.())
return { // cleanup is called whenever the watcher is re-evaluated or stopped
cleanup, 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 Star from '~icons/mdi/star'
import MathIntegral from '~icons/mdi/math-integral' import MathIntegral from '~icons/mdi/math-integral'
import MovieRoll from '~icons/mdi/movie-roll' import MovieRoll from '~icons/mdi/movie-roll'
import Counter from '~icons/mdi/counter'
import CalendarClock from '~icons/mdi/calendar-clock' import CalendarClock from '~icons/mdi/calendar-clock'
import ID from '~icons/mdi/identifier' import ID from '~icons/mdi/identifier'
import RulerSquareCompass from '~icons/mdi/ruler-square-compass' import RulerSquareCompass from '~icons/mdi/ruler-square-compass'

Loading…
Cancel
Save