Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add eslint working conf

Browse Source
This commit is contained in:
Romulus21
2020-04-29 21:05:38 +02:00
parent ffe8c167cb
commit ebb1c58f90
33 changed files with 866 additions and 846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/views/CssTesteur.vue
View File

@@ -37,7 +37,7 @@
</template>
<script>
export default {
name: "CssTesteur"
}
export default {
name: 'CssTesteur'
}
</script>

32
resources/js/views/DashBoard.vue
View File

@@ -11,24 +11,26 @@
</template>
<script>
import UserAdmin from "./User/UserAdmin";
import UserAdmin from './User/UserAdmin'
export default {
name: "DashBoard",
components: {
UserAdmin
},
methods: {
logout: function () {
axios.post('logout')
.then(res => {
if(res.status ===302 || 401) {
window.location.href = '/login'
}
}).catch(error => {
export default {
name: 'DashBoard',
components: {
UserAdmin
},
methods: {
logout: function () {
// eslint-disable-next-line no-undef
axios.post('logout')
.then(res => {
// eslint-disable-next-line no-constant-condition
if(res.status === 302 || 401) {
window.location.href = '/login'
}
}).catch(() => {
})
}
}
}
}
</script>

12
resources/js/views/Games/GameIndex.vue
View File

@@ -8,12 +8,12 @@
</template>
<script>
import HangmanIndex from "./HangMan/HangmanIndex";
import HangmanIndex from './HangMan/HangmanIndex'
export default {
name: "GameIndex",
components: {
HangmanIndex
}
export default {
name: 'GameIndex',
components: {
HangmanIndex
}
}
</script>

190
resources/js/views/Games/HangMan/Hangman.vue
View File

@@ -3,7 +3,7 @@
<h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
<p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
<div class="flex justify-center dic-select">
<div v-for="(dic, key) in dictionary">
<div v-for="(dic, key) in dictionary" :key="key">
<a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
</div>
</div>
@@ -46,116 +46,116 @@
</template>
<script>
import json from './dict.json'
import json from './dict.json'
export default {
name: "Hangman",
data: function () {
return {
dictionary: json,
letterBox: '',
figureParts: [],
correctLetters: [],
wrongLetters: [],
wrongLettersEl: '',
selectedWord: '',
wordEl: '',
finalMessage: '',
popup: false,
notification: false,
}
export default {
name: 'Hangman',
data: function () {
return {
dictionary: json,
letterBox: '',
figureParts: [],
correctLetters: [],
wrongLetters: [],
wrongLettersEl: '',
selectedWord: '',
wordEl: '',
finalMessage: '',
popup: false,
notification: false,
}
},
mounted() {
this.figureParts = this.$el.querySelectorAll('.figure-part')
window.addEventListener('keyup', this.keyMessage)
},
methods: {
selectWord(e) {
this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
this.displayWord()
this.popup = false
},
mounted() {
this.figureParts = this.$el.querySelectorAll('.figure-part')
window.addEventListener('keyup', this.keyMessage)
},
methods: {
selectWord(e) {
this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
this.displayWord()
this.popup = false
},
keyMessage(e) {
if(e.keyCode >= 65 && e.keyCode <= 90) {
const letter = e.key
keyMessage(e) {
if(e.keyCode >= 65 && e.keyCode <= 90) {
const letter = e.key
if(this.selectedWord.includes(letter)) {
if(!this.correctLetters.includes(letter)) {
this.correctLetters.push(letter)
if(this.selectedWord.includes(letter)) {
if(!this.correctLetters.includes(letter)) {
this.correctLetters.push(letter)
this.displayWord()
} else {
this.showNotification()
}
this.displayWord()
} else {
if(!this.wrongLetters.includes(letter)) {
this.wrongLetters.push(letter);
this.showNotification()
}
} else {
if(!this.wrongLetters.includes(letter)) {
this.wrongLetters.push(letter)
this.updateWrongLettersEl()
} else {
this.showNotification()
}
this.updateWrongLettersEl()
} else {
this.showNotification()
}
}
},
displayWord() {
this.wordEl =
this.selectedWord
}
},
displayWord() {
this.wordEl =
this.selectedWord
.split('')
.map(
letter => {
let toggleLetter = this.correctLetters.includes(letter) ? letter : '';
return '<span class="letter">' + toggleLetter +"</span>"
let toggleLetter = this.correctLetters.includes(letter) ? letter : ''
return '<span class="letter">' + toggleLetter + '</span>'
}
).join('');
).join('')
const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '');
const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '')
if(innerWord === this.selectedWord) {
this.finalMessage = 'Gagné! 😃';
this.popup = true
this.newGame()
}
},
updateWrongLettersEl() {
this.wrongLettersEl =
!this.wrongLetters ? '<p>Wrong</p>' : ''
+
this.wrongLetters.map(letter => `<span>${letter}</span>`);
// Display parts
this.figureParts.forEach((part, index) => {
const errors = this.wrongLetters.length;
if(index < errors) {
part.style.display = 'block'
} else {
part.style.display = 'none'
}
});
// Check if lost
if(this.wrongLetters.length === this.figureParts.length) {
this.finalMessage = 'Perdu. 😕';
this.popup = true
this.newGame()
}
},
newGame: function () {
if(innerWord === this.selectedWord) {
this.finalMessage = 'Gagné! 😃'
this.popup = true
this.correctLetters.splice(0);
this.wrongLetters.splice(0);
this.letterBox = ''
this.selectedWord = ''
this.wrongLettersEl = ''
},
showNotification(){
this.notification = true
setTimeout(() => {
this.notification = false
}, 2000)
this.newGame()
}
},
updateWrongLettersEl() {
this.wrongLettersEl =
!this.wrongLetters ? '<p>Wrong</p>' : ''
+
this.wrongLetters.map(letter => `<span>${letter}</span>`)
// Display parts
this.figureParts.forEach((part, index) => {
const errors = this.wrongLetters.length
if(index < errors) {
part.style.display = 'block'
} else {
part.style.display = 'none'
}
})
// Check if lost
if(this.wrongLetters.length === this.figureParts.length) {
this.finalMessage = 'Perdu. 😕'
this.popup = true
this.newGame()
}
},
newGame: function () {
this.popup = true
this.correctLetters.splice(0)
this.wrongLetters.splice(0)
this.letterBox = ''
this.selectedWord = ''
this.wrongLettersEl = ''
},
showNotification(){
this.notification = true
setTimeout(() => {
this.notification = false
}, 2000)
}
}
}
</script>

16
resources/js/views/Games/HangMan/HangmanIndex.vue
View File

@@ -6,13 +6,13 @@
</template>
<script>
export default {
name: "HangmanIndex",
props: {
link: {
type: String,
required: true
},
}
export default {
name: 'HangmanIndex',
props: {
link: {
type: String,
required: true
},
}
}
</script>

12
resources/js/views/Home.vue
View File

@@ -6,12 +6,12 @@
</template>
<script>
import OpenWeatherCard from "./Meteo/OpenWeatherCard";
import OpenWeatherCard from './Meteo/OpenWeatherCard'
export default {
name: "Home",
components: {
OpenWeatherCard
}
export default {
name: 'Home',
components: {
OpenWeatherCard
}
}
</script>

55
resources/js/views/Memo/MemoCreate.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<router-link to="/memos/" class="btn">< Back</router-link>
<router-link to="/memos/" class="btn">Back</router-link>
<button @click="$router.back()" class="btn-alert">Cancel</button>
</div>
<form @submit.prevent="submitForm">
@@ -16,33 +16,34 @@
</template>
<script>
import InputField from "../../components/InputField";
import TextAreaField from "../../components/TextAreaField";
import InputField from '../../components/InputField'
import TextAreaField from '../../components/TextAreaField'
export default {
name: "MemoCreate",
components: {
InputField, TextAreaField
},
data: function () {
return {
form: {
'name': '',
'memo': '',
},
errors: null,
}
},
methods: {
submitForm: function () {
axios.post('/api/memos', this.form)
.then(response => {
this.$router.push(response.data.links.self)
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
export default {
name: 'MemoCreate',
components: {
InputField, TextAreaField
},
data: function () {
return {
form: {
'name': '',
'memo': '',
},
errors: null,
}
},
methods: {
submitForm: function () {
// eslint-disable-next-line no-undef
axios.post('/api/memos', this.form)
.then(response => {
this.$router.push(response.data.links.self)
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
}
}
</script>

82
resources/js/views/Memo/MemoEdit.vue
View File

@@ -15,7 +15,7 @@
</div>
<div class="p-4">
<div class="flex justify-between mb-4">
<router-link :to="'/memos/' + this.$route.params.id" class="btn">< Back</router-link>
<router-link :to="'/memos/' + this.$route.params.id" class="btn">Back</router-link>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" :data="form.name" label="Title" placeholder="Your Title" required @update:field="form.name = $event" :errors="errors" />
@@ -31,49 +31,51 @@
</template>
<script>
import InputField from "../../components/InputField";
import TextAreaField from "../../components/TextAreaField";
import UploadableImage from "../../components/UploadableImage";
import InputField from '../../components/InputField'
import TextAreaField from '../../components/TextAreaField'
import UploadableImage from '../../components/UploadableImage'
export default {
name: "MemoEdit",
components: {
InputField, TextAreaField, UploadableImage
},
data: function () {
return {
form: {
'name': '',
'memo': '',
'attributes': {}
},
errors: null,
loading: true,
}
},
methods: {
submitForm: function () {
axios.patch('/api/memos/' + this.$route.params.id, this.form)
.then(response => {
this.$router.push(response.data.links.self)
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
},
mounted() {
axios.get('/api/memos/' + this.$route.params.id)
export default {
name: 'MemoEdit',
components: {
InputField, TextAreaField, UploadableImage
},
data: function () {
return {
form: {
'name': '',
'memo': '',
'attributes': {}
},
errors: null,
loading: true,
}
},
methods: {
submitForm: function () {
// eslint-disable-next-line no-undef
axios.patch('/api/memos/' + this.$route.params.id, this.form)
.then(response => {
this.form = response.data.data
this.loading = false
this.$router.push(response.data.links.self)
})
.catch(error => {
this.loading = false
if (error.response.status === 404) {
this.$router.back()
}
.catch(errors => {
this.errors = errors.response.data.errors
})
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/memos/' + this.$route.params.id)
.then(response => {
this.form = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
if (error.response.status === 404) {
this.$router.back()
}
})
}
}
</script>

47
resources/js/views/Memo/MemoIndex.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="p-4">
<div class="flex justify-between flex-center mb-4">
<a href="#" class="btn" @click="$router.back()">< Back</a>
<a href="#" class="btn" @click="$router.back()">Back</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
</div>
<Loader v-if="loading" />
@@ -25,29 +25,30 @@
</template>
<script>
import Loader from "../../components/Loader";
import Loader from '../../components/Loader'
export default {
name: "MemoIndex",
components: {
Loader
},
data: function () {
return {
loading: true,
memos: null,
}
},
mounted() {
axios.get('/api/memos')
.then(response => {
this.memos = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
console.log('Unable to fetch memos.')
})
export default {
name: 'MemoIndex',
components: {
Loader
},
data: function () {
return {
loading: true,
memos: null,
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/memos')
.then(response => {
this.memos = response.data.data
this.loading = false
})
.catch(() => {
this.loading = false
console.log('Unable to fetch memos.')
})
}
}
</script>

90
resources/js/views/Memo/MemoShow.vue
View File

@@ -18,7 +18,7 @@
/>
<div class="absolute flex flex-col justify-between w-full top-0 bottom-0">
<div class="flex items-center justify-between p-4">
<router-link to="/memos/" class="btn-secondary">< Back</router-link>
<router-link to="/memos/" class="btn-secondary">Back</router-link>
<div class="flex-middle">
<router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-secondary mr-1" >Edit</router-link>
<a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
@@ -38,53 +38,55 @@
</template>
<script>
// import TagBox from "../Tag/TagBox";
import Loader from "../../components/Loader";
let MarkdownIt = require('markdown-it'),
md = new MarkdownIt()
.use(require('markdown-it-checkbox'));
// import TagBox from "../Tag/TagBox";
import Loader from '../../components/Loader'
let MarkdownIt = require('markdown-it'),
md = new MarkdownIt()
.use(require('markdown-it-checkbox'))
export default {
name: 'MemoShow',
components: {
Loader
// TagBox
},
data: function () {
return {
loading: true,
modal: false,
memo: null,
}
},
computed: {
memoMarkdown: function () {
return md.render(this.memo.memo)
}
},
mounted() {
axios.get('/api/memos/' + this.$route.params.id)
.then(response => {
this.memo = response.data.data
this.loading = false
export default {
name: 'MemoShow',
components: {
Loader
// TagBox
},
data: function () {
return {
loading: true,
modal: false,
memo: null,
}
},
computed: {
memoMarkdown: function () {
return md.render(this.memo.memo)
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/memos/' + this.$route.params.id)
.then(response => {
this.memo = response.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/memos')
}
})
},
methods: {
destroy: function () {
// eslint-disable-next-line no-undef
axios.delete('/api/memos/' + this.$route.params.id)
.then(() => {
this.$router.push('/memos')
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/memos')
}
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
methods: {
destroy: function () {
axios.delete('/api/memos/' + this.$route.params.id)
.then(response => {
this.$router.push('/memos')
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
}
}
}
</script>

82
resources/js/views/Meteo/OpenWeatherCard.vue
View File

@@ -22,50 +22,50 @@
</template>
<script>
export default {
name: "OpenWeatherCard",
data: function () {
return {
loading: true,
meteo: null,
}
},
methods : {
dateFormat(date) {
const d = new Date(date)
const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
const [{ value: mo },,{ value: da },,{ value: ye },,{value: ho }] = dtf.formatToParts(d)
return `${mo}/${da} - ${ho}h`
}
},
mounted() {
let refreshMeteo = false
export default {
name: 'OpenWeatherCard',
data: function () {
return {
loading: true,
meteo: null,
}
},
methods : {
dateFormat(date) {
const d = new Date(date)
const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
const [{ value: mo },,{ value: da },,{value: ho }] = dtf.formatToParts(d)
return `${mo}/${da} - ${ho}h`
}
},
mounted() {
let refreshMeteo = false
if(localStorage.getItem('meteo')) {
this.meteo = JSON.parse(localStorage.getItem('meteo'))
let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
if (deltaTime/1000/3600 > 3) {
refreshMeteo = true
}
this.loading = false
console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
} else {
if(localStorage.getItem('meteo')) {
this.meteo = JSON.parse(localStorage.getItem('meteo'))
let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
if (deltaTime/1000/3600 > 3) {
refreshMeteo = true
}
this.loading = false
console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
} else {
refreshMeteo = true
}
if (refreshMeteo) {
console.log("refreshing meteo data")
axios.get('/api/meteo')
.then(response => {
this.meteo = response.data
this.loading = false
localStorage.setItem('meteo', JSON.stringify(response.data));
})
.catch(error => {
console.log('Unable to fetch meteo.')
})
}
},
}
if (refreshMeteo) {
// eslint-disable-next-line no-undef
axios.get('/api/meteo')
.then(response => {
this.meteo = response.data
this.loading = false
localStorage.setItem('meteo', JSON.stringify(response.data))
})
.catch(() => {
console.log('Unable to fetch meteo.')
})
}
},
}
</script>

44
resources/js/views/ToDoLists/ToDo.vue
View File

@@ -14,30 +14,30 @@
</template>
<script>
export default {
name: "ToDo",
data: function () {
return {
name: this.toDo.data.attributes.data.name,
errors: null,
edit: false,
checked: false,
}
},
props: {
toDo: {
type: Object,
require: true
},
position: {
type: Number,
require: true
}
},
mounted() {
console.log(this.$key)
export default {
name: 'ToDo',
data: function () {
return {
name: this.toDo.data.attributes.data.name,
errors: null,
edit: false,
checked: false,
}
},
props: {
toDo: {
type: Object,
require: true
},
position: {
type: Number,
require: true
}
},
mounted() {
console.log(this.$key)
}
}
</script>
<style scoped>

92
resources/js/views/ToDoLists/ToDoList.vue
View File

@@ -9,7 +9,7 @@
</div>
<ToDo v-else
v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
key="indexToDo"
:key="indexToDo"
:toDo="toDo"
:position="indexToDo" />
</ul>
@@ -23,54 +23,56 @@
</template>
<script>
import InputField from "../../components/InputField";
import ToDo from "./ToDo";
import InputField from '../../components/InputField'
import ToDo from './ToDo'
export default {
name: "ToDoList",
components: {
InputField, ToDo
export default {
name: 'ToDoList',
components: {
InputField, ToDo
},
data: function () {
return {
name: '',
errors: null,
list: null,
edit: false,
}
},
props: {
toDoList: {
type: Object,
require: true
}
},
mounted() {
this.list = this.$el.querySelector('.draggable-list')
console.log(this.list)
},
methods: {
addToDo: function () {
// eslint-disable-next-line no-undef
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
this.name = ''
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
data: function () {
return {
name: '',
errors: null,
list: null,
edit: false,
}
},
props: {
toDoList: {
type: Object,
require: true
}
},
mounted() {
this.list = this.$el.querySelector('.draggable-list')
console.log(this.list)
},
methods: {
addToDo: function () {
axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.push(res.data)
this.name = ''
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
deleteToDo: function (toDo, position) {
axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
.then(res => {
this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
deleteToDo: function (toDo, position) {
// eslint-disable-next-line no-undef
axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
.then(() => {
this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
}
}
</script>

82
resources/js/views/ToDoLists/ToDoListIndex.vue
View File

@@ -10,7 +10,7 @@
</div>
</div>
<div class="flex-between flex-center mb-1">
<a href="#" class="btn" @click="$router.back()">< Back</a>
<a href="#" class="btn" @click="$router.back()">Back</a>
<a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
</div>
@@ -27,50 +27,52 @@
</template>
<script>
import Loader from "../../components/Loader";
import InputField from "../../components/InputField";
import ToDoList from "./ToDoList";
import Loader from '../../components/Loader'
import InputField from '../../components/InputField'
import ToDoList from './ToDoList'
export default {
name: "ToDoListIndex",
components: {
Loader, InputField, ToDoList
},
data: function () {
return {
loading: true,
modal: false,
toDoLists: null,
name: '',
errors: null,
}
},
mounted() {
axios.get('/api/to-do-lists')
export default {
name: 'ToDoListIndex',
components: {
Loader, InputField, ToDoList
},
data: function () {
return {
loading: true,
modal: false,
toDoLists: null,
name: '',
errors: null,
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/to-do-lists')
.then(res => {
this.toDoLists = res.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/')
}
})
},
methods: {
create: function () {
// eslint-disable-next-line no-undef
axios.post('/api/to-do-lists', {name: this.name})
.then(res => {
this.toDoLists = res.data.data
this.loading = false
console.log(res)
this.modal = false
this.name = ''
this.toDoLists.push(res.data)
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/')
}
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
},
methods: {
create: function () {
axios.post('/api/to-do-lists', {name: this.name})
.then(res => {
console.log(res)
this.modal = false
this.name = ''
this.toDoLists.push(res.data)
})
.catch(errorRes => {
console.log('Internal Error, Unable to delete contact.' + errorRes)
})
}
}
}
}
</script>

8
resources/js/views/ToDoLists/ToDoListShow.vue
View File

@@ -1,9 +1,9 @@
<template>
<div></div>
</template>
<script>
export default {
name: "ToDoListShow"
}
export default {
name: 'ToDoListShow'
}
</script>

26
resources/js/views/User/ProfileUser.vue
View File

@@ -29,18 +29,18 @@
</template>
<script>
import { mapGetters } from 'vuex'
import UploadableImage from "../../components/UploadableImage";
import { mapGetters } from 'vuex'
import UploadableImage from '../../components/UploadableImage'
export default {
name: 'Profil',
components: {
UploadableImage
},
computed: {
...mapGetters({
authUser: 'authUser',
})
},
}
export default {
name: 'Profil',
components: {
UploadableImage
},
computed: {
...mapGetters({
authUser: 'authUser',
})
},
}
</script>

49
resources/js/views/User/ShowUser.vue
View File

@@ -11,31 +11,28 @@
</template>
<script>
import UploadableImage from "../../components/UploadableImage";
export default {
name: 'Profile',
components: {
UploadableImage
},
data: function () {
return {
loading: true,
user: null,
}
},
mounted() {
axios.get('/api/users/' + this.$route.params.id)
.then(response => {
this.user = response.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/user')
}
})
},
}
export default {
name: 'Profile',
data: function () {
return {
loading: true,
user: null,
}
},
mounted() {
// eslint-disable-next-line no-undef
axios.get('/api/users/' + this.$route.params.id) // eslint-disable-line no-undef-init
.then(response => {
this.user = response.data.data
this.loading = false
})
.catch(errorRes => {
this.loading = false
if (errorRes.response.status === 404) {
this.$router.push('/user')
}
})
},
}
</script>

190
resources/js/views/User/UserAdmin.vue
View File

@@ -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>