Edit vocabulary lessons in dialog

apps/src/lib/levelbuilder/AllVocabulariesEditor.jsx

@@ -52,6 +52,7 @@ class AllVocabulariesEditor extends Component {
     removeVocabulary: PropTypes.func.isRequired,
 
     courseVersionId: PropTypes.number.isRequired,
+    courseVersionLessons: PropTypes.arrayOf(PropTypes.object),
     courseName: PropTypes.string.isRequired
   };
 
@@ -181,6 +182,7 @@ class AllVocabulariesEditor extends Component {
               })
             }
             courseVersionId={this.props.courseVersionId}
+            selectableLessons={this.props.courseVersionLessons}
           />
         )}
         {this.state.vocabularyForDeletion && (

apps/src/lib/levelbuilder/lesson-editor/AddVocabularyDialog.jsx

@@ -5,6 +5,8 @@ import DialogFooter from '@cdo/apps/templates/teacherDashboard/DialogFooter';
 import color from '@cdo/apps/util/color';
 import {vocabularyShape} from '@cdo/apps/lib/levelbuilder/shapes';
 import $ from 'jquery';
+import Select from 'react-select';
+import 'react-select/dist/react-select.css';
 
 const styles = {
   dialog: {
@@ -43,15 +45,17 @@ const initialState = {
   word: '',
   definition: '',
   isSaving: false,
-  error: ''
+  error: '',
+  lessons: []
 };
 
 export default class AddVocabularyDialog extends Component {
   static propTypes = {
     afterSave: PropTypes.func.isRequired,
     handleClose: PropTypes.func.isRequired,
     editingVocabulary: vocabularyShape,
-    courseVersionId: PropTypes.number.isRequired
+    courseVersionId: PropTypes.number.isRequired,
+    selectableLessons: PropTypes.arrayOf(PropTypes.object)
   };
 
   constructor(props) {
@@ -84,6 +88,10 @@ export default class AddVocabularyDialog extends Component {
     this.props.handleClose();
   };
 
+  handleLessonSelectChange = lessonSelections => {
+    this.setState({lessons: lessonSelections.map(l => l.value)});
+  };
+
   saveVocabulary = e => {
     this.setState({isSaving: true});
     const url = this.props.editingVocabulary
@@ -98,6 +106,9 @@ export default class AddVocabularyDialog extends Component {
     if (this.props.editingVocabulary) {
       data['key'] = this.props.editingVocabulary.key;
     }
+    if (this.props.selectableLessons) {
+      data['lessonIds'] = JSON.stringify(this.state.lessons);
+    }
     $.ajax({
       url: url,
       method: method,
@@ -110,7 +121,10 @@ export default class AddVocabularyDialog extends Component {
         this.onClose();
       })
       .fail(error => {
-        this.setState({isSaving: false, error: error.responseText});
+        this.setState({
+          isSaving: false,
+          error: error.responseText
+        });
       });
   };
 
@@ -119,13 +133,20 @@ export default class AddVocabularyDialog extends Component {
       !this.state.isSaving &&
       this.state.word !== '' &&
       this.state.definition !== '';
+    const selectableLessonOptions = this.props.selectableLessons
+      ? this.props.selectableLessons.map(l => ({
+          label: l.name,
+          value: l.id
+        }))
+      : null;
     return (
       <BaseDialog isOpen={true} handleClose={this.onClose}>
         <h2>
           {this.props.editingVocabulary ? 'Edit Vocabulary' : 'Add Vocabulary'}
         </h2>
 
         {this.state.error && <h3>{this.state.error}</h3>}
+
         <label style={styles.inputAndLabel}>
           Word
           <input
@@ -146,6 +167,20 @@ export default class AddVocabularyDialog extends Component {
             style={styles.textInput}
           />
         </label>
+        {this.props.selectableLessons && (
+          <label>
+            Lessons this vocabulary is in
+            <Select
+              closeMenuOnSelect={false}
+              options={selectableLessonOptions}
+              multi={true}
+              value={this.state.lessons}
+              onChange={this.handleLessonSelectChange}
+              className={'lessons-dropdown'}
+            />
+          </label>
+        )}
+
         <DialogFooter rightAlign>
           <button
             id="submit-button"

apps/src/sites/studio/pages/vocabularies/edit.js

@@ -10,7 +10,7 @@ import {getStore, registerReducers} from '@cdo/apps/redux';
 
 $(document).ready(function() {
   const vocabularies = getScriptData('vocabularies');
-  const courseVersionId = getScriptData('courseVersionId');
+  const courseVersionData = getScriptData('courseVersionData');
   const courseName = getScriptData('courseName');
 
   registerReducers({
@@ -23,7 +23,8 @@ $(document).ready(function() {
     <Provider store={store}>
       <AllVocabulariesEditor
         vocabularies={vocabularies}
-        courseVersionId={courseVersionId}
+        courseVersionId={courseVersionData.id}
+        courseVersionLessons={courseVersionData.lessons}
         courseName={courseName}
       />
     </Provider>,

apps/style/lessons.scss

@@ -20,3 +20,10 @@ table {
     }
   }
 }
+
+
+.lessons-dropdown {
+ .Select-menu, .Select-menu-outer {
+    z-index: 3000
+  }
+}

apps/test/unit/lib/levelbuilder/lesson-editor/AddVocabularyDialogTest.jsx

@@ -21,6 +21,7 @@ describe('AddVocabularyDialog', () => {
     const wrapper = shallow(<AddVocabularyDialog {...defaultProps} />);
     expect(wrapper.contains('Add Vocabulary')).to.be.true;
     expect(wrapper.find('input').length).to.equal(2);
+    expect(wrapper.find('Select').length).to.equal(0);
   });
 
   it('closes if save is successful', () => {
@@ -32,8 +33,6 @@ describe('AddVocabularyDialog', () => {
     });
     instance.forceUpdate();
     wrapper.update();
-    /*const saveVocabularySpy = sinon.stub(instance, 'saveVocabulary');
-    expect(saveVocabularySpy.calledOnce).to.be.true;*/
     let returnData = {
       id: 1,
       key: 'my vocabulary word',
@@ -101,4 +100,37 @@ describe('AddVocabularyDialog', () => {
     wrapper.update();
     expect(wrapper.find('h3').contains('There was an error'));
   });
+
+  it('renders default props', () => {
+    const wrapper = shallow(
+      <AddVocabularyDialog
+        {...defaultProps}
+        selectableLessons={[{id: 1, name: 'lesson1'}, {id: 2, name: 'lesson2'}]}
+      />
+    );
+    expect(wrapper.contains('Add Vocabulary')).to.be.true;
+    expect(wrapper.find('input').length).to.equal(2);
+  });
+
+  it('displays vocabulary lessons if lessons are selectable', () => {
+    const existingVocabulary = {
+      id: 200,
+      key: 'key',
+      word: 'existing vocab',
+      definition: 'existing definition',
+      lessons: [{id: 1, name: 'lesson1'}]
+    };
+    const wrapper = mount(
+      <AddVocabularyDialog
+        {...defaultProps}
+        selectableLessons={[{id: 1, name: 'lesson1'}, {id: 2, name: 'lesson2'}]}
+        editingVocabulary={existingVocabulary}
+      />
+    );
+
+    expect(wrapper.find('Select').length).to.equal(1);
+    expect(wrapper.find('Select').props().value).to.deep.equal([
+      {id: 1, name: 'lesson1'}
+    ]);
+  });
 });

dashboard/app/controllers/vocabularies_controller.rb

@@ -29,7 +29,13 @@ def create
   # PUT/PATCH /vocabularies
   def update
     vocabulary = Vocabulary.find_by_id(vocabulary_params[:id])
-    if vocabulary && vocabulary.update!(vocabulary_params)
+    unless vocabulary_params[:lesson_ids].nil?
+      vocabulary.lessons = vocabulary_params[:lesson_ids].map {|id| Lesson.find(id)}
+      vocabulary.lessons.each do |lesson|
+        lesson.script.write_script_json
+      end
+    end
+    if vocabulary && vocabulary.update!(vocabulary_params.except(:lesson_ids))
       render json: vocabulary.summarize_for_lesson_edit
     else
       render json: {status: 404, error: "Vocabulary #{vocabulary_params[:id]} not found"}
@@ -39,14 +45,15 @@ def update
   # GET /courses/:course_name/vocab/edit
   def edit
     @course_version = find_matching_course_version
-    @vocabularies = @course_version.vocabularies.order(:word)
+    @vocabularies = @course_version.vocabularies.order(:word).map(&:summarize_for_edit)
   end
 
   private
 
   def vocabulary_params
     vp = params.transform_keys(&:underscore)
-    vp = vp.permit(:id, :key, :word, :definition, :course_version_id)
+    vp = vp.permit(:id, :key, :word, :definition, :course_version_id, :lesson_ids)
+    vp[:lesson_ids] = JSON.parse(vp[:lesson_ids]) if vp[:lesson_ids]
     vp
   end
 

dashboard/app/models/course_version.rb

@@ -79,4 +79,8 @@ def destroy_and_destroy_parent_if_empty
     destroy!
     course_offering.destroy if course_offering && course_offering.course_versions.empty?
   end
+
+  def contained_lessons
+    units.map(&:lessons).flatten
+  end
 end

dashboard/app/models/vocabulary.rb

@@ -47,6 +47,16 @@ def summarize_for_lesson_edit
     {id: id, key: key, word: word, definition: definition}
   end
 
+  def summarize_for_edit
+    {
+      id: id,
+      key: key,
+      word: word,
+      definition: definition,
+      lessons: lessons.map(&:id)
+    }
+  end
+
   def generate_key
     return if key
     self.key = word

dashboard/app/views/vocabularies/edit.html.haml

@@ -1,4 +1,5 @@
+%link{href: asset_path('css/lessons.css'), rel: 'stylesheet', type: 'text/css'}
 %script{src: webpack_asset_path('js/vocabularies/edit.js'),
-  data: {vocabularies: @vocabularies.to_json, courseVersionId: @course_version.id, courseName: params[:course_name].to_json}}
+  data: {vocabularies: @vocabularies.to_json, courseVersionData: {id: @course_version.id, lessons: @course_version.contained_lessons.map {|l| {id: l.id, name: l.name} }}.to_json, courseName: params[:course_name].to_json}}
 
 #vocabularies-table

dashboard/test/controllers/vocabularies_controller_test.rb

@@ -31,6 +31,20 @@ class VocabulariesControllerTest < ActionController::TestCase
     assert(@response.body.include?('updated definition'))
   end
 
+  test "can update lessons from params" do
+    sign_in @levelbuilder
+    course_version = create :course_version
+    lesson = create :lesson
+    vocabulary = create :vocabulary, word: 'word', definition: 'draft definition', course_version: course_version
+    post :update, params: {id: vocabulary.id, word: 'word', definition: 'updated definition', courseVersionId: course_version.id, lessonIds: [lesson.id].to_json}
+    assert_response :success
+
+    vocabulary.reload
+    assert_equal 'updated definition', vocabulary.definition
+    assert(@response.body.include?('updated definition'))
+    assert_equal [lesson], vocabulary.lessons
+  end
+
   test "creating vocabulary that already exists results in error" do
     sign_in @levelbuilder
     course_version = create :course_version
@@ -53,7 +67,7 @@ class VocabulariesControllerTest < ActionController::TestCase
     get :edit, params: {course_name: unit_group.name}
     assert_response :success
     assert_equal assigns(:course_version), course_version
-    assert_equal assigns(:vocabularies), [vocabulary]
+    assert_equal assigns(:vocabularies), [vocabulary.summarize_for_edit]
   end
 
   test "can load vocab edit page of standalone script course version" do
@@ -65,6 +79,6 @@ class VocabulariesControllerTest < ActionController::TestCase
     get :edit, params: {course_name: script.name}
     assert_response :success
     assert_equal assigns(:course_version), course_version
-    assert_equal assigns(:vocabularies), [vocabulary]
+    assert_equal assigns(:vocabularies), [vocabulary.summarize_for_edit]
   end
 end