@instructure/quiz-core 17.19.2 → 17.20.0

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/presenter.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizEntryBankEdit = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiGrid = require("@instructure/ui-grid");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiRadioInput = require("@instructure/ui-radio-input");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../../../../common/components/resources/entry/EntrySave/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../../../../common/components/resources/BankSelection/index.js"));
+
+var _QuizEntry = _interopRequireDefault(require("../../../../../../common/records/QuizEntry.js"));
+
+var _Bank = _interopRequireDefault(require("../../../../../../common/records/Bank.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'bRxwg',
+  template: function template(theme) {
+    return "\n\n.bRxwg_cTJN{margin:".concat(theme.marginAddMargin || 'inherit', "}\n\n.bRxwg_edMM{background-color:").concat(theme.quizEntryBankEditBackgroundColor || 'inherit', ";border:").concat(theme.quizEntryBankEditBorderSize || 'inherit', " dashed ").concat(theme.quizEntryBankEditBorderColor || 'inherit', ";margin:").concat(theme.quizEntryBankEditMargin || 'inherit', ";padding:").concat(theme.quizEntryBankEditPadding || 'inherit', "}\n\n.bRxwg_dpNC,[dir=ltr] .bRxwg_dpNC,[dir=rtl] .bRxwg_dpNC{text-align:left}\n\n.bRxwg_fGqX{display:inline-flex;font-size:").concat(theme.numberInputFontSize || 'inherit', ";padding:").concat(theme.numberInputPadding || 'inherit', ";padding-bottom:0;padding-left:").concat(theme.numberInputLeftPadding || 'inherit', "}\n\n.bRxwg_bRWN{border-bottom:solid ").concat(theme.borderLineBottomBorderSize || 'inherit', " ").concat(theme.borderLineBottomBorderColor || 'inherit', ";margin-bottom:").concat(theme.borderLineBottomMargin || 'inherit', ";margin-top:").concat(theme.borderLineTopMargin || 'inherit', "}");
+  },
+  'marginAdd': 'bRxwg_cTJN',
+  'quizEntryBankEdit': 'bRxwg_edMM',
+  'quizEntryBankText': 'bRxwg_dpNC',
+  'numberInput': 'bRxwg_fGqX',
+  'borderLine': 'bRxwg_bRWN'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement("br", null);
+
+var QuizEntryBankEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizEntryBankEdit, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizEntryBankEdit);
+
+  function QuizEntryBankEdit() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, QuizEntryBankEdit);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      rawPointsPossible: _this.props.pointsPossible,
+      normalizedPointsPossible: _this.props.pointsPossible
+    };
+
+    _this.clearChanges = function () {
+      _this.props.clearModifications('quizEntries', _this.props.quizEntry.id);
+    };
+
+    _this.handlePointsChange = function (event, points, normalizedPointsString) {
+      var normalizedPoints = Number(normalizedPointsString);
+
+      _this.setState({
+        rawPointsPossible: points,
+        normalizedPointsPossible: normalizedPoints
+      });
+
+      _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, normalizedPoints);
+    };
+
+    _this.handlePointsBlur = function () {
+      _this.setState({
+        rawPointsPossible: _this.props.pointsPossible || '0'
+      });
+    };
+
+    _this.onPropertiesChange = function (properties) {
+      _this.props.changeQuizEntryProperties(_this.props.quizEntry.id, properties);
+    };
+
+    _this.onBankSelection = function (event, option) {
+      _this.props.changeQuizEntryEntry(_this.props.quizEntry.id, option.value);
+    };
+
+    _this.handleQuestionChange = function (event, selection) {
+      _this.onPropertiesChange({
+        sampleNum: _this.props.sampleNum,
+        selection: selection
+      });
+    };
+
+    _this.handleSampleNumChange = function (event, sampleNum, normalizedSampleNum) {
+      _this.onPropertiesChange({
+        sampleNum: normalizedSampleNum || '0',
+        selection: _this.props.questionSelection
+      });
+    };
+
+    _this.sampleNumErrors = function () {
+      return _this.props.workingQuizEntry.sampleNumErrors();
+    };
+
+    _this.pointsPossibleErrors = function () {
+      return _this.props.workingQuizEntry.pointsPossibleErrors();
+    };
+
+    _this.submitHandler = function () {
+      var properties = {};
+
+      if (_this.props.questionSelection === 'all') {
+        properties.sampleNum = null;
+      } else {
+        properties.sampleNum = _this.props.sampleNum;
+      }
+
+      _this.props.updateQuizEntry(_this.props.quizId, _this.props.quizEntry.id, {
+        properties: properties,
+        pointsPossible: _this.state.normalizedPointsPossible,
+        entryId: _this.props.workingBank.id
+      });
+
+      _this.props.clearModifications();
+    };
+
+    _this.renderPointsPossibleRow = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: 3
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, (0, _formatMessage.default)('Points per question'))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: 9
+      }, /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Points per question')),
+        onChange: _this.handlePointsChange,
+        onBlur: _this.handlePointsBlur,
+        value: _this.state.rawPointsPossible,
+        width: "5rem",
+        display: "inline-block",
+        messages: _this.pointsPossibleErrors()
+      })));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(QuizEntryBankEdit, [{
+    key: "renderQuestionSelectRadioGroup",
+    value: function renderQuestionSelectRadioGroup() {
+      return /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+        name: "questionSelect",
+        description: (0, _formatMessage.default)('Question selection'),
+        defaultValue: this.props.questionSelection,
+        onChange: this.handleQuestionChange
+      }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+        key: "all",
+        value: "all",
+        label: (0, _formatMessage.default)('Use all questions')
+      }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+        key: "rand",
+        value: "rand",
+        label: (0, _formatMessage.default)('Randomly select questions')
+      }));
+    }
+  }, {
+    key: "renderRandomQuestionSelectionRow",
+    value: function renderRandomQuestionSelectionRow() {
+      if (this.props.questionSelection === 'all') {
+        return;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: 3
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, (0, _formatMessage.default)('Number of questions'))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        width: 9
+      }, /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Number of questions')),
+        onChange: this.handleSampleNumChange,
+        value: this.props.sampleNum,
+        min: 1,
+        width: "5rem",
+        display: "inline-block",
+        messages: this.sampleNumErrors()
+      })));
+    }
+  }, {
+    key: "renderQuestionNumberInputs",
+    value: function renderQuestionNumberInputs() {
+      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        vAlign: "middle",
+        rowSpacing: "small"
+      }, this.renderRandomQuestionSelectionRow(), this.renderPointsPossibleRow());
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.quizEntryBankText
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        label: (0, _formatMessage.default)('Select the source bank'),
+        selectedBank: this.props.workingBank,
+        onBankSelection: this.onBankSelection
+      }), _ref, this.renderQuestionSelectRadioGroup(), _ref2, this.renderQuestionNumberInputs());
+    }
+  }, {
+    key: "renderErrors",
+    value: function renderErrors() {
+      if (this.props.workingBank.archived) {
+        return /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+          variant: "error"
+        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          color: "primary"
+        }, (0, _formatMessage.default)('Item bank no longer exists!')));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.quizEntryBankEdit
+      }, this.renderErrors(), this.renderContent(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.borderLine
+      }), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        textAlign: "end"
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        clearChanges: this.clearChanges,
+        displayPosition: this.props.displayPosition,
+        disableSubmit: !this.props.workingQuizEntry.isValid(),
+        entry: this.props.workingBank,
+        guid: this.props.guid,
+        submitHandler: this.submitHandler
+      })));
+    }
+  }]);
+  QuizEntryBankEdit.displayName = "QuizEntryBankEdit";
+  return QuizEntryBankEdit;
+}(_react.Component), _class2.propTypes = {
+  changeQuizEntryPoints: _propTypes.default.func.isRequired,
+  changeQuizEntryProperties: _propTypes.default.func.isRequired,
+  changeQuizEntryEntry: _propTypes.default.func.isRequired,
+  clearModifications: _propTypes.default.func.isRequired,
+  displayPosition: _propTypes.default.number.isRequired,
+  guid: _propTypes.default.string.isRequired,
+  // used for makeEditable
+  pointsPossible: _propTypes.default.number.isRequired,
+  questionSelection: _propTypes.default.string.isRequired,
+  quizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired,
+  quizId: _propTypes.default.string.isRequired,
+  sampleNum: _propTypes.default.string.isRequired,
+  updateQuizEntry: _propTypes.default.func.isRequired,
+  workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
+  workingQuizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired
+}, _temp)) || _class);
+exports.QuizEntryBankEdit = QuizEntryBankEdit;
+var _default = QuizEntryBankEdit;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankEdit/theme.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    marginAddMargin: spacing.xSmall,
+    quizEntryBankEditBackgroundColor: colors.white,
+    quizEntryBankEditBorderSize: borders.widthSmall,
+    quizEntryBankEditBorderColor: colors.oxford,
+    quizEntryBankEditPadding: borders.small,
+    quizEntryBankEditMargin: spacing.medium,
+    numberInputFontSize: typography.fontSizeMedium,
+    numberInputPadding: spacing.xxSmall,
+    numberInputLeftPadding: spacing.small,
+    borderLineTopMargin: spacing.small,
+    borderLineBottomMargin: spacing.small,
+    borderLineBottomBorderSize: borders.widthSmall,
+    borderLineBottomBorderColor: colors.ash
+  };
+}

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/index.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QuizEntryBank = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _Bank = _interopRequireDefault(require("../../../../../../common/records/Bank.js"));
+
+var _QuizEntry = _interopRequireDefault(require("../../../../../../common/records/QuizEntry.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'BXWam',
+  template: function template(theme) {
+    return "\n\n.BXWam_cLXE{background-color:".concat(theme.quizEntryBankBackgroundColor || 'inherit', ";border:").concat(theme.quizEntryBankBorderSize || 'inherit', " dashed ").concat(theme.quizEntryBankBorderColor || 'inherit', ";cursor:pointer;margin-top:").concat(theme.quizEntryBankTopMargin || 'inherit', ";padding:").concat(theme.quizEntryBankPadding || 'inherit', "}\n\n.BXWam_dpNC,[dir=ltr] .BXWam_dpNC,[dir=rtl] .BXWam_dpNC{text-align:left}\n\n.BXWam_ekHz{margin-bottom:").concat(theme.alertWrapperMargin || 'inherit', "}");
+  },
+  'quizEntryBank': 'BXWam_cLXE',
+  'quizEntryBankText': 'BXWam_dpNC',
+  'alertWrapper': 'BXWam_ekHz'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+
+var QuizEntryBank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(QuizEntryBank, _Component);
+
+  var _super = (0, _createSuper2.default)(QuizEntryBank);
+
+  function QuizEntryBank() {
+    (0, _classCallCheck2.default)(this, QuizEntryBank);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(QuizEntryBank, [{
+    key: "renderSampleError",
+    value: function renderSampleError() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.alertWrapper
+      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: "error"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Max number of bank questions exceeded! ')), (0, _formatMessage.default)("{ number, plural,\n                  one {This bank contains 1 question.}\n                  other {This bank contains # questions.}\n                } ", {
+        number: this.props.entry.itemEntryCount
+      }))));
+    }
+  }, {
+    key: "renderDeletedError",
+    value: function renderDeletedError() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.alertWrapper
+      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: "error"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, (0, _formatMessage.default)('Item bank no longer exists!'))));
+    }
+  }, {
+    key: "renderErrors",
+    value: function renderErrors() {
+      var _this$props = this.props,
+          entry = _this$props.entry,
+          quizEntry = _this$props.quizEntry;
+
+      if (entry.archived) {
+        return this.renderDeletedError();
+      }
+
+      if (quizEntry.selection === 'rand' && quizEntry.sampleNum > entry.itemEntryCount) {
+        return this.renderSampleError();
+      }
+    }
+  }, {
+    key: "renderContent",
+    value: function renderContent() {
+      var sampleNum = this.props.quizEntry.sampleNum;
+      if (!sampleNum) sampleNum = 0;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.quizEntryBankText
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary"
+      }, (0, _formatMessage.default)("{ number, plural,\n                =0 { All questions pulled from bank: }\n                one {# question pulled randomly from bank: }\n                other {# questions pulled randomly from bank: }\n              } ", {
+        number: sampleNum
+      }), /*#__PURE__*/_react.default.createElement("b", null, this.props.entry.title), _ref, (0, _formatMessage.default)("{ number, plural,\n                one {# point per question }\n                other {# points per question }\n              }", {
+        number: this.props.quizEntry.pointsPossible
+      })));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.quizEntryBank
+      }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        size: "medium",
+        textAlign: "center",
+        margin: "large auto",
+        padding: "small"
+      }, this.renderErrors(), this.renderContent()));
+    }
+  }]);
+  QuizEntryBank.displayName = "QuizEntryBank";
+  return QuizEntryBank;
+}(_react.Component), _class2.propTypes = {
+  entry: _propTypes.default.instanceOf(_Bank.default).isRequired,
+  quizEntry: _propTypes.default.instanceOf(_QuizEntry.default).isRequired
+}, _temp)) || _class);
+exports.QuizEntryBank = QuizEntryBank;
+var _default = QuizEntryBank;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryBank/QuizEntryBankShow/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography,
+      borders = _ref.borders;
+  return {
+    quizEntryBankBackgroundColor: colors.white,
+    quizEntryBankBorder: "".concat(borders.widthSmall, " dashed ").concat(colors.oxford),
+    quizEntryBankPadding: "".concat(spacing.xxSmall, " ").concat(spacing.medium),
+    quizEntryBankTopMargin: spacing.small,
+    alertWrapperMargin: spacing.small
+  };
+}

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = void 0;
+
+var _reactRedux = require("../../../../../../common/react-redux.js");
+
+var _makeEditable = _interopRequireDefault(require("../../../../../../common/components/shared/functionality/makeEditable.js"));
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state, props) {
+  var entry = props.entry,
+      quizEntry = props.quizEntry,
+      workingQuizEntry = props.workingQuizEntry;
+  var workingEntry;
+
+  if (quizEntry.isItem || quizEntry.isBankEntry) {
+    workingEntry = workingQuizEntry.getItem();
+  } else {
+    // This component is repurposed in RegradingOverride where we're editing a
+    // quiz entry that doesn't have a specific item. For that case we expect
+    // Bank quizEntry with Item entry.
+    workingEntry = entry.getWorkingInstance();
+  }
+
+  return {
+    workingEntry: workingEntry
+  };
+}
+
+var _default = (0, _makeEditable.default)((0, _reactRedux.connect)(mapStateToProps)(_presenter.default));
+
+exports.default = _default;