diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue index 9db5aba830..def9be7748 100644 --- a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue +++ b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue @@ -1,7 +1,11 @@ diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue index 7cb43d0b45..eec01a1cdd 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue @@ -17,6 +17,7 @@ import { useVModel, watch, } from '#imports' +import type { Row } from '~/lib' const props = defineProps<{ modelValue?: boolean; cellValue: any }>() @@ -80,10 +81,6 @@ const container = computed(() => : Modal, ) -const expandedFormDlg = ref(false) - -const expandedFormRow = ref() - /** reload children list whenever cell value changes and list is visible */ watch( () => props.cellValue, @@ -92,16 +89,16 @@ watch( }, ) -function openExpandedForm() { - if (expandedFormRow.value) { - open({ - isOpen: true, - row: { row: expandedFormRow.value, oldRow: expandedFormRow.value }, - meta: relatedTableMeta.value, - loadRow: true, - useMetaFields: true, - }) - } +function openExpandedForm(row: Row) { + if (readonly) return + + open({ + isOpen: true, + row: { row, oldRow: row, rowMeta: {} }, + meta: relatedTableMeta.value, + loadRow: true, + useMetaFields: true, + }) } @@ -141,13 +138,7 @@ function openExpandedForm() { v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []" :key="i" class="!my-4 hover:(!bg-gray-200/50 shadow-md)" - @click=" - () => { - if (readonly) return - expandedFormRow = row - expandedFormDlg = true - } - " + @click="openExpandedForm(row)" >
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue index df6700cd02..af7f606bae 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue @@ -7,6 +7,7 @@ import { computed, inject, ref, + useExpandedFormDetached, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, @@ -22,6 +23,8 @@ const vModel = useVModel(props, 'modelValue', emit) const column = inject(ColumnInj) +const { open, close } = useExpandedFormDetached() + const { childrenExcludedList, loadChildrenExcludedList, @@ -57,8 +60,6 @@ watch(vModel, (nextVal, prevVal) => { } }) -const expandedFormDlg = ref(false) - /** populate initial state for a new row which is parent/child of current record */ const newRowState = computed(() => { if (isNew.value) return {} @@ -93,11 +94,23 @@ const newRowState = computed(() => { } }) -// if it's an existing record close the list -// after new record creation since it's already linking while creating -watch(expandedFormDlg, (nexVal) => { - if (!nexVal && !isNew.value) vModel.value = false -}) +function openExpandedForm() { + // if it's an existing record close the list + // after new record creation since it's already linking while creating + if (!isNew.value) { + vModel.value = false + return close() + } + + open({ + isOpen: true, + row: { row: {}, oldRow: {}, rowMeta: { new: true } }, + meta: relatedTableMeta.value, + loadRow: false, + useMetaFields: true, + state: newRowState.value, + }) +} - - - -
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts index c2bda1c78d..2aef11da08 100644 --- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts +++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts @@ -1,5 +1,5 @@ import type { TableType, ViewType } from 'nocodb-sdk' -import { ref, useInjectionState } from '#imports' +import { createEventHook, ref, useInjectionState } from '#imports' import type { Row } from '~/lib' interface UseExpandedFormDetachedProps { @@ -26,6 +26,8 @@ export function useExpandedFormDetached() { states = setup() } + const closeHook = createEventHook() + const index = ref(-1) const open = (props: UseExpandedFormDetachedProps) => { @@ -33,9 +35,10 @@ export function useExpandedFormDetached() { index.value = states.value.length - 1 } - const close = () => { - states.value.splice(index.value, 1) + const close = (i?: number) => { + states.value.splice(i || index.value, 1) + if (index.value === i || !i) closeHook.trigger() } - return { states, open, close } + return { states, open, close, onClose: closeHook.on } }