lcms-engine 0.3.1 → 0.4.0

data/app/javascript/components/admin/ImportStatus.jsx

@@ -1,36 +1,37 @@
-import React from 'react'
-import _ from 'lodash'
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 class ImportStatus extends React.Component {
   constructor(props) {
-    super(props)
-    this.state = { jobs: props.jobs }
-    this.pollingInterval = 5000
-    this.chunkSize = 50
-    this.links = _.isEmpty(props.links) ? [`${props.type}/:id`] : props.links
+    super(props);
+    this.state = { jobs: props.jobs };
+    this.pollingInterval = 5000;
+    this.chunkSize = 50;
+    this.links = _.isEmpty(props.links) ? [`${props.type}/:id`] : props.links;
     if (_.isEmpty(props.path)) {
-      const k = `lcms_engine_import_status_admin_${this.props.type}_path`
-      this.path = Routes[k].call()
+      const k = `lcms_engine_import_status_admin_${this.props.type}_path`;
+      this.path = Routes[k].call();
     } else {
-      this.path = props.path
+      this.path = props.path;
     }
-    this.withPdf = props.with_pdf || false
+    this.withPdf = props.with_pdf || false;
   }
 
   componentDidMount() {
-    this.intervalFn = setInterval(this.poll.bind(this), this.pollingInterval)
+    this.intervalFn = setInterval(this.poll.bind(this), this.pollingInterval);
   }
 
   componentWillUnmount() {
-    clearInterval(this.intervalFn)
+    clearInterval(this.intervalFn);
   }
 
   poll() {
-    const pendingJobs = _.compact(_.map(this.state.jobs, (job, jid) => job.status !== 'done' ? jid : null))
+    const pendingJobs = _.compact(_.map(this.state.jobs, (job, jid) => (job.status !== 'done' ? jid : null)));
     if (pendingJobs.length > 0) {
-      _.each(_.chunk(pendingJobs, this.chunkSize), jids => this.updateChunkStatus(jids))
+      _.each(_.chunk(pendingJobs, this.chunkSize), jids => this.updateChunkStatus(jids));
     } else {
-      clearInterval(this.intervalFn)
+      clearInterval(this.intervalFn);
     }
   }
 
@@ -39,91 +40,120 @@ class ImportStatus extends React.Component {
       jids: jids,
       type: this.props.type,
       _: Date.now(), // prevent cached response
-    }).done(res => {
-      let updatedJobs = {}
-      _.each(res, (val, jid) => {
-        updatedJobs[jid] = _.extend(this.state.jobs[jid], { status: val.status }, val.result)
-      })
-      this.setState({ jobs: _.extend(this.state.jobs, updatedJobs) })
-    }).fail(res => {
-      console.warn('check content export status', res)
     })
+      .done(res => {
+        let updatedJobs = {};
+        _.each(res, (val, jid) => {
+          updatedJobs[jid] = _.extend(this.state.jobs[jid], { status: val.status }, val.result);
+        });
+        this.setState({ jobs: _.extend(this.state.jobs, updatedJobs) });
+      })
+      .fail(res => {
+        console.warn('check content export status', res); // eslint-disable-line no-console
+      });
   }
 
   resourceButton(job) {
     if (this.withPdf) {
       return (
-        <a href={job.link}
-          className="o-adm-materials__resource button primary u-margin-left--small u-margin-bottom--zero" target="_blank">
+        <a
+          href={job.link}
+          className="o-adm-materials__resource button primary u-margin-left--small u-margin-bottom--zero"
+          target="_blank"
+          rel="noreferrer"
+        >
           <i className="far fa-file-pdf"></i>
         </a>
-      )
+      );
     }
 
-    let linkWithParams = function(route, params = {}) {
-      let path = route
+    let linkWithParams = function (route, params = {}) {
+      let path = route;
       _.each(params, (v, k) => {
-        path = _.replace(path, `:${k}`, v)
-      })
-      return path
-    }
+        path = _.replace(path, `:${k}`, v);
+      });
+      return path;
+    };
 
     return _.map(this.links, (link, idx) => (
-      <a key={`pl-${idx}`}
+      <a
+        key={`pl-${idx}`}
         href={linkWithParams(link, { id: job.model.id })}
-        className="o-adm-materials__resource button primary u-margin-left--small u-margin-bottom--zero" target="_blank">
+        className="o-adm-materials__resource button primary u-margin-left--small u-margin-bottom--zero"
+        target="_blank"
+        rel="noreferrer"
+      >
         <i className="fas fa-eye"></i>
       </a>
-    ))
+    ));
   }
 
   spinner() {
-    return <span className="o-adm-materials__spinner button primary u-margin-bottom--zero"><i className="fas fa-spin fa-spinner" /></span>
+    return (
+      <span className="o-adm-materials__spinner button primary u-margin-bottom--zero">
+        <i className="fas fa-spin fa-spinner" />
+      </span>
+    );
   }
 
   render() {
-    const waitingCount = _.filter(this.state.jobs, (job) =>  job.status !== 'done').length
-    const importedCount = _.filter(this.state.jobs, (job) =>  job.status === 'done' && job.ok ).length
-    const failedCount = _.filter(this.state.jobs, (job) =>  job.status === 'done' && !job.ok ).length
+    const waitingCount = _.filter(this.state.jobs, job => job.status !== 'done').length;
+    const importedCount = _.filter(this.state.jobs, job => job.status === 'done' && job.ok).length;
+    const failedCount = _.filter(this.state.jobs, job => job.status === 'done' && !job.ok).length;
 
     const results = _.map(this.state.jobs, (job, key) => {
-      let status
+      let status;
       if (job.status === 'done') {
-        status = job.ok ? 'ok' : 'err'
+        status = job.ok ? 'ok' : 'err';
       } else {
-        status = job.status
+        status = job.status;
       }
       return (
         <li className={`o-adm-materials__result o-adm-materials__result--${status}`} key={key}>
           <div className="u-flex align-justify align-middle">
-            <a href={job.link} target='_blank' className='o-adm-materials__link'>
+            <a href={job.link} target="_blank" className="o-adm-materials__link" rel="noreferrer">
               {job.link}
             </a>
             {job.status !== 'done' ? this.spinner() : null}
             {job.status === 'done' && job.ok ? <span>{this.resourceButton(job)}</span> : null}
           </div>
-          {!(_.isEmpty(job.errors)) ? (<p dangerouslySetInnerHTML={{__html: _.join(job.errors, '<br/>')}}></p>) : null}
-          {!(_.isEmpty(job.warnings)) ? (<p dangerouslySetInnerHTML={{ __html: _.join(job.warnings, '<br/>') }}></p>) : null}
+          {!_.isEmpty(job.errors) ? <p dangerouslySetInnerHTML={{ __html: _.join(job.errors, '<br/>') }}></p> : null}
+          {!_.isEmpty(job.warnings) ? (
+            <p
+              dangerouslySetInnerHTML={{
+                __html: _.join(job.warnings, '<br/>'),
+              }}
+            ></p>
+          ) : null}
         </li>
-      )
-    })
+      );
+    });
 
     return (
       <div>
         <p className="o-adm-materials__summary">
-          <span className='summary-entry'>• {waitingCount} Files(s) Processing</span>
-          <span className='summary-entry'>{`✓ ${importedCount} File(s) ${this.withPdf ? 'Generated' : 'Imported'}`}</span>
-          <span className='summary-entry'>x {failedCount} File(s) Failed</span>
+          <span className="summary-entry">• {waitingCount} Files(s) Processing</span>
+          <span className="summary-entry">{`✓ ${importedCount} File(s) ${
+            this.withPdf ? 'Generated' : 'Imported'
+          }`}</span>
+          <span className="summary-entry">x {failedCount} File(s) Failed</span>
         </p>
-        <aside className='o-adm-materials__summary--aside u-margin-bottom--small'>
-          After the (re){`${this.withPdf ? 'generation' : 'import'}`} the files for export are still in process of being generated in the background. They will appear soon after.
+        <aside className="o-adm-materials__summary--aside u-margin-bottom--small">
+          After the (re){`${this.withPdf ? 'generation' : 'import'}`} the files for export are still in process of being
+          generated in the background. They will appear soon after.
         </aside>
-        <ul className="o-adm-materials__results">
-          {results}
-        </ul>
+        <ul className="o-adm-materials__results">{results}</ul>
       </div>
-    )
+    );
   }
 }
 
-export default ImportStatus
+ImportStatus.propTypes = {
+  jobs: PropTypes.array,
+  links: PropTypes.array,
+  type: PropTypes.string,
+  path: PropTypes.string,
+  with_pdf: PropTypes.bool,
+};
+
+export default ImportStatus;

data/app/javascript/components/admin/Initializer.jsx

@@ -1,41 +1,39 @@
-function initializeResourcesForm() {
-  const form = $('form#resource_form')
-  if (!form.length) return
+const Initializer = {
+  initializeResourcesForm: () => {
+    const form = $('form#resource_form');
+    if (!form.length) return;
 
-  const opr_desc = form.find('.resource_opr_description')
-  form.find('#resource_curriculum_type').change((ev) => {
-    const el = $(ev.target)
-    if (el.val() === 'unit') {
-      opr_desc.slideDown()
-    } else {
-      opr_desc.slideUp()
-    }
-  })
-}
+    const opr_desc = form.find('.resource_opr_description');
+    form.find('#resource_curriculum_type').change(ev => {
+      const el = $(ev.target);
+      if (el.val() === 'unit') {
+        opr_desc.slideDown();
+      } else {
+        opr_desc.slideUp();
+      }
+    });
+  },
 
-function initializeResourcesList() {
-  const page = $('.o-adm-list.o-adm-documents')
-  if (!page.length) return
+  initializeResourcesList: () => {
+    const page = $('.o-adm-list.o-adm-documents');
+    if (!page.length) return;
 
-  page.find('.c-reimport-with-materials__toggle input[type=checkbox]').change(() => {
-    const value = $(this).prop('checked') ? 1 : 0
-    page.find('.c-reimport-doc-form .c-reimport-with-materials__field').val(value)
-  })
-}
+    page.find('.c-reimport-with-materials__toggle input[type=checkbox]').change(() => {
+      const value = $(this).prop('checked') ? 1 : 0;
+      page.find('.c-reimport-doc-form .c-reimport-with-materials__field').val(value);
+    });
+  },
 
-function initializeSelectAll() {
-  const selector = $('.c-multi-selected--select-all')
-  if (!selector.length) return
+  initializeSelectAll: () => {
+    const selector = $('.c-multi-selected--select-all');
+    if (!selector.length) return;
 
-  selector.find('input').change((ev) => {
-    const el = $(ev.target)
-    const checked = el.prop('checked')
-    $('.table input[type=checkbox][name="selected_ids[]"]').prop('checked', checked)
-  })
-}
+    selector.find('input').change(ev => {
+      const el = $(ev.target);
+      const checked = el.prop('checked');
+      $('.table input[type=checkbox][name="selected_ids[]"]').prop('checked', checked);
+    });
+  },
+};
 
-export default {
-  initializeResourcesList,
-  initializeResourcesForm,
-  initializeSelectAll,
-}
+export default Initializer;

data/app/javascript/components/admin/MultiSelectedOperation.jsx

@@ -1,40 +1,64 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import _ from 'lodash'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 class MultiSelectedOperation extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
   componentDidMount() {
-    const $this = $(ReactDOM.findDOMNode(this))
-    $this.parent().addClass('c-multi-selected-btn')
+    // eslint-disable-next-line react/no-find-dom-node
+    const $this = $(ReactDOM.findDOMNode(this));
+    $this.parent().addClass('c-multi-selected-btn');
   }
 
   onSubmit(evt) {
-    if (this.props.operation === 'delete' && !confirm('Are you sure?')) return
+    if (this.props.operation === 'delete' && !confirm('Are you sure?')) return; // eslint-disable-line no-restricted-globals
 
-    const entries = $('.o-page .table input[name="selected_ids[]"]')
-    const ids = _.filter(entries, (e) => e.checked).map((e) => e.value)
-    if (ids.length === 0) return evt.preventDefault()
+    const entries = $('.o-page .table input[name="selected_ids[]"]');
+    const ids = _.filter(entries, e => e.checked).map(e => e.value);
+    if (ids.length === 0) return evt.preventDefault();
 
-    const form = $(this.formRef)
-    form.find('input[name=selected_ids]').val(ids.join(','))
-    form.find('[type=submit]').prop('disabled', true)
+    const form = $(this.formRef);
+    form.find('input[name=selected_ids]').val(ids.join(','));
+    form.find('[type=submit]').prop('disabled', true);
   }
 
   render() {
-    const btnClass = `button ${this.props.btn_style}`
-    const method = (this.props.operation === 'delete') ? 'delete' : 'post'
-    const csrf_token = $('meta[name=csrf-token]').attr('content')
+    const btnClass = `button ${this.props.btn_style}`;
+    const method = this.props.operation === 'delete' ? 'delete' : 'post';
+    const csrf_token = $('meta[name=csrf-token]').attr('content');
     return (
-      <form ref={ ref => { this.formRef = ref }} action={this.props.path} acceptCharset="UTF-8" method='post' className="c-reimport-doc-form" onSubmit={this.onSubmit.bind(this)} >
+      <form
+        ref={ref => {
+          this.formRef = ref;
+        }}
+        action={this.props.path}
+        acceptCharset="UTF-8"
+        method="post"
+        className="c-reimport-doc-form"
+        onSubmit={this.onSubmit}
+      >
         <input name="utf8" value="✓" type="hidden" />
         <input name="_method" value={method} type="hidden" />
         <input name="authenticity_token" value={csrf_token} type="hidden" />
         <input name="selected_ids" type="hidden" />
-        <input name="with_materials" type="hidden" className="c-reimport-with-materials__field"/>
+        <input name="with_materials" type="hidden" className="c-reimport-with-materials__field" />
         <input value={this.props.text} className={btnClass} type="submit" />
       </form>
-    )
+    );
   }
 }
 
-export default MultiSelectedOperation
+MultiSelectedOperation.propTypes = {
+  operation: PropTypes.string,
+  btn_style: PropTypes.string,
+  path: PropTypes.string,
+  text: PropTypes.string,
+};
+
+export default MultiSelectedOperation;

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

@@ -1,93 +1,103 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import _ from 'lodash'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
 // eslint-disable-next-line no-unused-vars
-import AssociationPickerItem from './AssociationPickerItem'
-import AssociationPickerWindow from './AssociationPickerWindow'
+import AssociationPickerItem from './AssociationPickerItem';
+import AssociationPickerWindow from './AssociationPickerWindow';
 // eslint-disable-next-line no-unused-vars
-import PickerButton from '../picker/PickerButton'
-import pickerModal from '../picker/pickerModal'
-import pickerWindowWrapper from '../picker/pickerWindowWrapper'
+import PickerButton from '../picker/PickerButton';
+import pickerModal from '../picker/pickerModal';
+import pickerWindowWrapper from '../picker/pickerWindowWrapper';
+import { Foundation } from 'foundation-sites';
+import $ from 'jquery';
 
 class AssociationPicker extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
     this.state = {
       items: this.props.items || [],
-    }
+    };
   }
 
   get jqmodal() {
-    return $(this.modal)
+    return $(this.modal);
   }
 
   componentDidMount() {
+    Foundation.addToJquery($);
     // eslint-disable-next-line no-undef
-    pickerModal.call(this)
+    pickerModal.call(this);
   }
 
   onClickSelect() {
     // eslint-disable-next-line no-undef
-    const pickerComponent = pickerWindowWrapper(AssociationPickerWindow, 'lcms_engine_admin_association_picker_path')
-    const picker = React.createElement(pickerComponent, {
-      association: this.props.association,
-      allowCreate: this.props.allow_create,
-      allowMultiple: this.props.allow_multiple,
-      onClickDone: this.closeModal.bind(this),
-      onSelectItem: this.selectItem.bind(this),
-      selectedItems: this.state.items,
-    }, null)
-    ReactDOM.render(picker, this.modal)
-    this.jqmodal.foundation('open')
+    const pickerComponent = pickerWindowWrapper(AssociationPickerWindow, 'lcms_engine_admin_association_picker_path');
+    const picker = React.createElement(
+      pickerComponent,
+      {
+        association: this.props.association,
+        allowCreate: this.props.allow_create,
+        allowMultiple: this.props.allow_multiple,
+        onClickDone: this.closeModal.bind(this),
+        onSelectItem: this.selectItem.bind(this),
+        selectedItems: this.state.items,
+      },
+      null
+    );
+    ReactDOM.render(picker, this.modal);
+    this.jqmodal.foundation('open');
   }
 
   selectItem(item, operation) {
     if (!this.props.allow_multiple) {
-      this.closeModal()
+      this.closeModal();
     }
-    operation === 'added' ? this.addItem(item) : this.removeItem(item)
+    operation === 'added' ? this.addItem(item) : this.removeItem(item);
   }
 
   closeModal() {
-    this.jqmodal.foundation('close')
+    this.jqmodal.foundation('close');
   }
 
   addItem(item) {
-    const newItems = this.props.allow_multiple ?
-      [...this.state.items, item] :
-      [item]
+    const newItems = this.props.allow_multiple ? [...this.state.items, item] : [item];
 
     this.setState({
       ...this.state,
       items: newItems,
-    })
+    });
   }
 
   removeItem(item) {
     this.setState({
       ...this.state,
       items: _.filter(this.state.items, r => r.id !== item.id),
-    })
+    });
   }
 
   render() {
-    const items = this.state.items.map((item) => {
-      return <AssociationPickerItem
-        key={item.id}
-        name={this.props.name}
-        createName={this.props.create_name}
-        association={this.props.association}
-        allowMultiple={this.props.allow_multiple}
-        item={item}
-        // eslint-disable-next-line react/jsx-no-bind
-        onClickClose={() => this.removeItem(item)}
-      />
-    })
+    const items = this.state.items.map(item => {
+      return (
+        <AssociationPickerItem
+          key={item.id}
+          name={this.props.name}
+          createName={this.props.create_name}
+          association={this.props.association}
+          allowMultiple={this.props.allow_multiple}
+          item={item}
+          // eslint-disable-next-line react/jsx-no-bind
+          onClickClose={() => this.removeItem(item)}
+        />
+      );
+    });
 
-    const blankInput = this.props.allow_multiple ?
-      <input type="hidden" name={`${this.props.name}[]`} value="" /> :
+    const blankInput = this.props.allow_multiple ? (
+      <input type="hidden" name={`${this.props.name}[]`} value="" />
+    ) : (
       <span className="hide" />
+    );
 
     return (
       <PickerButton
@@ -96,10 +106,20 @@ class AssociationPicker extends React.Component {
         // eslint-disable-next-line react/jsx-no-bind
         onClick={this.onClickSelect.bind(this)}
         // eslint-disable-next-line react/jsx-no-bind
-        onRef={m => this.modal = m}
+        onRef={m => (this.modal = m)}
       />
-    )
+    );
   }
 }
 
-export default AssociationPicker
+AssociationPicker.propTypes = {
+  item: PropTypes.object,
+  items: PropTypes.array,
+  association: PropTypes.string,
+  create_name: PropTypes.string,
+  allow_create: PropTypes.bool,
+  allow_multiple: PropTypes.bool,
+  name: PropTypes.string,
+};
+
+export default AssociationPicker;

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

@@ -1,15 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 // eslint-disable-next-line no-unused-vars
 function AssociationPickerItem(props) {
-  let input
+  let input;
 
   if (props.item._create) {
-    input = <input type="hidden" name={`${props.createName}[]`} value={props.item.name} />
+    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} />
+    input = <input type="hidden" name={`${props.name}[]`} value={props.item.id} />;
   } else {
-    input = <input type="hidden" name={props.name} value={props.item.id} />
+    input = <input type="hidden" name={props.name} value={props.item.id} />;
   }
 
   return (
@@ -17,10 +18,20 @@ function AssociationPickerItem(props) {
       {input}
       <div className="o-assocpicker-title">
         {props.item.name}
-        <span className="o-assocpicker-close" onClick={props.onClickClose}>×</span>
+        <span className="o-assocpicker-close" onClick={props.onClickClose}>
+          ×
+        </span>
       </div>
     </div>
-  )
+  );
 }
 
-export default AssociationPickerItem
+AssociationPickerItem.propTypes = {
+  item: PropTypes.object,
+  createName: PropTypes.string,
+  allowMultiple: PropTypes.bool,
+  name: PropTypes.string,
+  onClickClose: PropTypes.func,
+};
+
+export default AssociationPickerItem;