Dashboard page v1

Reviews dashboard, getting closer...

Update reviews permission names

Fix colors

i18n

Fix travis

Dashboard cleanup

.ember-cli

@@ -1,3 +1,4 @@
 {
-  "port": 4400
+  "port": 4400,
+  "live-reload-port": 41954
 }

.travis.yml

@@ -5,6 +5,9 @@ dist: trusty
 addons:
   chrome: stable
 
+node_js:
+    6
+
 env:
   global:
   - SUPPRESS_NO_CONFIG_WARNING=true

app/components/dashboard-sidebar/component.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    classNames: ['dashboard-sidebar'],
+
+    iconMap: {
+        preprint: 'fa-graduation-cap',
+        paper: 'fa-file-text-o',
+        thesis: 'fa-book',
+    },
+});

app/components/dashboard-sidebar/template.hbs

@@ -0,0 +1,23 @@
+<div class="sidebar-header">
+    {{t 'dashboard.sidebar.providers'}}
+</div>
+<div class="sidebar-body">
+    <ul class="fa-ul">
+        {{#each providers as |provider|}}
+            <li class="{{if provider.reviewsWorkflow "moderation-enabled" "moderation-disabled"}}">
+                <span class="provider-name">
+                    <i class="fa-li fa {{get iconMap provider.preprintWord}}"></i>
+                    {{provider.name}}
+                </span>
+                <ul class="provider-links">
+                    {{#if provider.reviewsWorkflow}}
+                        <li>{{#link-to 'provider.moderation' provider}}{{t 'dashboard.sidebar.moderation'}}{{/link-to}}</li>
+                        <li>{{#link-to 'provider.settings' provider}}{{t 'dashboard.sidebar.settings'}}{{/link-to}}</li>
+                    {{else}}
+                        <li>{{#link-to 'provider.setup' provider}}{{t 'dashboard.sidebar.set_up'}}{{/link-to}}</li>
+                    {{/if}}
+                </ul>
+            </li>
+        {{/each}}
+    </ul>
+</div>

app/components/moderation-base/component.js

@@ -32,7 +32,7 @@ export default Ember.Component.extend({
                 name: crumb
             }
         });
-        return [{path: 'dashboard', name: 'Reviews Dashboard'}].concat(breadedCrumbs)
+        return [{path: 'index', name: 'Reviews Dashboard'}].concat(breadedCrumbs)
     }),
     actions: {
         toggleTab: function () {

app/components/review-log-feed-entry/component.js

@@ -0,0 +1,58 @@
+import Ember from 'ember';
+
+const SUBMIT = 'submit';
+const ACCEPT = 'accept';
+const REJECT = 'reject';
+const EDIT_COMMENT = 'edit_comment';
+
+const ICONS = Object.freeze({
+    [SUBMIT]: 'fa-hourglass-o',
+    [ACCEPT]: 'fa-check-circle-o',
+    [REJECT]: 'fa-times-circle-o',
+    [EDIT_COMMENT]: 'fa-comment-o',
+});
+
+const CLASS_NAMES = Object.freeze({
+    [SUBMIT]: 'submit-icon',
+    [ACCEPT]: 'accept-icon',
+    [REJECT]: 'reject-icon',
+    [EDIT_COMMENT]: 'edit-comment-icon',
+});
+
+/**
+ * Display a single review log on the dashboard feed
+ *
+ * Sample usage:
+ * ```handlebars
+ * {{review-log-feed-entry log=log}}
+ * ```
+ * @class review-log-feed-entry
+ */
+export default Ember.Component.extend({
+    i18n: Ember.inject.service(),
+
+    classNames: ['review-log-feed-entry'],
+
+    click(event) {
+        if (!event.originalEvent.target.href) {
+            this.get('toDetail')(this.get('log.reviewable'));
+            return true;
+        }
+    },
+
+    iconClass: Ember.computed('log.action', function() {
+        return CLASS_NAMES[this.get('log.action')];
+    }),
+
+    icon: Ember.computed('log.action', function() {
+        return ICONS[this.get('log.action')];
+    }),
+
+    messageKey: Ember.computed('log.action', function() {
+        return `dashboard.log_message.${this.get('log.action')}`;
+    }),
+
+    documentType: Ember.computed('log.provider.preprintWord', function() {
+        return this.get('i18n').t(`documentType.${this.get('log.provider.preprintWord')}.singular`);
+    }),
+});

app/components/review-log-feed-entry/template.hbs

@@ -0,0 +1,19 @@
+<div class="entry-body">
+    <div class="icon {{iconClass}}">
+        <i class="fa {{icon}}"></i>
+    </div>
+    <div class="log-body">
+        <div class="log-date">
+            {{moment-format log.dateCreated 'MMMM D, Y'}}
+        </div>
+        <div class="log-heading">
+            <a href={{log.creator.links.html}}>{{log.creator.fullName}}</a>
+            {{t messageKey provider=log.provider.name document=documentType}}
+        </div>
+        <div class="log-detail">
+            {{#link-to 'provider.preprint_detail' log.provider log.reviewable}}
+                {{log.reviewable.title}}
+            {{/link-to}}
+        </div>
+    </div>
+</div>

app/components/review-log-feed/component.js

@@ -0,0 +1,58 @@
+import Ember from 'ember';
+import { translationMacro as t } from 'ember-i18n';
+
+/**
+ * A feed of recent reviews events for all providers the user has access to
+ *
+ * Sample usage:
+ * ```handlebars
+ * {{review-log-feed}}
+ * ```
+ * @class review-log-feed
+ */
+export default Ember.Component.extend({
+    store: Ember.inject.service(),
+    toast: Ember.inject.service(),
+
+    classNames: ['review-log-feed'],
+
+    errorMessage: t('dashboard.error_loading'),
+
+    moreLogs: Ember.computed('totalPages', 'page', function() {
+        return this.get('page') < this.get('totalPages');
+    }),
+
+    init() {
+        this._super(...arguments);
+        this.logs = [];
+        this.page = 1;
+        this.loadPage();
+    },
+
+    loadPage() {
+        const page = this.get('page');
+        this.set('loadingPage', page);
+        this.get('store').query('review-log', {page, embed: 'reviewable'}).then((response) => {
+            if (this.get('loadingPage') === page) {
+                this.setProperties({
+                    logs: this.get('logs').concat(response.toArray()),
+                    totalPages: response.get('meta.total'),
+                    loadingPage: null,
+                });
+            }
+        }, () => {
+            // Error
+            this.set('loadingPage', null);
+            this.get('toast').error(this.get('errorMessage'));
+        });
+    },
+
+    actions: {
+        nextPage() {
+            if (!this.get('loadingPage')) {
+                this.incrementProperty('page');
+                this.loadPage();
+            }
+        },
+    }
+});

app/components/review-log-feed/template.hbs

@@ -0,0 +1,12 @@
+{{#each logs key='id' as |log|}}
+    {{review-log-feed-entry log=log toDetail=toDetail}}
+{{/each}}
+{{#if loadingPage}}
+    <div class='loading'>
+        <i class='fa fa-spinner fa-pulse fa-3x' aria-hidden='true'></i>
+    </div>
+{{else if moreLogs}}
+    <div class='more-logs'>
+        <a role='button' {{action 'nextPage'}}>{{t 'dashboard.see_more'}}</a>
+    </div>
+{{/if}}

app/controllers/index.js

@@ -4,9 +4,14 @@ export default Ember.Controller.extend({
     session: Ember.inject.service(),
     currentUser: Ember.inject.service(),
 
+    showDashboard: Ember.computed('model.[]', function() {
+        const providers = this.get('model');
+        return providers.any((p) => p.get('reviewsWorkflow'));
+    }),
+
     actions: {
-        setupProvider(provider) {
-            this.transitionToRoute('preprints.provider.setup', provider);
+        transitionToDetail(reviewable) {
+            this.transitionToRoute('provider.preprint_detail', [reviewable.get('provider'), reviewable]);
         }
-    }
+    },
 });

app/locales/en/translations.js

@@ -107,5 +107,22 @@ export default {
                 }
             }
         }
-    }
+    },
+    dashboard: {
+        title: `Reviews Dashboard`,
+        log_message: {
+            submit: `submitted a {{document}} to {{provider}}`,
+            accept: `accepted a {{document}} in {{provider}}`,
+            reject: `rejected a {{document}} from {{provider}}`,
+            edit_comment: `edited the comment for a {{document}} in {{provider}}`,
+        },
+        see_more: `See more`,
+        error_loading: `Error fetching more events`,
+        sidebar: {
+            providers: `Providers`,
+            moderation: `Moderation`,
+            settings: `Settings`,
+            set_up: `Set up moderation`,
+        },
+    },
 };

app/router.js

@@ -12,10 +12,10 @@ Router.map(function() {
             this.route('setup');
             this.route('moderation');
             this.route('settings');
+            this.route('preprint_detail', {path:':preprint_id'}); // TODO replace with actual route when merging
         });
     });
 
-    this.route('dashboard');
     this.route('page-not-found');
 });
 

app/routes/index.js

@@ -1,15 +1,14 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
+    currentUser: Ember.inject.service(),
     session: Ember.inject.service(),
+    store: Ember.inject.service(),
 
     model() {
         if (!this.get('session.isAuthenticated')) return [];
         return this.get('store').query('preprint-provider', {
-            filter: {
-                reviews_workflow: 'None',
-                permissions: 'set_up_moderation'
-            }
-        });
+            'filter[permissions]': 'view_review_logs,set_up_moderation'
+        }).catch(() => []); // On any error, assume no permissions to anything.
     }
 });

app/styles/_variables.scss

@@ -15,3 +15,16 @@ $color-bg: #FCFCFC;
 $color-border: #DDD;
 $color-border-dark: #E5E5E5;
 $color-panel-bg: #EEF2F3;
+$color-action-submit: #CABC14;
+$color-action-accept: #5CB85C;
+$color-action-reject: #D9534F;
+$color-action-edit-comment: #337ab7;
+
+$color-text-black: #333333;
+$color-text-dark-grey: #555555;
+$color-text-light-grey: #777777;
+
+$color-bg-light-grey: #EFEFEF;
+$color-bg-cool-grey: #F3F5F7;
+
+$color-border-light-grey: #D9D9D9;

app/styles/app.scss

@@ -17,3 +17,7 @@
 
 // Import all styles from pod style components
 @import 'pod-styles';
+
+body {
+    font-family: 'Helvetica Neue', 'Helvetica', sans-serif !important;
+}