refactor: use apply event instead of submit on ConfigPanels

This commit is contained in:
axolotle 2024-03-11 14:37:47 +01:00
parent 04872f6eed
commit 1430c03a4f
7 changed files with 17 additions and 10 deletions

View file

@ -6,7 +6,7 @@
validation, validation,
serverError: panel.serverError, serverError: panel.serverError,
}" }"
@submit.prevent.stop="onApply" @apply="onApply"
:no-footer="!panel.hasApplyButton" :no-footer="!panel.hasApplyButton"
> >
<slot name="tab-top" /> <slot name="tab-top" />
@ -78,7 +78,7 @@ export default {
onApply() { onApply() {
const panelId = this.panel.id const panelId = this.panel.id
this.$emit('submit', { this.$emit('apply', {
id: panelId, id: panelId,
form: this.forms[panelId], form: this.forms[panelId],
}) })
@ -88,7 +88,7 @@ export default {
const panelId = this.panel.id const panelId = this.panel.id
const actionFieldsKeys = Object.keys(actionFields) const actionFieldsKeys = Object.keys(actionFields)
this.$emit('submit', { this.$emit('apply', {
id: panelId, id: panelId,
form: filterObject(this.forms[panelId], ([key]) => form: filterObject(this.forms[panelId], ([key]) =>
actionFieldsKeys.includes(key), actionFieldsKeys.includes(key),

View file

@ -1,10 +1,11 @@
<template> <template>
<div class="config-panel"> <div class="config-panel">
<!-- FIXME vue3 - weird stuff with event binding, need to propagate by hand for now -->
<RoutableTabs <RoutableTabs
v-if="routes_.length > 1" v-if="routes_.length > 1"
v-bind="{ panels, forms, v: v$, ...$attrs }" v-bind="{ panels, forms, v: v$, ...$attrs }"
:routes="routes_" :routes="routes_"
v-on="$listeners" @apply="$emit('apply', $event)"
> >
<template #tab-top> <template #tab-top>
<slot name="tab-top" /> <slot name="tab-top" />

View file

@ -16,7 +16,12 @@
<!-- Bind extra props to the child view and forward child events to parent --> <!-- Bind extra props to the child view and forward child events to parent -->
<RouterView v-slot="{ Component }"> <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> <template #tab-top>
<slot name="tab-top" /> <slot name="tab-top" />
</template> </template>

View file

@ -7,8 +7,8 @@
:id="id" :id="id"
:inline="inline" :inline="inline"
:class="formClasses" :class="formClasses"
@submit.prevent="onSubmit"
novalidate novalidate
@submit.prevent.stop="onSubmit"
> >
<slot name="default" /> <slot name="default" />
@ -61,7 +61,8 @@ export default {
v.$touch() v.$touch()
if (v.$pending || v.$errors.length) return 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')
}, },
}, },
} }

View file

@ -129,7 +129,7 @@
<ConfigPanels <ConfigPanels
v-bind="config" v-bind="config"
:external-results="externalResults" :external-results="externalResults"
@submit="onConfigSubmit" @apply="onConfigSubmit"
> >
<!-- OPERATIONS TAB --> <!-- OPERATIONS TAB -->
<template v-if="currentTab === 'operations'" #tab-top> <template v-if="currentTab === 'operations'" #tab-top>

View file

@ -112,7 +112,7 @@
v-if="config.panels" v-if="config.panels"
v-bind="config" v-bind="config"
:external-results="externalResults" :external-results="externalResults"
@submit="onConfigSubmit" @apply="onConfigSubmit"
> >
<template v-if="currentTab === 'dns'" #tab-after> <template v-if="currentTab === 'dns'" #tab-after>
<DomainDns :name="name" /> <DomainDns :name="name" />

View file

@ -9,7 +9,7 @@
v-if="config.panels" v-if="config.panels"
v-bind="config" v-bind="config"
:external-results="externalResults" :external-results="externalResults"
@submit="onConfigSubmit" @apply="onConfigSubmit"
/> />
</ViewBase> </ViewBase>
</template> </template>