toggle box

This commit is contained in:
2020-04-12 08:37:16 +02:00
parent 85d20dfe4d
commit 0a535c165d
6 changed files with 77 additions and 15 deletions

View File

@@ -10,23 +10,35 @@
</div>
</div>
<div v-if="authUser.data.attributes.is_admin">
<h2 class="mb-1">Ajouter un membre</h2>
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
<form @submit.prevent="addMember" class="mb-2">
<div class="flex">
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
<div class="flex-middle mt-4">
<button class="btn-primary">Ajouter</button>
</div>
</div>
</form>
<div class="mb-2">
<h2>Liste des utilisateurs</h2>
<ul>
<div class="box-toggle">
<div class="box-toggle-header" @click="userAddToggle = !userAddToggle">
<h2 class="mb-1">Ajouter un membre</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userAddToggle }" />
</div>
<transition name="fade">
<form @submit.prevent="addMember" v-if="userAddToggle" class="box-toggle-content" >
<AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
<div class="flex mb-1">
<InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
<div class="flex-middle mt-4">
<button class="btn-primary">Ajouter</button>
</div>
</div>
</form>
</transition>
</div>
<div class="mb-2 box-toggle">
<div class="box-toggle-header" @click="userListToggle = !userListToggle">
<h2>Liste des utilisateurs</h2>
<svg-vue icon="arrow" v-bind:class="{ open: userListToggle }" />
</div>
<transition name="fade">
<ul v-if="userListToggle" class="box-toggle-content">
<Loader v-if="loading" />
<li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
</ul>
</transition>
</div>
<div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
</div>
@@ -56,6 +68,8 @@
errors: null,
loading: true,
users: null,
userListToggle: false,
userAddToggle: false,
}
},
computed: {