@pie-lib/rubric 0.8.32-next.0 → 0.8.32-next.1595

package/src/authoring.jsx

@@ -21,6 +21,8 @@ import takeRight from 'lodash/takeRight';
 import PointMenu from './point-menu';
 
 import range from 'lodash/range';
+import { InputContainer } from '@pie-lib/config-ui';
+
 const log = debug('pie-lib:rubric:authoring');
 
 const reorder = (list, startIndex, endIndex) => {
@@ -37,6 +39,7 @@ export const RubricType = PropTypes.shape({
   points: PropTypes.arrayOf(PropTypes.string),
   sampleAnswers: PropTypes.arrayOf(PropTypes.string),
   maxPoints: PropTypes.number,
+  rubriclessInstruction: PropTypes.string,
 });
 
 const MaxPoints = withStyles((theme) => ({
@@ -53,7 +56,7 @@ const MaxPoints = withStyles((theme) => ({
         Max Points
       </InputLabel>
       <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
-        {range(1, max).map((v) => (
+        {range(1, max + 1).map((v) => (
           <MenuItem key={`${v}`} value={v}>
             {v}
           </MenuItem>
@@ -94,8 +97,14 @@ export const PointConfig = withStyles((theme) => ({
     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 = {} } = props;
+  const { points, content, classes, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {} } = props;
   const pointsLabel = `${points} ${points <= 1 ? 'pt' : 'pts'}`;
   const showSampleAnswer = checkSampleAnswer(sampleAnswer);
 
@@ -109,6 +118,8 @@ export const PointConfig = withStyles((theme) => ({
         <DragIndicator className={classes.dragIndicator} />
         <EditableHtml
           className={classes.editor}
+          error={error}
+          pluginProps={pluginOpts}
           markup={content}
           onChange={props.onChange}
           mathMlOptions={mathMlOptions}
@@ -121,7 +132,7 @@ export const PointConfig = withStyles((theme) => ({
           onChange={props.onMenuChange}
         />
       </div>
-
+      {error && <div className={classes.errorText}>{error}</div>}
       {!showSampleAnswer && (
         <div className={classes.sampleAnswersEditor}>
           <Typography variant="overline" className={classes.dragIndicator}>
@@ -130,6 +141,7 @@ export const PointConfig = withStyles((theme) => ({
           <EditableHtml
             className={classes.editor}
             markup={sampleAnswer}
+            pluginProps={pluginOpts}
             onChange={props.onSampleChange}
             mathMlOptions={mathMlOptions}
           />
@@ -144,6 +156,9 @@ export class RawAuthoring extends React.Component {
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     value: RubricType,
+    config: PropTypes.object,
+    pluginOpts: PropTypes.object,
+    rubricless: PropTypes.bool,
     onChange: PropTypes.func,
   };
 
@@ -162,8 +177,13 @@ export class RawAuthoring extends React.Component {
     onChange({ ...value, points, sampleAnswers });
   };
 
-  changeMaxPoints = (maxPoints) => {
+  changeRubriclessInstruction = (input) => {
     const { value, onChange } = this.props;
+    onChange({ ...value, rubriclessInstruction: input });
+  };
+
+  changeMaxPoints = (maxPoints) => {
+    const { value, onChange, rubricless } = this.props;
     const currentMax = value.points.length - 1;
 
     log('current', currentMax, 'new: ', maxPoints);
@@ -184,8 +204,10 @@ export class RawAuthoring extends React.Component {
       sampleAnswers = takeRight(value.sampleAnswers, maxPoints + 1);
     }
 
-    if (points) {
-      onChange({ ...value, points, sampleAnswers });
+    if (points && !rubricless) {
+      onChange({ ...value, points, sampleAnswers, maxPoints });
+    } else {
+      onChange({ ...value, maxPoints });
     }
   };
 
@@ -242,21 +264,47 @@ export class RawAuthoring extends React.Component {
   };
 
   render() {
-    const { classes, className, value, mathMlOptions = {} } = this.props;
-    let { excludeZeroEnabled = true, maxPointsEnabled = true } = value || {};
-
+    const {
+      classes,
+      className,
+      value,
+      mathMlOptions = {},
+      config = {},
+      rubricless = false,
+      pluginOpts = {},
+    } = 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 = !rubricless ? value.points.length - 1 : maxPoints;
+
     return (
       <div className={classNames(classes.class, className)}>
         <Typography variant="h5" className={classes.rubricTitle}>
           Rubric
         </Typography>
         <FormGroup row>
-          {maxPointsEnabled && <MaxPoints max={10} value={value.points.length - 1} onChange={this.changeMaxPoints} />}
+          {maxPointsEnabled && (
+            <MaxPoints
+              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
+              value={maxPointsValue}
+              onChange={this.changeMaxPoints}
+              pluginOpts={pluginOpts}
+            />
+          )}
           {excludeZeroEnabled && (
             <FormControlLabel
               label="Exclude zeros"
@@ -265,7 +313,22 @@ export class RawAuthoring extends React.Component {
           )}
         </FormGroup>
 
-        <div className={classes.container}>
+        {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}
+            />
+          </InputContainer>
+        )}
+
+        <div className={rubricless ? classes.rubricless : classes.container}>
           <DragDropContext onDragEnd={this.dragEnd}>
             <Droppable droppableId="droppable">
               {(provided) => (
@@ -284,11 +347,15 @@ export class RawAuthoring extends React.Component {
                               <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}
                               />
                             </div>
                           )}
@@ -315,6 +382,14 @@ const styles = (theme) => ({
     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,
@@ -328,6 +403,7 @@ const styles = (theme) => ({
 const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
 
 const Reverse = (props) => {
+  const { rubricless = false, config = {}, pluginOpts = {} } = props || {};
   const points = Array.from(props.value.points || []).reverse();
   let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
 
@@ -347,11 +423,22 @@ const Reverse = (props) => {
     });
   };
 
-  return <StyledRawAuthoring value={value} onChange={onChange} />;
+  return (
+    <StyledRawAuthoring
+      value={value}
+      config={config}
+      onChange={onChange}
+      rubricless={rubricless}
+      pluginOpts={pluginOpts}
+    />
+  );
 };
 
 Reverse.propTypes = {
   value: RubricType,
+  config: PropTypes.object,
+  pluginOpts: PropTypes.object,
+  rubricless: PropTypes.bool,
   getIndex: PropTypes.func,
   onChange: PropTypes.func,
 };

package/src/index.js

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