This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit c0f478ae7aa96a3de7df3070431d240915b9334c Author: kaufmann <kaufmann@codelutin.com> Date: Fri Aug 7 17:21:52 2020 +0200 Création d'un composant pour uniformiser l'affichage des formulaires --- web/src/App.vue | 11 +++++++- web/src/components/common/Form.vue | 56 ++++++++++++++++++++++++++++++++++++++ web/src/views/BookmarkEdit.vue | 22 ++++++--------- 3 files changed, 74 insertions(+), 15 deletions(-) diff --git a/web/src/App.vue b/web/src/App.vue index 5c70801..fabeba2 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -4,7 +4,7 @@ <main> <Header :route="$route.fullPath"/> - <router-view :key="$route.fullPath" /> + <router-view :key="$route.fullPath" class="main-content"/> </main> <Footer /> @@ -93,5 +93,14 @@ main { body { padding-left: var(--sidebar-width); } + + main { + display: flex; + flex-direction: column; + } + + .main-content { + flex-grow: 1; + } } </style> diff --git a/web/src/components/common/Form.vue b/web/src/components/common/Form.vue new file mode 100644 index 0000000..eebaec2 --- /dev/null +++ b/web/src/components/common/Form.vue @@ -0,0 +1,56 @@ +<template> + <div class="bow-form-wrapper"> + <PageMainTitle> + <slot name="Title"></slot> + </PageMainTitle> + + <form + v-if="hasFormContent" + class="bow-form" + onsubmit.prevent="save" + > + <slot name="FormContent"></slot> + </form> + + <slot name="Content"></slot> + + <div v-if="errorMsg"> + {{errorMsg}} + </div> + </div> +</template> + +<script> + import { Component, Prop, Vue } from 'vue-property-decorator' + import PageMainTitle from '@/components/common/PageMainTitle' + + @Component({ + name: 'Form', + props: ['errorMsg'], + components: { + PageMainTitle + } + }) + class Form extends Vue { + @Prop errorMsg + + get hasFormContent() { + return this.$slots.FormContent && this.$slots.FormContent.length; + } + } + + export default Form +</script> + +<style scoped lang="less"> +.bow-form { + display: flex; + flex-direction: column; + width: min-content; + margin: var(--margin--small) auto; +} + +.bow-form-wrapper { + background-color: white; +} +</style> diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index ae56e6d..206c731 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -1,11 +1,10 @@ <template> - <div class="bookmark-editor"> - <PageMainTitle class="bow-form-title"> + <Form :errorMsg="errorMsg"> + <template v-slot:Title> Ajouter ou modifier une URL - </PageMainTitle> + </template> - <div>{{ errorMsg }}</div> - <form class="bow-form" onsubmit.prevent="save"> + <template v-slot:FormContent @submit="save"> <FormRow> <label>Date</label> <BookmarkDate @@ -60,12 +59,13 @@ <Button class="button" v-on:click.prevent="cancel">Cancel</Button> <Button class="button" primary v-on:click.prevent="save">Save</Button> </div> - </form> - </div> + </template> + </Form> </template> <script> import { Component, Prop, Vue } from 'vue-property-decorator' +import Form from '@/components/common/Form' import BookmarkDate from '@/components/common/BookmarkDate' import Button from '@/components/common/Button.vue' import FormRow from '@/components/common/FormRow' @@ -86,6 +86,7 @@ import TagsInput from '@/components/common/TagsInput' components: { BookmarkDate, Button, + Form, FormRow, PageMainTitle, TagsInput @@ -208,13 +209,6 @@ export default BookmarkEdit </script> <style lang="less" scoped> -.bow-form { - display: flex; - flex-direction: column; - width: min-content; - margin: var(--margin--small) auto; -} - .actions { display: flex; justify-content: space-around; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.