YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

update GroupCreate with validations

Browse source
This commit is contained in:
Axolotle 2020-10-28 17:17:42 +01:00
parent 3c31867fe6
commit 639d88d762
1 changed files with 29 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
app/src/views/group/GroupCreate.vue
View file

@ -1,77 +1,60 @@
<template lang="html"> <template lang="html">
<basic-form :header="$t('group_new')" @submit.prevent="onSubmit"> <card-form
<!-- GROUP NAME --> :title="$t('group_new')" icon="users"
<b-form-group :validation="$v" :server-error="serverError"
label-cols="auto" @submit.prevent="onSubmit"
:label="$t('group_name')" label-for="input-groupname"
:description="$t('group_format_name_help')"
> >
<b-input <!-- GROUP NAME -->
id="input-groupname" :placeholder="$t('placeholder.groupname')" <form-field v-bind="groupname" v-model="form.groupname" :validation="$v.form.groupname" />
aria-describedby="groupname-feedback" required </card-form>
v-model="form.groupname" :state="isValid.groupname"
@input="validateGroupname"
/>
<b-form-invalid-feedback id="groupname-feedback" :state="isValid.groupname">
{{ this.error.groupname }}
</b-form-invalid-feedback>
</b-form-group>
</basic-form>
</template> </template>
<script> <script>
import BasicForm from '@/components/BasicForm' import { validationMixin } from 'vuelidate'
import { required, alphalownum_ } from '@/helpers/validators'
export default { export default {
name: 'GroupCreate', name: 'GroupCreate',
mixins: [validationMixin],
data () { data () {
return { return {
form: { form: {
groupname: '' groupname: ''
}, },
isValid: {
groupname: null serverError: '',
},
error: { groupname: {
groupname: '' label: this.$i18n.t('group_name'),
description: this.$i18n.t('group_format_name_help'),
props: {
id: 'groupname',
placeholder: this.$i18n.t('placeholder.groupname')
} }
} }
}
},
validations: {
form: {
groupname: { required, alphalownum_ }
}
}, },
methods: { methods: {
onSubmit () { onSubmit () {
for (const key in this.isValid) {
if (this.isValid[key] === false) return
}
const data = { groupname: this.form.groupname.replaceAll(' ', '_').toLowerCase() }
this.$store.dispatch( this.$store.dispatch(
'POST', { uri: 'users/groups', data, storeKey: 'groups' } 'POST', { uri: 'users/groups', data: this.form, storeKey: 'groups' }
).then(() => { ).then(() => {
this.$router.push({ name: 'group-list' }) this.$router.push({ name: 'group-list' })
}).catch(error => { }).catch(error => {
this.error.groupname = error.message this.error.groupname = error.message
this.isValid.groupname = false this.isValid.groupname = false
}) })
},
validateGroupname () {
const groupname = this.form.groupname
let error = ''
if (!groupname.match('^[A-Za-z0-9_ ]+$')) {
error = this.$i18n.t('form_errors.groupname_syntax')
} }
this.error.groupname = error
this.isValid.groupname = error === '' ? null : false
}
},
components: {
BasicForm
} }
} }
</script> </script>
<style lang="scss" scoped>
</style>