Merge pull request #104 from RoundingWell/feature/add-program-errors

Add program errors

src/js/anim/index.js

@@ -0,0 +1,14 @@
+import anime from 'animejs';
+
+function animSidebar(targets) {
+  return anime({
+    targets,
+    translateX: [{ value: 20, duration: 0 }, { value: 0, duration: 200 }],
+    opacity: [{ value: 0, duration: 0 }, { value: 1, duration: 300 }],
+    easing: 'easeInOutQuad',
+  });
+}
+
+export {
+  animSidebar,
+};

src/js/apps/admin/programs/sidebar/program-sidebar_app.js → src/js/apps/admin/sidebar/program-sidebar_app.js

@@ -22,10 +22,14 @@ export default App.extend({
       .then(() => {
         Radio.request('sidebar', 'close');
       }, ({ responseJSON }) => {
-        // TODO: display errors in form
-        // const errors = this.program.parseErrors(responseJSON);
+        const errors = this.program.parseErrors(responseJSON);
+        this.getView().showErrors(errors);
       });
   },
+  onDelete() {
+    this.program.destroy();
+    this.stop();
+  },
   onStop() {
     if (this.program && this.program.isNew()) this.program.destroy();
 

src/js/base/model.js

@@ -28,6 +28,17 @@ export default Backbone.Model.extend(_.extend({
 
     return this.parseModel(response.data);
   },
+  parseErrors({ errors }) {
+    if (!errors) return;
+
+    const attrPointer = '/data/attributes/';
+
+    return _.reduce(errors, (parsedErrors, { source, detail }) => {
+      const key = String(source.pointer).slice(attrPointer.length);
+      parsedErrors[key] = detail;
+      return parsedErrors;
+    }, []);
+  },
   removeFEOnly(attrs) {
     // Removes id and frontend fields for POST/PATCHes
     return _.pick(attrs, function(value, key) {

src/js/i18n/en-US.yml

@@ -1,5 +1,44 @@
 ---
 careOptsFrontend:
+  admin:
+    list:
+      programsAllViews:
+        addProgramBtn: Program
+        emptyView: No Programs
+        itemView:
+          published: |
+            {published, select,
+              true {On}
+              false {Off}
+            }
+        layoutView:
+          title: Programs
+          programHeader: Program
+          stateHeader: Program State
+          updatedHeader: Last Updated
+    program:
+      emptyView: No Components
+      workflows: Workflows
+      addActionBtn: Action
+    sidebar:
+      disabledSaveView:
+        saveBtn: Save
+      layoutView:
+        menuOptions:
+          headingText: Program Menu
+          delete: Delete Program
+      programDetailsTemplate:
+        placeholder: Add Details
+      programNameTemplate:
+        placeholder: New Program
+      programSidebarTemplate:
+        headingText: Program
+      programSidebarViews:
+        disabledSaveView:
+          saveBtn: Save
+        saveView:
+          cancelBtn: Cancel
+          saveBtn: Save
   components:
     datepicker:
       clear: Clear
@@ -164,39 +203,6 @@ careOptsFrontend:
             updated_past_three_days {Actions updated in the last 3 days by any clinician in your Group(s). States included are To Do and In Progress.}
             done_last_thirty_days {Actions set to Done by any clinician in your Group(s) in the last 30 days.}
           }
-  programs:
-    list:
-      programsAllViews:
-        addProgramBtn: Program
-        emptyView: No Programs
-        itemView:
-          off: Off
-          on: On
-        layoutView:
-          title: Programs
-    program:
-      emptyView: No Components
-      workflows: Workflows
-      addActionBtn: Action
-    sidebar:
-      disabledSaveView:
-        saveBtn: Save
-      layoutView:
-        menuOptions:
-          headingText: Program Menu
-          delete: Delete Program
-      programDetailsTemplate:
-        placeholder: Add Details
-      programNameTemplate:
-        placeholder: New Program
-      programSidebarTemplate:
-        headingText: Program
-      programSidebarViews:
-        disabledSaveView:
-          saveBtn: Save
-        saveView:
-          cancelBtn: Cancel
-          saveBtn: Save
   regions:
     preload:
       loading: Loading...

src/js/services/sidebar.js

@@ -3,7 +3,7 @@ import _ from 'underscore';
 import App from 'js/base/app';
 
 import ActionSidebarApp from 'js/apps/patients/sidebar/action-sidebar_app';
-import ProgramSidebarApp from 'js/apps/admin/programs/sidebar/program-sidebar_app';
+import ProgramSidebarApp from 'js/apps/admin/sidebar/program-sidebar_app';
 
 export default App.extend({
   channelName: 'sidebar',

src/js/views/admin/list/programs-all_views.js

@@ -14,7 +14,7 @@ const EmptyView = View.extend({
   tagName: 'tr',
   template: hbs`
     <td class="table-empty-list">
-      <h2>{{ @intl.programs.list.programsAllViews.emptyView }}</h2>
+      <h2>{{ @intl.admin.list.programsAllViews.emptyView }}</h2>
     </td>
   `,
 });
@@ -24,11 +24,11 @@ const ItemView = View.extend({
   tagName: 'tr',
   template: hbs`
     <td class="table-list__cell w-60">{{ name }}</td>
-    <td class="table-list__cell w-20 program--published">
-    {{#if published}}<span class="program--on">{{fas "toggle-on"}}<span class="program--words">{{ @intl.programs.list.programsAllViews.itemView.on }}</span></span>
-    {{else}}{{far "toggle-off"}}<span class="program--words">{{ @intl.programs.list.programsAllViews.itemView.off }}</span>{{/if}}
+    <td class="table-list__cell w-20 programs-list__published{{#if published}} is-published{{/if}}">
+      {{#if published}}{{fas "toggle-on"}}{{else}}{{far "toggle-off"}}{{/if}}
+      {{formatMessage (intlGet "admin.list.programsAllViews.itemView.published") published=published}}
     </td>
-    <td class="table-list__cell w-20">{{formatMoment updated_at "TIME_OR_DAY"}}</td>
+    <td class="table-list__cell w-20 programs-list__updated-ts">{{formatMoment updated_at "TIME_OR_DAY"}}</td>
   `,
   triggers: {
     'click': 'click',
@@ -42,12 +42,19 @@ const LayoutView = View.extend({
   className: 'flex-region',
   template: hbs`
     <div class="list-page__header">
-      <div class="list-page__title">{{ @intl.programs.list.programsAllViews.layoutView.title }}</div>
-      <div class="program__add">
-        <button class="button-primary js-add">{{far "plus-circle"}}{{ @intl.programs.list.programsAllViews.addProgramBtn }}</button>
+      <div class="list-page__title">{{ @intl.admin.list.programsAllViews.layoutView.title }}</div>
+      <div class="u-margin--b-16">
+        <button class="button-primary js-add">{{far "plus-circle"}}{{ @intl.admin.list.programsAllViews.addProgramBtn }}</button>
       </div>
     </div>
-    <div class="flex-region list-page__list" data-list-region></div>
+    <div class="flex-region list-page__list">
+      <table><tr>
+        <td class="table-list__header w-60">{{ @intl.admin.list.programsAllViews.layoutView.programHeader }}</td>
+        <td class="table-list__header w-20">{{ @intl.admin.list.programsAllViews.layoutView.stateHeader }}</td>
+        <td class="table-list__header w-20">{{ @intl.admin.list.programsAllViews.layoutView.updatedHeader }}</td>
+      </tr></table>
+      <div data-list-region></div>
+    </div>
   `,
   regions: {
     list: {

src/js/views/admin/list/programs-list.scss

@@ -1,12 +1,16 @@
-.program--on {
-  color: color(green);
-}
+.programs-list__published {
+  color: $black;
+  font-weight: 600;
+
+  &.is-published {
+    color: color(green);
+  }
 
-.program--words {
-  margin-left: 8px;
+  .icon {
+    margin-right: 4px;
+  }
 }
 
-.program__add {
-  border-bottom: solid 1px $black-90;
-  padding: 0 16px 16px 16px;
+.programs-list__updated-ts {
+  font-size: 12px;
 }

src/js/views/admin/programs/program/program_views.js

@@ -36,7 +36,7 @@ const LayoutView = View.extend({
         <div data-context-trail-region></div>
         <div class="flex-region program__content">
           <span class="program__tab--selected">
-            {{ @intl.programs.program.workflows }}
+            {{ @intl.admin.program.workflows }}
           </span>
         </div>
         <div data-content-region></div>

src/js/views/admin/programs/sidebar/program-details.hbs

@@ -1,2 +1,2 @@
-<textarea class="input-secondary textarea-flex__input js-input" placeholder="{{ @intl.programs.sidebar.programDetailsTemplate.placeholder }}">{{ details }}</textarea>
+<textarea class="input-secondary textarea-flex__input js-input" placeholder="{{ @intl.admin.sidebar.programDetailsTemplate.placeholder }}">{{ details }}</textarea>
 <div class="textarea-flex__container input-secondary program-sidebar__details js-spacer">{{ details }} </div>

src/js/views/admin/programs/sidebar/program-name.hbs

@@ -1,2 +1,5 @@
-<textarea class="input-primary textarea-flex__input js-input"{{#if isNew}} placeholder="{{ @intl.programs.sidebar.programNameTemplate.placeholder }}"{{/if}}>{{ name }}</textarea>
-<div class="textarea-flex__container input-primary js-spacer">{{ name }} </div>
+<div class="pos--relative">
+  <textarea class="input-primary textarea-flex__input js-input{{#if error}} has-error{{/if}}"{{#if isNew}} placeholder="{{ @intl.admin.sidebar.programNameTemplate.placeholder }}"{{/if}}>{{ name }}</textarea>
+  <div class="textarea-flex__container input-primary js-spacer">{{ name }} </div>
+</div>
+{{#if error}}<div class="form-error u-margin--b-4">{{ error }}</div>{{/if}}

src/js/views/admin/programs/sidebar/program-sidebar.hbs

@@ -1,7 +1,7 @@
 <div class="flex-grow">
   <div class="flex">
     <div class="flex-grow">
-      <h3 class="program-sidebar__heading">{{ @intl.programs.sidebar.programSidebarTemplate.headingText }}</h3>
+      <h3 class="program-sidebar__heading">{{ @intl.admin.sidebar.programSidebarTemplate.headingText }}</h3>
     </div>
     <div>
       <button class="button--icon u-margin--r-8 js-menu">{{far "ellipsis-h"}}</button>

src/js/views/admin/programs/sidebar/programs-sidebar_views.js

@@ -1,11 +1,12 @@
 import _ from 'underscore';
-import anime from 'animejs';
 import Backbone from 'backbone';
 import hbs from 'handlebars-inline-precompile';
 import { View } from 'marionette';
 
 import intl from 'js/i18n';
 
+import { animSidebar } from 'js/anim';
+
 import InputWatcherBehavior from 'js/behaviors/input-watcher';
 import Optionlist from 'js/components/optionlist';
 
@@ -17,14 +18,14 @@ import './programs-sidebar.scss';
 
 const DisabledSaveView = View.extend({
   className: 'u-margin--t-8 u-text-align--right',
-  template: hbs`<button class="button--green" disabled>{{ @intl.programs.sidebar.programSidebarViews.disabledSaveView.saveBtn }}</button>`,
+  template: hbs`<button class="button--green" disabled>{{ @intl.admin.sidebar.programSidebarViews.disabledSaveView.saveBtn }}</button>`,
 });
 
 const SaveView = View.extend({
   className: 'u-margin--t-8 u-text-align--right',
   template: hbs`
-    <button class="button--text u-margin--r-4 js-cancel">{{ @intl.programs.sidebar.programSidebarViews.saveView.cancelBtn }}</button>
-    <button class="button--green js-save">{{ @intl.programs.sidebar.programSidebarViews.saveView.saveBtn }}</button>
+    <button class="button--text u-margin--r-4 js-cancel">{{ @intl.admin.sidebar.programSidebarViews.saveView.cancelBtn }}</button>
+    <button class="button--green js-save">{{ @intl.admin.sidebar.programSidebarViews.saveView.saveBtn }}</button>
   `,
   triggers: {
     'click .js-cancel': 'cancel',
@@ -33,7 +34,6 @@ const SaveView = View.extend({
 });
 
 const NameView = View.extend({
-  className: 'pos--relative',
   template: ProgramNameTemplate,
   behaviors: [InputWatcherBehavior],
   ui: {
@@ -55,6 +55,7 @@ const NameView = View.extend({
   },
   templateContext() {
     return {
+      error: this.getOption('error'),
       isNew: this.model.isNew(),
     };
   },
@@ -110,8 +111,8 @@ const LayoutView = View.extend({
     const optionlist = new Optionlist({
       ui: this.ui.menu,
       uiView: this,
-      headingText: intl.programs.sidebar.layoutView.menuOptions.headingText,
-      itemTemplate: hbs`<span class="program-sidebar__delete-icon">{{far "trash-alt"}}</span>{{ @intl.programs.sidebar.layoutView.menuOptions.delete }}`,
+      headingText: intl.admin.sidebar.layoutView.menuOptions.headingText,
+      itemTemplate: hbs`<span class="program-sidebar__delete-icon">{{far "trash-alt"}}</span>{{ @intl.admin.sidebar.layoutView.menuOptions.delete }}`,
       lists: [{ collection: menuOptions }],
     });
 
@@ -122,12 +123,7 @@ const LayoutView = View.extend({
     this.model = this.program.clone();
   },
   onAttach() {
-    anime({
-      targets: this.el,
-      translateX: [{ value: 20, duration: 0 }, { value: 0, duration: 200 }],
-      opacity: [{ value: 0, duration: 0 }, { value: 1, duration: 300 }],
-      easing: 'easeInOutQuad',
-    });
+    animSidebar(this.el);
   },
   onRender() {
     this.showForm();
@@ -142,8 +138,8 @@ const LayoutView = View.extend({
     this.showName();
     this.showDetails();
   },
-  showName() {
-    this.showChildView('name', new NameView({ model: this.model, program: this.program }));
+  showName(error) {
+    this.showChildView('name', new NameView({ model: this.model, program: this.program, error }));
   },
   showDetails() {
     this.showChildView('details', new DetailsView({ model: this.model, program: this.program }));
@@ -156,6 +152,12 @@ const LayoutView = View.extend({
   showDisabledSave() {
     this.showChildView('save', new DisabledSaveView());
   },
+  onSave() {
+    this.showDisabledSave();
+  },
+  showErrors({ name }) {
+    this.showName(name);
+  },
   onCancel() {
     if (this.model.isNew()) {
       this.triggerMethod('close', this);

src/js/views/globals/app-nav/app-nav_views.js

@@ -94,6 +94,7 @@ const NavItemView = View.extend({
 });
 
 const AppNavCollectionView = CollectionView.extend({
+  className: 'u-margin--t-16',
   childView: NavItemView,
 });
 

src/js/views/patients/sidebar/action/action-sidebar_views.js

@@ -1,5 +1,4 @@
 import _ from 'underscore';
-import anime from 'animejs';
 import Backbone from 'backbone';
 import Radio from 'backbone.radio';
 import hbs from 'handlebars-inline-precompile';
@@ -11,6 +10,8 @@ import 'sass/modules/textarea-flex.scss';
 
 import intl from 'js/i18n';
 
+import { animSidebar } from 'js/anim';
+
 import PreloadRegion from 'js/regions/preload_region';
 
 import InputWatcherBehavior from 'js/behaviors/input-watcher';
@@ -171,12 +172,7 @@ const LayoutView = View.extend({
     this.showDue();
   },
   onAttach() {
-    anime({
-      targets: this.el,
-      translateX: [{ value: 20, duration: 0 }, { value: 0, duration: 200 }],
-      opacity: [{ value: 0, duration: 0 }, { value: 1, duration: 300 }],
-      easing: 'easeInOutQuad',
-    });
+    animSidebar(this.el);
   },
   onRender() {
     this.showAction();