Refactor Custom Form component and mixin
This commit is contained in:
parent
007785821f
commit
6ee1838ea4
106
htdocs/src/components/hCustomForm.vue
Normal file
106
htdocs/src/components/hCustomForm.vue
Normal file
|
@ -0,0 +1,106 @@
|
||||||
|
<!--
|
||||||
|
Copyright or © or Copr. happyDNS (2020)
|
||||||
|
|
||||||
|
contact@happydns.org
|
||||||
|
|
||||||
|
This software is a computer program whose purpose is to provide a modern
|
||||||
|
interface to interact with DNS systems.
|
||||||
|
|
||||||
|
This software is governed by the CeCILL license under French law and abiding
|
||||||
|
by the rules of distribution of free software. You can use, modify and/or
|
||||||
|
redistribute the software under the terms of the CeCILL license as
|
||||||
|
circulated by CEA, CNRS and INRIA at the following URL
|
||||||
|
"http://www.cecill.info".
|
||||||
|
|
||||||
|
As a counterpart to the access to the source code and rights to copy, modify
|
||||||
|
and redistribute granted by the license, users are provided only with a
|
||||||
|
limited warranty and the software's author, the holder of the economic
|
||||||
|
rights, and the successive licensors have only limited liability.
|
||||||
|
|
||||||
|
In this respect, the user's attention is drawn to the risks associated with
|
||||||
|
loading, using, modifying and/or developing or reproducing the software by
|
||||||
|
the user in light of its specific status of free software, that may mean
|
||||||
|
that it is complicated to manipulate, and that also therefore means that it
|
||||||
|
is reserved for developers and experienced professionals having in-depth
|
||||||
|
computer knowledge. Users are therefore encouraged to load and test the
|
||||||
|
software's suitability as regards their requirements in conditions enabling
|
||||||
|
the security of their systems and/or data to be ensured and, more generally,
|
||||||
|
to use and operate it in the same conditions as regards security.
|
||||||
|
|
||||||
|
The fact that you are presently reading this means that you have had
|
||||||
|
knowledge of the CeCILL license and that you accept its terms.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p v-if="form.beforeText" class="lead text-indent">
|
||||||
|
{{ form.beforeText }}
|
||||||
|
</p>
|
||||||
|
<p v-else>
|
||||||
|
{{ $t('domains.please-fill-fields') }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<h-fields
|
||||||
|
v-if="form.fields && val"
|
||||||
|
edit
|
||||||
|
:fields="form.fields"
|
||||||
|
:value="val"
|
||||||
|
@input="val = $event;$emit('input', val)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p v-if="form.afterText">
|
||||||
|
{{ form.afterText }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HCustomForm',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
hFields: () => import('@/components/hFields')
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
form: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
val: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
value: function () {
|
||||||
|
this.updateValues()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
if (this.value) {
|
||||||
|
this.updateValues()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
updateValues () {
|
||||||
|
if (this.value != null) {
|
||||||
|
this.val = Object.assign({}, this.value)
|
||||||
|
} else {
|
||||||
|
this.val = {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -32,14 +32,7 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<h-custom-form :form="form" :value="val.Source" @input="val.Source = $event; $emit('input', val)">
|
||||||
<p v-if="form.beforeText" class="lead text-indent">
|
|
||||||
{{ form.beforeText }}
|
|
||||||
</p>
|
|
||||||
<p v-else>
|
|
||||||
{{ $t('domains.please-fill-fields') }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h-resource-value-simple-input
|
<h-resource-value-simple-input
|
||||||
v-if="state === 0"
|
v-if="state === 0"
|
||||||
id="src-name"
|
id="src-name"
|
||||||
|
@ -52,19 +45,7 @@
|
||||||
:value="val._comment"
|
:value="val._comment"
|
||||||
@input="val._comment = $event;$emit('input', val)"
|
@input="val._comment = $event;$emit('input', val)"
|
||||||
/>
|
/>
|
||||||
|
</h-custom-form>
|
||||||
<h-fields
|
|
||||||
v-if="form.fields && val.Source"
|
|
||||||
edit
|
|
||||||
:fields="form.fields"
|
|
||||||
:value="val.Source"
|
|
||||||
@input="val.Source = $event;$emit('input', val)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p v-if="form.afterText">
|
|
||||||
{{ form.afterText }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -72,7 +53,7 @@ export default {
|
||||||
name: 'HSourceState',
|
name: 'HSourceState',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
hFields: () => import('@/components/hFields'),
|
hCustomForm: () => import('@/components/hCustomForm'),
|
||||||
hResourceValueSimpleInput: () => import('@/components/hResourceValueSimpleInput')
|
hResourceValueSimpleInput: () => import('@/components/hResourceValueSimpleInput')
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
163
htdocs/src/mixins/customForm.js
Normal file
163
htdocs/src/mixins/customForm.js
Normal file
|
@ -0,0 +1,163 @@
|
||||||
|
// Copyright or © or Copr. happyDNS (2020)
|
||||||
|
//
|
||||||
|
// contact@happydns.org
|
||||||
|
//
|
||||||
|
// This software is a computer program whose purpose is to provide a modern
|
||||||
|
// interface to interact with DNS systems.
|
||||||
|
//
|
||||||
|
// This software is governed by the CeCILL license under French law and abiding
|
||||||
|
// by the rules of distribution of free software. You can use, modify and/or
|
||||||
|
// redistribute the software under the terms of the CeCILL license as
|
||||||
|
// circulated by CEA, CNRS and INRIA at the following URL
|
||||||
|
// "http://www.cecill.info".
|
||||||
|
//
|
||||||
|
// As a counterpart to the access to the source code and rights to copy, modify
|
||||||
|
// and redistribute granted by the license, users are provided only with a
|
||||||
|
// limited warranty and the software's author, the holder of the economic
|
||||||
|
// rights, and the successive licensors have only limited liability.
|
||||||
|
//
|
||||||
|
// In this respect, the user's attention is drawn to the risks associated with
|
||||||
|
// loading, using, modifying and/or developing or reproducing the software by
|
||||||
|
// the user in light of its specific status of free software, that may mean
|
||||||
|
// that it is complicated to manipulate, and that also therefore means that it
|
||||||
|
// is reserved for developers and experienced professionals having in-depth
|
||||||
|
// computer knowledge. Users are therefore encouraged to load and test the
|
||||||
|
// software's suitability as regards their requirements in conditions enabling
|
||||||
|
// the security of their systems and/or data to be ensured and, more generally,
|
||||||
|
// to use and operate it in the same conditions as regards security.
|
||||||
|
//
|
||||||
|
// The fact that you are presently reading this means that you have had
|
||||||
|
// knowledge of the CeCILL license and that you accept its terms.
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
form: null,
|
||||||
|
nextIsWorking: false,
|
||||||
|
previousIsWorking: false,
|
||||||
|
settings: null,
|
||||||
|
state: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
isLoading () {
|
||||||
|
return this.form == null || this.sourceSpecs == null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
console.log('mounted customform')
|
||||||
|
this.resetSettings()
|
||||||
|
this.updateSettingsForm()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
loadState (toState, recallid, cbSuccess, cbFail) {
|
||||||
|
this.getFormSettings(toState, this.settings, recallid)
|
||||||
|
.then(
|
||||||
|
response => {
|
||||||
|
this.previousIsWorking = false
|
||||||
|
this.nextIsWorking = false
|
||||||
|
if (response.data.form) {
|
||||||
|
this.form = response.data.form
|
||||||
|
this.state = toState
|
||||||
|
if (response.data.redirect && window.location.pathname !== response.data.redirect) {
|
||||||
|
this.$router.push(response.data.redirect)
|
||||||
|
} else if (cbSuccess) {
|
||||||
|
cbSuccess(toState)
|
||||||
|
}
|
||||||
|
} else if (response.data.Source) {
|
||||||
|
this.$root.$bvToast.toast(
|
||||||
|
'Done', {
|
||||||
|
title: (response.data.Source._comment ? response.data.Source._comment : 'Your new source') + ' has been ' + (this.settings._id ? 'updated' : 'added') + '.',
|
||||||
|
autoHideDelay: 5000,
|
||||||
|
variant: 'success',
|
||||||
|
toaster: 'b-toaster-content-right'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (response.data.redirect && window.location.pathname !== response.data.redirect) {
|
||||||
|
this.$router.push(response.data.redirect)
|
||||||
|
} else if (cbSuccess) {
|
||||||
|
cbSuccess(toState, response.data.Source)
|
||||||
|
} else {
|
||||||
|
this.$router.push('/sources/' + encodeURIComponent(response.data.Source._id) + '/domains')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
this.previousIsWorking = false
|
||||||
|
this.nextIsWorking = false
|
||||||
|
this.$root.$bvToast.toast(
|
||||||
|
error.response.data.errmsg, {
|
||||||
|
title: 'Something went wrong during source configuration validation',
|
||||||
|
autoHideDelay: 5000,
|
||||||
|
variant: 'danger',
|
||||||
|
toaster: 'b-toaster-content-right'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (cbFail) {
|
||||||
|
cbFail(error.response.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
nextState (bvModalEvt) {
|
||||||
|
if (bvModalEvt) {
|
||||||
|
bvModalEvt.preventDefault()
|
||||||
|
}
|
||||||
|
this.nextIsWorking = true
|
||||||
|
if (this.form) {
|
||||||
|
if (this.form.nextButtonLink !== undefined) {
|
||||||
|
window.location = this.form.nextButtonLink
|
||||||
|
} else if (this.form.nextButtonState === -1) {
|
||||||
|
this.state = this.form.nextButtonState
|
||||||
|
this.form = null
|
||||||
|
this.nextButtonState = false
|
||||||
|
} else if (this.form.nextButtonState) {
|
||||||
|
this.loadState(
|
||||||
|
this.form.nextButtonState,
|
||||||
|
null,
|
||||||
|
this.reactOnSuccess
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.loadState(0)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.loadState(0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
previousState () {
|
||||||
|
this.previousIsWorking = true
|
||||||
|
if (this.form.previousButtonState <= 0) {
|
||||||
|
this.state = this.form.previousButtonState
|
||||||
|
this.form = null
|
||||||
|
this.previousIsWorking = false
|
||||||
|
} else if (this.form.previousButtonState) {
|
||||||
|
this.loadState(
|
||||||
|
this.form.previousButtonState,
|
||||||
|
null,
|
||||||
|
this.reactOnSuccess
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.loadState(0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
resetSettings () {
|
||||||
|
this.settings = {
|
||||||
|
Source: {},
|
||||||
|
Service: {},
|
||||||
|
_comment: '',
|
||||||
|
redirect: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateSettingsForm () {
|
||||||
|
if (this.state >= 0) {
|
||||||
|
this.loadState(this.state, this.$route.query.recall)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -29,135 +29,15 @@
|
||||||
// The fact that you are presently reading this means that you have had
|
// The fact that you are presently reading this means that you have had
|
||||||
// knowledge of the CeCILL license and that you accept its terms.
|
// knowledge of the CeCILL license and that you accept its terms.
|
||||||
|
|
||||||
|
import CustomForm from '@/mixins/customForm'
|
||||||
import SourceSettingsApi from '@/services/SourceSettingsApi'
|
import SourceSettingsApi from '@/services/SourceSettingsApi'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
mixins: [CustomForm],
|
||||||
return {
|
|
||||||
form: null,
|
|
||||||
nextIsWorking: false,
|
|
||||||
previousIsWorking: false,
|
|
||||||
settings: null,
|
|
||||||
state: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
isLoading () {
|
|
||||||
return this.form == null || this.sourceSpecs == null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted () {
|
|
||||||
this.resetSettings()
|
|
||||||
this.updateSourceSettingsForm()
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
loadState (toState, recallid, cbSuccess, cbFail) {
|
getFormSettings (state, settings, recallid) {
|
||||||
SourceSettingsApi.getSourceSettings(this.sourceSpecsSelected, toState, this.settings, recallid)
|
return SourceSettingsApi.getSourceSettings(this.sourceSpecsSelected, state, settings, recallid)
|
||||||
.then(
|
|
||||||
response => {
|
|
||||||
this.previousIsWorking = false
|
|
||||||
this.nextIsWorking = false
|
|
||||||
if (response.data.form) {
|
|
||||||
this.form = response.data.form
|
|
||||||
this.state = toState
|
|
||||||
if (response.data.redirect && window.location.pathname !== response.data.redirect) {
|
|
||||||
this.$router.push(response.data.redirect)
|
|
||||||
} else if (cbSuccess) {
|
|
||||||
cbSuccess(toState)
|
|
||||||
}
|
|
||||||
} else if (response.data.Source) {
|
|
||||||
this.$root.$bvToast.toast(
|
|
||||||
'Done', {
|
|
||||||
title: (response.data.Source._comment ? response.data.Source._comment : 'Your new source') + ' has been ' + (this.settings._id ? 'updated' : 'added') + '.',
|
|
||||||
autoHideDelay: 5000,
|
|
||||||
variant: 'success',
|
|
||||||
toaster: 'b-toaster-content-right'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
if (response.data.redirect && window.location.pathname !== response.data.redirect) {
|
|
||||||
this.$router.push(response.data.redirect)
|
|
||||||
} else if (cbSuccess) {
|
|
||||||
cbSuccess(toState, response.data.Source)
|
|
||||||
} else {
|
|
||||||
this.$router.push('/sources/' + encodeURIComponent(response.data.Source._id) + '/domains')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error => {
|
|
||||||
this.previousIsWorking = false
|
|
||||||
this.nextIsWorking = false
|
|
||||||
this.$root.$bvToast.toast(
|
|
||||||
error.response.data.errmsg, {
|
|
||||||
title: 'Something went wrong during source configuration validation',
|
|
||||||
autoHideDelay: 5000,
|
|
||||||
variant: 'danger',
|
|
||||||
toaster: 'b-toaster-content-right'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
if (cbFail) {
|
|
||||||
cbFail(error.response.data)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
nextState (bvModalEvt) {
|
|
||||||
if (bvModalEvt) {
|
|
||||||
bvModalEvt.preventDefault()
|
|
||||||
}
|
|
||||||
this.nextIsWorking = true
|
|
||||||
if (this.form) {
|
|
||||||
if (this.form.nextButtonLink !== undefined) {
|
|
||||||
window.location = this.form.nextButtonLink
|
|
||||||
} else if (this.form.nextButtonState === -1) {
|
|
||||||
this.state = this.form.nextButtonState
|
|
||||||
this.form = null
|
|
||||||
this.nextButtonState = false
|
|
||||||
} else if (this.form.nextButtonState) {
|
|
||||||
this.loadState(
|
|
||||||
this.form.nextButtonState,
|
|
||||||
null,
|
|
||||||
this.reactOnSuccess
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
this.loadState(0)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.loadState(0)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
previousState () {
|
|
||||||
this.previousIsWorking = true
|
|
||||||
if (this.form.previousButtonState <= 0) {
|
|
||||||
this.state = this.form.previousButtonState
|
|
||||||
this.form = null
|
|
||||||
this.previousIsWorking = false
|
|
||||||
} else if (this.form.previousButtonState) {
|
|
||||||
this.loadState(
|
|
||||||
this.form.previousButtonState,
|
|
||||||
null,
|
|
||||||
this.reactOnSuccess
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
this.loadState(0)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resetSettings () {
|
|
||||||
this.settings = {
|
|
||||||
Source: {},
|
|
||||||
_comment: '',
|
|
||||||
redirect: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateSourceSettingsForm () {
|
|
||||||
if (this.sourceSpecsSelected && this.state >= 0) {
|
|
||||||
this.loadState(this.state, this.$route.query.recall)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user