From bcff62b83446f61a6a20a7fab860577e88dcecdc Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 21 Oct 2022 01:38:18 +0200
Subject: [PATCH] feat(nc-gui): open a separate form for each composable caller
---
.../smartsheet/expanded-form/Detached.vue | 26 +++----
.../components/ListChildItems.vue | 26 ++++---
.../useExpandedFormDetached/index.ts | 67 +++++++------------
3 files changed, 53 insertions(+), 66 deletions(-)
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
index cdc4311005..9db5aba830 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Detached.vue
@@ -1,20 +1,20 @@
-
+
+
+
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 507dd9ca3e..7cb43d0b45 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -11,6 +11,7 @@ import {
h,
inject,
ref,
+ useExpandedFormDetached,
useLTARStoreOrThrow,
useSmartsheetRowStoreOrThrow,
useVModel,
@@ -31,6 +32,8 @@ const column = inject(ColumnInj)
const readonly = inject(ReadonlyInj, false)
+const { open } = useExpandedFormDetached()
+
const {
childrenList,
deleteRelatedRow,
@@ -88,6 +91,18 @@ watch(
if (!isNew.value && vModel.value) loadChildrenList()
},
)
+
+function openExpandedForm() {
+ if (expandedFormRow.value) {
+ open({
+ isOpen: true,
+ row: { row: expandedFormRow.value, oldRow: expandedFormRow.value },
+ meta: relatedTableMeta.value,
+ loadRow: true,
+ useMetaFields: true,
+ })
+ }
+}
@@ -176,17 +191,6 @@ watch(
:image-style="isForm ? { height: '20px' } : {}"
/>
-
-
-
-
diff --git a/packages/nc-gui/composables/useExpandedFormDetached/index.ts b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
index 43cc0d04e4..c2bda1c78d 100644
--- a/packages/nc-gui/composables/useExpandedFormDetached/index.ts
+++ b/packages/nc-gui/composables/useExpandedFormDetached/index.ts
@@ -1,58 +1,41 @@
import type { TableType, ViewType } from 'nocodb-sdk'
-import { reactive, toRefs, useInjectionState } from '#imports'
+import { ref, useInjectionState } from '#imports'
import type { Row } from '~/lib'
interface UseExpandedFormDetachedProps {
- isOpen?: boolean
- row: Row | null
- state?: Record | null
- meta: TableType
- loadRow?: boolean
- useMetaFields?: boolean
- rowId?: string
- view?: ViewType
+ 'isOpen'?: boolean
+ 'row': Row | null
+ 'state'?: Record | null
+ 'meta': TableType
+ 'loadRow'?: boolean
+ 'useMetaFields'?: boolean
+ 'rowId'?: string
+ 'view'?: ViewType
+ 'onCancel'?: Function
+ 'onUpdate:modelValue'?: Function
}
const [setup, use] = useInjectionState(() => {
- const state = reactive({
- isOpen: false,
- state: null,
- loadRow: false,
- useMetaFields: false,
- row: null,
- meta: null as any,
- })
+ return ref([])
+})
- const open = (props: UseExpandedFormDetachedProps) => {
- state.state = props.state
- state.loadRow = props.loadRow
- state.useMetaFields = props.useMetaFields
- state.rowId = props.rowId
- state.row = props.row
- state.loadRow = props.loadRow
- state.meta = props.meta
- state.isOpen = props.isOpen
-
- state.isOpen = true
- }
+export function useExpandedFormDetached() {
+ let states = use()!
- const close = () => {
- state.isOpen = false
+ if (!states) {
+ states = setup()
}
- return {
- ...toRefs(state),
- open,
- close,
- }
-})
+ const index = ref(-1)
-export function useExpandedFormDetached() {
- const state = use()
+ const open = (props: UseExpandedFormDetachedProps) => {
+ states.value.push(props)
+ index.value = states.value.length - 1
+ }
- if (!state) {
- return setup()
+ const close = () => {
+ states.value.splice(index.value, 1)
}
- return state
+ return { states, open, close }
}