Improved loading of navigation (#1555)

* Improved loading of navigation Has a loading indicator and does not load until permissions are fulfilled. This should make it easier to tell when there is a network issue from the users perspective instead of just loading the dashboard link and nothing else. Remove navigation controller which as far as I can tell was never used. * Collapse if blocks into single block for clarity These are all controlled by the same permissions so it makes sense for them to be in the same block.
ilios · Apr 8, 2016 · 64494f4 · 64494f4
1 parent d2f736d
commit 64494f4
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 49 deletions.
diff --git a/app/components/ilios-navigation.js b/app/components/ilios-navigation.js
@@ -1,10 +1,27 @@
 import Ember from 'ember';
 
-const { Component } = Ember;
+const { Component, inject, computed, RSVP } = Ember;
+const { service } = inject;
+const { Promise } = RSVP;
 
 export default Component.extend({
-  i18n: Ember.inject.service(),
+  i18n: service(),
+  currentUser: service(),
   isMenuVisible: false,
+  permissions: computed('currentUser.model.roles.[]', function(){
+    return new Promise(resolve => {
+      this.get('currentUser.model').then(user => {
+        user.get('roles').then(roles => {
+          let ids = roles.mapBy('id');
+          let permissions = {
+            isFaculty: ids.contains('1')||ids.contains('2')||ids.contains('3'),
+            isAdmin: ids.contains('2'),
+          };
+          resolve(permissions);
+        });
+      });
+    });
+  }),
   actions: {
     toggleMenuVisibility: function(){
       this.toggleProperty('isMenuVisible');

diff --git a/app/controllers/navigation.js b/app/controllers/navigation.js
diff --git a/app/styles/components/_navigation.scss b/app/styles/components/_navigation.scss
@@ -34,11 +34,11 @@ $sliding-menu-color-hover: #fff;
     text-align: center;
     width: 120px;
     z-index: 201;
-    
+
     @include media($giant-screen) {
       display: none;
     }
-    
+
     i {
       @include transform(rotate(-90deg));
       margin-right: 10px;
@@ -61,7 +61,7 @@ $sliding-menu-color-hover: #fff;
     -webkit-overflow-scrolling: touch;
     padding-top: 2em;
     z-index: 201;
-    
+
     @include media($giant-screen) {
       @include transform(translateX(0));
     }
@@ -82,6 +82,12 @@ $sliding-menu-color-hover: #fff;
       }
     }
 
+    .loading-indicator {
+      font-size: 2em;
+      text-align: center;
+      width: 100%;
+    }
+
     &.is-menu-visible {
       @include transform(translateX(0));
     }
@@ -97,7 +103,7 @@ $sliding-menu-color-hover: #fff;
 
     &.is-menu-visible {
       visibility: visible;
-      
+
       @include media($giant-screen) {
         visibility: hidden;
       }

diff --git a/app/templates/components/ilios-navigation.hbs b/app/templates/components/ilios-navigation.hbs
@@ -3,27 +3,25 @@
 		{{fa-icon 'bars'}} {{t 'navigation.menu'}}
 	</a>
 	<nav {{action 'toggleMenuVisibility'}} class="sliding-menu-content {{if isMenuVisible 'is-menu-visible'}}">
-		<ul>
-			<li id='slidingnavmenu-dashboard'>{{#link-to 'dashboard'}}{{fa-icon 'home'}} {{t 'navigation.dashboard'}}{{/link-to}}</li>
-			{{#if (can 'edit courses')}}
-				<li id='slidingnavmenu-courses'>{{#link-to 'courses'}}{{fa-icon 'book'}} {{t 'navigation.courses'}}{{/link-to}}</li>
-			{{/if}}
-			{{#if (can 'edit learnerGroups')}}
-				<li id='slidingnavmenu-learnergroups'>{{#link-to 'learnerGroups'}}{{fa-icon 'mortar-board'}} {{t 'navigation.learnerGroups'}}{{/link-to}}</li>
-			{{/if}}
-			{{#if (can 'edit instructorGroups')}}
-				<li id='slidingnavmenu-instructorgroups'>{{#link-to 'instructorGroups'}}{{fa-icon 'user-md'}} {{t 'navigation.instructorGroups'}}{{/link-to}}</li>
-			{{/if}}
-			{{#if (can 'edit schools')}}
-				<li id='slidingnavmenu-schools'>{{#link-to 'schools'}}{{fa-icon 'university'}} {{t 'general.schools'}}{{/link-to}}</li>
-			{{/if}}
-			{{#if (can 'edit programs')}}
-				<li id='slidingnavmenu-programs'>{{#link-to 'programs'}}{{fa-icon 'list-alt'}} {{t 'navigation.programs'}}{{/link-to}}</li>
-			{{/if}}
-			{{#if (can 'view adminDashboard')}}
-				<li id='slidingnavmenu-admindashboard'>{{#link-to 'admin-dashboard'}}{{fa-icon 'cogs'}} {{t 'navigation.admin'}}{{/link-to}}</li>
-			{{/if}}
-		</ul>
+		{{#if (is-fulfilled permissions)}}
+			<ul>
+				<li id='slidingnavmenu-dashboard'>{{#link-to 'dashboard'}}{{fa-icon 'home'}} {{t 'navigation.dashboard'}}{{/link-to}}</li>
+				{{#if (get (await permissions) 'isFaculty')}}
+					<li id='slidingnavmenu-courses'>{{#link-to 'courses'}}{{fa-icon 'book'}} {{t 'navigation.courses'}}{{/link-to}}</li>
+					<li id='slidingnavmenu-learnergroups'>{{#link-to 'learnerGroups'}}{{fa-icon 'mortar-board'}} {{t 'navigation.learnerGroups'}}{{/link-to}}</li>
+					<li id='slidingnavmenu-instructorgroups'>{{#link-to 'instructorGroups'}}{{fa-icon 'user-md'}} {{t 'navigation.instructorGroups'}}{{/link-to}}</li>
+					<li id='slidingnavmenu-schools'>{{#link-to 'schools'}}{{fa-icon 'university'}} {{t 'general.schools'}}{{/link-to}}</li>
+					<li id='slidingnavmenu-programs'>{{#link-to 'programs'}}{{fa-icon 'list-alt'}} {{t 'navigation.programs'}}{{/link-to}}</li>
+				{{/if}}
+				{{#if (get (await permissions) 'isAdmin')}}
+					<li id='slidingnavmenu-admindashboard'>{{#link-to 'admin-dashboard'}}{{fa-icon 'cogs'}} {{t 'navigation.admin'}}{{/link-to}}</li>
+				{{/if}}
+			</ul>
+		{{else}}
+			<div class='loading-indicator'>
+				{{fa-icon 'spinner' spin=true}}
+			</div>
+		{{/if}}
 	</nav>
 	<div {{action 'toggleMenuVisibility'}} class="menu-screen {{if isMenuVisible 'is-menu-visible'}}"></div>
 </div>
diff --git a/tests/unit/controllers/navigation-test.js b/tests/unit/controllers/navigation-test.js