From 09e9c272b7b51c3ad659f5dcd8aa925c35784d67 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 13 Aug 2024 00:31:47 +0200
Subject: [PATCH] refactor: rework async ToolSettings

---
 app/src/views/tool/ToolSettings.vue | 64 +++++++++++------------------
 1 file changed, 25 insertions(+), 39 deletions(-)

diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 2514cdd8..35d006a2 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -1,53 +1,39 @@
 <script setup lang="ts">
-import { shallowRef } from 'vue'
-
 import api, { objectToParams } from '@/api'
 import ConfigPanelsComponent from '@/components/ConfigPanels.vue'
-import type {
-  ConfigPanelsProps,
-  OnPanelApply,
-} from '@/composables/configPanels'
 import { formatConfigPanels, useConfigPanels } from '@/composables/configPanels'
-import { useInitialQueries } from '@/composables/useInitialQueries'
 import type { CoreConfigPanels } from '@/types/core/options'
 
 const props = defineProps<{ tabId?: string }>()
 
-const { loading, refetch } = useInitialQueries([{ uri: 'settings?full' }], {
-  onQueriesResponse,
+const coreConfig = await api.get<CoreConfigPanels>({
+  uri: 'settings?full',
+  initial: true,
 })
-const config = shallowRef<ConfigPanelsProps | undefined>()
 
-function onQueriesResponse(config_: CoreConfigPanels) {
-  config.value = useConfigPanels(
-    formatConfigPanels(config_),
-    () => props.tabId,
-    onPanelApply,
-  )
-}
-
-const onPanelApply: OnPanelApply = ({ panelId, data }, onError) => {
-  // FIXME no route for potential action
-  api
-    .put({
-      uri: `settings/${panelId}`,
-      data: { args: objectToParams(data) },
-      humanKey: { key: 'settings.update', panel: panelId },
-    })
-    .then(() => refetch())
-    .catch(onError)
-}
+const { form, panel, v, routes, onPanelApply } = useConfigPanels(
+  formatConfigPanels(coreConfig),
+  () => props.tabId,
+  ({ panelId, data }, onError) => {
+    // FIXME no route for potential action
+    api
+      .put({
+        uri: `settings/${panelId}`,
+        data: { args: objectToParams(data) },
+        humanKey: { key: 'settings.update', panel: panelId },
+      })
+      .then(() => api.refetch())
+      .catch(onError)
+  },
+)
 </script>
 
 <template>
-  <ViewBase :loading="loading" skeleton="CardFormSkeleton">
-    <ConfigPanelsComponent
-      v-if="config"
-      v-model="config.form"
-      :panel="config.panel.value"
-      :validations="config.v.value"
-      :routes="config.routes"
-      @apply="config.onPanelApply"
-    />
-  </ViewBase>
+  <ConfigPanelsComponent
+    v-model="form"
+    :panel="panel"
+    :validations="v"
+    :routes="routes"
+    @apply="onPanelApply"
+  />
 </template>