114 lines
3.8 KiB
Vue
114 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex mb-4">
|
|
<div class="avatar mr-2">
|
|
<Avatar
|
|
:avatar="authUser.data.attributes.avatar"
|
|
size="large"
|
|
:alt="authUser.data.attributes.name"
|
|
/>
|
|
</div>
|
|
<div class="flex-col flex-center">
|
|
<div><strong>{{ authUser.data.attributes.name }}</strong></div>
|
|
<div><strong>{{ authUser.data.attributes.email }}</strong></div>
|
|
</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">
|
|
<InputField
|
|
name="name"
|
|
type="text"
|
|
label="Nom du nouveau membre"
|
|
placeholder="Nom"
|
|
:errors="errors"
|
|
@update:field="form.name = $event"
|
|
/>
|
|
<InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" />
|
|
<button class="btn-primary">Ajouter</button>
|
|
</form>
|
|
<div class="mb-2">
|
|
<h2>Liste des utilisateurs</h2>
|
|
<ul>
|
|
<li v-if="loading">> Loading...</li>
|
|
<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>
|
|
</div>
|
|
<div>
|
|
Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex';
|
|
import Avatar from '../../components/Avatar';
|
|
import AlertBox from '../../components/AlertBox';
|
|
import InputField from '../../components/InputField';
|
|
|
|
export default {
|
|
name: 'UserAdmin',
|
|
components: {
|
|
Avatar, AlertBox, InputField,
|
|
},
|
|
data: function () {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
email: '',
|
|
},
|
|
alertType: '',
|
|
alertMessage: '',
|
|
errors: null,
|
|
loading: '',
|
|
users: null,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
authUser: 'authUser',
|
|
})
|
|
},
|
|
mounted() {
|
|
axios.get('/api/users')
|
|
.then(response => {
|
|
this.users = response.data.data
|
|
this.loading = false
|
|
})
|
|
.catch(error => {
|
|
this.loading = false
|
|
alert('Unable to fetch users.')
|
|
})
|
|
},
|
|
methods: {
|
|
addMember: function () {
|
|
if(this.form.name.length >= 4 && this.form.email.length >= 12) {
|
|
axios.post('/api/users', {name: this.form.name, email: this.form.email})
|
|
.then(res => {
|
|
this.form.name = ''
|
|
this.form.email = ''
|
|
this.alertType = 'success'
|
|
this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
|
|
})
|
|
.catch(errors => {
|
|
this.alertType = 'error'
|
|
this.alertMessage = 'L\'utilisateur n\'a pas été créé'
|
|
})
|
|
} else {
|
|
this.alertType = 'error'
|
|
this.alertMessage = 'Le formulaire n\'est pas correctement renseigné.'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|