@instructure/quiz-core 17.19.2-rc.4 → 17.19.3-rc.1

package/lib/banks/components/Banks/presenter.js

@@ -0,0 +1,480 @@
+"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.Banks = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 _uiHeading = require("@instructure/ui-heading");
+
+var _uiImg = require("@instructure/ui-img");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiBillboard = require("@instructure/ui-billboard");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiTextInput = require("@instructure/ui-text-input");
+
+var _uiSimpleSelect = require("@instructure/ui-simple-select");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _index = _interopRequireDefault(require("../../../common/components/layout/Page/index.js"));
+
+var _index2 = _interopRequireDefault(require("../../../common/components/shared/PaginatedCollection/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _index3 = _interopRequireDefault(require("../../../banks/components/BanksList/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../../banks/components/CreateBankModal/index.js"));
+
+var _index5 = _interopRequireDefault(require("../NavWrapper/index.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cYUUC',
+  template: function template(theme) {
+    return "\n\n.cYUUC_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.cYUUC_fsuY{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:").concat(theme.headerPadding || 'inherit', "}\n\n.cYUUC_cyFt{border-bottom:").concat(theme.headerBorderWidth || 'inherit', " solid ").concat(theme.headerBorderColor || 'inherit', "}\n\n.cYUUC_ECfi{padding-bottom:2rem}\n\n.cYUUC_djgO{display:flex;flex-direction:row;margin-top:1.5rem}\n\n.cYUUC_bYSL{flex-grow:0.25;padding:0 1rem}");
+  },
+  'content': 'cYUUC_caGd',
+  'header': 'cYUUC_fsuY',
+  'borderedBottom': 'cYUUC_cyFt',
+  'filters': 'cYUUC_ECfi',
+  'filtersRow': 'cYUUC_djgO',
+  'searchBarContainer': 'cYUUC_bYSL'
+};
+var sortOrderIcons = {
+  ASC: _uiIcons.IconArrowUpLine,
+  DESC: _uiIcons.IconArrowDownLine
+};
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_index4.default, null);
+
+var Banks = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Banks, _Component);
+
+  var _super = (0, _createSuper2.default)(Banks);
+
+  function Banks(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Banks);
+    _this = _super.apply(this, arguments);
+
+    _this.onCreateBank = function () {
+      _this.props.createBank({
+        language: _this.context.locale
+      });
+
+      _this.props.openModal(_quizCommon.CREATE_BANK_MODAL, {
+        modalTrigger: _this.createBankButton,
+        onCreateBank: _this.handleBankCreated
+      });
+    };
+
+    _this.handleBankCreated = function () {
+      _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
+        scopeType: 'user'
+      });
+    };
+
+    _this.getBanksParams = function () {
+      var scope = _this.props.scope;
+      var params = {};
+
+      if (_this.props.scopeType === 'course' && scope.uuid) {
+        params['course_id'] = scope.uuid;
+      } else if (_this.props.scopeType && _this.props.scopeType != 'user') {
+        params['scope'] = _this.props.scopeType;
+      }
+
+      if (_this.props.sortBy !== 'name') {
+        params['sort_by'] = _this.props.sortBy;
+      }
+
+      if (_this.props.sortOrder === 'DESC') {
+        params['sort_order'] = _this.props.sortOrder;
+      }
+
+      if (_this.props.searchTerms) {
+        params['search'] = _this.props.searchTerms;
+      }
+
+      return params;
+    };
+
+    _this.getPage = function (page) {
+      var params = _this.getBanksParams();
+
+      return _this.props.getBanks((0, _objectSpread2.default)({
+        page: page
+      }, params));
+    };
+
+    _this.focusCreateBankButton = function () {
+      _this.createBankButton && _this.createBankButton.focus();
+    };
+
+    _this.handleCreateBankButtonRef = function (node) {
+      _this.createBankButton = node;
+    };
+
+    _this.handleBanksParentChange = function (event, _ref) {
+      var scopeType = _ref.value;
+
+      _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
+        scopeType: scopeType
+      });
+    };
+
+    _this.getSortingOrderIcon = function () {
+      return sortOrderIcons[_this.props.sortOrder];
+    };
+
+    _this.getSortAssistiveText = function () {
+      return (0, _formatMessage.default)('Change sort direction. Direction is currently { sortDirection }', {
+        sortDirection: _this.props.sortOrder === 'ASC' ? (0, _formatMessage.default)('ascending') : (0, _formatMessage.default)('descending')
+      });
+    };
+
+    _this.handleSortingButtonClick = function () {
+      _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
+        sortOrder: _this.props.sortOrder === 'ASC' ? 'DESC' : 'ASC'
+      });
+    };
+
+    _this.handleSortByChange = function (event, _ref2) {
+      var sortBy = _ref2.value;
+
+      _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
+        sortBy: sortBy
+      });
+    };
+
+    _this.handleSearchInputChange = function (_ref3) {
+      var value = _ref3.target.value;
+
+      _this.setState({
+        searchTerms: value
+      });
+
+      _this.search(value);
+    };
+
+    _this.renderRecords = function (recordIds) {
+      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+        focusCreateBankButton: _this.focusCreateBankButton,
+        createBankButton: _this.createBankButton,
+        currentUser: _this.props.currentUser,
+        getCourseInfo: _this.props.getCourseInfo,
+        getUserInfo: _this.props.getUserInfo,
+        getShareableCourses: _this.props.getShareableCourses,
+        getShareableUsers: _this.props.getShareableUsers,
+        minChars: _this.props.minChars,
+        navigateToBank: _this.props.navigateToBank,
+        onShare: _this.props.onShare,
+        recordIds: recordIds
+      });
+    };
+
+    _this.emptyPage = function () {
+      if (_this.props.searchTerms) {
+        var noResultsImg = require('./noResults.svg');
+
+        var message;
+
+        if (_this.props.scopeType === 'course') {
+          message = (0, _formatMessage.default)("Your filter is set to \"Courses\" which will narrow what you can search for.\n          Try adjusting the filter to \"Institution\" or \"All My Banks\"");
+        } else if (_this.props.scopeType === 'account') {
+          message = (0, _formatMessage.default)("Your filter is set to \"Institution\" which will narrow what you can search for.\n          Try adjusting the filter to \"All My Banks\"");
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, {
+          size: "medium",
+          heading: (0, _formatMessage.default)('No Results Found'),
+          message: message,
+          hero: /*#__PURE__*/_react.default.createElement(_uiImg.Img, {
+            src: noResultsImg
+          })
+        });
+      }
+
+      return (0, _formatMessage.default)('You don\'t have any banks yet');
+    };
+
+    _this.state = {
+      searchTerms: _this.props.searchTerms || ''
+    };
+    _this.search = (0, _debounce.default)(500, function (searchTerms) {
+      _this.props.merge(_quizCommon.BANKS_BANK_FILTERS, {
+        searchTerms: searchTerms
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(Banks, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (prevProps.sortBy !== this.props.sortBy || prevProps.sortOrder !== this.props.sortOrder || prevProps.searchTerms !== this.props.searchTerms || prevProps.scopeType !== this.props.scopeType) {
+        this.props.clear(_quizCommon.BANKS_BANK_PAGINATION);
+      }
+    }
+  }, {
+    key: "renderFilters",
+    value: function renderFilters() {
+      var scopeOptions = [{
+        slug: 'user',
+        translation: (0, _formatMessage.default)('All My Banks')
+      }, {
+        slug: 'account',
+        translation: (0, _formatMessage.default)('Institution Banks')
+      }, {
+        slug: 'courses',
+        translation: (0, _formatMessage.default)('All My Course Banks')
+      }];
+
+      if (this.props.scopeType == 'course') {
+        scopeOptions.push({
+          slug: 'course',
+          translation: (0, _formatMessage.default)('Course Banks')
+        });
+      }
+
+      var sortingCriteriaOptions = [{
+        slug: 'name',
+        translation: (0, _formatMessage.default)('Bank Name')
+      }, {
+        slug: 'last_used',
+        translation: (0, _formatMessage.default)('Last Used')
+      }, {
+        slug: 'updated_at',
+        translation: (0, _formatMessage.default)('Last Updated')
+      }];
+      var searchFiltersSelectOptionIdPrefix = 'banks-search-filters-select-option-';
+
+      var searchFilters = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        display: "inline-block"
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        onChange: this.handleBanksParentChange,
+        value: this.props.scopeType,
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Bank scope')),
+        width: "13rem"
+      }, scopeOptions.map(function (option) {
+        return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+          id: searchFiltersSelectOptionIdPrefix + option.slug,
+          key: option.slug,
+          value: option.slug
+        }, option.translation);
+      }))), /*#__PURE__*/_react.default.createElement("div", {
+        display: "inline-block",
+        className: styles.searchBarContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search...')),
+        type: "search",
+        value: this.state.searchTerms,
+        onChange: this.handleSearchInputChange,
+        placeholder: (0, _formatMessage.default)('Search...'),
+        "data-automation": "sdk-search-bank-textinput"
+      })));
+
+      var sortingFiltersSelectOptionIdPrefix = 'banks-sorting-filters-select-option-';
+
+      var sortingFilters = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        display: "inline-block",
+        style: {
+          margin: 'auto 0px auto auto'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Sort by')),
+        value: this.props.sortBy,
+        width: "10rem",
+        onChange: this.handleSortByChange
+      }, sortingCriteriaOptions.map(function (option) {
+        return /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+          id: sortingFiltersSelectOptionIdPrefix + option.slug,
+          key: option.slug,
+          value: option.slug
+        }, option.translation);
+      }))), /*#__PURE__*/_react.default.createElement("div", {
+        display: "inline-block",
+        style: {
+          marginLeft: '1rem'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        type: "button",
+        onClick: this.handleSortingButtonClick,
+        "data-automation": "sdk-sort-banks-button",
+        icon: this.getSortingOrderIcon()
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: this.getSortAssistiveText()
+      }, (0, _formatMessage.default)('Sort')))));
+
+      if (this.props.closeTray) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)(styles.filters, styles.borderedBottom)
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.filtersRow
+        }, searchFilters), /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.filtersRow
+        }, sortingFilters));
+      } else {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)(styles.filters, styles.borderedBottom)
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.filtersRow
+        }, searchFilters, sortingFilters));
+      }
+    }
+  }, {
+    key: "renderHeader",
+    value: function renderHeader() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.header, (0, _defineProperty2.default)({}, styles.borderedBottom, !this.props.filtersEnabled))
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        as: this.props.isCompact ? 'h2' : 'h1',
+        level: "h1"
+      }, (0, _formatMessage.default)('Banks')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        ref: this.handleCreateBankButtonRef,
+        type: "button",
+        variant: "primary",
+        onClick: this.onCreateBank,
+        "data-automation": "sdk-create-new-bank-button",
+        icon: _uiIcons.IconPlusLine
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: (0, _formatMessage.default)('Create Bank')
+      }, (0, _formatMessage.default)('Bank'))));
+    }
+  }, {
+    key: "renderNav",
+    value: function renderNav() {
+      var _this$props = this.props,
+          scope = _this$props.scope,
+          closeTray = _this$props.closeTray,
+          navigateToBuild = _this$props.navigateToBuild,
+          returnToUrl = _this$props.returnToUrl;
+      var isScopeEmpty = !Object.keys(scope).length;
+      return /*#__PURE__*/_react.default.createElement(_index5.default, {
+        closeTray: closeTray,
+        navigateToBuild: navigateToBuild,
+        returnToUrl: isScopeEmpty ? null : returnToUrl,
+        canvasReferrerLinkText: isScopeEmpty ? null : scope.title
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.content
+      }, this.renderHeader(), this.props.filtersEnabled && this.renderFilters(), /*#__PURE__*/_react.default.createElement(_index2.default, {
+        empty: this.emptyPage(),
+        getPage: this.getPage,
+        renderRecords: this.renderRecords,
+        stateKey: _quizCommon.BANKS_BANK_PAGINATION
+      }), _ref4));
+    }
+  }]);
+  Banks.displayName = "Banks";
+  return Banks;
+}(_react.Component), _class2.propTypes = {
+  closeTray: _propTypes.default.func.isRequired,
+  createBank: _propTypes.default.func.isRequired,
+  currentUser: _propTypes.default.shape({
+    email: _propTypes.default.string,
+    enrollment_names: _propTypes.default.arrayOf(_propTypes.default.string),
+    full_name: _propTypes.default.string,
+    uuid: _propTypes.default.string,
+    account_name: _propTypes.default.string
+  }),
+  // from consumer
+  clear: _propTypes.default.func,
+  getBanks: _propTypes.default.func.isRequired,
+  getCourseInfo: _propTypes.default.func,
+  // from consumer
+  getUserInfo: _propTypes.default.func,
+  // from consumer
+  getShareableCourses: _propTypes.default.func,
+  // from consumer
+  getShareableUsers: _propTypes.default.func,
+  // from consumer
+  minChars: _propTypes.default.number,
+  isCompact: _propTypes.default.bool,
+  navigateToBank: _propTypes.default.func.isRequired,
+  // can be from consumer
+  navigateToBuild: _propTypes.default.func,
+  // from consumer
+  onShare: _propTypes.default.func,
+  // from consumer
+  openModal: _propTypes.default.func.isRequired,
+  scope: _propTypes.default.objectOf(_propTypes.default.shape({
+    type: _propTypes.default.string,
+    uuid: _propTypes.default.string,
+    title: _propTypes.default.string
+  })),
+  returnToUrl: _propTypes.default.string,
+  // from consumer
+  filtersEnabled: _propTypes.default.bool,
+  merge: _propTypes.default.func.isRequired,
+  scopeType: _propTypes.default.string,
+  sortBy: _propTypes.default.string,
+  sortOrder: _propTypes.default.string,
+  searchTerms: _propTypes.default.string
+}, _class2.defaultProps = {
+  currentUser: null,
+  getCourseInfo: null,
+  getUserInfo: null,
+  getShareableCourses: null,
+  getShareableUsers: null,
+  minChars: void 0,
+  isCompact: false,
+  navigateToBuild: null,
+  onShare: function onShare() {},
+  clear: function clear() {},
+  merge: function merge() {},
+  scope: {},
+  returnToUrl: null,
+  filtersEnabled: false,
+  scopeType: 'user',
+  sortBy: 'name',
+  sortOrder: 'ASC',
+  searchTerms: null
+}, _class2.contextTypes = {
+  locale: _propTypes.default.string
+}, _temp)) || _class);
+exports.Banks = Banks;
+var _default = Banks;
+exports.default = _default;

package/lib/banks/components/Banks/theme.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      borders = _ref.borders;
+  return {
+    contentBackgroundColor: colors.white,
+    contentPaddingTopBottom: spacing.small,
+    contentPaddingLeftRight: spacing.xLarge,
+    headerPadding: spacing.small,
+    headerBorderWidth: borders.widthSmall,
+    headerBorderColor: colors.tiara
+  };
+}

package/lib/banks/components/BanksList/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = void 0;
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../common/react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
+
+var _modal = require("../../../common/actions/modal.js");
+
+var _banks = require("../../api/banks.js");
+
+function mapStateToProps(state, props) {
+  return {
+    appContainer: state.getIn(['ui', 'appContainer']),
+    banks: (0, _immutable.List)(props.recordIds).map(function (id) {
+      return _Bank.default.create(state.getIn(['banks', id]));
+    })
+  };
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, {
+  openModal: _modal.openModal,
+  deleteBank: _banks.deleteBank,
+  withConfirm: _modal.withConfirm
+})(_presenter.default);
+
+exports.default = _default;