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

Add BasicForm helper component and reflect changes

Browse source
This commit is contained in:
Axolotle 2020-08-03 15:07:08 +02:00
parent 62ba2f1a1f
commit 8de6f1070d
4 changed files with 297 additions and 282 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/src/components/BasicForm.vue Normal file
View file

@ -0,0 +1,38 @@
<template>
<b-card :header="header" header-tag="h2" class="basic-form">
<b-form :id="id" @submit="$emit('submit', $event)">
<slot />
</b-form>
<template v-slot:footer>
<slot name="buttons">
<b-button type="submit" :form="id" variant="success">
{{ submit ? submit : $t('save') }}
</b-button>
</slot>
</template>
</b-card>
</template>
<script>
export default {
name: 'BasicForm',
props: {
header: { type: String, required: true },
id: { type: String, default: 'ynh-form' },
submit: { type: String, default: null }
}
}
</script>
<style lang="scss">
.basic-form .card-footer {
display: flex;
justify-content: flex-end;
& > *:not(:first-child) {
margin-left: .5rem;
}
}
</style>

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

@ -1,7 +1,5 @@
<template lang="html">
<div class="group-create">
<b-card :header="$t('group_new')" header-tag="h2">
<b-form id="group-create" @submit.prevent="onSubmit">
<basic-form :header="$t('group_new')" @submit.prevent="onSubmit">
<!-- GROUP NAME -->
<b-form-group
label-cols="auto"
@ -18,20 +16,12 @@
{{ this.error.groupname }}
</b-form-invalid-feedback>
</b-form-group>
</b-form>
<template v-slot:footer>
<div class="d-flex d-flex justify-content-end">
<b-button type="submit" form="group-create" variant="success">
{{ $t('save') }}
</b-button>
</div>
</template>
</b-card>
</div>
</basic-form>
</template>
<script>
import BasicForm from '@/components/BasicForm'
export default {
name: 'GroupCreate',
@ -75,6 +65,10 @@ export default {
this.error.groupname = error
this.isValid.groupname = error === '' ? null : false
}
},
components: {
BasicForm
}
}
</script>

20
app/src/views/user/UserCreate.vue
View file

@ -1,7 +1,5 @@
<template lang="html">
<div class="user-create">
<b-card :header="$t('users_new')" header-tag="h2">
<b-form id="user-create" @submit.prevent="onSubmit">
<basic-form :header="$t('users_new')" @submit.prevent="onSubmit">
<!-- USER NAME -->
<b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
<b-input
@ -110,20 +108,11 @@
<b-form-invalid-feedback id="global-feedback" :state="server.isValid">
{{ this.server.error }}
</b-form-invalid-feedback>
</b-form>
<template v-slot:footer>
<div class="d-flex d-flex justify-content-end">
<b-button type="submit" form="user-create" variant="success">
{{ $t('save') }}
</b-button>
</div>
</template>
</b-card>
</div>
</basic-form>
</template>
<script>
import BasicForm from '@/components/BasicForm'
import SplittedMailInput from '@/components/SplittedMailInput'
export default {
@ -220,7 +209,8 @@ export default {
this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
},
components: {
SplittedMailInput
SplittedMailInput,
BasicForm
}
}
</script>

23
app/src/views/user/UserEdit.vue
View file

@ -1,7 +1,8 @@
<template lang="html">
<div class="user-edit">
<b-card v-if="this.form.firstname" :header="user ? $t('user_username_edit', { name: user.username }) : ''" header-tag="h2">
<b-form id="user-edit" @submit.prevent="onSubmit">
<basic-form
v-if="user" :header="$t('user_username_edit', { name: user.username })"
@submit.prevent="onSubmit"
>
<!-- USER FULLNAME -->
<b-form-group label-cols="auto">
<template v-slot:label aria-hidden="true">
@ -119,20 +120,11 @@
<b-form-invalid-feedback id="global-feedback" :state="server.isValid">
{{ this.server.error }}
</b-form-invalid-feedback>
</b-form>
<template v-slot:footer>
<div class="d-flex d-flex justify-content-end">
<b-button type="submit" form="user-edit" variant="success">
{{ $t('save') }}
</b-button>
</div>
</template>
</b-card>
</div>
</basic-form>
</template>
<script>
import BasicForm from '@/components/BasicForm'
import SplittedMailInput from '@/components/SplittedMailInput'
export default {
@ -249,7 +241,8 @@ export default {
})
},
components: {
SplittedMailInput
SplittedMailInput,
BasicForm
}
}
</script>