Browse Source

fix: link record expanded form auto focus issue on clicking link items

pull/7623/head
Ramesh Mane 9 months ago
parent
commit
13fe8b4dc0
  1. 26
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  2. 13
      packages/nc-gui/components/virtual-cell/components/ListItems.vue

26
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@ -1,5 +1,4 @@
<script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core'
import { type ColumnType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
import type { Row } from '#imports'
import InboxIcon from '~icons/nc-icons/inbox'
@ -42,6 +41,8 @@ const injectedColumn = inject(ColumnInj, ref())
const readOnly = inject(ReadonlyInj, ref(false))
const filterQueryRef = ref()
const { isSharedBase } = storeToRefs(useBase())
const {
@ -63,15 +64,6 @@ const {
const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow()
const colTitle = computed(() => injectedColumn.value?.title || '')
const isDataExist = computed<boolean>(() => {
return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
})
const filterQueryFocus: VNodeRef = (el) =>
vModel.value && (isPublic.value || readOnly.value ? isDataExist.value : true) && (el as HTMLInputElement)?.focus()
watch(
[vModel, isForm],
(nextVal) => {
@ -112,6 +104,8 @@ const expandedFormDlg = ref(false)
const expandedFormRow = ref({})
const colTitle = computed(() => injectedColumn.value?.title || '')
const onClick = (row: Row) => {
if (readOnly.value) return
expandedFormRow.value = row
@ -135,6 +129,10 @@ watch(expandedFormDlg, () => {
}
})
watch(filterQueryRef, () => {
filterQueryRef.value?.focus()
})
onKeyStroke('Escape', () => {
vModel.value = false
})
@ -166,6 +164,10 @@ const totalItemsToShow = computed(() => {
return childrenListCount.value
})
const isDataExist = computed<boolean>(() => {
return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
})
const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
if (isSharedBase.value) return
if (readOnly.value) return
@ -200,10 +202,10 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
:display-value="headerDisplayValue"
/>
<div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
<div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 focus-within:!border-primary">
<div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 !focus-within:border-primary">
<MdiMagnify class="w-5 h-5 ml-2 text-gray-500" />
<a-input
:ref="filterQueryFocus"
ref="filterQueryRef"
v-model:value="childrenListPagination.query"
:placeholder="`Search in ${relatedTableMeta?.title}`"
class="w-full !sm:rounded-md xs:min-h-8 !xs:rounded-xl"

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

@ -1,5 +1,4 @@
<script lang="ts" setup>
import type { VNodeRef } from '@vue/runtime-core'
import { RelationTypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import InboxIcon from '~icons/nc-icons/inbox'
@ -28,6 +27,8 @@ const injectedColumn = inject(ColumnInj)
const { isSharedBase } = storeToRefs(useBase())
const filterQueryRef = ref()
const { t } = useI18n()
const { $e } = useNuxtApp()
@ -63,8 +64,6 @@ const isForm = inject(IsFormInj, ref(false))
const saveRow = inject(SaveRowInj, () => {})
const filterQueryFocus: VNodeRef = (el) => vModel.value && (el as HTMLInputElement)?.focus()
const linkRow = async (row: Record<string, any>, id: number) => {
if (isNew.value) {
addLTARRef(row, injectedColumn?.value as ColumnType)
@ -170,6 +169,10 @@ watch(expandedFormDlg, () => {
}
})
watch(filterQueryRef, () => {
filterQueryRef.value?.focus()
})
onKeyStroke('Escape', () => {
vModel.value = false
})
@ -239,10 +242,10 @@ const onCreatedRecord = (record: any) => {
:header="$t('activity.addNewLink')"
/>
<div class="flex mt-2 mb-2 items-center gap-2">
<div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 focus-within:!border-primary">
<div class="flex items-center border-1 p-1 rounded-md w-full border-gray-200 !focus-within:border-primary">
<MdiMagnify class="w-5 h-5 ml-2 text-gray-500" />
<a-input
:ref="filterQueryFocus"
ref="filterQueryRef"
v-model:value="childrenExcludedListPagination.query"
:placeholder="`${$t('general.searchIn')} ${relatedTableMeta?.title}`"
class="w-full !rounded-md nc-excluded-search xs:min-h-8"

Loading…
Cancel
Save