Add user profile screen

app/components/ilios-header.js

@@ -1,17 +1,14 @@
 import Ember from 'ember';
 
 const { Component, computed, inject } = Ember;
-const { oneWay, equal } = computed;
 const { service } = inject;
 
 export default Component.extend({
   session: service(),
   currentUser: Ember.inject.service(),
   i18n: Ember.inject.service(),
-  userName: oneWay('currentUser.model.fullName'),
-  inEnglish: equal('i18n.locale', 'en'),
-  inSpanish: equal('i18n.locale', 'es'),
-  inFrench: equal('i18n.locale', 'fr'),
+  classNames: ['ilios-header'],
+  tagName: 'header',
   locales: computed('i18n.locales', 'i18n.locale', function() {
     return this.get('i18n.locales').map(locale => {
       return { id: locale, text: this.get('i18n').t('language.select.' + locale) };

app/components/my-profile.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+const { computed, RSVP } = Ember;
+const { Promise } = RSVP;
+
+export default Ember.Component.extend({
+  classNames: ['my-profile'],
+  user: null,
+  roles: computed('user.roles.[]', function(){
+    const user = this.get('user');
+    return new Promise(resolve => {
+      user.get('roles').then(roles => {
+        resolve(roles.mapBy('title'));
+      });
+    })
+  }),
+});

app/components/user-profile.js

@@ -5,9 +5,9 @@ import ValidationErrorDisplay from 'ilios/mixins/validation-error-display';
 import { task } from 'ember-concurrency';
 
 const { computed, Component, inject, RSVP } = Ember;
-const { PromiseObject, PromiseArray } = DS;
+const { PromiseObject } = DS;
 const { service } = inject;
-const { sort } = computed;
+const { sort, reads } = computed;
 
 const Validations = buildValidations({
   firstName: [
@@ -112,24 +112,7 @@ export default Component.extend(ValidationErrorDisplay, Validations, {
     }
   }).readOnly(),
 
-  secondaryCohorts: computed('user.primaryCohort', 'user.cohorts.[]', {
-    get() {
-      const user = this.get('user');
-
-      let promise = user.get('cohorts').then((cohorts) => {
-        return user.get('primaryCohort').then((primaryCohort) => {
-          if (!primaryCohort) {
-            return cohorts;
-          }
-          return cohorts.filter(cohort => {
-            return cohort.get('id') !== primaryCohort.get('id');
-          });
-        });
-      });
-
-      return PromiseArray.create({ promise });
-    }
-  }).readOnly(),
+  secondaryCohorts: reads('user.secondaryCohorts'),
 
   cohortSorting: [
     'programYear.program.school.title:asc',

app/locales/en/translations.js

@@ -462,6 +462,7 @@ export default {
     'saved': 'New User Saved Successfully',
     'username': 'Username',
     'password': 'Password',
+    'myProfile': 'My Profile',
   },
   'language': {
     'select': {

app/locales/es/translations.js

@@ -462,6 +462,7 @@ export default {
     'saved': 'Nuevo Usuario Salvó con Éxito',
     'username': 'Nombre de Usuario',
     'password': 'Contraseña',
+    'myProfile': 'Mi Perfil',
   },
   'language': {
     'select': {

app/locales/fr/translations.js

@@ -462,6 +462,7 @@ export default {
     'saved': 'Nouvel utilisateur enregistré avec succès',
     'username': 'Nom d’utilisateur',
     'password': 'Mot de passe',
+    'myProfile': 'Mon profil',
   },
   'language': {
     'select': {

app/models/user.js

@@ -228,7 +228,16 @@ var User = DS.Model.extend({
       });
 
     });
-  }
+  },
+  secondaryCohorts: computed('primaryCohort', 'cohorts.[]', function(){
+    return new Promise(resolve => {
+      this.get('cohorts').then((cohorts) => {
+        this.get('primaryCohort').then((primaryCohort) => {
+          resolve(cohorts.filter(cohort => cohort !== primaryCohort));
+        });
+      });
+    });
+  })
 });
 
 export default User;

app/router.js

@@ -56,6 +56,7 @@ Router.map(function() {
   this.route('schools');
   this.route('school', { path: 'schools/:school_id'});
   this.route('assign-students', {path: '/admin/assignstudents'});
+  this.route('myprofile');
 });
 
 export default Router;

app/routes/myprofile.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+
+const { service } = Ember.inject;
+
+export default Ember.Route.extend(AuthenticatedRouteMixin, {
+  currentUser: service(),
+  model(){
+    return this.get('currentUser').get('model');
+  }
+});

app/styles/app.scss

@@ -7,7 +7,6 @@
 @import 'components/reset';
 @import 'components/global';
 @import 'components/action-menu';
-@import 'components/header';
 @import 'components/navigation';
 @import 'components/table';
 @import 'components/searchbox';

app/styles/components/_action-menu.scss

@@ -48,21 +48,6 @@ $dropdown-distance-from-menu: $dropdown-padding * 2;
     }
   }
 
-  &.user-menu .button {
-    background-color: transparent;
-    border: 0;
-    border-radius: $base-border-radius;
-    color: $white;
-    font-weight: normal;
-    padding: .5em 2em .5em 1em;
-    vertical-align: middle;
-
-    &:hover {
-      background-color: $white;
-      color: $ilios-orange;
-    }
-  }
-
   .dropdown-menu {
     @include transition (all .2s ease-in-out);
     background-color: $white;

app/styles/mixins.scss

@@ -1 +1,3 @@
 @import 'mixins/ilios-form';
+@import 'mixins/profile';
+@import 'mixins/header';

app/styles/mixins/header.scss

@@ -0,0 +1,84 @@
+@mixin header () {
+  $header-height: 60px;
+
+  background-color: $ilios-orange;
+  border-bottom: 1px solid darken($ilios-orange, 10);
+  height: $header-height;
+  min-width: 250px;
+  text-align: center;
+  vertical-align: bottom;
+  width: 100%;
+  z-index: 100;
+
+  .logo {
+    float: left;
+    max-height: $header-height;
+    padding-left: 1em;
+
+    .image {
+      background-image: url('images/ilios-logo.png');
+      background-repeat: no-repeat;
+      display: block;
+      height: 42px;
+      padding: .8em 0;
+      width: 84px;
+    }
+  }
+
+  h1 {
+    color: $white;
+    display: inline-block;
+    font-size: $base-font-size * .75;
+    margin-top: 2em;
+
+    @include media($medium-screen) {
+      font-size: $base-font-size * 1.5;
+      margin: .5em;
+    }
+  }
+
+  // Elements on the far right
+  .tools {
+    background: transparent;
+    display: block;
+    float: right;
+    padding-left: .5em;
+    padding-right: 1em;
+
+    .user,
+    .locales {
+      color: $ilios-orange;
+      display: inline;
+      float: left;
+      font-size: $base-font-size * .8;
+      font-weight: 800;
+      margin-top: 1.2em;
+      padding: .4em .5em;
+
+      .button {
+        background-color: transparent;
+        border: 0;
+        border-radius: $base-border-radius;
+        color: $white;
+        font-weight: normal;
+        padding: .5em 2em .5em 1em;
+        vertical-align: middle;
+
+        span {
+          display: none;
+
+          @include media($medium-screen) {
+            display: inline;
+          }
+        }
+
+        &:hover {
+          background-color: $white;
+          color: $ilios-orange;
+        }
+
+
+      }
+    }
+  }
+}