@pie-element/complex-rubric 2.0.2-next.13 → 2.0.2-next.15

package/configure/node_modules/@pie-element/rubric/src/__tests__/rubric-view.test.jsx

@@ -0,0 +1,46 @@
+import { shallow, mount } from 'enzyme';
+import React from 'react';
+import Rubric from '../main';
+import Link from '@material-ui/core/Link';
+
+describe('rubric viewer', () => {
+  const wrapper = (extras) => {
+    const props = {
+      value: {
+        points: ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'],
+        sampleAnswers: [null, 'just right', 'not left', null],
+        excludeZero: false,
+        ...extras,
+      },
+    };
+
+    return mount(<Rubric {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('expanded snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      w.find(Link).simulate('click');
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('exclude zeros', () => {
+    it('renders correctly with exluded zeroes', () => {
+      let w = wrapper({ excludeZero: true });
+      w.find(Link).simulate('click');
+      expect(w.find('li').length).toEqual(5);
+
+      w = wrapper({ excludeZero: false });
+      w.find(Link).simulate('click');
+      expect(w.find('li').length).toEqual(6);
+    });
+  });
+});

package/configure/node_modules/@pie-element/rubric/src/index.js

@@ -0,0 +1,34 @@
+import Rubric from './main';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+
+export default class RubricRender extends HTMLElement {
+  constructor() {
+    super();
+    debug.log('constructor called');
+    this.onModelChanged = this.onModelChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = s;
+    this._render();
+  }
+
+  onModelChanged(m) {
+    this._model = m;
+    this._render();
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    if (this._model) {
+      const el = <Rubric value={this._model} />;
+
+      ReactDOM.render(el, this);
+    }
+  }
+}

package/configure/node_modules/@pie-element/rubric/src/main.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import ListItem from '@material-ui/core/ListItem';
+import List from '@material-ui/core/List';
+import ListItemText from '@material-ui/core/ListItemText';
+import Link from '@material-ui/core/Link';
+import Collapse from '@material-ui/core/Collapse';
+import { color } from '@pie-lib/pie-toolbox/render-ui';
+import PropTypes from 'prop-types';
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  animationsDisabled: PropTypes.bool,
+});
+
+class Rubric extends React.Component {
+  dudUrl = 'javascript:;';
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      rubricOpen: false,
+      linkPrefix: 'Show',
+    };
+    this.toggleRubric = this.toggleRubric.bind(this);
+  }
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    animationsDisabled: PropTypes.bool,
+    value: RubricType,
+  };
+
+  toggleRubric() {
+    this.setState({ rubricOpen: !this.state.rubricOpen });
+    this.setState({ linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide' });
+  }
+
+  shouldRenderPoint = (index, value) => {
+    if (!value.excludeZero) {
+      return true;
+    } else {
+      return index !== 0;
+    }
+  };
+
+  render() {
+    const { value, classes } = this.props;
+    let { animationsDisabled } = this.props;
+    animationsDisabled = animationsDisabled || value.animationsDisabled;
+
+    if (value && value.points) {
+      const { points, sampleAnswers } = value;
+
+      const rubricList = (
+        <List component="nav">
+          {points
+            .slice(0)
+            .reverse()
+            .map((desc, index) => {
+              index = points.length - index - 1;
+              return (
+                this.shouldRenderPoint(index, value) && (
+                  <React.Fragment key={index}>
+                    <ListItem key={`P${index}`}>
+                      <ListItemText
+                        className={classes.rubricCol}
+                        primary={<div className={classes.text}>{index === 1 ? `${index} PT` : `${index} PTS`}</div>}
+                      />
+
+                      <ListItemText
+                        primary={<div className={classes.text} dangerouslySetInnerHTML={{ __html: desc }} />}
+                      />
+                    </ListItem>
+
+                    {sampleAnswers && sampleAnswers[index] && (
+                      <ListItem key={`S${index}`}>
+                        <ListItemText
+                          className={classes.rubricCol}
+                          style={{ marginLeft: '20px' }}
+                          primary={<div className={classes.text}>Sample Answer</div>}
+                        />
+
+                        <ListItemText
+                          primary={
+                            <div className={classes.text} dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
+                          }
+                        />
+                      </ListItem>
+                    )}
+                  </React.Fragment>
+                )
+              );
+            })}
+        </List>
+      );
+
+      return (
+        <div className={classes.root}>
+          {!animationsDisabled ? (
+            <React.Fragment>
+              <Link href={this.dudUrl} onClick={this.toggleRubric}>
+                {this.state.linkPrefix} Rubric
+              </Link>
+              <Collapse in={this.state.rubricOpen} timeout="auto">
+                {rubricList}
+              </Collapse>
+            </React.Fragment>
+          ) : (
+            rubricList
+          )}
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+const styles = () => ({
+  root: {
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
+  rubricCol: {
+    flex: '0 1 auto',
+    minWidth: 'fit-content',
+  },
+  text: {
+    color: color.text(),
+  },
+});
+
+export default withStyles(styles)(Rubric);

package/configure/node_modules/@pie-element/rubric/src/print.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debounce from 'lodash/debounce';
+import Main from './main';
+import { renderMath } from '@pie-lib/pie-toolbox/math-rendering';
+import debug from 'debug';
+
+const log = debug('pie-element:rubric:print');
+
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
+
+  if (!instr) {
+    return {};
+  }
+
+  model.value = { ...model };
+  model.mode = 'evaluate';
+  model.animationsDisabled = true;
+
+  return model;
+};
+
+export default class RubricPrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._rerender = debounce(
+      () => {
+        if (this._model && this._session) {
+          const printModel = preparePrintModel(this._model, this._options);
+
+          const element =
+            this._options &&
+            React.createElement(Main, {
+              ...printModel,
+            });
+
+          ReactDOM.render(element, this, () => {
+            log('render complete - render math');
+            renderMath(this);
+          });
+        } else {
+          log('skip');
+        }
+      },
+      50,
+      { leading: false, trailing: true },
+    );
+  }
+  set options(o) {
+    this._options = o;
+  }
+
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+
+  connectedCallback() {}
+}

package/configure/package.json

@@ -8,8 +8,8 @@
   "author": "Pie Framework Authors",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.0.1",
-    "@pie-element/rubric": "^3.0.1",
+    "@pie-element/multi-trait-rubric": "^3.0.2-next.14",
+    "@pie-element/rubric": "^3.0.2-next.14",
     "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/config-ui": "^11.9.24",
     "@pie-lib/editable-html": "^11.1.1",

package/controller/package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.0.12-next.2",
+    "@pie-lib/pie-toolbox": "1.0.12-next.3",
     "lodash": "^4.17.15"
   },
   "author": "",

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pie-element/complex-rubric",
   "repository": "pie-framework/pie-elements",
-  "version": "2.0.2-next.13+d6a61a0f9",
+  "version": "2.0.2-next.15+eafc185e7",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.0.2-next.13+d6a61a0f9",
-    "@pie-element/rubric": "^3.0.2-next.13+d6a61a0f9",
+    "@pie-element/multi-trait-rubric": "^3.0.2-next.14",
+    "@pie-element/rubric": "^3.0.2-next.14",
     "@pie-framework/pie-player-events": "^0.1.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "d6a61a0f9ad55a236c699a727e83dcf6951bb45b",
+  "gitHead": "eafc185e7bbe508f93f5c2e342354cbb8ee3c5c6",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },