github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): form field tab issue

pull/7664/head
Ramesh Mane 7 months ago
parent
25a00839c3
commit
2bd7fc529b
2 changed files with 48 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui/components/cell/TextArea.vue
  2. 89
      packages/nc-gui/components/smartsheet/Form.vue

2
packages/nc-gui/components/cell/TextArea.vue
Unescape View File

@ -61,7 +61,7 @@ const mousePosition = ref<
const isDragging = ref(false)
const focus: VNodeRef = (el) =>
!isExpandedFormOpen.value && !isEditColumn.value && isForm.value && (el as HTMLTextAreaElement)?.focus()
!isExpandedFormOpen.value && !isEditColumn.value && !isForm.value && (el as HTMLTextAreaElement)?.focus()
const height = computed(() => {
if (isExpandedFormOpen.value) return 36 * 4

89
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core'
import Draggable from 'vuedraggable'
import { Pane, Splitpanes } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
@ -30,6 +31,7 @@ import {
useViewColumnsOrThrow,
useViewData,
watch,
useEventListener,
} from '#imports'
provide(IsFormInj, ref(true))
@ -113,7 +115,9 @@ const submitted = ref(false)
const activeRow = ref('')
const editEnabled = ref<boolean[]>([])
const focusLabel: VNodeRef = (el) => {
return (el as HTMLInputElement)?.focus()
}
const searchQuery = ref('')
@ -323,8 +327,6 @@ function setFormData() {
.sort((a, b) => a.order - b.order)
.map((c) => ({ ...c, required: !!c.required }))
editEnabled.value = new Array(localColumns.value.length).fill(false)
hiddenColumns.value = col.filter(
(f) => !f.show && !systemFieldsIds.value.includes(f.fk_column_id) && !hiddenColTypes.includes(f.uidt),
)
@ -409,6 +411,18 @@ const onFormItemClick = (element: any) => {
activeRow.value = element.title
}
useEventListener(document, 'focusout', (e: FocusEvent) => {
const nextActiveFieldTitle =
e?.relatedTarget?.getAttribute('data-title') ||
e?.relatedTarget?.offsetParent?.closest('.nc-form-focus-element')?.getAttribute('data-title')
if (activeRow.value && nextActiveFieldTitle && activeRow.value !== nextActiveFieldTitle) {
activeRow.value = nextActiveFieldTitle
} else {
console.log(document.activeElement)
}
})
</script>
<template>
@ -516,7 +530,7 @@ const onFormItemClick = (element: any) => {
<a-form-item v-if="isEditable">
<a-textarea
v-model:value="formViewData.heading"
class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
class="nc-form-focus-element w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
:style="{
'borderRightWidth': '0px !important',
'height': '70px',
@ -530,6 +544,7 @@ const onFormItemClick = (element: any) => {
placeholder="Form Title"
:bordered="false"
data-testid="nc-form-heading"
data-title="nc-form-heading"
@blur="updateView"
@keydown.enter="updateView"
/>
@ -543,7 +558,7 @@ const onFormItemClick = (element: any) => {
<a-form-item v-if="isEditable" class="w-full">
<a-textarea
v-model:value="formViewData.subheading"
class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
class="nc-form-focus-element w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
:style="{
'borderRightWidth': '0px !important',
'height': '40px',
@ -557,6 +572,7 @@ const onFormItemClick = (element: any) => {
:bordered="false"
:disabled="!isEditable || isLocked"
data-testid="nc-form-sub-heading"
data-title="nc-form-sub-heading"
@blur="updateView"
@click="updateView"
/>
@ -584,7 +600,7 @@ const onFormItemClick = (element: any) => {
>
<template #item="{ element, index }">
<div
class="nc-editable item relative bg-white"
class="nc-editable nc-form-focus-element item relative bg-white"
:class="[
`nc-form-drag-${element.title.replaceAll(' ', '')}`,
{
@ -608,6 +624,7 @@ const onFormItemClick = (element: any) => {
:style="{
transition: 'height 1s ease-in',
}"
:data-title="element.title"
data-testid="nc-form-fields"
@click="onFormItemClick(element)"
>
@ -644,8 +661,7 @@ const onFormItemClick = (element: any) => {
</div>
<div class="flex gap-2 items-center">
<span
class="text-gray-500 mr-2 nc-form-input-required"
data-testid="nc-form-input-required"
class="text-gray-500 mr-2"
@click="
() => {
element.required = !element.required
@ -657,6 +673,8 @@ const onFormItemClick = (element: any) => {
</span>
<a-switch
v-model:checked="element.required"
class="nc-form-input-required"
data-testid="nc-form-input-required"
v-e="['a:form-view:field:mark-required']"
size="small"
@change="updateColMeta(element)"
@ -670,6 +688,7 @@ const onFormItemClick = (element: any) => {
<template v-if="activeRow === element.title">
<a-form-item class="my-0 !mb-2">
<a-textarea
:ref="focusLabel"
v-model:value="element.label"
:rows="1"
auto-size
@ -723,7 +742,6 @@ const onFormItemClick = (element: any) => {
</template>
<div :class="activeRow !== element.title ? 'mt-2' : ''">
<a-form-item
v-if="isVirtualCol(element)"
:name="element.title"
class="!my-0 nc-input-required-error nc-form-input-item"
:rules="[
@ -733,40 +751,24 @@ const onFormItemClick = (element: any) => {
},
]"
>
<LazySmartsheetVirtualCell
v-model="formState[element.title]"
:row="row"
class="nc-input"
:class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:column="element"
@click.stop.prevent
/>
</a-form-item>
<a-form-item
v-else
:name="element.title"
class="!my-0 nc-input-required-error nc-form-input-item"
:rules="[
{
required: isRequired(element, element.required),
message: `${element.label || element.title} is required`,
},
]"
>
<LazySmartsheetDivDataCell class="relative">
<LazySmartsheetDivDataCell class="relative" @click.stop>
<LazySmartsheetVirtualCell
v-if="isVirtualCol(element)"
v-model="formState[element.title]"
:row="row"
class="nc-input"
:class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:column="element"
/>
<LazySmartsheetCell
v-else
v-model="formState[element.title]"
class="nc-input truncate"
:class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:data-testid="`nc-form-input-${element.title.replaceAll(' ', '')}`"
:column="element"
:edit-enabled="editEnabled[index]"
@click="editEnabled[index] = true"
@cancel="editEnabled[index] = false"
@update:edit-enabled="editEnabled[index] = $event"
@click.stop.prevent
:edit-enabled="true"
/>
</LazySmartsheetDivDataCell>
</a-form-item>
@ -807,8 +809,9 @@ const onFormItemClick = (element: any) => {
type="secondary"
size="small"
:disabled="!isUIAllowed('dataInsert')"
class="nc-form-clear"
class="nc-form-clear nc-form-focus-element"
data-testid="nc-form-clear"
data-title="nc-form-clear"
@click="clearForm"
>
Crear Form
@ -818,8 +821,9 @@ const onFormItemClick = (element: any) => {
type="primary"
size="small"
:disabled="!isUIAllowed('dataInsert')"
class="nc-form-submit"
class="nc-form-submit nc-form-focus-element"
data-testid="nc-form-submit"
data-title="nc-form-submit"
@click="submitForm"
>
{{ $t('general.submit') }}
@ -1121,7 +1125,6 @@ const onFormItemClick = (element: any) => {
.nc-input {
@apply appearance-none w-full !bg-white rounded-lg px-2 py-2 border-solid border-1 border-gray-200 focus-within:border-brand-500;
&.nc-cell-rating,
&.nc-cell-geodata {
@apply !py-1;
@ -1188,8 +1191,7 @@ const onFormItemClick = (element: any) => {
@apply content-[':::'] block h-4 leading-12px px-2 font-bold text-gray-800 border-1 border-gray-200 rounded bg-white absolute -top-2.5 z-100 left-[calc(50%_-_16px)];
}
}
.nc-form-fields-list {
}
.nc-form-scrollbar {
@apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
&::-webkit-scrollbar-thumb:hover {
@ -1206,4 +1208,7 @@ const onFormItemClick = (element: any) => {
.nc-form-field-ghost {
@apply bg-gray-50;
}
:deep(.nc-form-input-required):focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3366ff;
}
</style>

Write Preview
Loading…
Cancel
Save