Implemented the fifth phase of CRUD users

vs0uz4 · vs0uz4 · commit 88af674184f6 · 2017-10-01T22:12:38.000-03:00
- 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.
diff --git a/app/Http/Controllers/ApiController.php b/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);
+    }
+}
diff --git a/app/Http/Controllers/UsersController.php b/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'));
     }
diff --git a/package.json b/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"
   }
 }
diff --git a/public/build/js/app-66e2a3f00e.js b/public/build/js/app-66e2a3f00e.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-c6bfcb2ec9.js"
+  "js/app.js": "js/app-66e2a3f00e.js"
 }
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -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: {
diff --git a/resources/assets/js/app/users/address.vue b/resources/assets/js/app/users/address.vue
@@ -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>
diff --git a/resources/assets/js/app/users/addresses.vue b/resources/assets/js/app/users/addresses.vue
@@ -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>
diff --git a/resources/assets/js/app/users/table.vue b/resources/assets/js/app/users/table.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;
     }
diff --git a/routes/api.php b/routes/api.php
@@ -1,18 +1,4 @@
 <?php
 
-use Illuminate\Http\Request;
+Route::get('/endereco/{userId}', 'ApiController@address')->middleware('api');
 
-/*
-|--------------------------------------------------------------------------
-| API Routes
-|--------------------------------------------------------------------------
-|
-| Here is where you can register API routes for your application. These
-| routes are loaded by the RouteServiceProvider within a group which
-| is assigned the "api" middleware group. Enjoy building your API!
-|
-*/
-
-Route::get('/user', function (Request $request) {
-    return $request->user();
-})->middleware('auth:api');
diff --git a/yarn.lock b/yarn.lock
@@ -6140,7 +6140,7 @@ vue-loader@^9.3.2:
     vue-template-compiler "^2.0.5"
     vue-template-es2015-compiler "^1.2.2"
 
-vue-resource@^1.0.3:
+vue-resource@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/vue-resource/-/vue-resource-1.3.4.tgz#9fc0bdf6a2f5cab430129fc99d347b3deae7b099"
   dependencies:

Original file line number	Diff line number	Diff line change
`@@ -3,13 +3,12 @@`
`3`	`3`	`namespace App\Http\Controllers;`
`4`	`4`
`5`	`5`	`use App\User;`
`6`		`-use Illuminate\Http\Request;`
`7`	`6`
`8`	`7`	`class UsersController extends Controller`
`9`	`8`	`{`
`10`	`9`	`public function index()`
`11`	`10`	`{`
`12`		`- $users = User::with('addresses')->get();`
	`11`	`+ $users = User::all();`
`13`	`12`
`14`	`13`	`return view('users.index')->with(compact('users'));`
`15`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,6 @@`
`17`	`17`	`"lodash": "^4.16.2",`
`18`	`18`	`"moment": "^2.18.1",`
`19`	`19`	`"vue": "^2.0.1",`
`20`		`- "vue-resource": "^1.0.3"`
	`20`	`+ "vue-resource": "^1.3.4"`
`21`	`21`	`}`
`22`	`22`	`}`
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-c6bfcb2ec9.js"`
	`4`	`+ "js/app.js": "js/app-66e2a3f00e.js"`
`5`	`5`	`}`