Browse Source

feat(api): show warning for virtual cells when enter or delete key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4222/head
Pranav C 2 years ago
parent
commit
64f55b841a
  1. 10
      packages/nc-gui/components/cell/Checkbox.vue
  2. 80
      packages/nc-gui/components/smartsheet/Grid.vue
  3. 12
      packages/nc-gui/components/virtual-cell/Formula.vue
  4. 12
      packages/nc-gui/components/virtual-cell/Lookup.vue
  5. 12
      packages/nc-gui/components/virtual-cell/Rollup.vue

10
packages/nc-gui/components/cell/Checkbox.vue

@ -1,13 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
ActiveCellInj,
ColumnInj,
IsFormInj,
ReadonlyInj,
getMdiIcon,
inject,
useSelectedCellKeyupListener,
} from '#imports'
interface Props { interface Props {
// If the previous cell value was a text, the initial checkbox value is a string type // If the previous cell value was a text, the initial checkbox value is a string type

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

@ -22,6 +22,7 @@ import {
extractPkFromRow, extractPkFromRow,
inject, inject,
isColumnRequiredAndNull, isColumnRequiredAndNull,
isMac,
message, message,
onBeforeUnmount, onBeforeUnmount,
onClickOutside, onClickOutside,
@ -39,9 +40,7 @@ import {
useUIPermission, useUIPermission,
useViewData, useViewData,
watch, watch,
isMac,
} from '#imports' } from '#imports'
import { switchAll } from 'rxjs'
import type { Row } from '~/lib' import type { Row } from '~/lib'
import { NavigateDir } from '~/lib' import { NavigateDir } from '~/lib'
@ -146,8 +145,8 @@ const getContainerScrollForElement = (
relativePos.right + (offset?.right || 0) > 0 relativePos.right + (offset?.right || 0) > 0
? container.scrollLeft + relativePos.right + (offset?.right || 0) ? container.scrollLeft + relativePos.right + (offset?.right || 0)
: relativePos.left - (offset?.left || 0) < 0 : relativePos.left - (offset?.left || 0) < 0
? container.scrollLeft + relativePos.left - (offset?.left || 0) ? container.scrollLeft + relativePos.left - (offset?.left || 0)
: container.scrollLeft : container.scrollLeft
/* /*
* If the element is below the container, scroll down (positive) * If the element is below the container, scroll down (positive)
@ -163,6 +162,7 @@ const getContainerScrollForElement = (
return scroll return scroll
} }
const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect( const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
fields, fields,
data, data,
@ -208,50 +208,50 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
) )
function scrollToCell(row?: number | null, col?: number | null) { function scrollToCell(row?: number | null, col?: number | null) {
row = row ?? selected.row row = row ?? selected.row
col = col ?? selected.col col = col ?? selected.col
if (row !== undefined && col !== undefined && row !== null && col !== null) { if (row !== undefined && col !== undefined && row !== null && col !== null) {
// get active cell // get active cell
const rows = tbodyEl.value?.querySelectorAll('tr') const rows = tbodyEl.value?.querySelectorAll('tr')
const cols = rows?.[row].querySelectorAll('td') const cols = rows?.[row].querySelectorAll('td')
const td = cols?.[col === 0 ? 0 : col + 1] const td = cols?.[col === 0 ? 0 : col + 1]
if (!td || !gridWrapper.value) return
const { height: headerHeight } = tableHead.value!.getBoundingClientRect()
const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
if (rows && row === rows.length - 2) {
// if last row make 'Add New Row' visible
gridWrapper.value.scrollTo({
top: gridWrapper.value.scrollHeight,
left:
cols && col === cols.length - 2 // if corner cell
? gridWrapper.value.scrollWidth
: tdScroll.left,
behavior: 'smooth',
})
return
}
if (cols && col === cols.length - 2) { if (!td || !gridWrapper.value) return
// if last column make 'Add New Column' visible
gridWrapper.value.scrollTo({ const { height: headerHeight } = tableHead.value!.getBoundingClientRect()
top: tdScroll.top, const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
left: gridWrapper.value.scrollWidth,
behavior: 'smooth', if (rows && row === rows.length - 2) {
}) // if last row make 'Add New Row' visible
return gridWrapper.value.scrollTo({
} top: gridWrapper.value.scrollHeight,
left:
cols && col === cols.length - 2 // if corner cell
? gridWrapper.value.scrollWidth
: tdScroll.left,
behavior: 'smooth',
})
return
}
// scroll into the active cell if (cols && col === cols.length - 2) {
// if last column make 'Add New Column' visible
gridWrapper.value.scrollTo({ gridWrapper.value.scrollTo({
top: tdScroll.top, top: tdScroll.top,
left: tdScroll.left, left: gridWrapper.value.scrollWidth,
behavior: 'smooth', behavior: 'smooth',
}) })
return
} }
// scroll into the active cell
gridWrapper.value.scrollTo({
top: tdScroll.top,
left: tdScroll.left,
behavior: 'smooth',
})
} }
}
onMounted(loadGridViewColumns) onMounted(loadGridViewColumns)

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

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { message } from 'ant-design-vue'
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, replaceUrlsWithLink, useProject } from '#imports'
@ -23,6 +24,17 @@ const showEditFormulaWarningMessage = () => {
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))
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
message.warning('Formula fields should be configured in the field menu dropdown')
break
case 'Delete':
message.warning('Computed field: unable to clear text')
break
}
})
</script> </script>
<template> <template>

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

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { message } from 'ant-design-vue'
import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk' import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk' import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import type { Ref } from 'vue' import type { Ref } from 'vue'
@ -46,6 +47,17 @@ provide(MetaInj, lookupTableMeta)
provide(CellUrlDisableOverlayInj, ref(true)) provide(CellUrlDisableOverlayInj, ref(true))
const lookupColumnMetaProps = useColumn(lookupColumn) const lookupColumnMetaProps = useColumn(lookupColumn)
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
message.warning('Computed field: unable to edit')
break
case 'Delete':
message.warning('Computed field: unable to clear text')
break
}
})
</script> </script>
<template> <template>

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

@ -1,7 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { message } from 'ant-design-vue'
import { CellValueInj, inject } from '#imports' import { CellValueInj, inject } from '#imports'
const value = inject(CellValueInj) const value = inject(CellValueInj)
useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
switch (e.key) {
case 'Enter':
message.warning('Computed field: unable to edit')
break
case 'Delete':
message.warning('Computed field: unable to clear text')
break
}
})
</script> </script>
<template> <template>

Loading…
Cancel
Save