Implemented the fourth phase of CRUD users

- Created 'remove' method in UsersControllers;
- Refactored 'index' method in UsersControllers for list addresses;
- Created 'remove' method in VdUsersTable component;
- Changed VdUsersTable for view table only users exists;
- Changed VdUsersTable for list users addresses;
- Changed VdUsersTable 'edit' method for send bus event with title property;
- Changed VdUserForm component for use dynamic modal titles;
- Changed VdUsers component for send bus event with 'title' property.

Author: vs0uz4

app/Http/Controllers/UsersController.php

@@ -9,7 +9,8 @@ class UsersController extends Controller
 {
     public function index()
     {
-        $users = User::all();
+        $users = User::with('addresses')->get();
+
         return view('users.index')->with(compact('users'));
     }
 
@@ -42,8 +43,11 @@ public function update($id)
         return redirect()->route('user.index')->with('success', 'Usuário Atualizado com Sucesso!');
     }
 
-    public function remove()
+    public function remove($id)
     {
+        $user = User::find($id);
+        $user->delete();
 
+        return redirect()->route('user.index')->with('success', 'Usuário Removido com Sucesso!');
     }
 }

public/build/js/app-0eda38ff77.js public/build/js/app-c6bfcb2ec9.jspublic/build/js/app-0eda38ff77.js renamed to public/build/js/app-c6bfcb2ec9.js

@@ -1,5 +1,5 @@
 {
   "css/app.css": "css/app-ad87f36536.css",
   "css/vendor.css": "css/vendor-0634183a17.css",
-  "js/app.js": "js/app-0eda38ff77.js"
+  "js/app.js": "js/app-c6bfcb2ec9.js"
 }

public/build/rev-manifest.json

@@ -8,16 +8,14 @@
                     id: 0,
                     name: '',
                     email: '',
-                    password: '',
                     created_at: '',
-                    updated_at: '',
-                }
+                    updated_at: ''
+                },
+                modalTitle : '',
+                isEditing: false,
             }
         },
         computed: {
-            isEditing () {
-                return this.user.id !== 0
-            },
             action () {
                 if (this.isEditing) {
                     return `/usuarios/atualizar/${this.user.id}`
@@ -30,20 +28,26 @@
             const userFormModal = jQuery(this.$refs.userFormModal)
 
             bus.$on('open-form', (obj) => {
-                if (obj !== undefined){
+                if (obj.user !== undefined){
+                    this.isEditing = true
                     this.user = obj.user
+                    this.modalTitle = obj.title
+                } else {
+                    this.isEditing = false
+                    this.modalTitle = obj.title
                 }
 
                 userFormModal.modal('show')
             })
 
             userFormModal.on('hidden.bs.modal', () => {
+                this.isEditing = false
                 this.user.id = 0
                 this.user.name = ''
                 this.user.email = ''
-                this.user.password = ''
                 this.user.created_at = ''
                 this.user.updated_at = ''
+                this.modalTitle = ''
             })
         }
     }
@@ -59,7 +63,7 @@
                 <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">Criar Novo Usuário</h4>
+                        <h4 class="modal-title"><i class="fa fa-fw fa-user"></i>{{ modalTitle }}</h4>
                     </div>
                     <div class="modal-body">
                         <form ref="userForm" method="post" :action="action">

public/js/app.js

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

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

@@ -13,6 +13,9 @@
             users () {
                 return JSON.parse(this.list)
             },
+            hasUsers () {
+                return this.users.length > 0
+            },
         },
         methods: {
             toggle (id) {
@@ -41,18 +44,25 @@
                 return moment(date).format('DD/MM/YYYY')
             },
             edit (user) {
-                bus.$emit('open-form', { user: user})
+                bus.$emit('open-form', { user: user, title: 'Editar Usuário'})
             },
             remove (id) {
+                const confirm = window.confirm('Tem Certeza da Exclusão?')
 
+                if (confirm) {
+                    window.location = `usuarios/remover/${id}`
+                }
             },
         }
     }
 </script>
 
 <template>
     <div>
-        <table class="table table-bordered table-striped">
+        <h5 v-show="!hasUsers">
+            Ainda Não Há Usuários Cadastrados.
+        </h5>
+        <table class="table table-bordered table-striped" v-show="hasUsers">
             <thead>
             <tr>
                 <th class="text-center">
@@ -89,7 +99,11 @@
             </tr>
             <tr v-show="details.includes(user.id)">
                 <td colspan="5">
-                    <i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>Placeholder para Endereço
+                    <div class="row col-md-6" v-for="address in user.addresses">
+                        <div class="address">
+                            <i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> {{ address.street }}, {{ address.number }} - {{ address.city }}, {{ address.state }}
+                        </div>
+                    </div>
                 </td>
             </tr>
             </tbody>
@@ -98,6 +112,13 @@
 </template>
 
 <style>
+    .address {
+        padding: 5px;
+        margin: 5px 5px 5px 0;
+        background-color: #f9f7ee;
+        border: 1px solid #f3ede5;
+        border-radius: 5px;
+    }
     .green {
         color: red;
     }