Merge pull request #20 from Duke-GCB/11-cleanup-deliveries

Presentation improvements for delivery browsing

app/components/delivery-detail.js

@@ -1,23 +1,8 @@
 import Ember from 'ember';
 
-function toUserNameStr(users) {
-  var userNames = '';
-  var prefix = '';
-  users.forEach(function (user) {
-    const username = user.get('fullName');
-    userNames += prefix + username;
-    prefix = ', ';
-  });
-  return userNames;
-}
-
 const DeliveryDetail = Ember.Component.extend({
   classNames: ['delivery-detail'],
   editUserMessage: false, /* minimal field display allowing **/
-  toUserNames: Ember.computed('transfer.toUsers.[]', function () {
-    const users = this.get('transfer.toUsers');
-    return toUserNameStr(users);
-  }),
   delivery: Ember.computed.alias('transfer.delivery')
 });
 

app/components/email-textarea.js → app/components/delivery-email.js

@@ -1,16 +1,17 @@
 import Ember from 'ember';
 import {formatEmailText} from 'datadelivery-ui/utils/email-formatter';
 
-export default Ember.Component.extend({
-  tagName: 'textarea',
-  classNames: ['form-control'],
-  attributeBindings: ['readonly', 'rows'],
-  readonly: true,
+const DeliveryEmail = Ember.Component.extend({
+  classNames: ['well', 'well-sm', 'delivery-email'],
   value: null, //value to be displayed in the textarea
-  rows: 2, // number of rows to show
   formattedValue: Ember.computed('value', function () {
     const value = this.get('value');
     return formatEmailText(value);
   })
 });
 
+DeliveryEmail.reopenClass({
+  positionalParams: ['value']
+});
+
+export default DeliveryEmail;

app/components/delivery-state.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+});

app/components/delivery-table.js

@@ -1,17 +1,52 @@
 import Ember from 'ember';
 
+// Transfer status filter options from
+// https://github.com/Duke-Translational-Bioinformatics/duke-data-service/blob/57258f5b44d31ca7f2cc630a14235aff70878f8f/app/models/project_transfer.rb#L24
+
+const statusOptions = ['Pending', 'Rejected', 'Accepted', 'Canceled'];
+const statusFilterFunction = function(status, selected) {
+  return status.capitalize() == selected;
+};
+
 const DeliveryTable = Ember.Component.extend({
+  currentDukeDsUser: null,
   tagName: 'div',
-  columns: [
+  outgoingTransfers: Ember.computed('transfers.[]', 'currentDukeDsUser', function() {
+    const currentDukeDsUserId = this.get('currentDukeDsUser.id');
+    return this.get('transfers').filterBy('fromUser.id', currentDukeDsUserId);
+  }),
+  incomingTransfers: Ember.computed('transfers.[]', 'currentDukeDsUser', function() {
+    const currentDukeDsUserId = this.get('currentDukeDsUser.id');
+    return this.get('transfers').filter(function(transfer) {
+      return transfer.get('toUsers').mapBy('id').includes(currentDukeDsUserId);
+    });
+  }),
+  outgoingColumns: [
     { propertyName: "project.name", title: "Project Name", routeName: "deliveries.show"},
-    { propertyName: "fromUser.fullName", title: "From"},
     { propertyName: "toUsersNames", title: "To"},
-    { propertyName: "status", title: "State"}
+    { propertyName: "status",
+      title: "State",
+      component: 'delivery-state',
+      filterWithSelect: true,
+      predefinedFilterOptions: statusOptions,
+      filterFunction: statusFilterFunction
+    }
+  ],
+  incomingColumns: [
+    { propertyName: "project.name", title: "Project Name", routeName: "deliveries.show"},
+    { propertyName: "fromUser.fullName", title: "From"},
+    { propertyName: "status",
+      title: "State",
+      component: 'delivery-state',
+      filterWithSelect: true,
+      predefinedFilterOptions: statusOptions,
+      filterFunction: statusFilterFunction
+    }
   ]
 });
 
 DeliveryTable.reopenClass({
-  positionalParams: ['transfers']
+  positionalParams: ['transfers', 'currentDukeDsUser']
 });
 
 export default DeliveryTable;

app/components/detail-label-value.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: '',
+});

app/components/user-message-textarea.js

@@ -1,7 +1,5 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  classNames: ['row'],
   value: null,
-  readonly: false
 });

app/controllers/application.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  session: Ember.inject.service('session'),
+  dukeDsUser: Ember.inject.service('duke-ds-user'),
+  currentDukeDsUser: null,
+  authenticatedDidChange: Ember.on('init', Ember.observer('session.isAuthenticated', function () {
+      if (this.get('session.isAuthenticated')) {
+        this.get('dukeDsUser').currentDukeDsUser().then(currentDukeDsUser => {
+          this.set('currentDukeDsUser', currentDukeDsUser);
+        });
+      } else {
+        this.set('currentDukeDsUser', null);
+      }
+    })
+  )
+});

app/controllers/deliveries/index.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  application: Ember.inject.controller(),
+  currentDukeDsUser: Ember.computed.alias('application.currentDukeDsUser')
+});

app/controllers/deliveries/show/can-resend-controller.js

@@ -4,9 +4,8 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  session: Ember.inject.service('session'),
-  dukeDsUser: Ember.inject.service('duke-ds-user'),
-  currentDukeDsUser: null,
+  application: Ember.inject.controller(),
+  currentDukeDsUser: Ember.computed.alias('application.currentDukeDsUser'),
   canResend: Ember.computed('model.canResend', 'model.fromUser.id', 'currentDukeDsUser.id', function () {
     const modelCanResend = this.get('model.canResend');
     const fromUserId = this.get('model.fromUser.id');
@@ -15,16 +14,5 @@ export default Ember.Controller.extend({
       return false;
     }
     return modelCanResend && fromUserId == currentDukeDsUserId;
-  }),
-  authenticatedDidChange: Ember.on('init',
-    Ember.observer('session.isAuthenticated', function() {
-      if (this.get('session.isAuthenticated')) {
-        this.get('dukeDsUser').currentDukeDsUser().then(currentDukeDsUser => {
-          this.set('currentDukeDsUser', currentDukeDsUser);
-        });
-      } else {
-        this.set('currentDukeDsUser', null);
-      }
-    })
-  )
+  })
 });

app/helpers/add-line-breaks.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export function addLineBreaks(params) {
+  const text = params[0];
+  const replaced = text.replace(/\n/g, '<br>');
+  return Ember.String.htmlSafe(replaced);
+}
+
+export default Ember.Helper.helper(addLineBreaks);

app/helpers/format-delivery-state.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export function formatDeliveryState(params) {
+  if(params.length > 0) {
+    return params[0].capitalize();
+  } else {
+    return '';
+  }
+}
+
+export default Ember.Helper.helper(formatDeliveryState);

app/templates/components/delivery-breadcrumbs.hbs

@@ -1,4 +1,4 @@
-{{breadcrumb-item label="All Deliveries"
+{{breadcrumb-item label="Data Delivery"
                   routeName="deliveries.index"
                   selectedRouteName=selectedRouteName}}
 {{#if isDeliverySelected}}

app/templates/components/delivery-detail.hbs

@@ -1,19 +1,17 @@
-{{row-label-value label="From" value=transfer.fromUser.fullName}}
-{{row-label-value label="To" value=toUserNames}}
-{{#unless brief}}
-  {{row-label-value label="Status" value=transfer.status}}
-  {{#if delivery.declineReason}}
-    {{row-label-value label="Decline Reason" value=delivery.declineReason}}
-  {{/if}}
-  {{#if delivery.performedBy}}
-    {{row-label-value label="Performed By" value=delivery.performedBy}}
-  {{/if}}
-  {{user-message-textarea value=delivery.userMessage readonly=true}}
-  <div class="row">
-    <div class="col-md-12"><label>Delivery Email</label></div>
-    <div class="col-md-10 small-left-margin">
-      {{email-textarea rows="8" value=delivery.deliveryEmailText }}
-    </div>
-  </div>
-{{/unless}}
-{{yield}}
+<dl class="dl-horizontal">
+  {{#detail-label-value label="From"}}{{transfer.fromUser.fullName}}{{/detail-label-value}}
+  {{#detail-label-value label="To"}}{{transfer.toUsersNames}}{{/detail-label-value}}
+  {{#unless brief}}
+    {{#detail-label-value label="Status"}}{{format-delivery-state transfer.status}}{{/detail-label-value}}
+    {{#if delivery.declineReason}}
+      {{#detail-label-value label="Decline Reason"}}{{delivery.declineReason}}{{/detail-label-value}}
+    {{/if}}
+    {{#if delivery.performedBy}}
+      {{#detail-label-value label="Performed By"}}{{delivery.performedBy}}{{/detail-label-value}}
+    {{/if}}
+    {{#detail-label-value label="Delivery Email"}}
+      {{delivery-email delivery.deliveryEmailText}}
+    {{/detail-label-value}}
+  {{/unless}}
+  {{yield}}
+</dl>

app/templates/components/delivery-email.hbs

@@ -0,0 +1 @@
+{{add-line-breaks formattedValue}}

app/templates/components/delivery-state.hbs

@@ -0,0 +1 @@
+{{ format-delivery-state record.status }}

app/templates/components/delivery-table.hbs

@@ -1,6 +1,18 @@
+<h3>Outgoing</h3>
 {{models-table
-  data=transfers
-  columns=columns
+  data=outgoingTransfers
+  columns=outgoingColumns
+  multipleColumnsSorting=false
+  showColumnsDropdown=false
+  showGlobalFilter=false
+  showPageSize=false
+  pageSize=20
+}}
+
+<h3>Incoming</h3>
+{{models-table
+  data=incomingTransfers
+  columns=incomingColumns
   multipleColumnsSorting=false
   showColumnsDropdown=false
   showGlobalFilter=false

app/templates/components/detail-label-value.hbs

@@ -0,0 +1,2 @@
+<dt class="detail-label">{{label}}</dt>
+<dd class="detail-value">{{yield}}</dd>

app/templates/components/user-message-textarea.hbs

@@ -1,5 +1 @@
-<div class="col-md-12 col-sm-12"><label>User Message</label></div>
-<div class="col-md-10 small-left-margin">
-  {{textarea value=value readonly=readonly rows="4" class="form-control"}}
-</div>
-{{yield}}
+{{textarea value=value rows="4" class="form-control"}}

app/templates/deliveries/index.hbs

@@ -1,4 +1,5 @@
 {{delivery-breadcrumbs selectedRouteName="deliveries.index"}}
-<h1>Deliveries</h1>
-{{delivery-table model}}
+<h2>All Deliveries</h2>
+
+{{delivery-table model currentDukeDsUser}}
 

app/templates/deliveries/show/resend.hbs

@@ -1,11 +1,23 @@
 {{delivery-breadcrumbs selectedRouteName="deliveries.show.resend" transfer=model}}
+<h3>Re-send Delivery Email</h3>
+  <p class="body">
+    Click the <strong>Send Email</strong> button to re-send the delivery email to the recipient.
+  </p>
+<p class="body">
+    The sent email will be generated from a template and include a link for the recipient to accept or decline the delivery.
+    If you wish to add or edit a custom message (e.g. details about this specific delivery), please enter those notes in the
+    <strong>User Message</strong> area.
+</p>
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">Project: {{model.project.name}} </h3>
   </div>
   <div class="panel-body">
-    {{delivery-detail model brief=true}}
-    {{user-message-textarea value=model.delivery.userMessage readonly=false}}
+    {{#delivery-detail model brief=true}}
+      {{#detail-label-value label="User Message"}}
+        {{user-message-textarea value=model.delivery.userMessage readonly=false}}
+      {{/detail-label-value}}
+    {{/delivery-detail}}
   </div>
   {{#if canResend}}
     <div class="panel-footer">

app/templates/login.hbs

@@ -1,6 +1,6 @@
 <div class="jumbotron text-center">
-  <h2>D4S2: Data Delivery Manager</h2>
-  <p>D4S2 is a service of the <a target="_blank" href="https://genome.duke.edu/cores/computing">Computational Solutions Shared Resources</a> at the <a target="_blank" href="https://genome.duke.edu">Duke Center for Genomic and Computational Biology</a></p>
+  <h2>Data Delivery</h2>
+  <p>Data Delivery is a service of the <a target="_blank" href="https://genome.duke.edu/cores/computing">Computational Solutions Shared Resources</a> at the <a target="_blank" href="https://genome.duke.edu">Duke Center for Genomic and Computational Biology</a></p>
 
   {{#if isDevelopmentMode}}
     <div class="row">

app/utils/email-formatter.js

@@ -5,9 +5,9 @@ function getEmailHeaderAndBody(value) {
    * Separates body and header in email value (https://tools.ietf.org/html/rfc7230#section-3)
    *returns a object containing the body as str and header as a dictionary
    */
-  var header = {};
-  var body = '';
-  var inBody = false;
+  let header = {};
+  let body = '';
+  let inBody = false;
   if (value) {
     value.split('\n').forEach(function (line) {
       if (!inBody && line.trim() == '') { // first CRLF by itself
@@ -38,7 +38,7 @@ function getOptionalHeaderLine(headerDict, name) {
   /**
    * Creates a header line using headerDict using name or '' if not in dict
    */
-  var value = headerDict[name];
+  const value = headerDict[name];
   if (value) {
     return name + HEADER_FIELD_SEPERATOR + value + '\n';
   }
@@ -51,8 +51,8 @@ function formatEmailText(value) {
    * Strips header from email text with the exception of Subject, From, To and Date
    */
   const headerFields = ['Subject', 'Date'];
-  var headerAndBody = getEmailHeaderAndBody(value);
-  var result = '';
+  const headerAndBody = getEmailHeaderAndBody(value);
+  let result = '';
   headerFields.forEach(function (headerFieldName) {
     result += getOptionalHeaderLine(headerAndBody.header, headerFieldName);
   });