lcms-engine 0.1.0

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

@@ -0,0 +1,24 @@
+// eslint-disable-next-line no-unused-vars
+function AssociationPickerItem(props) {
+  let input
+
+  if (props.item._create) {
+    input = <input type="hidden" name={`${props.createName}[]`} value={props.item.name} />
+  } else if (props.allowMultiple) {
+    input = <input type="hidden" name={`${props.name}[]`} value={props.item.id} />
+  } else {
+    input = <input type="hidden" name={props.name} value={props.item.id} />
+  }
+
+  return (
+    <div className="o-assocpicker-selection">
+      {input}
+      <div className="o-assocpicker-title">
+        {props.item.name}
+        <span className="o-assocpicker-close" onClick={props.onClickClose}>×</span>
+      </div>
+    </div>
+  )
+}
+
+export default AssociationPickerItem

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

@@ -0,0 +1,47 @@
+function AssociationPickerResults(props) {
+  let items
+
+  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)
+  }
+
+  if (shouldAllowCreate) {
+    let newItem = { id: props.value, name: props.value, _create: true }
+    items = [(
+      <tr key={newItem.id}>
+        <td onClick={() => props.onSelectItem(newItem)}>
+          {props.value}
+          <span className="o-assocpicker-create">(Create)</span>
+        </td>
+      </tr>
+    )]
+  } else {
+    items = props.items.map(item => {
+      let newItem = { id: item.id, name: item.name, _create: false, _selected: isSelected(item) }
+      return (
+        <tr key={newItem.id} className={newItem._selected ? 'active' : ''}>
+          <td onClick={() => props.onSelectItem(newItem)}>{newItem.name}</td>
+        </tr>
+      )
+    })
+  }
+
+  return (
+    <table className="c-admcur-items">
+      <thead>
+        <tr>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        {items}
+      </tbody>
+    </table>
+  )
+}
+
+export default AssociationPickerResults

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

@@ -0,0 +1,73 @@
+import React from 'react'
+// import AssociationPickerResults from './AssociationPickerResults'
+
+class AssociationPickerWindow extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = { ...props, selectedItems: [] }
+  }
+
+  selectItem(item) {
+    const operation = this.updateSelectedItems(item)
+    if ('onSelectItem' in this.props) {
+      this.props.onSelectItem(item, operation)
+    }
+  }
+
+  updateSelectedItems(item) {
+    let operation, newItems
+    if (item._selected) {
+      newItems = _.filter(this.state.selectedItems, r => r.id !== item.id)
+      operation = 'removed'
+    } else {
+      newItems = [...this.state.selectedItems, item]
+      operation = 'added'
+    }
+    this.setState(...this.state, { selectedItems: newItems })
+    return operation
+  }
+
+  render() {
+    const { q, results } = this.props
+
+    return (
+      <div className="o-assocpicker">
+        <div className="o-page">
+          <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>
+            </div>
+          </div>
+        </div>
+
+        <div className="o-page">
+          <div className="o-page__module">
+            <AssociationPickerResults
+              value={q}
+              items={results}
+              selectedItems={this.state.selectedItems}
+              allowCreate={this.props.allowCreate}
+              // eslint-disable-next-line react/jsx-no-bind
+              onSelectItem={this.selectItem.bind(this)}
+            />
+
+            { this.props.pagination() }
+
+            { (this.props.allowMultiple) ?
+              <button type="button"
+                className="button c-assocpicker-submit"
+                onClick={this.props.onClickDone}>Submit</button>
+              : null
+            }
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AssociationPickerWindow

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

@@ -0,0 +1,125 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class CurriculumEditor extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      data: props.tree,
+      changeLog: [],
+      createdIds: [],
+    }
+  }
+
+  componentDidMount() {
+    const $this = $(ReactDOM.findDOMNode(this))
+    $this.parent().addClass('o-curriculum-tree-editor__container')
+
+    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,
+          themes: { dots: true },
+          check_callback: true,
+          data : this.state.data,
+        },
+        plugins : [ 'contextmenu', 'dnd', 'wholerow', 'changed' ],
+      })
+
+    // preserve jsTree reference so we can call methods directly
+    this.jsTree = editor.data('jstree')
+  }
+
+  onRenameNode(_e, data) {
+    // after a create we have a rename, so we store the reference on the
+    // created event and grab the full event data here
+    if (this.state.createdIds.indexOf(data.node.id) > -1) {
+      this.appendToChangelog({
+        parent: data.node.parent,
+        curriculum: this.hierarchy(data.node.parent),
+        op: 'create',
+        name: data.node.text,
+      })
+      this.setState({...this.state, createdIds: _.pull(this.state.createdIds, data.node.id) })
+
+    } else {
+      this.appendToChangelog({
+        id: data.node.id,
+        curriculum: this.hierarchy(data.node.parent),
+        op: 'rename',
+        from: data.old,
+        to: data.text,
+      })
+    }
+  }
+
+  onMoveNode(_e, data) {
+    this.appendToChangelog({
+      id: data.node.id,
+      op: 'move',
+      parent: data.parent,
+      old_parent: data.old_parent,
+      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})
+  }
+
+  onDeleteNode(_e, data) {
+    this.appendToChangelog({
+      id: data.node.id,
+      op: 'remove',
+      curriculum: this.hierarchy(data.node),
+      name: data.node.text,
+    })
+  }
+
+  hierarchy(node) {
+    if (typeof node === 'string') {
+      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)
+  }
+
+  appendToChangelog(newEntry) {
+    const changeLog = this.state.changeLog.concat(newEntry)
+    this.setState({...this.state, changeLog: changeLog})
+  }
+
+  onSubmit(_e) {
+    $(_e.target).find('input[type=submit]').prop('disabled', true)
+  }
+
+  render() {
+    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)}>
+          <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>
+        <div id="curriculum-tree-editor" className="o-curriculum-tree-editor"></div>
+      </div>
+    )
+  }
+}
+
+export default CurriculumEditor

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

@@ -0,0 +1,98 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+class DirectoryPicker extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      tree: props.tree,
+      directory: props.directory,
+      parent: props.parent,
+    }
+  }
+
+  componentDidMount() {
+    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,
+        },
+        plugins : ['wholerow', 'changed'],
+      })
+
+    // preserve jsTree reference so we can call methods directly
+    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)
+  }
+
+  closeModal() {
+    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()
+  }
+
+  onClick(e) {
+    e.preventDefault()
+    this.jqmodal.foundation('open')
+  }
+
+  directory(node) {
+    return node.parents
+      .map(el => this.jsTree.get_node(el, null).text)
+      .reverse()
+      .slice(1)
+      .concat(node.text)
+  }
+
+  render() {
+    const dir = this.state.directory.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>
+          <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>
+        </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>
+        </div>
+        <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

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

@@ -0,0 +1,22 @@
+import React from 'react' // 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>
+      <div className="o-assocpicker-selections">
+        {props.hiddenInputs}
+        {props.content}
+      </div>
+      <div
+        className="o-assocpicker-modal reveal"
+        ref={props.onRef}>
+      </div>
+    </div>
+  )
+}
+
+export default PickerButton

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

@@ -0,0 +1,11 @@
+import ReactDOM from 'react-dom'
+
+function pickerModal() {
+  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)
+  })
+}
+
+export default pickerModal

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

@@ -0,0 +1,87 @@
+import React from 'react'
+// import PaginationBoxView from '../../paginate/PaginationBoxView'
+// import Routes from '../../../js-routes.js.erb';
+
+// eslint-disable-next-line no-unused-vars
+function pickerWindowWrapper(WrappedComponent, path) {
+  return class extends React.Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        results: [],
+        pagination: {
+          current_page: 1,
+          total_pages: 0,
+        },
+        q: null,
+      }
+    }
+
+    componentDidMount() {
+      this.fetch()
+    }
+
+    fetch() {
+      const data = {
+        page: this.state.pagination.current_page,
+        q: this.state.q,
+      }
+      const url = Routes[path].call(this, { ...data, ...this.state, ...this.props })
+      $.getJSON(url).then(x => this.setState({ ...x }))
+    }
+
+    onFilterChange(field, event) {
+      this.setState({ [field]: event.target.value }, this.fetch)
+    }
+
+    pageClick(data) {
+      const selected = data.selected
+      this.setState({
+        ...this.state,
+        pagination: {
+          ...this.state.pagination,
+          current_page: selected + 1,
+        },
+      }, this.fetch)
+    }
+
+    pagination() {
+      const breakLabel = <li className="break"><a href="javascript:">...</a></li>
+      return (
+        <PaginationBoxView previousLabel={'< Previous'}
+          nextLabel={ 'Next >' }
+          breakLabel={ breakLabel }
+          pageNum={ this.state.pagination.total_pages }
+          initialSelected={ this.state.pagination.current_page - 1 }
+          forceSelected={ this.state.pagination.current_page - 1 }
+          marginPagesDisplayed={ 2 }
+          pageRangeDisplayed={ 5 }
+          // eslint-disable-next-line react/jsx-no-bind
+          clickCallback={ this.pageClick.bind(this) }
+          containerClassName={ 'o-pagination o-page__wrap--row-nest' }
+          itemClassName={ 'o-pagination__item' }
+          nextClassName={ 'o-pagination__item--next' }
+          previousClassName={ 'o-pagination__item--prev' }
+          pagesClassName={ 'o-pagination__item--middle' }
+          subContainerClassName={ 'o-pagination__pages' }
+          activeClassName={ 'o-pagination__page--active' } />
+      )
+    }
+
+    render() {
+      return (
+        <div className="o-picker">
+          <WrappedComponent { ...this.state } { ...this.props }
+            // eslint-disable-next-line react/jsx-no-bind
+            onFilterChange={ this.onFilterChange.bind(this) }
+            // eslint-disable-next-line react/jsx-no-bind
+            pagination={ this.pagination.bind(this) }
+          />
+        </div>
+      )
+    }
+  }
+}
+
+export default pickerWindowWrapper