fix #180

src/components/rest/RestQuery.vue

@@ -55,7 +55,7 @@
       </q-card-section>
     </q-card>
 
-    <rest-query-form-tabs @reload-history="reloadHistory" @reload-saved-queries="reloadSavedQueries" />
+    <rest-query-form-tabs ref="tabs" @reload-history="reloadHistory" @reload-saved-queries="reloadSavedQueries" />
   </div>
 </template>
 
@@ -66,8 +66,11 @@
   import RestQueryHistoryList from './RestQueryHistoryList.vue'
   import RestQuerySavedQueriesList from './RestQuerySavedQueriesList.vue'
   import RestQueryFormTabs from './RestQueryFormTabs.vue'
+  import { Ref, ref } from 'vue'
 
   const t = useTranslation()
+  const tabs: Ref<typeof RestQueryFormTabs | null> = ref(null)
+
   const {
     clusterMinor,
     history,
@@ -80,5 +83,5 @@
     toggleSavedQueries,
     useRequest,
     useRequestInNewTab
-  } = useRestQuery()
+  } = useRestQuery(tabs)
 </script>

src/components/rest/RestQueryFormTabs.vue

@@ -39,5 +39,6 @@
 
   const emit = defineEmits(['reloadHistory', 'reloadSavedQueries'])
 
-  const { tabs, activeTabName, addTab, updateTab, removeTab } = useRestQueryTabs()
+  const { tabs, activeTabName, addTab, updateTab, removeTab, setTabContent } = useRestQueryTabs()
+  defineExpose({ setTabContent, addTab })
 </script>

src/composables/components/rest/RestQuery.ts

@@ -1,10 +1,10 @@
 import { useConnectionStore } from '../../../store/connection.ts'
 import { computed, ref, Ref, toRaw } from 'vue'
 import { useIdbStore } from '../../../db/Idb.ts'
-import RestQueryFormTabs from '../../../components/rest/RestQueryFormTabs.vue'
 import { IdbRestQueryHistory, IdbRestQuerySavedQuery, IdbRestQueryTabRequest } from '../../../db/types.ts'
+import RestQueryFormTabs from '../../../components/rest/RestQueryFormTabs.vue'
 
-export const useRestQuery = () => {
+export const useRestQuery = (formTabs: Ref<typeof RestQueryFormTabs | null>) => {
   const { activeCluster } = useConnectionStore()
   const clusterMinor = computed(() => (activeCluster?.version?.split('.')?.slice(0, 2)?.join('.')))
 
@@ -18,7 +18,6 @@ export const useRestQuery = () => {
   const reloadSavedQueries = async () => (savedQueries.value = await restQuerySavedQueries.getAll())
   reloadSavedQueries()
 
-  const tabs: Ref<InstanceType<typeof RestQueryFormTabs> | null> = ref(null)
   const historyOpen = ref(false)
   const savedQueriesOpen = ref(false)
   const toggleHistory = () => {
@@ -31,23 +30,16 @@ export const useRestQuery = () => {
   }
 
   const useRequest = async (request: IdbRestQueryTabRequest) => {
-    if (!request || !tabs.value) return
-
-    const activeTab = restQueryTabs.all.value[tabs.value.activeTabIndex()]
-    if (!activeTab) return
+    if (!request || !formTabs.value) return
 
-    const { id, label, name } = activeTab
-    const obj = Object.assign({}, { id, label, name }, {
-      request: toRaw(request),
-      response: { status: '', ok: false, bodyText: '' }
-    })
+    const obj = formTabs.value.setTabContent(toRaw(request))
     await restQueryTabs.update(obj)
   }
 
   const useRequestInNewTab = async (request: IdbRestQueryTabRequest) => {
-    if (!tabs.value) return
+    if (!formTabs.value) return
 
-    await tabs.value.addTab()
+    await formTabs.value.addTab()
     await useRequest(request)
   }
 

src/composables/components/rest/RestQueryTabs.ts

@@ -45,7 +45,24 @@ export const useRestQueryTabs = () => {
   }
   loadTabs()
 
+  const activeTabIndex = () => (tabs.value.findIndex(t => t.name === activeTabName.value) || 0)
+
+  const setTabContent = ({ method, path, body }: { method: string, path: string, body: string }) => {
+    const idx = activeTabIndex()
+    tabs.value[idx].request.method = method
+    tabs.value[idx].request.path = path
+    tabs.value[idx].request.body = body
+    tabs.value[idx].response.status = ''
+    tabs.value[idx].response.ok = false
+    tabs.value[idx].response.bodyText = ''
+
+    const obj = toRaw(tabs.value[idx])
+    restQueryTabs.update(obj)
+    return obj
+  }
+
   return {
+    setTabContent,
     tabs,
     activeTabName,
     addTab,