@pie-element/complex-rubric 0.0.2-next.4424

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

@@ -0,0 +1,48 @@
+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,38 @@
+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,117 @@
+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 PropTypes from 'prop-types';
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+});
+
+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, animationsDisabled } = this.props;
+
+    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={index === 1 ? `${index} PT` : `${index} PTS`}
+                  />
+                  <ListItemText
+                    primary={
+                      <div dangerouslySetInnerHTML={{ __html: desc }} />
+                    }
+                  />
+                </ListItem>
+                {sampleAnswers && sampleAnswers[index] && (
+                  <ListItem key={`S${index}`}>
+                    <ListItemText
+                      className={classes.rubricCol}
+                      style={{marginLeft: '20px'}}
+                      primary={'Sample Answer'}
+                    />
+                    <ListItemText
+                      primary={
+                        <div 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 = () => ({
+  rubricCol: {
+    flex: '0 1 auto',
+    minWidth: 'fit-content'
+  },
+});
+
+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/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

@@ -0,0 +1,22 @@
+{
+  "name": "@pie-element/complex-rubric-configure",
+  "private": true,
+  "version": "0.0.1",
+  "description": "Complex Rubric authoring view",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "author": "Pie Framework Authors",
+  "dependencies": {
+    "@pie-framework/pie-configure-events": "^1.2.0",
+    "@pie-element/multi-trait-rubric": "^2.0.7",
+    "@pie-element/rubric": "^2.0.7",
+    "@pie-lib/rubric": "^0.4.39",
+    "@material-ui/core": "^3.9.2",
+    "debug": "^4.1.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "prop-types": "^15.6.2",
+    "lodash": "^4.17.15"
+  },
+  "license": "ISC"
+}

package/configure/src/__tests__/__snapshots__/main.test.jsx.snap

@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Main snapshot renders 1`] = `
+<div>
+  <div>
+    <div>
+      <RadioGroup
+        aria-label="rubric-type"
+        defaultValue="simpleRubric"
+        name="rubricType"
+        onChange={[Function]}
+        value="simpleRubric"
+      >
+        <WithStyles(WithFormControlContext(FormControlLabel))
+          checked={true}
+          control={<WithStyles(Radio) />}
+          label="Simple Rubric"
+          value="simpleRubric"
+        />
+        <WithStyles(WithFormControlContext(FormControlLabel))
+          checked={false}
+          control={<WithStyles(Radio) />}
+          label="Multi Trait Rubric"
+          value="multiTraitRubric"
+        />
+      </RadioGroup>
+    </div>
+    <div>
+      <rubric-configure
+        id="simpleRubric"
+        key="simple-rubric"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Main snapshot renders multi trait rubric 1`] = `
+<div>
+  <div>
+    <div>
+      <RadioGroup
+        aria-label="rubric-type"
+        defaultValue="simpleRubric"
+        name="rubricType"
+        onChange={[Function]}
+        value="multiTraitRubric"
+      >
+        <WithStyles(WithFormControlContext(FormControlLabel))
+          checked={false}
+          control={<WithStyles(Radio) />}
+          label="Simple Rubric"
+          value="simpleRubric"
+        />
+        <WithStyles(WithFormControlContext(FormControlLabel))
+          checked={true}
+          control={<WithStyles(Radio) />}
+          label="Multi Trait Rubric"
+          value="multiTraitRubric"
+        />
+      </RadioGroup>
+    </div>
+    <div>
+      <multi-trait-rubric-configure
+        id="multiTraitRubric"
+        key="multi-trait-rubric"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Main snapshot renders simple rubric 1`] = `
+<div>
+  <div>
+    <div>
+      <RadioGroup
+        aria-label="rubric-type"
+        defaultValue="simpleRubric"
+        name="rubricType"
+        onChange={[Function]}
+        value="simpleRubric"
+      >
+        <WithStyles(WithFormControlContext(FormControlLabel))
+          checked={true}
+          control={<WithStyles(Radio) />}
+          label="Simple Rubric"
+          value="simpleRubric"
+        />
+        <WithStyles(WithFormControlContext(FormControlLabel))
+          checked={false}
+          control={<WithStyles(Radio) />}
+          label="Multi Trait Rubric"
+          value="multiTraitRubric"
+        />
+      </RadioGroup>
+    </div>
+    <div>
+      <rubric-configure
+        id="simpleRubric"
+        key="simple-rubric"
+      />
+    </div>
+  </div>
+</div>
+`;

package/configure/src/__tests__/index.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import defaults from '../defaults';
+
+jest.mock('@pie-lib/config-ui', () => ({
+  settings: {
+    Panel: props => <div {...props} />,
+    toggle: jest.fn(),
+    radio: jest.fn()
+  }
+}));
+
+const model = () => ({ ...defaults.model });
+
+jest.mock('react-dom', () => ({
+  render: jest.fn()
+}));
+
+describe('index', () => {
+  let Def;
+  let el;
+  let onModelChanged = jest.fn();
+  let initialModel = model();
+
+  beforeAll(() => {
+    Def = require('../index').default;
+  });
+
+  beforeEach(() => {
+    el = new Def();
+    el.model = initialModel;
+    el.onModelChanged = onModelChanged;
+  });
+
+  describe('set model', () => {
+    it('calls ReactDOM.render', () => {
+      expect(ReactDOM.render).toHaveBeenCalled();
+    });
+  });
+});

package/configure/src/__tests__/main.test.jsx

@@ -0,0 +1,104 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Main } from '@pie-element/complex-rubric-configure/src/main';
+
+import defaults from '../defaults';
+
+jest.mock('@pie-lib/rubric', () => ({
+  RUBRIC_TYPES: {
+    SIMPLE_RUBRIC: 'simpleRubric',
+    MULTI_TRAIT_RUBRIC: 'multiTraitRubric'
+  }
+}));
+
+const model = (extras) => ({
+  id: '1',
+  element: 'complex-rubric',
+  ...defaults.model,
+  ...extras
+});
+
+describe('Main', () => {
+  let initialModel = model();
+  let onModelChanged = jest.fn();
+  let onConfigurationChanged = jest.fn();
+
+  const wrapper = extras => {
+    const defaults = {
+      onModelChanged,
+      onConfigurationChanged,
+      classes: {},
+      model: model(extras),
+      configuration: {
+        multiTraitrubric: {
+          showStandards: {
+            settings: false,
+            label: 'Show Standards',
+            enabled: false
+          },
+          showExcludeZero: {
+            settings: true,
+            label: 'Exclude Zero',
+            enabled: false
+          },
+          showScorePointLabels: {
+            settings: true,
+            label: 'Show Score Point Labels',
+            enabled: false
+          },
+          showLevelTagInput: {
+            settings: true,
+            label: 'Show Level Tag Input',
+            enabled: false
+          },
+          showDescription: {
+            settings: true,
+            label: 'Show Description',
+            enabled: false
+          },
+          showVisibleToStudent: {
+            settings: true,
+            label: 'Visible to Student',
+            enabled: false
+          },
+          showHalfScoring: {
+            settings: true,
+            label: 'Half Scoring',
+            enabled: false
+          },
+          dragAndDrop: {
+            settings: false,
+            label: 'Enable Drag and Drop',
+            enabled: false,
+          }
+        }
+      },
+    };
+    const props = { ...defaults };
+
+    return shallow(<Main {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders simple rubric', () => {
+      const w = wrapper({ rubricType: 'simpleRubric' });
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders multi trait rubric', () => {
+      const w = wrapper({ rubricType: 'multiTraitRubric' });
+      expect(w).toMatchSnapshot();
+    });
+
+    it('calls onModelChange when changing rubric type', () => {
+      const w = wrapper();
+      w.instance().onChangeRubricType({ target: { value: 'multiTraitRubric' } });
+      expect(onModelChanged).toBeCalledWith({ ...initialModel, rubricType: 'multiTraitRubric' });
+    });
+  });
+});

package/configure/src/defaults.js

@@ -0,0 +1,122 @@
+const multiTraitDefaultModel = {
+  visibleToStudent: true,
+  halfScoring: false,
+  pointLabels: true,
+  description: false,
+  standards: false,
+  scales: [],
+  excludeZero: false,
+};
+
+const rubricDefaultModel = {
+  points: ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'],
+  sampleAnswers: [null, 'just right', 'not left', null],
+  maxPoints: 4,
+  excludeZero: false
+};
+
+const multiTraitDefaultConfiguration = {
+  settingsPanelDisabled: true,
+  excludeZeroDialogBoxContent: {
+    title: 'Exclude 0 (Zero) from Score Point Values.',
+    text: `<div>
+        You are about to exclude 0 from score point values.
+        <br/>
+        Some of the existing data has to be changed.
+        <br/>
+        Please choose if you want to:
+        <ul>
+          <li>
+            shift Labels and Descriptions to the left
+          </li>
+          <li>
+            remove 0 column with its Label and Description
+          </li>
+        </ul>
+      </div>`
+  },
+  includeZeroDialogBoxContent: {
+    title: 'Include 0 (Zero) in Score Point Values.',
+    text: `<div>
+        You are about to include 0 in score point values.
+        <br/>
+        Some of the existing data has to be changed.
+        <br/>
+        Please choose if you want to:
+        <ul>
+          <li>
+            shift Labels and Descriptions to the right
+          </li>
+          <li>
+            add 0 column with empty Label and Descriptions
+          </li>
+        </ul>
+      </div>`
+  },
+  deleteTraitDialogBoxContent: {
+    title: 'Delete Trait',
+    text: 'Are you sure you want to delete this trait?'
+  },
+  deleteScaleDialogBoxContent: {
+    title: 'Delete Scale',
+    text: 'Are you sure you want to delete this scale?'
+  },
+  maxPointsDialogBoxContent: {
+    title: 'Decreasing Max Points.',
+    text: ` You are about to decrease max score point value.
+        <br/>
+        All the Labels and Descriptions for scores above Max Point will be deleted.`
+  },
+  spellCheck: {
+    label: 'Spellcheck',
+    settings: false,
+    enabled: true
+  },
+  showExcludeZero: {
+    settings: true,
+    label: 'Exclude Zero',
+  },
+  showScorePointLabels: {
+    settings: true,
+    label: 'Show Score Point Labels',
+  },
+  showDescription: {
+    settings: true,
+    label: 'Show Description',
+  },
+  showVisibleToStudent: {
+    settings: true,
+    label: 'Visible to Student',
+  },
+  showHalfScoring: {
+    settings: true,
+    label: 'Half Scoring',
+  },
+  width: '900px',
+  // these should not be set to true (should not be used) for now
+  showStandards: {
+    settings: false,
+    label: 'Show Standards',
+  },
+  showLevelTagInput: {
+    settings: false,
+    label: 'Show Level Tag Input',
+    enabled: false
+  },
+  dragAndDrop: {
+    settings: true,
+    label: 'Enable Drag and Drop',
+    enabled: false,
+  }
+};
+
+export default {
+  model: {
+    rubricType: 'simpleRubric',
+    rubrics: { simpleRubric: rubricDefaultModel, multiTraitRubric: multiTraitDefaultModel }
+  },
+  configuration: {
+    multiTraitRubric: multiTraitDefaultConfiguration
+  }
+};
+