Merge pull request #59 from RoundingWell/chore/mvp-fixes-action-coverage

MVP fixes and action sidebar coverage

src/js/apps/patients/sidebar/action-sidebar_app.js

@@ -11,7 +11,6 @@ export default App.extend({
     this.action = action;
 
     this.showView(new LayoutView({
-      model: this.action.clone(),
       action: this.action,
     }));
 
@@ -42,12 +41,9 @@ export default App.extend({
     const isNew = model.isNew();
 
     this.action.saveAll(model.attributes).done(() => {
-      if (isNew) {
-        Radio.trigger('event-router', 'patient:action', this.action.get('_patient'), this.action.id);
-        return;
-      }
+      if (!isNew) return;
 
-      this.restart();
+      Radio.trigger('event-router', 'patient:action', this.action.get('_patient'), this.action.id);
     });
   },
   onDelete() {

src/js/components/droplist/index.js

@@ -75,15 +75,11 @@ export default Component.extend({
     this.toggleState('isActive');
   },
   stateEvents: {
-    'change:isDisabled': 'onChangeState',
+    'change:isDisabled': 'onChangeIsDisabled',
     'change:isActive': 'onChangeIsActive',
     'change:selected': 'onChangeStateSelected',
   },
-  onChangeStateSelected(state, selected) {
-    this.show();
-    this.triggerMethod('change:selected', selected);
-  },
-  onChangeState() {
+  onChangeIsDisabled() {
     this.show();
   },
   onChangeIsActive(state, isActive) {
@@ -97,6 +93,10 @@ export default Component.extend({
 
     this.showPicklist();
   },
+  onChangeStateSelected(state, selected) {
+    this.show();
+    this.triggerMethod('change:selected', selected);
+  },
   showPicklist() {
     const picklist = new Picklist(_.extend({
       lists: this.lists || [{ collection: this.collection }],

src/js/i18n/en-US.yml

@@ -58,7 +58,7 @@ careOptsFrontend:
           groupHeader: Group
           patientHeader: Patient
           title: All Patients
-        tooltip: "<strong>This list includes all patients in your group(s).</strong><br>Note: Your organization may contain patients not displayed here due to your group membership(s)."
+        tooltip: "This list includes all patients in your group(s). Note: Your organization may contain patients not displayed here due to your group membership(s)."
     patient:
       dashboard:
         dashboardViews:
@@ -138,14 +138,13 @@ careOptsFrontend:
             updated_past_three_days {Actions Updated < 3 Days}
             done_last_thirty_days {Done < 30 Days}
           }
-        listTooltipHeading: "Actions in this View match these rules:"
         listTooltips: |
           {title, select,
-            owned_by_me {<li>Actions with you as the Owner.</li><li>States included are<br>Needs Attention, Open, and Pending.</li>}
-            actions_for_my_role {<li>Actions with {role} as the Owner.</li><li>States included are<br>Needs Attention, Open, and Pending.</li>}
-            new_actions {<li>Actions created in the last 24 hours by any clinician in your Group(s).</li><li>States included are<br>Needs Attention, Open, and Pending.</li>}
-            updated_past_three_days {<li>Actions updated in the last 3 days by any clinician in your Group(s).</li><li>States included are<br>Needs Attention, Open, and Pending.</li>}
-            done_last_thirty_days {<li>Actions set to Done by any clinician in your Group(s) in the last 30 days.</li>}
+            owned_by_me {Actions with you as the Owner. States included are Needs Attention, Open, and Pending.}
+            actions_for_my_role {Actions with {role} as the Owner. States included are Needs Attention, Open, and Pending.}
+            new_actions {Actions created in the last 24 hours by any clinician in your Group(s). States included are Needs Attention, Open, and Pending.}
+            updated_past_three_days {Actions updated in the last 3 days by any clinician in your Group(s). States included are Needs Attention, Open, and Pending.}
+            done_last_thirty_days {Actions set to Done by any clinician in your Group(s) in the last 30 days.}
           }
   regions:
     preload:

src/js/views/patients/actions/actions_views.js

@@ -31,9 +31,17 @@ const StateTemplate = hbs`<span class="action--{{ statusClass }}">{{fas statusIc
 const StateComponent = Droplist.extend({
   isCompact: false,
   initialize({ model }) {
+    this.model = model;
     const currentOrg = Radio.request('auth', 'currentOrg');
     this.collection = currentOrg.getStates();
-    this.setState({ selected: this.collection.get(model.get('_state')) });
+    this.listenTo(model, 'change:_state', () => {
+      this.setSelected();
+      this.show();
+    });
+    this.setSelected();
+  },
+  setSelected() {
+    this.setState({ selected: this.collection.get(this.model.get('_state')) }, { silent: true });
   },
   onChangeSelected(selected) {
     this.triggerMethod('change:state', selected);
@@ -90,7 +98,7 @@ const OwnerComponent = Selectlist.extend({
         buttonTemplate: hbs`<button class="button-secondary--compact w-100"{{#if isDisabled}} disabled{{/if}}>{{far "user-circle"}}{{ short }}{{ first_name }} {{ lastInitial }}</button>`,
         templateContext() {
           return {
-            isDisabled: this.getOption('isDisabled'),
+            isDisabled: this.getOption('state').isDisabled,
             lastInitial() {
               return this.last_name && `${ this.last_name[0] }.`;
             },
@@ -99,11 +107,15 @@ const OwnerComponent = Selectlist.extend({
       };
     }
     return {
+      modelEvents: {
+        'change:_role change:_clinician': 'render',
+      },
       className: 'w-100 inl-bl',
       buttonTemplate: hbs`<button class="button-secondary w-100"{{#if isDisabled}} disabled{{/if}}>{{far "user-circle"}}{{ name }}{{ first_name }} {{ last_name }}</button>`,
     };
   },
   initialize({ model }) {
+    this.model = model;
     const currentOrg = Radio.request('auth', 'currentOrg');
     const roles = currentOrg.getRoles();
     const currentUser = Radio.request('auth', 'currentUser');
@@ -125,7 +137,16 @@ const OwnerComponent = Selectlist.extend({
       headingText: intl.patients.actions.actionsViews.ownerComponent.rolesHeadingText,
     });
 
-    this.setState({ selected: model.getOwner() });
+    this.listenTo(model, 'change:_role change:_clinician', (action, id) => {
+      if (!id) return;
+      this.setSelected();
+      this.show();
+    });
+
+    this.setSelected();
+  },
+  setSelected() {
+    this.setState({ selected: this.model.getOwner() }, { silent: true });
   },
   onChangeSelected(selected) {
     this.triggerMethod('change:owner', selected);

src/js/views/patients/patient/dashboard/action-item.hbs

@@ -1,6 +1,6 @@
 <td class="table-list__cell w-40">
-  <span class="patient__action-icon">{{far "file-alt"}}</span>{{#if name}}<span class="u-v-align--middle">{{ name }}</span>
-  {{~ else ~}}<em>{{ @intl.patients.patient.dashboard.dashboardViews.newAction }}</em>{{/if~}}
+  <span class="patient__action-icon">{{far "file-alt"}}</span>{{ name }}
+  {{~#unless name}}<em>{{ @intl.patients.patient.dashboard.dashboardViews.newAction }}</em>{{/unless~}}
 </td>
 <td class="table-list__cell w-60">
   <span class="table-list__meta" data-state-region></span><span class="table-list__meta" data-owner-region></span><span class="table-list__meta" data-due-region></span>

src/js/views/patients/patient/dashboard/dashboard_views.js

@@ -17,7 +17,7 @@ import '../patient.scss';
 const EmptyView = View.extend({
   tagName: 'tr',
   template: hbs`
-    <td class="patient-empty-list">
+    <td class="patient__empty-list">
       <h2>{{ @intl.patients.patient.dataEvents.dataEventsViews.emptyView }}</h2>
     </td>
   `,
@@ -86,7 +86,10 @@ const ItemView = View.extend({
 
 
 const ListView = CollectionView.extend({
-  className: 'table-list',
+  collectionEvents: {
+    'change:_state': 'filter',
+  },
+  className: 'table-list patient__list',
   tagName: 'table',
   childView: ItemView,
   emptyView: EmptyView,
@@ -96,7 +99,7 @@ const ListView = CollectionView.extend({
 });
 
 const LayoutView = View.extend({
-  className: 'flex-region',
+  className: 'flex-region patient__content',
   regions: {
     content: {
       el: '[data-content-region]',

src/js/views/patients/patient/dashboard/layout.hbs

@@ -1,12 +1,12 @@
-<div class="patient-tabs">
-  <span class="patient-tab--selected">
+<div>
+  <span class="patient__tab--selected">
     {{~ @intl.patients.patient.dashboard.dashboardViews.dashboardBtn ~}}
   </span>
-  <button class="patient-tab js-data-events">
+  <button class="patient__tab js-data-events">
     {{~ @intl.patients.patient.dashboard.dashboardViews.dataEventsBtn ~}}
   </button>
 </div>
 <div class="patient__actions">
   <button class="button-primary js-add">{{far "plus-circle"}}{{ @intl.patients.patient.dashboard.dashboardViews.addActionBtn }}</button>
 </div>
-<div class="flex-region" data-content-region></div>
+<div data-content-region></div>

src/js/views/patients/patient/data-events/data-events_views.js

@@ -11,7 +11,7 @@ import '../patient.scss';
 const EmptyView = View.extend({
   tagName: 'tr',
   template: hbs`
-    <td class="patient-empty-list">
+    <td class="patient__empty-list">
       <h2>{{ @intl.patients.patient.dataEvents.dataEventsViews.emptyView }}</h2>
     </td>
   `,
@@ -25,7 +25,7 @@ const ItemView = View.extend({
   className: 'table-list__item',
   tagName: 'tr',
   template: hbs`
-    <td class="table-list__cell w-40"><span class="patient__action-list-icon">{{far "file-alt"}}</span><span class="u-v-align--middle">{{ name }}</span></td>
+    <td class="table-list__cell w-40"><span class="patient__action-icon">{{far "file-alt"}}</span>{{ name }}</td>
     <td class="table-list__cell w-60">
       <span class="table-list__meta" data-state-region></span><span class="table-list__meta" data-owner-region></span><span class="table-list__meta" data-due-region></span>
       <span class="patient__action-ts">{{formatMoment updated_at "TIME_OR_DAY"}}</span>
@@ -72,7 +72,10 @@ const ItemView = View.extend({
 });
 
 const ListView = CollectionView.extend({
-  className: 'table-list',
+  collectionEvents: {
+    'change:_state': 'filter',
+  },
+  className: 'table-list patient__list',
   tagName: 'table',
   childView: ItemView,
   emptyView: EmptyView,
@@ -82,22 +85,24 @@ const ListView = CollectionView.extend({
 });
 
 const LayoutView = View.extend({
+  className: 'flex-region patient__content',
   regions: {
     content: {
       el: '[data-content-region]',
       regionClass: PreloadRegion,
+      replaceElement: true,
     },
   },
   template: hbs`
-    <div class="patient-tabs">
-      <button class="patient-tab js-dashboard">
+    <div>
+      <button class="patient__tab js-dashboard">
         {{~ @intl.patients.patient.dataEvents.dataEventsViews.dashboardBtn ~}}
       </button>
-      <span class="patient-tab--selected">
+      <span class="patient__tab--selected">
         {{~ @intl.patients.patient.dataEvents.dataEventsViews.dataEventsBtn ~}}
       </span>
     </div>
-    <div class="flex-region" data-content-region></div>
+    <div data-content-region></div>
   `,
   triggers: {
     'click .js-dashboard': 'click:dashboard',

src/js/views/patients/patient/patient.scss

@@ -1,4 +1,4 @@
-.patient-frame {
+.patient__frame {
   display: flex;
   overflow-x: hidden;
   overflow-y: auto;
@@ -18,13 +18,17 @@
   flex: initial;
   max-width: 400px;
   min-height: 0;
-  min-width: 360px;
+  min-width: 256px;
 
   &:empty {
     display: none;
   }
 }
 
+.patient__content {
+  min-width: 520px;
+}
+
 .patient__context-trail {
   background: $white;
   color: $black-20;
@@ -52,19 +56,15 @@
   }
 }
 
-.patient-tabs {
-  border-bottom: solid 1px $black-90;
-}
-
-.patient-tab,
-.patient-tab--selected {
+.patient__tab,
+.patient__tab--selected {
   font-size: 24px;
   line-height: 1;
   margin-right: 4px;
   padding: 16px;
 }
 
-.patient-tab--selected {
+.patient__tab--selected {
   color: color(blue);
   position: relative;
 
@@ -81,7 +81,7 @@
   }
 }
 
-.patient-tab {
+.patient__tab {
   color: $black-60;
 
   &:hover {
@@ -90,11 +90,15 @@
 }
 
 .patient__actions {
-  border-bottom: solid 1px $black-90;
+  border-top: solid 1px $black-90;
   padding: 16px;
 }
 
-.patient-empty-list {
+.patient__list {
+  border-top: solid 1px $black-90;
+}
+
+.patient__empty-list {
   border-bottom: 1px solid $black-90;
   color: $black-80;
   font-size: 16px;
@@ -111,9 +115,15 @@
   vertical-align: middle;
 }
 
-.patient__action-icon .icon {
-  color: color(blue);
-  font-size: 20px;
-  margin-right: 16px;
-  vertical-align: middle;
+.patient__action-icon {
+  position: relative;
+  top: -1px;
+  vertical-align: 1px;
+
+  .icon {
+    color: color(blue);
+    font-size: 20px;
+    margin-right: 16px;
+    vertical-align: middle;
+  }
 }

src/js/views/patients/patient/patient_views.js

@@ -13,8 +13,8 @@ const ContextTrailView = View.extend({
       <a class="js-back patient__context-link">
         {{fas "chevron-left"}}{{ @intl.patients.patient.patientViews.contextBackBtn }}
       </a>
-    {{/if}}
-    {{fas "chevron-right"}}{{ first_name }} {{ last_name }}
+      {{fas "chevron-right"}}
+    {{/if}}{{ first_name }} {{ last_name }}
   `,
   triggers: {
     'click .js-back': 'click:back',
@@ -30,11 +30,11 @@ const ContextTrailView = View.extend({
 });
 
 const LayoutView = View.extend({
-  className: 'patient-frame',
+  className: 'patient__frame',
   template: hbs`
     <div class="patient__layout">
         <div data-context-trail-region></div>
-        <div class="flex-region" data-content-region></div>
+        <div data-content-region></div>
     </div>
     <div class="patient__sidebar" data-sidebar-region></div>
   `,
@@ -47,6 +47,7 @@ const LayoutView = View.extend({
     content: {
       el: '[data-content-region]',
       regionClass: PreloadRegion,
+      replaceElement: true,
     },
   },
   onRender() {

src/js/views/patients/patient/sidebar/patient-sidebar.scss

@@ -1,5 +1,6 @@
 .patient-sidebar {
   padding: 40px 32px 0;
+  width: 400px;
 }
 
 .patient-sidebar__name {