From 1430c03a4fe999230f294f5add86eed308e99c6f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 11 Mar 2024 14:37:47 +0100
Subject: [PATCH] refactor: use `apply` event instead of `submit` on
 ConfigPanels

---
 app/src/components/ConfigPanel.vue          | 6 +++---
 app/src/components/ConfigPanels.vue         | 3 ++-
 app/src/components/RoutableTabs.vue         | 7 ++++++-
 app/src/components/globals/AbstractForm.vue | 5 +++--
 app/src/views/app/AppInfo.vue               | 2 +-
 app/src/views/domain/DomainInfo.vue         | 2 +-
 app/src/views/tool/ToolSettings.vue         | 2 +-
 7 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 9ccb523a..52a191af 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -6,7 +6,7 @@
       validation,
       serverError: panel.serverError,
     }"
-    @submit.prevent.stop="onApply"
+    @apply="onApply"
     :no-footer="!panel.hasApplyButton"
   >
     <slot name="tab-top" />
@@ -78,7 +78,7 @@ export default {
     onApply() {
       const panelId = this.panel.id
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: this.forms[panelId],
       })
@@ -88,7 +88,7 @@ export default {
       const panelId = this.panel.id
       const actionFieldsKeys = Object.keys(actionFields)
 
-      this.$emit('submit', {
+      this.$emit('apply', {
         id: panelId,
         form: filterObject(this.forms[panelId], ([key]) =>
           actionFieldsKeys.includes(key),
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 1fd948d6..0ac19296 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="config-panel">
+    <!-- FIXME vue3 - weird stuff with event binding, need to propagate by hand for now -->
     <RoutableTabs
       v-if="routes_.length > 1"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
       :routes="routes_"
-      v-on="$listeners"
+      @apply="$emit('apply', $event)"
     >
       <template #tab-top>
         <slot name="tab-top" />
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index d046b7c8..4d06bcf5 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -16,7 +16,12 @@
 
     <!-- Bind extra props to the child view and forward child events to parent -->
     <RouterView v-slot="{ Component }">
-      <Component v-bind="$attrs" v-on="$listeners" :is="Component">
+      <Component
+        v-bind="$attrs"
+        :is="Component"
+        v-on="$listeners"
+        @apply="$emit('apply', $event)"
+      >
         <template #tab-top>
           <slot name="tab-top" />
         </template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 170bb414..e117c54a 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -7,8 +7,8 @@
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent="onSubmit"
         novalidate
+        @submit.prevent.stop="onSubmit"
       >
         <slot name="default" />
 
@@ -61,7 +61,8 @@ export default {
         v.$touch()
         if (v.$pending || v.$errors.length) return
       }
-      this.$emit('submit', e)
+      // Weird bug with `INSTANCE_LISTENERS: true` with 'submit' event (double exec before of conflict with native submit event?)
+      this.$emit('apply')
     },
   },
 }
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 989ae31c..2bf5e636 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -129,7 +129,7 @@
     <ConfigPanels
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     >
       <!-- OPERATIONS TAB -->
       <template v-if="currentTab === 'operations'" #tab-top>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 8715fa1d..e37a75b6 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -112,7 +112,7 @@
       v-if="config.panels"
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     >
       <template v-if="currentTab === 'dns'" #tab-after>
         <DomainDns :name="name" />
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 2542d677..c1be632d 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -9,7 +9,7 @@
       v-if="config.panels"
       v-bind="config"
       :external-results="externalResults"
-      @submit="onConfigSubmit"
+      @apply="onConfigSubmit"
     />
   </ViewBase>
 </template>