95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="jumbotron">
|
|
<h1>{{ title }}</h1>
|
|
</div>
|
|
|
|
<user-list :users="users" @edit-click="editUser" @delete-click="deleteUser" @message="childMessage" ref="usersListRef"></user-list>
|
|
|
|
<div class="alert alert-success" v-if="showSuccess">
|
|
|
|
<button type="button" class="close-btn" v-on:click="showSuccess=false">×</button>
|
|
<strong>{{ successMessage }}</strong>
|
|
</div>
|
|
<user-edit :user="currentUser" @user-saved="savedUser" @user-canceled="cancelEdit" v-if="currentUser"></user-edit>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
|
|
import UserList from './userList.vue';
|
|
import UserEdit from './userEdit.vue';
|
|
|
|
export default {
|
|
data: function(){
|
|
return {
|
|
title: 'List Users',
|
|
showSuccess: false,
|
|
successMessage: '',
|
|
currentUser: null,
|
|
users: []
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
editUser: function(user){
|
|
this.currentUser = user;
|
|
this.showSuccess = false;
|
|
},
|
|
deleteUser: function(user){
|
|
axios.delete('api/users/'+user.id)
|
|
.then(response => {
|
|
this.showSuccess = true;
|
|
this.successMessage = 'User Deleted';
|
|
this.getUsers();
|
|
});
|
|
},
|
|
savedUser: function(){
|
|
this.currentUser = null;
|
|
this.$refs.usersListRef.editingUser = null;
|
|
this.showSuccess = true;
|
|
this.successMessage = 'User Saved';
|
|
},
|
|
cancelEdit: function(){
|
|
this.currentUser = null;
|
|
this.$refs.usersListRef.editingUser = null;
|
|
this.showSuccess = false;
|
|
},
|
|
getUsers: function(){
|
|
|
|
/* buscar o user logado através do token guardado na LocalStorage */
|
|
let auth_user_token = {
|
|
headers: {
|
|
'Authorization': 'Bearer ' + localStorage.getItem("access_token")
|
|
}
|
|
};
|
|
|
|
axios.get('api/users', auth_user_token)
|
|
.then(response=>{
|
|
this.users = response.data.data;
|
|
console.log(this.users);
|
|
});
|
|
},
|
|
childMessage: function(message){
|
|
this.showSuccess = true;
|
|
this.successMessage = message;
|
|
}
|
|
},
|
|
components: {
|
|
'user-list': UserList,
|
|
'user-edit': UserEdit
|
|
},
|
|
mounted() {
|
|
this.getUsers();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
p {
|
|
font-size: 2em;
|
|
text-align: center;
|
|
}
|
|
</style>
|