add eslint working conf
This commit is contained in:
@@ -1,108 +1,110 @@
|
||||
<template>
|
||||
<div v-if="authUser">
|
||||
<div class="flex m-4">
|
||||
<div class="avatar mr-2">
|
||||
<Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
|
||||
</div>
|
||||
<div class="flex flex-col justify-center ml-2">
|
||||
<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">
|
||||
<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-2">
|
||||
<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 items-end mb-2">
|
||||
<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 v-if="authUser">
|
||||
<div class="flex m-4">
|
||||
<div class="avatar mr-2">
|
||||
<Avatar :avatar="authUser.data.attributes.avatar" size="6xl" :alt="authUser.data.attributes.name" class="w-24 h-24" />
|
||||
</div>
|
||||
<div class="flex flex-col justify-center ml-2">
|
||||
<div><strong>{{ authUser.data.attributes.name }}</strong></div>
|
||||
<div><strong>{{ authUser.data.attributes.email }}</strong></div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<ul v-if="userListToggle" class="box-toggle-content">
|
||||
<Loader v-if="loading" />
|
||||
<li v-else v-for="user in users">
|
||||
<router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ 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 v-if="authUser.data.attributes.is_admin">
|
||||
<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-2">
|
||||
<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 items-end mb-2">
|
||||
<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, index) in users" :key="index">
|
||||
<router-link :to="'/users/' + user.data.user_id">{{ user.data.attributes.name }}</router-link> - {{ user.data.attributes.email }} - {{ user.data.attributes.last_login }} | {{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import Avatar from '../../components/Avatar';
|
||||
import AlertBox from '../../components/AlertBox';
|
||||
import InputField from '../../components/InputField';
|
||||
import Loader from "../../components/Loader";
|
||||
import {mapGetters} from 'vuex'
|
||||
import Avatar from '../../components/Avatar'
|
||||
import AlertBox from '../../components/AlertBox'
|
||||
import InputField from '../../components/InputField'
|
||||
import Loader from '../../components/Loader'
|
||||
|
||||
export default {
|
||||
name: 'UserAdmin',
|
||||
components: {
|
||||
Avatar, AlertBox, InputField, Loader
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
},
|
||||
alertType: '',
|
||||
alertMessage: '',
|
||||
errors: null,
|
||||
loading: true,
|
||||
users: null,
|
||||
userListToggle: false,
|
||||
userAddToggle: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
authUser: 'authUser',
|
||||
export default {
|
||||
name: 'UserAdmin',
|
||||
components: {
|
||||
Avatar, AlertBox, InputField, Loader
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
},
|
||||
alertType: '',
|
||||
alertMessage: '',
|
||||
errors: null,
|
||||
loading: true,
|
||||
users: null,
|
||||
userListToggle: false,
|
||||
userAddToggle: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
authUser: 'authUser',
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
// eslint-disable-next-line no-undef
|
||||
axios.get('/api/users')
|
||||
.then(response => {
|
||||
this.users = response.data.data
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
axios.get('/api/users')
|
||||
.then(response => {
|
||||
this.users = response.data.data
|
||||
this.loading = false
|
||||
.catch(error => {
|
||||
this.loading = false
|
||||
console.log('Unable to fetch users.' + error)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
addMember: function () {
|
||||
// eslint-disable-next-line no-undef
|
||||
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(error => {
|
||||
this.loading = false
|
||||
console.log('Unable to fetch users.')
|
||||
.catch(errors => {
|
||||
this.errors = errors.response.data.errors
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
addMember: function () {
|
||||
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.errors = errors.response.data.errors
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user