Refactored .vue files for implemente axios and change forms

- Changed 'main.vue' for remove 'title' property in bus event;
- Changed 'table.vue' for remove 'title' property in bus event;
- Refactored 'form.vue' for fix bug in edit and create methods;
- Changed 'addresses.vue' for add full address of API URI.

Author: vs0uz4

public/build/js/app-ca2d71f22b.js

@@ -1,5 +1,5 @@
 {
   "css/app.css": "css/app-ad87f36536.css",
   "css/vendor.css": "css/vendor-0634183a17.css",
-  "js/app.js": "js/app-66e2a3f00e.js"
+  "js/app.js": "js/app-ca2d71f22b.js"
 }

public/build/rev-manifest.json

@@ -11,9 +11,9 @@
                 if (this.userid === obj.userid && this.addresses.length === 0) {
                     this.isSearching = true
                     this.$http
-                        .get(`api/endereco/${obj.userid}`)
+                        .get(`http://localhost/api/endereco/${obj.userid}`)
                         .then(res => {
-                            this.addresses = res.body.addresses
+                            this.addresses = res.data.addresses
                             this.isSearching = false
                         })
 

public/js/app.js

@@ -4,50 +4,50 @@
         props: ['token'],
         data () {
             return {
-                user: {
-                    id: 0,
+                fillUser: {
+                    id: '',
                     name: '',
                     email: '',
                     created_at: '',
                     updated_at: ''
                 },
-                modalTitle : '',
+                newUser: {
+                    name: '',
+                    email: '',
+                    password: ''
+                },
                 isEditing: false,
             }
         },
         computed: {
             action () {
                 if (this.isEditing) {
-                    return `/usuarios/atualizar/${this.user.id}`
+                    return `/usuarios/atualizar/${this.fillUser.id}`
                 } else {
                     return `/usuarios/criar`
                 }
             },
         },
         mounted () {
-            const userFormModal = jQuery(this.$refs.userFormModal)
+            const editUserModal = jQuery(this.$refs.editUserModal)
+            const newUserModal = jQuery(this.$refs.newUserModal)
 
             bus.$on('open-form', (obj) => {
-                if (obj.user !== undefined){
+                if (obj !== undefined){
                     this.isEditing = true
-                    this.user = obj.user
-                    this.modalTitle = obj.title
+                    this.fillUser = obj.user
+                    editUserModal.modal('show')
                 } else {
                     this.isEditing = false
-                    this.modalTitle = obj.title
+                    this.newUser.name = ''
+                    this.newUser.email = ''
+                    this.newUser.password = ''
+                    newUserModal.modal('show')
                 }
-
-                userFormModal.modal('show')
             })
 
-            userFormModal.on('hidden.bs.modal', () => {
+            editUserModal.on('hidden.bs.modal', () => {
                 this.isEditing = false
-                this.user.id = 0
-                this.user.name = ''
-                this.user.email = ''
-                this.user.created_at = ''
-                this.user.updated_at = ''
-                this.modalTitle = ''
             })
         }
     }
@@ -56,29 +56,67 @@
 <template>
     <div>
         <!-- /.modal -->
-        <div ref="userFormModal" class="modal fade" tabindex="-1" role="dialog">
+        <div ref="editUserModal" class="modal fade" tabindex="-1" role="dialog">
+            <!-- /.modal-dialog -->
+            <div class="modal-dialog" role="document">
+                <!-- /.modal-content -->
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title"><i class="fa fa-fw fa-user"></i>Alterar Usuário</h4>
+                    </div>
+                    <div class="modal-body">
+                        <form method="post" :action="action">
+                            <input id="_token" name="_token" type="hidden" :value="token">
+                            <div class="form-group">
+                                <label for="name" class="control-label">Nome</label>
+                                <input id="name" name="name" type="text" class="form-control" v-model="fillUser.name">
+                            </div>
+                            <div class="form-group">
+                                <label for="email" class="control-label">E-mail</label>
+                                <input id="email" name="email" type="email" class="form-control" v-model="fillUser.email">
+                            </div>
+                            <div class="form-group">
+                                <label for="password" class="control-label">Senha</label>
+                                <input id="password" name="password" type="password" class="form-control" v-model="fillUser.password">
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
+                                <button type="submit" class="btn btn-primary">Alterar</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <!-- /.modal-content -->
+            </div>
+            <!-- /.modal-dialog -->
+        </div>
+        <!-- /.modal -->
+
+        <!-- /.modal -->
+        <div ref="newUserModal" class="modal fade" tabindex="-1" role="dialog">
             <!-- /.modal-dialog -->
             <div class="modal-dialog" role="document">
                 <!-- /.modal-content -->
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                        <h4 class="modal-title"><i class="fa fa-fw fa-user"></i>{{ modalTitle }}</h4>
+                        <h4 class="modal-title"><i class="fa fa-fw fa-user"></i>Criar Novo Usuário</h4>
                     </div>
                     <div class="modal-body">
-                        <form ref="userForm" method="post" :action="action">
+                        <form method="post" :action="action">
                             <input id="_token" name="_token" type="hidden" :value="token">
                             <div class="form-group">
                                 <label for="name" class="control-label">Nome</label>
-                                <input id="name" name="name" type="text" class="form-control" v-model="user.name">
+                                <input id="name" name="name" type="text" class="form-control" v-model="newUser.name">
                             </div>
                             <div class="form-group">
                                 <label for="email" class="control-label">E-mail</label>
-                                <input id="email" name="email" type="email" class="form-control" v-model="user.email">
+                                <input id="email" name="email" type="email" class="form-control" v-model="newUser.email">
                             </div>
                             <div class="form-group">
                                 <label for="password" class="control-label">Senha</label>
-                                <input id="password" name="password" type="password" class="form-control" v-model="user.password">
+                                <input id="password" name="password" type="password" class="form-control" v-model="newUser.password">
                             </div>
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>

resources/assets/js/app/users/addresses.vue

@@ -10,7 +10,7 @@
         },
         methods: {
             form (){
-                bus.$emit('open-form', { title: 'Criar Novo Usuário' })
+                bus.$emit('open-form')
             }
         }
     }

resources/assets/js/app/users/form.vue

@@ -34,7 +34,7 @@
                     this.details = []
                 } else {
                     this.details = this.users.map(user => {
-                        bus.$emit('get-addresses', {userid: user.id})
+                        bus.$emit('get-addresses', { userid: user.id })
                         return user.id
                     })
                 }
@@ -45,14 +45,14 @@
                     this.details.splice(index, 1)
                 } else {
                     this.details.push(id)
-                    bus.$emit('get-addresses', {userid: id})
+                    bus.$emit('get-addresses', { userid: id })
                 }
             },
             formatDate (date) {
                 return moment(date).format('DD/MM/YYYY')
             },
             edit (user) {
-                bus.$emit('open-form', { user: user, title: 'Editar Usuário'})
+                bus.$emit('open-form', { user: user })
             },
             remove (id) {
                 const confirm = window.confirm('Tem Certeza da Exclusão?')