reflect changes made to AdressInputSelect to views

This commit is contained in:
Axolotle 2020-08-03 20:53:53 +02:00
parent bb34b82d49
commit 59908a46ed
3 changed files with 25 additions and 17 deletions

View file

@ -29,7 +29,7 @@ export default {
id: { type: String, default: null },
state: { type: null, default: null },
feedbackId: { type: String, default: null },
defaultOption: { type: String, default: null }
defaultOption: { type: Number, default: 0 }
},
data () {
@ -49,12 +49,16 @@ export default {
return this.value.split(this.separator)[0]
},
set (value) {
// FIXME, ugly hack since the `reactiveOption` v-model isn't set when `value` change
if (this.reactiveOption !== this.option) {
this.option = this.reactiveOption
}
this.input = value
}
},
reactiveOption: {
get () {
return this.value.split(this.separator)[1] || this.options[0]
return this.value.split(this.separator)[1] || this.options[this.defaultOption]
},
set (value) {
// FIXME, ugly hack since the `reactiveInput` v-model isn't set when `value` change

View file

@ -52,9 +52,9 @@
<!-- USER EMAIL -->
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
<splitted-mail-input
id="input-email" feedback="email-feedback"
v-model="form.mail" :domains="domains"
<adress-input-select
id="input-email" feedback-id="email-feedback"
v-model="form.mail" :options="domains"
:state="isValid.mail" @input="validateEmail"
/>
@ -113,7 +113,7 @@
<script>
import BasicForm from '@/components/BasicForm'
import SplittedMailInput from '@/components/SplittedMailInput'
import AdressInputSelect from '@/components/AdressInputSelect'
export default {
name: 'UserCreate',
@ -209,7 +209,7 @@ export default {
this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
},
components: {
SplittedMailInput,
AdressInputSelect,
BasicForm
}
}

View file

@ -42,10 +42,11 @@
<!-- USER EMAIL -->
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
<splitted-mail-input
id="input-email" feedback="email-feedback"
v-model="form.mail" :domains="domains"
<adress-input-select
id="input-email" feedback-id="email-feedback"
v-model="form.mail" :options="domains"
:state="isValid.mail" @input="validateEmail"
:placeholder="$t('placeholder.username')"
/>
<b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
@ -70,10 +71,10 @@
<!-- MAIL ALIASES -->
<hr>
<b-form-group label-cols="auto" :label="$t('user_emailaliases')" class="mail-list">
<splitted-mail-input
<adress-input-select
v-for="(alias, index) in form['mail-aliases']" :key="index"
feedback="mail-aliases-feedback"
v-model="form['mail-aliases'][index]" :domains="domains"
v-model="form['mail-aliases'][index]" :options="domains"
:placeholder="$t('placeholder.username')"
/>
</b-form-group>
@ -125,7 +126,7 @@
<script>
import BasicForm from '@/components/BasicForm'
import SplittedMailInput from '@/components/SplittedMailInput'
import AdressInputSelect from '@/components/AdressInputSelect'
export default {
name: 'UserEdit',
@ -170,6 +171,7 @@ export default {
methods: {
onSubmit () {
console.log(this.form['mail-aliases'])
for (const key in this.isValid) {
if (this.isValid[key] === false) return
}
@ -211,9 +213,10 @@ export default {
})
},
validateEmail () {
validateEmail (mail) {
// FIXME check allowed characters
const isValid = this.form.mail.split('@')[0].match('^[A-Za-z0-9-_]+$')
console.log('validate', mail)
const isValid = mail.split('@')[0].match('^[A-Za-z0-9-_]+$')
this.error.mail = isValid ? '' : this.$i18n.t('form_errors.email_syntax')
this.isValid.mail = isValid ? null : false
},
@ -233,6 +236,7 @@ export default {
this.form.firstname = userData.firstname
this.form.lastname = userData.lastname
this.form.mail = userData.mail
console.log('fetch', this.form.mail)
this.form['mail-aliases'] = userData['mail-aliases'] ? [...userData['mail-aliases'], ''] : ['']
this.form['mail-forward'] = userData['mail-forward'] ? [...userData['mail-forward'], ''] : ['']
if (userData['mailbox-quota'].limit !== 'No quota') {
@ -241,7 +245,7 @@ export default {
})
},
components: {
SplittedMailInput,
AdressInputSelect,
BasicForm
}
}