@pie-element/complex-rubric 2.10.1-next.1 → 2.10.1-next.11

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

@@ -0,0 +1,427 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import InputLabel from '@material-ui/core/InputLabel';
+import Select from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
+import MenuItem from '@material-ui/core/MenuItem';
+import times from 'lodash/times';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import grey from '@material-ui/core/colors/grey';
+import Typography from '@material-ui/core/Typography';
+import DragIndicator from '@material-ui/icons/DragIndicator';
+import EditableHtml from '@pie-lib/pie-toolbox/editable-html';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import debug from 'debug';
+import takeRight from 'lodash/takeRight';
+import PointMenu from './point-menu';
+
+import range from 'lodash/range';
+import { InputContainer } from '@pie-lib/pie-toolbox/config-ui';
+
+const log = debug('pie-lib:rubric:authoring');
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  maxPoints: PropTypes.number,
+  rubriclessInstruction: PropTypes.string,
+});
+
+const MaxPoints = withStyles((theme) => ({
+  formControl: {
+    minWidth: '120px',
+    margin: theme.spacing.unit,
+  },
+}))((props) => {
+  const { value, onChange, max, classes } = props;
+
+  return (
+    <FormControl className={classes.formControl} variant="outlined">
+      <InputLabel width={100} htmlFor="...">
+        Max Points
+      </InputLabel>
+      <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
+        {range(1, max + 1).map((v) => (
+          <MenuItem key={`${v}`} value={v}>
+            {v}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+});
+
+// if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
+// if the value is '', the Sample Answer input field will be empty
+const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
+
+export const PointConfig = withStyles((theme) => ({
+  pointConfig: {},
+  row: {
+    display: 'flex',
+    width: '100%',
+    position: 'relative',
+  },
+  editor: {
+    width: '100%',
+    backgroundColor: `${theme.palette.common.white} !important`,
+  },
+  dragIndicator: {
+    paddingTop: theme.spacing.unit,
+    color: grey[500],
+  },
+  pointsLabel: {
+    color: grey[500],
+    paddingBottom: theme.spacing.unit,
+    textTransform: 'uppercase',
+  },
+  sampleAnswersEditor: {
+    paddingLeft: theme.spacing.unit * 3,
+  },
+  pointMenu: {
+    position: 'absolute',
+    right: 0,
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingLeft: theme.spacing.unit * 3,
+    paddingTop: theme.spacing.unit,
+  },
+}))((props) => {
+  const { points, content, classes, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {}, excludeZero, imageSupport = {}, } = props;
+  const pointsCount = excludeZero ? points + 1 : points;
+  const pointsLabel = `${pointsCount} ${pointsCount <= 1 ? 'pt' : 'pts'}`;
+  const showSampleAnswer = checkSampleAnswer(sampleAnswer);
+
+  return (
+    <div className={classes.pointConfig}>
+      <Typography variant="overline" className={classes.pointsLabel}>
+        {pointsLabel}
+      </Typography>
+
+      <div className={classes.row}>
+        <DragIndicator className={classes.dragIndicator} />
+        <EditableHtml
+          className={classes.editor}
+          error={error}
+          pluginProps={pluginOpts}
+          markup={content}
+          onChange={props.onChange}
+          mathMlOptions={mathMlOptions}
+          imageSupport={imageSupport}
+        />
+        <PointMenu
+          classes={{
+            icon: classes.pointMenu,
+          }}
+          showSampleAnswer={showSampleAnswer}
+          onChange={props.onMenuChange}
+        />
+      </div>
+      {error && <div className={classes.errorText}>{error}</div>}
+      {!showSampleAnswer && (
+        <div className={classes.sampleAnswersEditor}>
+          <Typography variant="overline" className={classes.dragIndicator}>
+            Sample Response
+          </Typography>
+          <EditableHtml
+            className={classes.editor}
+            markup={sampleAnswer}
+            pluginProps={pluginOpts}
+            onChange={props.onSampleChange}
+            mathMlOptions={mathMlOptions}
+            imageSupport={imageSupport}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export class RawAuthoring extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    value: RubricType,
+    config: PropTypes.object,
+    pluginOpts: PropTypes.object,
+    rubricless: PropTypes.bool,
+    onChange: PropTypes.func,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+  };
+
+  static defaultProps = {};
+
+  dragEnd = (result) => {
+    if (!result.destination) {
+      return;
+    }
+
+    const { value, onChange } = this.props;
+
+    const points = reorder(value.points, result.source.index, result.destination.index);
+    const sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
+
+    onChange({ ...value, points, sampleAnswers });
+  };
+
+  changeRubriclessInstruction = (input) => {
+    const { value, onChange } = this.props;
+    onChange({ ...value, rubriclessInstruction: input });
+  };
+
+  changeMaxPoints = (maxPoints) => {
+    const { value, onChange } = this.props;
+
+    onChange({ ...value, maxPoints });
+  };
+
+  changeContent = (index, content, type) => {
+    // type could be 'points' or 'sampleAnswers'
+    log(`changeModel[${type}]:`, index, content);
+
+    if (type !== 'points' && type !== 'sampleAnswers') {
+      return;
+    }
+
+    const { value, onChange } = this.props;
+    const items = value[type] && Array.from(value[type]);
+
+    items.splice(index, 1, content);
+    log(`changeModel[${type}]:`, items);
+
+    onChange({ ...value, [type]: items });
+  };
+
+  excludeZeros = () => {
+    const { value, onChange } = this.props;
+
+    onChange({ ...value, excludeZero: !value.excludeZero });
+  };
+
+  onPointMenuChange = (index, clickedItem) => {
+    if (clickedItem === 'sample') {
+      const { value } = this.props;
+      const sampleAnswers = Array.from(value.sampleAnswers || []);
+
+      if (checkSampleAnswer(sampleAnswers[index])) {
+        // an empty string will display an empty Sample Answer input field
+        this.changeContent(index, '', 'sampleAnswers');
+      } else {
+        // when the content is null or 'null', the Sample Answer input field will not be displayed
+        this.changeContent(index, null, 'sampleAnswers');
+      }
+    }
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      value,
+      mathMlOptions = {},
+      config = {},
+      rubricless = false,
+      pluginOpts = {},
+      imageSupport = {},
+    } = this.props;
+    let {
+      excludeZeroEnabled = true,
+      maxPointsEnabled = true,
+      errors = {},
+      rubriclessInstructionEnabled = false,
+      maxPoints = 10,
+    } = value || {};
+    // rubric will contain a max value for maxPoints
+    const { rubriclessInstruction = {}, maxMaxPoints = 10 } = config || {};
+    const { pointsDescriptorsErrors } = errors || {};
+    if (value && Number.isFinite(value.maxPoints)) {
+      // eslint-disable-next-line no-console
+      console.warn('maxPoints is deprecated - remove from model');
+    }
+
+    // for rubric value is computed based on points
+    const maxPointsValue = maxPoints;
+
+    return (
+      <div className={classNames(classes.class, className)}>
+        <Typography variant="h5" className={classes.rubricTitle}>
+          Rubric
+        </Typography>
+        <FormGroup row>
+          {maxPointsEnabled && (
+            <MaxPoints
+              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
+              value={maxPointsValue}
+              onChange={this.changeMaxPoints}
+              pluginOpts={pluginOpts}
+              imageSupport={imageSupport}
+            />
+          )}
+          {excludeZeroEnabled && (
+            <FormControlLabel
+              label="Exclude zeros"
+              control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
+            />
+          )}
+        </FormGroup>
+
+        {rubriclessInstructionEnabled && rubricless && (
+          <InputContainer label={rubriclessInstruction.label} className={classes.inputContainer}>
+            <EditableHtml
+              className={classes.input}
+              markup={value.rubriclessInstruction || ''}
+              onChange={this.changeRubriclessInstruction}
+              pluginProps={pluginOpts}
+              nonEmpty={false}
+              disableUnderline
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+              imageSupport={imageSupport}
+            />
+          </InputContainer>
+        )}
+
+        <div className={rubricless ? classes.rubricless : classes.container}>
+          <DragDropContext onDragEnd={this.dragEnd}>
+            <Droppable droppableId="droppable">
+              {(provided) => (
+                <div {...provided.droppableProps} ref={provided.innerRef}>
+                  {value.points.map(
+                    (p, index) => {
+                      return                         (
+                          <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
+                            {(provided) => (
+                                <div
+                                    className={classes.configHolder}
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
+                                >
+                                  <PointConfig
+                                      points={value.points.length - 1 - index}
+                                      content={p}
+                                      error={
+                                          pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index]
+                                      }
+                                      sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
+                                      onChange={(content) => this.changeContent(index, content, 'points')}
+                                      onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
+                                      onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
+                                      mathMlOptions={mathMlOptions}
+                                      pluginOpts={pluginOpts}
+                                      imageSupport={imageSupport}
+                                      excludeZero={value.excludeZero}
+                                  />
+                                </div>
+                            )}
+                          </Draggable>
+                      );
+                    },
+                  )}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  container: {
+    backgroundColor: grey[200],
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: grey[300],
+    padding: theme.spacing.unit * 2,
+    margin: theme.spacing.unit,
+  },
+  inputContainer: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+  },
+  rubricless: {
+    display: 'none',
+  },
+  configHolder: {
+    paddingTop: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+  },
+  rubricTitle: {
+    paddingLeft: theme.spacing.unit,
+    margin: theme.spacing.unit,
+  },
+});
+
+const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
+
+const Reverse = (props) => {
+  const { rubricless = false, config = {}, pluginOpts = {}, imageSupport = {} } = props || {};
+  const points = Array.from(props.value.points || []).reverse();
+  let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
+
+  if (points.length > sampleAnswers.length) {
+    sampleAnswers = times(points.length - sampleAnswers.length)
+      .map(() => null)
+      .concat(sampleAnswers);
+  }
+
+  const value = { ...props.value, points, sampleAnswers };
+
+  const onChange = (value) => {
+    props.onChange({
+      ...value,
+      points: Array.from(value.points || []).reverse(),
+      sampleAnswers: Array.from(value.sampleAnswers || []).reverse(),
+    });
+  };
+
+  return (
+    <StyledRawAuthoring
+      value={value}
+      config={config}
+      onChange={onChange}
+      rubricless={rubricless}
+      pluginOpts={pluginOpts}
+      imageSupport={imageSupport}
+    />
+  );
+};
+
+Reverse.propTypes = {
+  value: RubricType,
+  config: PropTypes.object,
+  pluginOpts: PropTypes.object,
+  rubricless: PropTypes.bool,
+  getIndex: PropTypes.func,
+  onChange: PropTypes.func,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+};
+
+export default Reverse;

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

@@ -0,0 +1,9 @@
+import Authoring from './authoring';
+
+const RUBRIC_TYPES = {
+  SIMPLE_RUBRIC: 'simpleRubric',
+  MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
+  RUBRICLESS: 'rubricless',
+};
+
+export { Authoring, RUBRIC_TYPES };

package/configure/node_modules/@pie-element/rubric/configure/src/pie-toolbox-rubric/point-menu.jsx

@@ -0,0 +1,94 @@
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+import IconButton from '@material-ui/core/IconButton';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export class IconMenu extends React.Component {
+  static propTypes = {
+    opts: PropTypes.object,
+    onClick: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: undefined,
+      open: false,
+    };
+  }
+
+  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
+
+  handleRequestClose = () => this.setState({ open: false });
+
+  render() {
+    const { opts, onClick, classes } = this.props;
+    const { open, anchorEl } = this.state;
+    const keys = Object.keys(opts) || [];
+
+    const handleMenuClick = (key) => () => {
+      onClick(key);
+      this.handleRequestClose();
+    };
+
+    const iconColor = open ? 'inherit' : 'disabled';
+
+    return (
+      <div>
+        <div onClick={this.handleClick}>
+          <IconButton className={classes.icon}>
+            {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}
+          </IconButton>
+        </div>
+        <Menu
+          id="point-menu"
+          anchorEl={anchorEl}
+          open={open}
+          onClose={this.handleRequestClose}
+          style={{ transform: 'translate(-15px, -15px)' }}
+          transformOrigin={{
+            vertical: 'center',
+            horizontal: 'right',
+          }}
+        >
+          {keys.map((k, index) => (
+            <MenuItem key={index} onClick={handleMenuClick(k)}>
+              {opts[k]}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default class PointMenu extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    showSampleAnswer: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    classes: {},
+  };
+
+  render() {
+    const { onChange, classes, showSampleAnswer } = this.props;
+    const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
+
+    return (
+      <IconMenu
+        onClick={(key) => onChange(key)}
+        opts={{
+          sample: sampleText,
+        }}
+        classes={classes}
+      />
+    );
+  }
+}

package/configure/node_modules/@pie-element/rubric/controller/CHANGELOG.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "fix",
+    "scope": null,
+    "subject": "bump all packages to avoid tag conflict",
+    "merge": null,
+    "header": "fix: bump all packages to avoid tag conflict",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "d9ec9a8689f0a391594b5e2f4ea958c6dc9f6d7b",
+    "gitTags": " (develop)",
+    "committerDate": "2020-04-10 20:01:37 +0100",
+    "isTagged": true,
+    "tag": "@pie-element/rubric-controller@1.1.1"
+  }
+]