Merge pull request silverbux#24 from silverbux/user-current-context

User current context

Author: silverbux

angular/app/components/login-form/login-form.component.js

@@ -1,7 +1,9 @@
 class LoginFormController {
-  constructor ($auth, $state, $stateParams, API, AclService) {
+  constructor ($rootScope, $auth, $state, $stateParams, API, AclService) {
     'ngInject'
 
+    delete $rootScope.me
+
     this.$auth = $auth
     this.$state = $state
     this.$stateParams = $stateParams

angular/app/components/nav-header/nav-header.component.html

@@ -212,17 +212,16 @@ <h3>
         <!-- User Account: style can be found in dropdown.less -->
         <li class="dropdown user user-menu"  uib-dropdown>
           <a href="" class="dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
-            <img src="/img/user2-160x160.jpg" class="user-image" alt="User Image">
-            <span class="hidden-xs">Alexander Pierce</span>
+            <img src="{{vm.userData.avatar}}" class="user-image" alt="User Image" onError="this.src='http://placeholdit.imgix.net/~text?txtfont=monospace,bold&bg=DD4B39&txtclr=ffffff&txt=A&w=45&h=45&txtsize=16'">
+            <span class="hidden-xs">{{vm.userData.name | capitalize}}</span>
           </a>
           <ul class="dropdown-menu" uib-dropdown-menu>
             <!-- User image -->
             <li class="user-header">
-              <img src="/img/user2-160x160.jpg" class="img-circle" alt="User Image">
-
+              <img src="{{vm.userData.avatar}}" class="img-circle" alt="User Image" onError="this.src='//placeholdit.imgix.net/~text?txtfont=monospace,bold&bg=DD4B39&txtclr=ffffff&txt=A&w=90&h=90&txtsize=36'">
               <p>
-                Alexander Pierce - Web Developer
-                <small>Member since Nov. 2012</small>
+                {{vm.userData.name | capitalize}}
+                <small>Member since {{vm.userData.created_at | datemillis |date:'MMMM yyyy' }}</small>
               </p>
             </li>
             <!-- Menu Body -->

angular/app/components/nav-header/nav-header.component.js

@@ -1,9 +1,15 @@
 class NavHeaderController {
-  constructor () {
+  constructor ($rootScope, ContextService) {
     'ngInject'
 
-  //
+    let navHeader = this
+
+    ContextService.me(function (data) {
+      navHeader.userData = data
+    })
   }
+
+  $onInit () {}
 }
 
 export const NavHeaderComponent = {

angular/app/components/nav-sidebar/nav-sidebar.component.html

@@ -4,10 +4,10 @@
     <!-- Sidebar user panel -->
     <div class="user-panel">
       <div class="pull-left image">
-        <img src="/img/user2-160x160.jpg" class="img-circle" alt="User Image">
+        <img src="{{vm.userData.avatar}}" class="img-circle" alt="User Image" onError="this.src='http://placeholdit.imgix.net/~text?txtfont=monospace,bold&bg=DD4B39&txtclr=ffffff&txt=A&w=45&h=45&txtsize=16'">
       </div>
       <div class="pull-left info">
-        <p>Alexander Pierce</p>
+        <p>{{vm.userData.name | capitalize}}</p>
         <a href="javascript:void(0)"><i class="fa fa-circle text-success"></i> Online</a>
       </div>
     </div>

angular/app/components/nav-sidebar/nav-sidebar.component.js

@@ -1,8 +1,13 @@
 class NavSidebarController {
-  constructor (AclService) {
+  constructor (AclService, ContextService) {
     'ngInject'
 
+    let navSideBar = this
     this.can = AclService.can
+
+    ContextService.me(function (data) {
+      navSideBar.userData = data
+    })
   }
 
   $onInit () {}

angular/config/routes.config.js

@@ -270,8 +270,9 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
       url: '/logout',
       views: {
         'main@app': {
-          controller: function ($scope, $auth, $state, AclService) {
+          controller: function ($rootScope, $scope, $auth, $state, AclService) {
             $auth.logout().then(function () {
+              delete $rootScope.me
               AclService.flushRoles()
               AclService.setAbilities({})
               $state.go('login')

angular/filters/date_millis.filter.js

@@ -0,0 +1,7 @@
+export function DateMillisFilter () {
+  'ngInject'
+
+  return function (input) {
+    return Date.parse(input)
+  }
+}

angular/index.filters.js

@@ -1,3 +1,4 @@
+import { DateMillisFilter } from './filters/date_millis.filter'
 import { CapitalizeFilter } from './filters/capitalize.filter'
 import { HumanReadableFilter } from './filters/human_readable.filter'
 import { TruncatCharactersFilter } from './filters/truncate_characters.filter'
@@ -6,8 +7,9 @@ import { TrustHtmlFilter } from './filters/trust_html.filter'
 import { UcFirstFilter } from './filters/ucfirst.filter'
 
 angular.module('app.filters')
+  .filter('datemillis', DateMillisFilter)
   .filter('capitalize', CapitalizeFilter)
-  .filter('humanReadable', HumanReadableFilter)
+  .filter('humanreadable', HumanReadableFilter)
   .filter('truncateCharacters', TruncatCharactersFilter)
   .filter('truncateWords', TruncateWordsFilter)
   .filter('trustHtml', TrustHtmlFilter)

angular/index.services.js

@@ -1,8 +1,10 @@
+import { ContextService } from './services/context.service'
 import { APIService } from './services/API.service'
 import { DialogService } from './services/dialog.service'
 import { ToastService } from './services/toast.service'
 
 angular.module('app.services')
+  .service('ContextService', ContextService)
   .service('API', APIService)
   .service('DialogService', DialogService)
   .service('ToastService', ToastService)

angular/run/routes.run.js

@@ -1,4 +1,4 @@
-export function RoutesRun ($rootScope, $state, $auth, AclService, $timeout) {
+export function RoutesRun ($rootScope, $state, $auth, AclService, $timeout, API, ContextService) {
   'ngInject'
 
   AclService.resume()
@@ -15,8 +15,9 @@ export function RoutesRun ($rootScope, $state, $auth, AclService, $timeout) {
     $rootScope.bodyClass = 'hold-transition login-page'
   })
 
-  function fixSideBar () {
+  function stateChange () {
     $timeout(function () {
+      // fix sidebar
       var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight()
       var window_height = $(window).height()
       var sidebar_height = $('.sidebar').height()
@@ -30,10 +31,19 @@ export function RoutesRun ($rootScope, $state, $auth, AclService, $timeout) {
           $('.content-wrapper, .right-side').css('min-height', sidebar_height)
         }
       }
+
+      // get user current context
+      if ($auth.isAuthenticated() && !$rootScope.me) {
+        ContextService.getContext()
+          .then((response) => {
+            response = response.plain()
+            $rootScope.me = response.data
+          })
+      }
     })
   }
 
   $rootScope.$on('$destroy', deregisterationCallback)
-  $rootScope.$on('$stateChangeSuccess', fixSideBar)
+  $rootScope.$on('$stateChangeSuccess', stateChange)
 /*eslint-enable */
 }

angular/services/context.service.js

@@ -0,0 +1,27 @@
+export class ContextService {
+  constructor ($auth, $rootScope, API) {
+    'ngInject'
+    this.$auth = $auth
+    this.API = API
+    this.$rootScope = $rootScope
+  }
+
+  getContext () {
+    let $auth = this.$auth
+
+    if ($auth.isAuthenticated()) {
+      let API = this.API
+      let UserData = API.service('me', API.all('users'))
+
+      return UserData.one().get()
+    } else {
+      return null
+    }
+  }
+
+  me (cb) {
+    this.$rootScope.$watch('me', function (nv) {
+      cb(nv)
+    })
+  }
+}

app/Http/Controllers/UserController.php

@@ -14,13 +14,23 @@
 
 class UserController extends Controller
 {
+    /**
+     * Get user current context.
+     *
+     * @return JSON
+     */
     public function getMe()
     {
         $user = Auth::user();
 
         return response()->success($user);
     }
 
+    /**
+     * Update user current context.
+     *
+     * @return JSON success message
+     */
     public function putMe(Request $request)
     {
         $user = Auth::user();

tests/angular/services/context.service.spec.js

@@ -0,0 +1,10 @@
+ngDescribe({
+  name: 'Test ContextService',
+  modules: 'app',
+  inject: 'ContextService',
+  tests: function (deps) {
+    it('basic test', () => {
+      //
+    })
+  }
+})