Implemented the third phase of CRUD users

vs0uz4 · vs0uz4 · commit f4981834f32b · 2017-10-01T11:00:09.000-03:00
- Created method update in UsersControllers;
- Imported bus event for VdUsersTable component;
- Implemented 'edit' method in VdUsersTable component;
- Pre-initiate 'remove' method in VdUsersTable component;
- Adjusted the columns styles of the table;
- Refactor the VdUserForm component to accept editing method.
diff --git a/app/Http/Controllers/UsersController.php b/app/Http/Controllers/UsersController.php
@@ -26,9 +26,20 @@ public function create()
         return redirect()->route('user.index')->with('success', 'Usuário Cadastrado com Sucesso!');
     }
 
-    public function update()
+    public function update($id)
     {
+        $input = \Request::only('name', 'email', 'password');
+
+        $user = User::find($id);
+        $user->name = $input['name'];
+        $user->email = $input['email'];
+
+        if (!empty($input['password'])) {
+            $user->password = bcrypt($input['password']);
+        }
+        $user->save();
 
+        return redirect()->route('user.index')->with('success', 'Usuário Atualizado com Sucesso!');
     }
 
     public function remove()
diff --git a/public/build/js/app-0eda38ff77.js b/public/build/js/app-0eda38ff77.js
diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json
@@ -1,5 +1,5 @@
 {
   "css/app.css": "css/app-ad87f36536.css",
   "css/vendor.css": "css/vendor-0634183a17.css",
-  "js/app.js": "js/app-bc3d901cc2.js"
+  "js/app.js": "js/app-0eda38ff77.js"
 }
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/assets/js/app/users/form.vue b/resources/assets/js/app/users/form.vue
@@ -2,13 +2,48 @@
     import bus from '../utils/events/bus'
     export default {
         props: ['token'],
+        data () {
+            return {
+                user: {
+                    id: 0,
+                    name: '',
+                    email: '',
+                    password: '',
+                    created_at: '',
+                    updated_at: '',
+                }
+            }
+        },
+        computed: {
+            isEditing () {
+                return this.user.id !== 0
+            },
+            action () {
+                if (this.isEditing) {
+                    return `/usuarios/atualizar/${this.user.id}`
+                } else {
+                    return `/usuarios/criar`
+                }
+            },
+        },
         mounted () {
-            jQuery(this.$refs.userFormModal).on('hidden.bs.modal', () => {
-                this.$refs.userForm.reset()
+            const userFormModal = jQuery(this.$refs.userFormModal)
+
+            bus.$on('open-form', (obj) => {
+                if (obj !== undefined){
+                    this.user = obj.user
+                }
+
+                userFormModal.modal('show')
             })
 
-            bus.$on('open-form', () => {
-                jQuery(this.$refs.userFormModal).modal('show')
+            userFormModal.on('hidden.bs.modal', () => {
+                this.user.id = 0
+                this.user.name = ''
+                this.user.email = ''
+                this.user.password = ''
+                this.user.created_at = ''
+                this.user.updated_at = ''
             })
         }
     }
@@ -27,19 +62,19 @@
                         <h4 class="modal-title">Criar Novo Usuário</h4>
                     </div>
                     <div class="modal-body">
-                        <form ref="userForm" method="post" action="/usuarios/criar">
+                        <form ref="userForm" 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">
+                                <input id="name" name="name" type="text" class="form-control" v-model="user.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">
+                                <input id="email" name="email" type="email" class="form-control" v-model="user.email">
                             </div>
                             <div class="form-group">
                                 <label for="password" class="control-label">Senha</label>
-                                <input id="password" name="password" type="password" class="form-control">
+                                <input id="password" name="password" type="password" class="form-control" v-model="user.password">
                             </div>
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
diff --git a/resources/assets/js/app/users/table.vue b/resources/assets/js/app/users/table.vue
@@ -1,5 +1,6 @@
 <script>
     import moment from 'moment'
+    import bus from '../utils/events/bus'
 
     export default {
         props: ['list'],
@@ -38,7 +39,13 @@
             },
             formatDate (date) {
                 return moment(date).format('DD/MM/YYYY')
-            }
+            },
+            edit (user) {
+                bus.$emit('open-form', { user: user})
+            },
+            remove (id) {
+
+            },
         }
     }
 </script>
@@ -64,7 +71,7 @@
             </thead>
             <tbody v-for="user in users">
             <tr>
-                <td class="text-center">
+                <td width="2%" nowrap>
                     <a href="#" @click.prevent="toggle(user.id)">
                         <i class="fa fa-fw" :class="{
                                     'fa-plus-circle red'  : !details.includes(user.id),
@@ -74,10 +81,10 @@
                 </td>
                 <td>{{ user.name }}</td>
                 <td>{{ user.email }}</td>
-                <td class="text-center">{{ formatDate(user.created_at) }}</td>
-                <td class="text-center">
-                    <a href="#"><i class="fa fa-fw fa-pencil" aria-hidden="true"></i></a>
-                    <a href="#"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i></a>
+                <td width="12%" class="text-center" nowrap>{{ formatDate(user.created_at) }}</td>
+                <td width="1%" class="text-center" nowrap>
+                    <a href="#" @click.prevent="edit(user)"><i class="fa fa-fw fa-pencil" aria-hidden="true"></i></a>
+                    <a href="#" @click.prevent="remove(user.id)"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i></a>
                 </td>
             </tr>
             <tr v-show="details.includes(user.id)">

Original file line number	Diff line number	Diff line change
`@@ -26,9 +26,20 @@ public function create()`
`26`	`26`	`return redirect()->route('user.index')->with('success', 'Usuário Cadastrado com Sucesso!');`
`27`	`27`	`}`
`28`	`28`
`29`		`- public function update()`
	`29`	`+ public function update($id)`
`30`	`30`	`{`
	`31`	`+ $input = \Request::only('name', 'email', 'password');`
	`32`	`+`
	`33`	`+ $user = User::find($id);`
	`34`	`+ $user->name = $input['name'];`
	`35`	`+ $user->email = $input['email'];`
	`36`	`+`
	`37`	`+ if (!empty($input['password'])) {`
	`38`	`+ $user->password = bcrypt($input['password']);`
	`39`	`+ }`
	`40`	`+ $user->save();`
`31`	`41`
	`42`	`+ return redirect()->route('user.index')->with('success', 'Usuário Atualizado com Sucesso!');`
`32`	`43`	`}`
`33`	`44`
`34`	`45`	`public function remove()`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"css/app.css": "css/app-ad87f36536.css",`
`3`	`3`	`"css/vendor.css": "css/vendor-0634183a17.css",`
`4`		`- "js/app.js": "js/app-bc3d901cc2.js"`
	`4`	`+ "js/app.js": "js/app-0eda38ff77.js"`
`5`	`5`	`}`