lcms-engine 0.3.0 → 0.4.0

data/app/javascript/components/admin/association-picker/AssociationPickerResults.jsx

@@ -1,35 +1,46 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 function AssociationPickerResults(props) {
-  let items
+  let items;
 
-  const shouldAllowCreate = _.isString(props.value) && props.value.length > 0
-    && props.allowCreate && props.items.length === 0
+  const shouldAllowCreate =
+    _.isString(props.value) && props.value.length > 0 && props.allowCreate && props.items.length === 0;
 
-  const selectedIds = _.map(props.selectedItems, 'id')
-  const isSelected = (item) => {
-    return _.includes(selectedIds, item.id)
-  }
+  const selectedIds = _.map(props.selectedItems, 'id');
+  const isSelected = item => {
+    return _.includes(selectedIds, item.id);
+  };
 
   if (shouldAllowCreate) {
-    let newItem = { id: props.value, name: props.value, _create: true }
-    items = [(
+    let newItem = { id: props.value, name: props.value, _create: true };
+    items = [
+      /* eslint-disable react/jsx-no-bind */
       <tr key={newItem.id}>
         <td onClick={() => props.onSelectItem(newItem)}>
           {props.value}
           <span className="o-assocpicker-create">(Create)</span>
         </td>
-      </tr>
-    )]
+      </tr>,
+      /* eslint-enable react/jsx-no-bind */
+    ];
   } else {
     items = props.items.map(item => {
-      let newItem = { id: item.id, name: item.name, _create: false, _selected: isSelected(item) }
+      let newItem = {
+        id: item.id,
+        name: item.name,
+        _create: false,
+        _selected: isSelected(item),
+      };
       return (
+        /* eslint-disable react/jsx-no-bind */
         <tr key={newItem.id} className={newItem._selected ? 'active' : ''}>
           <td onClick={() => props.onSelectItem(newItem)}>{newItem.name}</td>
         </tr>
-      )
-    })
+        /* eslint-enable react/jsx-no-bind */
+      );
+    });
   }
 
   return (
@@ -40,10 +51,24 @@ function AssociationPickerResults(props) {
         </tr>
       </thead>
       <tbody>
-        {items.length ? items : <tr><td>Nothing to select</td></tr> }
+        {items.length ? (
+          items
+        ) : (
+          <tr>
+            <td>Nothing to select</td>
+          </tr>
+        )}
       </tbody>
     </table>
-  )
+  );
 }
 
-export default AssociationPickerResults
+AssociationPickerResults.propTypes = {
+  value: PropTypes.string,
+  allowCreate: PropTypes.bool,
+  items: PropTypes.array,
+  selectedItems: PropTypes.array,
+  onSelectItem: PropTypes.func,
+};
+
+export default AssociationPickerResults;

data/app/javascript/components/admin/association-picker/AssociationPickerWindow.jsx

@@ -1,35 +1,39 @@
-import React from 'react'
-import AssociationPickerResults from './AssociationPickerResults'
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import AssociationPickerResults from './AssociationPickerResults';
 
 class AssociationPickerWindow extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { ...props, selectedItems: [] }
+    this.state = { ...props, selectedItems: [] };
+
+    this.selectItem = this.selectItem.bind(this);
   }
 
   selectItem(item) {
-    const operation = this.updateSelectedItems(item)
+    const operation = this.updateSelectedItems(item);
     if ('onSelectItem' in this.props) {
-      this.props.onSelectItem(item, operation)
+      this.props.onSelectItem(item, operation);
     }
   }
 
   updateSelectedItems(item) {
-    let operation, newItems
+    let operation, newItems;
     if (item._selected) {
-      newItems = _.filter(this.state.selectedItems, r => r.id !== item.id)
-      operation = 'removed'
+      newItems = _.filter(this.state.selectedItems, r => r.id !== item.id);
+      operation = 'removed';
     } else {
-      newItems = [...this.state.selectedItems, item]
-      operation = 'added'
+      newItems = [...this.state.selectedItems, item];
+      operation = 'added';
     }
-    this.setState(...this.state, { selectedItems: newItems })
-    return operation
+    this.setState(...this.state, { selectedItems: newItems });
+    return operation;
   }
 
   render() {
-    const { q, results } = this.props
+    const { q, results } = this.props;
 
     return (
       <div className="o-assocpicker">
@@ -37,8 +41,15 @@ class AssociationPickerWindow extends React.Component {
           <div className="o-page__module">
             <h4 className="text-center">Select item</h4>
             <div className="row">
-              <label className="medium-3 columns">Name
-                <input type="text" value={q || ''} onChange={ this.props.onFilterChange.bind(this, 'q') }/>
+              <label className="medium-3 columns">
+                Name
+                {/*
+                  eslint-disable react/jsx-no-bind
+                */}
+                <input type="text" value={q || ''} onChange={this.props.onFilterChange.bind(this, 'q')} />
+                {/*
+                  eslint-enable react/jsx-no-bind
+                */}
               </label>
             </div>
           </div>
@@ -51,23 +62,32 @@ class AssociationPickerWindow extends React.Component {
               items={results}
               selectedItems={this.state.selectedItems}
               allowCreate={this.props.allowCreate}
-              // eslint-disable-next-line react/jsx-no-bind
-              onSelectItem={this.selectItem.bind(this)}
+              onSelectItem={this.selectItem}
             />
 
-            { this.props.pagination() }
+            {this.props.pagination()}
 
-            { (this.props.allowMultiple) ?
-              <button type="button"
-                className="button c-assocpicker-submit"
-                onClick={this.props.onClickDone}>Submit</button>
-              : null
-            }
+            {this.props.allowMultiple ? (
+              <button type="button" className="button c-assocpicker-submit" onClick={this.props.onClickDone}>
+                Submit
+              </button>
+            ) : null}
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default AssociationPickerWindow
+AssociationPickerWindow.propTypes = {
+  onSelectItem: PropTypes.func,
+  q: PropTypes.string,
+  results: PropTypes.array,
+  onFilterChange: PropTypes.func,
+  allowCreate: PropTypes.bool,
+  pagination: PropTypes.func,
+  allowMultiple: PropTypes.bool,
+  onClickDone: PropTypes.func,
+};
+
+export default AssociationPickerWindow;

data/app/javascript/components/admin/curriculum/CurriculumEditor.jsx

@@ -1,38 +1,49 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import $ from 'jquery';
+import '../../../vendor/jstree/jstree.min';
 
 class CurriculumEditor extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
-      data: props.tree,
       changeLog: [],
       createdIds: [],
-    }
+    };
+
+    this.onSubmit = this.onSubmit.bind(this);
   }
 
   componentDidMount() {
-    const $this = $(ReactDOM.findDOMNode(this))
-    $this.parent().addClass('o-curriculum-tree-editor__container')
+    // eslint-disable-next-line react/no-find-dom-node
+    const $this = $(ReactDOM.findDOMNode(this));
+    $this.parent().addClass('o-curriculum-tree-editor__container');
 
-    const editor = $this.find('#curriculum-tree-editor')
+    const editor = $this.find('#curriculum-tree-editor');
     editor
       .on('rename_node.jstree', this.onRenameNode.bind(this))
       .on('move_node.jstree', this.onMoveNode.bind(this))
       .on('create_node.jstree', this.onCreateNode.bind(this))
       .on('delete_node.jstree', this.onDeleteNode.bind(this))
       .jstree({
-        core : {
-          animation : 0,
+        core: {
+          animation: 0,
           themes: { dots: true },
           check_callback: true,
-          data : this.state.data,
+          data: {
+            url: this.props.path,
+            data: node => {
+              return { id: node.id };
+            },
+          },
         },
-        plugins : [ 'contextmenu', 'dnd', 'wholerow', 'changed' ],
-      })
+        plugins: ['contextmenu', 'dnd', 'wholerow', 'changed'],
+      });
 
     // preserve jsTree reference so we can call methods directly
-    this.jsTree = editor.data('jstree')
+    this.jsTree = editor.data('jstree');
   }
 
   onRenameNode(_e, data) {
@@ -44,9 +55,11 @@ class CurriculumEditor extends React.Component {
         curriculum: this.hierarchy(data.node.parent),
         op: 'create',
         name: data.node.text,
-      })
-      this.setState({...this.state, createdIds: _.pull(this.state.createdIds, data.node.id) })
-
+      });
+      this.setState({
+        ...this.state,
+        createdIds: _.pull(this.state.createdIds, data.node.id),
+      });
     } else {
       this.appendToChangelog({
         id: data.node.id,
@@ -54,7 +67,7 @@ class CurriculumEditor extends React.Component {
         op: 'rename',
         from: data.old,
         to: data.text,
-      })
+      });
     }
   }
 
@@ -67,12 +80,12 @@ class CurriculumEditor extends React.Component {
       curriculum: this.hierarchy(data.old_parent).concat(data.node.text),
       parent_curriculum: this.hierarchy(data.parent),
       position: data.position,
-    })
+    });
   }
 
   onCreateNode(_e, data) {
-    const createdIds = this.state.createdIds.concat(data.node.id)
-    this.setState({...this.state, createdIds: createdIds})
+    const createdIds = this.state.createdIds.concat(data.node.id);
+    this.setState({ ...this.state, createdIds: createdIds });
   }
 
   onDeleteNode(_e, data) {
@@ -81,45 +94,54 @@ class CurriculumEditor extends React.Component {
       op: 'remove',
       curriculum: this.hierarchy(data.node),
       name: data.node.text,
-    })
+    });
   }
 
   hierarchy(node) {
     if (typeof node === 'string') {
-      node = this.jsTree.get_node(node, false)
+      node = this.jsTree.get_node(node, false);
     }
     return node.parents
       .map(el => this.jsTree.get_node(el, false).text)
       .reverse()
       .slice(1)
-      .concat(node.text)
+      .concat(node.text);
   }
 
   appendToChangelog(newEntry) {
-    const changeLog = this.state.changeLog.concat(newEntry)
-    this.setState({...this.state, changeLog: changeLog})
+    const changeLog = this.state.changeLog.concat(newEntry);
+    this.setState({ ...this.state, changeLog: changeLog });
   }
 
   onSubmit(_e) {
-    $(_e.target).find('input[type=submit]').prop('disabled', true)
+    $(_e.target).find('input[type=submit]').prop('disabled', true);
   }
 
   render() {
-    const jsonChangeLog = JSON.stringify(this.state.changeLog)
+    const jsonChangeLog = JSON.stringify(this.state.changeLog);
     return (
       <div>
-        <form action={this.props.form_url} acceptCharset="UTF-8" method="post" onSubmit={this.onSubmit.bind(this)}>
+        <form action={this.props.form_url} acceptCharset="UTF-8" method="post" onSubmit={this.onSubmit}>
           <input name="utf8" value="✓" type="hidden" />
           <input name="_method" value="patch" type="hidden" />
           <input name="authenticity_token" value={this.props.form_token} type="hidden" />
           <input name="curriculum[change_log]" type="hidden" value={jsonChangeLog} />
           <input value="Save Changes" className="button primary" type="submit" />
         </form>
-        <p className="o-curriculum-tree-editor__menu-info">(Click on a node with the right button to add/edit/remove)</p>
+        <p className="o-curriculum-tree-editor__menu-info">
+          (Click on a node with the right button to add/edit/remove)
+        </p>
         <div id="curriculum-tree-editor" className="o-curriculum-tree-editor"></div>
       </div>
-    )
+    );
   }
 }
 
-export default CurriculumEditor
+CurriculumEditor.propTypes = {
+  tree: PropTypes.array,
+  form_url: PropTypes.string,
+  form_token: PropTypes.string,
+  path: PropTypes.string,
+};
+
+export default CurriculumEditor;

data/app/javascript/components/admin/curriculum/DirectoryPicker.jsx

@@ -1,65 +1,68 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { Foundation } from 'foundation-sites';
+import TagsInput from 'react-tagsinput';
+import $ from 'jquery';
+import '../../../vendor/jstree/jstree.min';
 
 class DirectoryPicker extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
-      tree: props.tree,
       directory: props.directory,
       parent: props.parent,
-    }
+    };
+
+    this.onClick = this.onClick.bind(this);
+    this.handleDirChange = this.handleDirChange.bind(this);
   }
 
   componentDidMount() {
-    const $this = $(ReactDOM.findDOMNode(this))
-    $this.parent().addClass('o-curriculum-tree-picker__container')
+    // eslint-disable-next-line react/no-find-dom-node
+    const $this = $(ReactDOM.findDOMNode(this));
+    $this.parent().addClass('o-curriculum-tree-picker__container');
 
-    // start jstree
-    const editor = $this.find('#curriculum-tree-picker')
-    editor
-      .on('changed.jstree', this.onChanged.bind(this))
-      .jstree({
-        core : {
-          animation : 0,
-          themes: { dots: true },
-          check_callback: true,
-          data : this.state.tree,
+    const editor = $this.find('#curriculum-tree-picker');
+    editor.on('changed.jstree', this.onChanged.bind(this)).jstree({
+      core: {
+        animation: 0,
+        themes: { dots: true },
+        check_callback: true,
+        data: {
+          url: this.props.path,
+          data: node => {
+            return { id: node.id };
+          },
         },
-        plugins : ['wholerow', 'changed'],
-      })
-
-    // preserve jsTree reference so we can call methods directly
-    this.jsTree = editor.data('jstree')
+      },
+      plugins: ['wholerow', 'changed'],
+    });
+    this.jsTree = editor.data('jstree');
 
-    // start tagsinput
-    this.dirTags = $this.find('#resource_directory')
-    this.dirTags.tagsInput({
-      height: '2.5em',
-      width:'65%',
-    })
-
-    // start modal
-    this.jqmodal = $this.find('#curriculum-picker-modal')
-    new Foundation.Reveal(this.jqmodal, null)
+    Foundation.addToJquery($);
+    this.jqmodal = $this.find('#curriculum-picker-modal');
+    new Foundation.Reveal(this.jqmodal, null);
   }
 
   closeModal() {
-    this.jqmodal.foundation('close')
+    this.jqmodal.foundation('close');
   }
 
   onChanged(_e, data) {
-    const dir = this.directory(data.node)
-    this.dirTags.importTags(dir.join(','))
-
-    const parent = { id: data.node.id, title: data.node.li_attr.title, directory: dir }
-    this.setState({ ...this.state, parent: parent })
-    this.closeModal()
+    const dir = this.directory(data.node);
+    const parent = {
+      id: data.node.id,
+      title: data.node.li_attr.title,
+      directory: dir,
+    };
+    this.setState({ directory: dir, parent: parent });
+    this.closeModal();
   }
 
   onClick(e) {
-    e.preventDefault()
-    this.jqmodal.foundation('open')
+    e.preventDefault();
+    this.jqmodal.foundation('open');
   }
 
   directory(node) {
@@ -67,32 +70,56 @@ class DirectoryPicker extends React.Component {
       .map(el => this.jsTree.get_node(el, null).text)
       .reverse()
       .slice(1)
-      .concat(node.text)
+      .concat(node.text);
+  }
+
+  handleDirChange(tags) {
+    this.setState({ directory: tags });
   }
 
   render() {
-    const dir = this.state.directory.join(',')
-    const curr = this.state.parent.directory
-    const parent_aside = (curr.length > 0) ? `(${curr.join(' | ')}) : ` : ''
+    const curr = this.state.parent.directory;
+    const parent_aside = curr.length > 0 ? `(${curr.join(' | ')}) : ` : '';
     return (
       <div>
         <div className="input text optional resource_parent_id">
-          <label className="text optional" htmlFor="resource_parent_id">Parent Resource</label>
+          <label className="text optional" htmlFor="resource_parent_id">
+            Parent Resource
+          </label>
           <input type="hidden" name="resource[parent_id]" id="resource_parent_id" value={this.state.parent.id || ''} />
-          <a href="#" className="button reveal-button" onClick={this.onClick.bind(this)}>Select Parent</a>
-          <div className="resource_parent"><aside>{parent_aside}</aside> <strong>{this.state.parent.title}</strong></div>
+          {/* eslint-disable jsx-a11y/anchor-is-valid */}
+          <a href="#" className="button reveal-button" onClick={this.onClick}>
+            Select Parent
+          </a>
+          {/* eslint-enable jsx-a11y/anchor-is-valid */}
+          <div className="resource_parent">
+            <aside>{parent_aside}</aside> <strong>{this.state.parent.title}</strong>
+          </div>
         </div>
         <div className="input text optional resource_directory">
-          <label className="text optional" htmlFor="resource_directory">Curriculum directory <aside>(You can pick a parent above, or enter curriculum tags below; i.e.: subject, grade, unit, etc;)</aside></label>
-          <input className="text optional" name="resource[directory]" id="resource_directory" defaultValue={dir}></input>
+          <label className="text optional" htmlFor="resource_directory">
+            Curriculum directory{' '}
+            <aside>
+              (You can pick a parent above, or enter curriculum tags below; i.e.: subject, grade, unit, etc;)
+            </aside>
+          </label>
+          <TagsInput value={this.state.directory} onChange={this.handleDirChange} />
+          <input type="hidden" name="resource[directory]" value={this.state.directory} />
         </div>
-        <div className="curriculum-picker-modal reveal" id="curriculum-picker-modal" >
+        <div className="curriculum-picker-modal reveal" id="curriculum-picker-modal">
           <h2>Select a Parent Resource</h2>
           <div id="curriculum-tree-picker" className="o-curriculum-tree-picker"></div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default DirectoryPicker
+DirectoryPicker.propTypes = {
+  tree: PropTypes.array,
+  directory: PropTypes.array,
+  parent: PropTypes.object,
+  path: PropTypes.string,
+};
+
+export default DirectoryPicker;

data/app/javascript/components/admin/picker/PickerButton.jsx

@@ -1,22 +1,27 @@
-import React from 'react' // eslint-disable-line no-unused-vars
+import React from 'react';
+import PropTypes from 'prop-types';
+import ResourcePicker from '../resource-picker/ResourcePicker'; // eslint-disable-line no-unused-vars
 
 function PickerButton(props) {
   return (
     <div className="o-assocpicker-container">
-      <button
-        type="button"
-        className="o-assocpicker-add button"
-        onClick={props.onClick}>Select</button>
+      <button type="button" className="o-assocpicker-add button" onClick={props.onClick}>
+        Select
+      </button>
       <div className="o-assocpicker-selections">
         {props.hiddenInputs}
         {props.content}
       </div>
-      <div
-        className="o-assocpicker-modal reveal"
-        ref={props.onRef}>
-      </div>
+      <div className="o-assocpicker-modal reveal" ref={props.onRef}></div>
     </div>
-  )
+  );
 }
 
-export default PickerButton
+PickerButton.propTypes = {
+  onClick: PropTypes.func,
+  hiddenInputs: PropTypes.node,
+  content: PropTypes.array,
+  onRef: PropTypes.func,
+};
+
+export default PickerButton;

data/app/javascript/components/admin/picker/pickerModal.jsx

@@ -1,11 +1,11 @@
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom';
 
 function pickerModal() {
-  new Foundation.Reveal(this.jqmodal, null)
-  this.jqmodal.on('open.zf.reveal', () => this.jqmodal.css({ top: '15px' }))
+  new Foundation.Reveal(this.jqmodal, null);
+  this.jqmodal.on('open.zf.reveal', () => this.jqmodal.css({ top: '15px' }));
   this.jqmodal.on('closed.zf.reveal', () => {
-    ReactDOM.unmountComponentAtNode(this.modal)
-  })
+    ReactDOM.unmountComponentAtNode(this.modal);
+  });
 }
 
-export default pickerModal
+export default pickerModal;