Merge pull request #136 from CLIxIndia-Dev/hotfix/cs/next-button-for-…

…assessment

add next button to new assessment form; [close #84, #85]

client/js/_author/components/assessments/assessment_form.jsx

@@ -8,6 +8,10 @@ import localize        from '../../locales/localize';
 // ideally we would get this directly from this.props.localizeStrings...
 import stringFormatter from '../../locales/locales';
 
+// exported for testing
+// don't set this to '', otherwise will see the ``Name required`` warning on page load
+export const DEFAULT_NAME = 'xyzRandomName';
+
 class AssessmentForm extends React.Component {
   static propTypes = {
     items: React.PropTypes.oneOfType(
@@ -37,7 +41,8 @@ class AssessmentForm extends React.Component {
       addingItem: false,
       activeItem: '',
       reorderActive: false,
-      title: 'start'
+      title: DEFAULT_NAME,
+      savingAssessment: false
     };
   }
   componentWillUpdate(nextProps) {
@@ -203,38 +208,89 @@ class AssessmentForm extends React.Component {
   }
 
   updateAssessment(e) {
-    if (e.target.value) {
+    if (_.isString(e) && e !== '' && e !== DEFAULT_NAME) {
+      this.props.updateAssessment({ name: e });
+      this.setState({ savingAssessment: true });
+    } else if (e.target.value) {
       this.props.updateAssessment({ name: e.target.value });
+      this.setState({ savingAssessment: true });
     }
   }
 
   render() {
     const reorderActive = this.state.reorderActive;
     const canAddItem = !this.state.addingItem && this.props.name;
     const strings = this.props.localizeStrings('assessmentForm');
+
+    // simple proxy test so we can differentiate the assessmentTitle
+    //   input from having a save button or change ``onBlur``
+    const isNewAssessmentForm = this.props.bankId === '';
+
+    let titleInput = (
+      <input
+        key={this.props.name}
+        defaultValue={this.props.name}
+        className="au-c-text-input au-c-text-input--large"
+        type="text"
+        id="title_field"
+        placeholder={strings.placeholder}
+        onChange={e => this.setState({ title: e.target.value })}
+        onBlur={e => this.updateAssessment(e)}
+      />);
+
+    let saveButton;
+
+    if (isNewAssessmentForm) {
+      titleInput = (
+        <input
+          key={this.props.name}
+          defaultValue={this.props.name}
+          className="au-c-text-input au-c-text-input--large"
+          type="text"
+          id="title_field"
+          placeholder={strings.placeholder}
+          onChange={e => this.setState({ title: e.target.value })}
+        />);
+
+      // by default leave the button disabled
+      saveButton = (
+        <button
+          disabled
+          className="is-inactive au-u-right au-c-assessment-next au-c-btn au-c-btn--md au-c-btn--maroon"
+        >
+          {strings.saveAssessmentTitle}
+        </button>
+      );
+
+      if (!this.state.savingAssessment &&
+          this.state.title !== '' &&
+          this.state.title !== DEFAULT_NAME) {
+        saveButton = (
+          <button
+            onClick={() => this.updateAssessment(this.state.title)}
+            className="au-u-right au-c-assessment-next au-c-btn au-c-btn--md au-c-btn--maroon"
+          >
+            {strings.saveAssessmentTitle}
+          </button>
+        );
+      }
+    }
+
     return (
       <div className="au-o-contain">
         <div className="au-o-item">
           <div className="au-c-assessment-title">
             <label htmlFor="title_field" className="au-c-input test_label">
               <div className="au-c-input__contain">
-                <input
-                  key={this.props.name}
-                  defaultValue={this.props.name}
-                  className="au-c-text-input au-c-text-input--large"
-                  type="text"
-                  id="title_field"
-                  placeholder={strings.placeholder}
-                  onChange={e => this.setState({ title: e.target.value })}
-                  onBlur={e => this.updateAssessment(e)}
-                />
+                {titleInput}
                 { _.isEmpty(this.state.title) ?
                   <div>
                     <div className="au-c-input__bottom has-error" />
                     <div className="au-c-error-text">{strings.nameRequired}</div>
                   </div> :
                   <div className="au-c-input__bottom" />
                 }
+                {saveButton}
               </div>
             </label>
           </div>

client/js/_author/components/assessments/assessment_form.spec.jsx

@@ -1,6 +1,6 @@
 import React          from 'react';
 import { shallow }    from 'enzyme';
-import AssessmentForm from './assessment_form';
+import AssessmentForm, { DEFAULT_NAME } from './assessment_form';
 
 jest.mock('../../../libs/assets');
 
@@ -9,6 +9,7 @@ describe('AssessmentForm component', () => {
   let result;
   let createItem;
   let updateItemOrderFunction;
+  let calledUpdateAssessments = false;
 
   beforeEach(() => {
     createItem = false;
@@ -43,7 +44,7 @@ describe('AssessmentForm component', () => {
         nOfM: 1,
         unlockPrevious: 'NEVER'
       }],
-      updateAssessment: () => {},
+      updateAssessment: (value) => { calledUpdateAssessments = value; },
       updateItemOrder: () => { updateItemOrderFunction = true; },
       createItem: () => { createItem = true; },
       updateItem: () => {},
@@ -172,4 +173,63 @@ describe('AssessmentForm component', () => {
     expect(updateItemOrderFunction).toBeTruthy();
   });
 
+  it('renders the next button on new assessments', () => {
+    props.bankId = '';
+    result = shallow(<AssessmentForm {...props} />);
+    expect(result.find('.au-c-assessment-next').length).toEqual(1);
+  });
+
+  it('does not render the next button when editing assessments', () => {
+    expect(result.find('.au-c-assessment-next').length).toEqual(0);
+  });
+
+  it('does not call updateAssessment onBlur for new assessment', () => {
+    props.bankId = '';
+    result = shallow(<AssessmentForm {...props} />);
+    result.find('input').simulate('blur', {
+      target: {
+        value: 'foo'
+      }
+    });
+    expect(calledUpdateAssessments).toEqual(false);
+    expect(result.state('title')).toEqual(DEFAULT_NAME);
+  });
+
+  it('disables the button if no text, for new assessment', () => {
+    props.bankId = '';
+    result = shallow(<AssessmentForm {...props} />);
+    result.find('button').simulate('click');
+    expect(calledUpdateAssessments).toEqual(false);
+  });
+
+  it('calls updateAssessment onClick of Next button for new assessment', () => {
+    props.bankId = '';
+    result = shallow(<AssessmentForm {...props} />);
+    result.setState({ title: 'foo' });
+    result.find('button').simulate('click');
+    expect(calledUpdateAssessments).toEqual({
+      name: 'foo'
+    });
+  });
+
+  it('sets the savingAssessment state to true, onClick of Next button for new assessment', () => {
+    props.bankId = '';
+    result = shallow(<AssessmentForm {...props} />);
+    result.setState({ title: 'foo' });
+    expect(result.state('savingAssessment')).toEqual(false);
+    result.find('button').simulate('click');
+    expect(result.state('savingAssessment')).toEqual(true);
+  });
+
+  it('calls updateAssessment onBlur for existing assessment', () => {
+    result.find('input').simulate('blur', {
+      target: {
+        value: 'foo'
+      }
+    });
+    expect(calledUpdateAssessments).toEqual({
+      name: 'foo'
+    });
+  });
+
 });

client/js/_author/locales/en.js

@@ -41,7 +41,8 @@ export default {
       nOfM: '{0} of {1}',
       prevBtnLabel: 'Unlock Previous',
       prevBtnAlways: 'Always',
-      prevBtnNever: 'Never'
+      prevBtnNever: 'Never',
+      saveAssessmentTitle: 'Next'
     },
     audioLimit: {
       rangeWarning: 'Please enter a positive number under'

client/styles/_author/modules/_colors.scss

@@ -5,6 +5,7 @@ $black: #000000;
 $purple: #4C4085;
 $purple2: #615696;
 $maroon: #912A7D;
+$maroon-disabled: rgba(145, 42, 125, 0.5);
 $blue: #4F7DB2;
 $blue2: #6393C9;
 $green: #2BAB6D;

client/styles/_author/partials/_buttons.scss

@@ -122,6 +122,16 @@
     background-color: $white;
     color: $maroon;
   }
+
+  &.is-inactive{
+    background-color: $maroon-disabled;
+    border-color: $maroon-disabled;
+    color: rgba(255,255,255,0.5);
+    pointer-events: none;
+    i{
+      color: rgba(255,255,255,0.5);
+    }
+  }
 }
 
   .au-c-btn--new{

client/styles/_author/partials/_questions.scss

@@ -11,6 +11,11 @@
   }
 }
 
+.au-c-assessment-next{
+  display: block;
+  margin-top: 2rem;
+}
+
 .au-c-question-settings{
   display: none;
   height: 5rem;