Implemented the fifth phase of CRUD users

- Created ApiController;
- Refactored 'index' method in UsersControllers, removed list addresses;
- Installed vue-resource dependency;
- Created API router for get addresses;
- Refactored 'table.vue' component for implement VdUserAddresses component;
- Created VdUsersAddresses component;
- Created VdUserAddress component;
- Implemented 'bus event' for communication between the components(VdUserAddresses and VdUserAddress);
- Rebuilt assets with gulp.

Author: vs0uz4

app/Http/Controllers/ApiController.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\User;
+
+class ApiController extends Controller
+{
+    public function address($userId)
+    {
+        $user = User::find($userId);
+        $addresses = $user->addresses;
+        sleep(2);
+
+        return response()->json(['addresses' => $addresses], 200);
+    }
+}

app/Http/Controllers/UsersController.php

@@ -3,13 +3,12 @@
 namespace App\Http\Controllers;
 
 use App\User;
-use Illuminate\Http\Request;
 
 class UsersController extends Controller
 {
     public function index()
     {
-        $users = User::with('addresses')->get();
+        $users = User::all();
 
         return view('users.index')->with(compact('users'));
     }

package.json

@@ -17,6 +17,6 @@
     "lodash": "^4.16.2",
     "moment": "^2.18.1",
     "vue": "^2.0.1",
-    "vue-resource": "^1.0.3"
+    "vue-resource": "^1.3.4"
   }
 }

public/build/js/app-c6bfcb2ec9.js public/build/js/app-66e2a3f00e.jspublic/build/js/app-c6bfcb2ec9.js renamed to public/build/js/app-66e2a3f00e.js

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

public/build/rev-manifest.json

@@ -4,10 +4,13 @@ window.jQuery = window.$ = require('jquery')
 require('bootstrap-sass')
 
 import Vue from 'vue'
+import VueResource from 'vue-resource'
 
 import PrimeiroComponente from './app/components/primeiro-componente.vue'
 import VdUsers from './app/users/main.vue'
 
+Vue.use(VueResource)
+
 new Vue({
     el: '#app',
     components: {

public/js/app.js

@@ -0,0 +1,28 @@
+<script>
+    export default {
+        props: ['address'],
+        computed: {
+            hasAddress () {
+                return this.address !== undefined
+            }
+        },
+    }
+</script>
+
+<template>
+    <div>
+        <div class="address" v-if="hasAddress">
+            <i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> {{ address.street }}, {{ address.number }} - {{ address.city }}, {{ address.state }}
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .address {
+        padding: 5px;
+        margin: 5px 5px 5px 0;
+        background-color: #f9f7ee;
+        border: 1px solid #f3ede5;
+        border-radius: 5px;
+    }
+</style>

resources/assets/js/app.js

@@ -0,0 +1,43 @@
+<script>
+    import bus from '../utils/events/bus'
+    import VdUserAddress from './address.vue'
+    export default {
+        props: ['userid'],
+        components: {
+            VdUserAddress
+        },
+        mounted() {
+            bus.$on('get-addresses', obj => {
+                if (this.userid === obj.userid && this.addresses.length === 0) {
+                    this.isSearching = true
+                    this.$http
+                        .get(`api/endereco/${obj.userid}`)
+                        .then(res => {
+                            this.addresses = res.body.addresses
+                            this.isSearching = false
+                        })
+
+                }
+            })
+        },
+        data (){
+            return {
+                addresses: [],
+                isSearching: false,
+            }
+        },
+    }
+</script>
+
+<template>
+    <div>
+        <div class="text-center" v-show="isSearching">
+            <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
+        </div>
+        <div class="row" v-show="!isSearching">
+            <div class="col-md-6" v-for="address in addresses">
+                <vd-user-address :address="address"></vd-user-address>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -1,9 +1,13 @@
 <script>
     import moment from 'moment'
     import bus from '../utils/events/bus'
+    import VdUserAddresses from './addresses.vue'
 
     export default {
         props: ['list'],
+        components: {
+            VdUserAddresses
+        },
         data() {
             return {
                 details: [],
@@ -29,7 +33,10 @@
                 if (this.details.length > 0) {
                     this.details = []
                 } else {
-                    this.details = this.users.map(user => user.id)
+                    this.details = this.users.map(user => {
+                        bus.$emit('get-addresses', {userid: user.id})
+                        return user.id
+                    })
                 }
             },
             toggleOne (id){
@@ -38,6 +45,7 @@
                     this.details.splice(index, 1)
                 } else {
                     this.details.push(id)
+                    bus.$emit('get-addresses', {userid: id})
                 }
             },
             formatDate (date) {
@@ -99,11 +107,7 @@
             </tr>
             <tr v-show="details.includes(user.id)">
                 <td colspan="5">
-                    <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>
+                    <vd-user-addresses :userid="user.id"></vd-user-addresses>
                 </td>
             </tr>
             </tbody>
@@ -112,13 +116,6 @@
 </template>
 
 <style>
-    .address {
-        padding: 5px;
-        margin: 5px 5px 5px 0;
-        background-color: #f9f7ee;
-        border: 1px solid #f3ede5;
-        border-radius: 5px;
-    }
     .green {
         color: red;
     }