@instructure/outcomes-ui 2.1.2 → 2.1.3

package/es/translated/vi/components/OutcomesPerStudent/index.js

@@ -0,0 +1,447 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _default_vi_number = Intl.NumberFormat("vi", { style: "decimal" }).format,
+    _dec,
+    _class,
+    _class2,
+    _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Billboard } from '@instructure/ui-billboard';
+import { Pagination, PaginationButton } from '@instructure/ui-pagination';
+import { Text } from '@instructure/ui-text';
+import { Avatar } from '@instructure/ui-avatar';
+import { Spinner } from '@instructure/ui-spinner';
+import { IconOutcomesLine } from '@instructure/ui-icons';
+import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import shortid from 'shortid';
+import { themeable } from '@instructure/ui-themeable';
+import _ from 'lodash';
+import Header from "./Header/index.js";
+import HeaderDetails from "./HeaderDetails/index.js";
+import Score from "./Score/index.js";
+
+var Early = function Early(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "138",
+    height: "88",
+    viewBox: "0 0 138 88",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("title", null, "Early-Graphic"), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M136.728 34.855c0-6.158-5.547-7.973-5.547-7.973s5.547-1.544 5.547-7.702c0-6.159-5.547-7.9-5.547-7.9H18.854v50.618h53.39v2.08c0 4.176 2.643 7.726 6.344 9.095l25.62 13.842s6.495 1.48 9.88-4.789c1.856-3.434 1.287-6.43.395-8.442l16.698.038s5.547-1.543 5.547-7.701c0-6.16-5.547-7.974-5.547-7.974s5.547-1.543 5.547-7.701c0-5.554-4.498-7.51-5.385-7.842.887-.3 5.385-2.094 5.385-7.648",
+    fill: "#FED2B8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M136.728 34.855c0-6.158-5.547-7.973-5.547-7.973s5.547-1.544 5.547-7.702c0-6.159-5.547-7.9-5.547-7.9H18.854v50.618h53.39v2.08c0 4.176 2.643 7.726 6.344 9.095l25.62 13.842s6.495 1.48 9.88-4.789c1.856-3.434 1.287-6.43.395-8.442l16.698.038s5.547-1.543 5.547-7.701c0-6.16-5.547-7.974-5.547-7.974s5.547-1.543 5.547-7.701c0-5.554-4.498-7.51-5.385-7.842.887-.3 5.385-2.094 5.385-7.648z",
+    stroke: "#FD6A11",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M65.217 65.244H41.83a2 2 0 0 1-2-2V10.627a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v52.617a2 2 0 0 1-2 2",
+    fill: "#75848F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M65.217 65.244H41.83a2 2 0 0 1-2-2V10.627a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v52.617a2 2 0 0 1-2 2z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M26.388 65.244H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v60.244a2 2 0 0 1-2 2",
+    fill: "#F4F5F6"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M26.388 65.244H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h23.388a2 2 0 0 1 2 2v60.244a2 2 0 0 1-2 2z",
+    stroke: "#778690",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M72.244 36.242c0 10.34-8.382 18.721-18.721 18.721-10.34 0-18.721-8.382-18.721-18.72 0-10.34 8.381-18.722 18.721-18.722 10.339 0 18.721 8.382 18.721 18.721",
+    fill: "#75848F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M72.244 36.242c0 10.34-8.382 18.721-18.721 18.721-10.34 0-18.721-8.382-18.721-18.72 0-10.34 8.381-18.722 18.721-18.722 10.339 0 18.721 8.382 18.721 18.721z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M69.124 36.242c0 8.616-6.985 15.601-15.601 15.601s-15.601-6.985-15.601-15.6c0-8.617 6.985-15.602 15.6-15.602 8.617 0 15.602 6.985 15.602 15.601",
+    fill: "#FFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M69.124 36.242c0 8.616-6.985 15.601-15.601 15.601s-15.601-6.985-15.601-15.6c0-8.617 6.985-15.602 15.6-15.602 8.617 0 15.602 6.985 15.602 15.601z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M53.523 20.642v4.252M53.523 47.59v4.253M37.922 36.242h4.252M64.871 36.242h4.252",
+    stroke: "#3F5463",
+    strokeWidth: "3"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M48.67 24.975l4.853 11.267M59.764 41.55l-6.242-5.308",
+    stroke: "#3F5463",
+    strokeWidth: "3",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M59.07 47.337l-5.547-11.095",
+    stroke: "#F1070F",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M56.296 36.242a2.773 2.773 0 1 1-5.546 0 2.773 2.773 0 0 1 5.546 0",
+    fill: "#96A0A8"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M56.296 36.242a2.773 2.773 0 1 1-5.546 0 2.773 2.773 0 0 1 5.546 0z",
+    stroke: "#3F5463",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.854 10.01a4.277 4.277 0 1 1-8.553-.002 4.277 4.277 0 0 1 8.553.002",
+    fill: "#FFF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18.854 10.01a4.277 4.277 0 1 1-8.553-.002 4.277 4.277 0 0 1 8.553.002z",
+    stroke: "#778690",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M114.483 73.685h-9.318",
+    stroke: "#FD6A11",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  })));
+};
+
+var NoReport = function NoReport(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    width: "70",
+    height: "96",
+    viewBox: "0 0 70 96",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("title", null, "Page 1"), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
+    fill: "#F6F7F6"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M5 19c-1.654 0-3 1.346-3 3v69c0 1.654 1.346 3 3 3h60c1.654 0 3-1.346 3-3V22c0-1.654-1.346-3-3-3H5zm60 77H5c-2.757 0-5-2.243-5-5V22c0-2.757 2.243-5 5-5h60c2.757 0 5 2.243 5 5v69c0 2.757-2.243 5-5 5z",
+    fill: "#3F5463"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M0 96h70V0H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M7 89h56.5V24.213H7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#6F7F8A",
+    d: "M9 90H6v-3h2v1h1zM6 34.317h2v-4.053H6v4.053zm0 8.106h2V38.37H6v4.053zm0 8.104h2v-4.053H6v4.053zm0 8.106h2V54.58H6v4.053zm0 8.104h2v-4.053H6v4.053zm0 8.106h2V70.79H6v4.053zm0 8.104h2v-4.053H6v4.053zM8 26.213H6v-3h3v2H8zM13.038 25.213h4.039v-2h-4.039v2zm8.078 0h4.038v-2h-4.038v2zm8.076 0h4.039v-2h-4.039v2zm8.078 0h4.038v-2H37.27v2zm8.076 0h4.039v-2h-4.039v2zm8.077 0h4.038v-2h-4.038v2zM64.5 26.213h-2v-1h-1v-2h3zM62.5 34.318h2v-4.053h-2v4.053zm0 8.105h2V38.37h-2v4.053zm0 8.105h2v-4.053h-2v4.053zm0 8.105h2V54.58h-2v4.053zm0 8.105h2v-4.053h-2v4.053zm0 8.105h2V70.79h-2v4.053zm0 8.105h2v-4.053h-2v4.053zM64.5 90h-3v-2h1v-1h2zM13.039 90h4.038v-2h-4.038v2zm8.076 0h4.039v-2h-4.039v2zm8.077 0h4.038v-2h-4.038v2zm8.077 0h4.039v-2h-4.039v2zm8.077 0h4.038v-2h-4.038v2zm8.076 0h4.039v-2h-4.039v2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25",
+    fill: "#C0C6CB"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1",
+    fill: "#E5E7E9"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M56.717 23.54a.983.983 0 0 1-.843.46H14.126a.984.984 0 0 1-.843-.46.983.983 0 0 1-.065-.959l4.422-9.58H52.36l4.42 9.58a.983.983 0 0 1-.064.958M35 2c6.999 0 9.19 6.354 9.799 9H25.07c.298-2.546 1.852-9 9.929-9m23.598 19.743L53.64 11h-6.807C46.242 8.252 43.74 0 35 0c-9.812 0-11.6 8.122-11.926 11H16.36l-4.958 10.743a2.984 2.984 0 0 0 .196 2.874A2.99 2.99 0 0 0 14.126 26h41.748a2.991 2.991 0 0 0 2.528-1.383c.554-.866.627-1.94.196-2.874",
+    fill: "#3F5463"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M34.666 4.551a2 2 0 1 0 .002 4.002 2 2 0 0 0-.002-4.002",
+    fill: "#3F5463"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M30.907 46.59a4.568 4.568 0 1 0-9.137.002 4.568 4.568 0 0 0 9.137-.001M44.339 42.023a4.568 4.568 0 1 0 0 9.136 4.568 4.568 0 0 0 0-9.136M43.5 65.894H27a2 2 0 0 0 0 4h16.5a2 2 0 0 0 0-4",
+    fill: "#6F7F8A"
+  })));
+};
+
+import theme from "../theme.js";
+var styles = {
+  componentId: 'eWGXc',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__OutcomesPerStudent--reportWrapper {\n  position: relative;\n  padding-left: 13rem;\n}\n\n.outcomes-ui__OutcomesPerStudent--background {\n  background-color: white;\n}\n\n.outcomes-ui__OutcomesPerStudent--table {\n  overflow-x: scroll;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerRow {\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--corner {\n  position: absolute;\n  box-sizing: border-box;\n  width: 13rem;\n  left: 0;\n  top: auto;\n  font-size: 3rem;\n  font-weight: normal;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell, .outcomes-ui__OutcomesPerStudent--corner {\n  box-sizing: border-box;\n  height: 5.5rem;\n  border-right: ".concat(theme.reportBorder || 'inherit', ";\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell {\n  box-sizing: border-box;\n  border-top: ").concat(theme.reportBorder || 'inherit', ";\n  padding: 0.5rem;\n  flex: 1 0 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.outcomes-ui__OutcomesPerStudent--loadingSpinner {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 1.25rem 0.3125rem 1.25rem 0;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentRow {\n  box-sizing: border-box;\n  height: 4rem;\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName {\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: auto;\n  width: 13rem;\n  height: 4rem;\n  padding-left: 0.5rem;\n  border-right: ").concat(theme.reportBorder || 'inherit', ";\n  display: flex;\n  justify-content: flex-start;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n  align-items: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--avatar {\n    padding-right: .5rem;\n  }\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n    text-overflow: ellipsis;\n    overflow-x: hidden;\n    white-space: nowrap;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n.outcomes-ui__OutcomesPerStudent--scoreCell {\n  box-sizing: border-box;\n  flex: 1 0 10rem;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n");
+  },
+  'reportWrapper': 'outcomes-ui__OutcomesPerStudent--reportWrapper',
+  'background': 'outcomes-ui__OutcomesPerStudent--background',
+  'table': 'outcomes-ui__OutcomesPerStudent--table',
+  'headerRow': 'outcomes-ui__OutcomesPerStudent--headerRow',
+  'corner': 'outcomes-ui__OutcomesPerStudent--corner',
+  'headerCell': 'outcomes-ui__OutcomesPerStudent--headerCell',
+  'loadingSpinner': 'outcomes-ui__OutcomesPerStudent--loadingSpinner',
+  'studentRow': 'outcomes-ui__OutcomesPerStudent--studentRow',
+  'studentName': 'outcomes-ui__OutcomesPerStudent--studentName',
+  'avatar': 'outcomes-ui__OutcomesPerStudent--avatar',
+  'name': 'outcomes-ui__OutcomesPerStudent--name',
+  'scoreCell': 'outcomes-ui__OutcomesPerStudent--scoreCell'
+};
+
+var renderBillboard = function renderBillboard(args, _foo) {
+  var boardProps = Object.assign({
+    headingLevel: 'h3',
+    size: 'small',
+    margin: 'medium'
+  }, args);
+  return /*#__PURE__*/React.createElement(Billboard, boardProps);
+};
+
+var renderLoading = function renderLoading() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.loadingSpinner
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    renderTitle: "\u0110ang t\u1EA3i"
+  }));
+};
+
+var noOutcomes = function noOutcomes() {
+  return {
+    heading: "Kh\xF4ng c\xF3 b\xE1o c\xE1o n\xE0o \u0111\u1EC3 hi\u1EC3n th\u1ECB \u1EDF \u0111\xE2y",
+    message: "B\xE0i \u0111\xE1nh gi\xE1 kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 n\xE0o \u0111\u01B0\u1EE3c c\u0103n ch\u1EC9nh theo. H\xE3y \u0111\u1EBFn t\xE1c v\u1EE5 X\xE2y D\u1EF1ng \u0111\u1EC3 c\u0103n ch\u1EC9nh k\u1EBFt qu\u1EA3.",
+    hero: /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": "true"
+    }, /*#__PURE__*/React.createElement(NoReport, null))
+  };
+};
+
+var noStudents = function noStudents() {
+  return {
+    heading: "C\xF3 v\u1EBB b\u1EA1n \u0111\u1EBFn h\u01A1i s\u1EDBm",
+    message: "Sinh vi\xEAn ph\u1EA3i ho\xE0n th\xE0nh b\xE0i \u0111\xE1nh gi\xE1 tr\u01B0\u1EDBc r\u1ED3i m\u1EDBi c\xF3 k\u1EBFt qu\u1EA3 \u0111\u01B0\u1EE3c hi\u1EC3n th\u1ECB \u1EDF \u0111\xE2y. H\xE3y quay l\u1EA1i \u0111\xE2y ki\u1EC3m tra sau khi m\u1ED9t s\u1ED1 sinh vi\xEAn \u0111\xE3 ho\xE0n th\xE0nh b\xE0i \u0111\xE1nh gi\xE1.",
+    hero: /*#__PURE__*/React.createElement(Early, null)
+  };
+};
+
+var renderCorner = function renderCorner(count) {
+  var _s, _n;
+
+  var text = _default_vi_number(count) + " K\u1EBFt Qu\u1EA3 \u0110\u01B0\u1EE3c C\u0103n Ch\u1EC9nh";
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.corner,
+    role: "columnheader",
+    "data-automation": "outcomesPerStudent__corner"
+  }, /*#__PURE__*/React.createElement(IconOutcomesLine, null), /*#__PURE__*/React.createElement(Text, {
+    size: "small"
+  }, text));
+};
+
+var renderStudentName = function renderStudentName(student) {
+  var studentNameId = shortid.generate();
+  var studentNameElement = /*#__PURE__*/React.createElement("div", {
+    className: styles.studentName,
+    id: studentNameId,
+    role: "rowheader"
+  }, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
+    className: styles.avatar,
+    "data-automation": "outcomesPerStudent__avatar"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: "small",
+    name: student.full_name,
+    src: student.avatar_url
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: styles.name,
+    "data-automation": "outcomesPerStudent__name"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small"
+  }, student.full_name)));
+  return {
+    studentNameId: studentNameId,
+    studentNameElement: studentNameElement
+  };
+};
+
+var renderPagination = function renderPagination(_ref) {
+  var artifactType = _ref.artifactType,
+      artifactId = _ref.artifactId,
+      currentPage = _ref.currentPage,
+      pageCount = _ref.pageCount,
+      loadPage = _ref.loadPage,
+      loadUsersOverride = _ref.loadUsersOverride;
+
+  if (currentPage !== null) {
+    return /*#__PURE__*/React.createElement(Pagination, {
+      margin: "small",
+      variant: "compact",
+      labelNext: "Trang Ti\u1EBFp",
+      labelPrev: "Trang Tr\u01B0\u1EDBc"
+    }, _.range(1, pageCount + 1).map(function (pageNumber) {
+      var current = pageNumber === currentPage;
+
+      var changePage = function changePage() {
+        return loadPage(artifactType, artifactId, pageNumber, loadUsersOverride);
+      };
+
+      return /*#__PURE__*/React.createElement(PaginationButton, {
+        current: current,
+        key: pageNumber,
+        onClick: changePage
+      }, pageNumber);
+    }));
+  }
+}; // eslint-disable-next-line immutable/no-mutation
+
+
+renderPagination.propTypes = {
+  artifactType: PropTypes.string.isRequired,
+  artifactId: PropTypes.string.isRequired,
+  pageCount: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  loadPage: PropTypes.func.isRequired,
+  loadUsersOverride: PropTypes.func
+};
+renderPagination.defaultProps = {
+  loadUsersOverride: void 0
+};
+var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(OutcomesPerStudentReport, _React$Component);
+
+  var _super = _createSuper(OutcomesPerStudentReport);
+
+  function OutcomesPerStudentReport() {
+    _classCallCheck(this, OutcomesPerStudentReport);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(OutcomesPerStudentReport, [{
+    key: "componentWillMount",
+    value: // eslint-disable-next-line no-undef
+    // eslint-disable-next-line no-undef
+    function componentWillMount() {
+      var _this$props = this.props,
+          artifactType = _this$props.artifactType,
+          artifactId = _this$props.artifactId,
+          loadPage = _this$props.loadPage,
+          setError = _this$props.setError,
+          loadUsersOverride = _this$props.loadUsersOverride;
+      loadPage(artifactType, artifactId, 1, loadUsersOverride).catch(function (e) {
+        return setError(e);
+      });
+    }
+  }, {
+    key: "renderReportTable",
+    value: function renderReportTable() {
+      var headerIds = [];
+      var _this$props2 = this.props,
+          rollups = _this$props2.rollups,
+          getReportOutcome = _this$props2.getReportOutcome,
+          getScore = _this$props2.getScore,
+          _viewReportAlignment = _this$props2.viewReportAlignment,
+          isOpen = _this$props2.isOpen,
+          closeReportAlignment = _this$props2.closeReportAlignment,
+          users = _this$props2.users,
+          showRollups = _this$props2.showRollups,
+          scope = _this$props2.scope;
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.reportWrapper,
+        "data-automation": "outcomesPerStudent__reportWrapper"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.table,
+        role: "grid"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.headerRow,
+        role: "row",
+        "data-automation": "outcomesPerStudent__headerRow"
+      }, renderCorner(rollups.length), rollups.map(function (rollup, i) {
+        headerIds[i] = shortid.generate(); // eslint-disable-line immutable/no-mutation
+
+        return (
+          /*#__PURE__*/
+          // FIXME: use stable keys here
+          React.createElement("div", {
+            id: headerIds[i],
+            key: headerIds[i],
+            role: "columnheader",
+            className: styles.headerCell,
+            "data-automation": "outcomesPerStudent__headerCell"
+          }, /*#__PURE__*/React.createElement(Header, {
+            outcomeResult: rollup,
+            getReportOutcome: getReportOutcome,
+            viewReportAlignment: function viewReportAlignment() {
+              return _viewReportAlignment(rollup.outcomeId);
+            },
+            isOpen: isOpen(rollup.outcomeId),
+            closeReportAlignment: closeReportAlignment,
+            showRollups: showRollups,
+            scope: scope
+          }))
+        );
+      })), /*#__PURE__*/React.createElement("div", {
+        role: "row"
+      }, /*#__PURE__*/React.createElement("div", {
+        role: "rowheader"
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, "Chi Ti\u1EBFt")), rollups.map(function (rollup, i) {
+        return (
+          /*#__PURE__*/
+          // FIXME: use stable keys here
+          React.createElement("div", {
+            key: headerIds[i],
+            role: "gridcell"
+          }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, /*#__PURE__*/React.createElement(HeaderDetails, {
+            outcomeResult: rollup,
+            showRollups: showRollups
+          })))
+        );
+      })), users.map(function (student) {
+        var _renderStudentName = renderStudentName(student),
+            studentNameElement = _renderStudentName.studentNameElement;
+
+        return /*#__PURE__*/React.createElement("div", {
+          key: student.uuid,
+          className: styles.studentRow,
+          role: "row",
+          "data-automation": "outcomesPerStudent__studentRow"
+        }, studentNameElement, rollups.map(function (rollup, i) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: rollup.outcomeId,
+            className: styles.scoreCell,
+            role: "gridcell",
+            "data-automation": "outcomesPerStudent__scoreCell"
+          }, /*#__PURE__*/React.createElement(Score, {
+            score: getScore(rollup.outcomeId, student.uuid),
+            outcome: getReportOutcome(rollup.outcomeId)
+          }));
+        }));
+      })), renderPagination(this.props));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props3 = this.props,
+          users = _this$props3.users,
+          hasAnyOutcomes = _this$props3.hasAnyOutcomes,
+          loading = _this$props3.loading;
+      var hasAnyStudents = users && users.length > 0;
+
+      var renderReportContent = function renderReportContent() {
+        if (loading) {
+          return renderLoading();
+        } else if (!hasAnyOutcomes) {
+          return renderBillboard(noOutcomes());
+        } else if (!hasAnyStudents) {
+          return renderBillboard(noStudents());
+        } else {
+          return _this.renderReportTable();
+        }
+      };
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.background
+      }, renderReportContent());
+    }
+  }]);
+
+  OutcomesPerStudentReport.displayName = "OutcomesPerStudentReport";
+  return OutcomesPerStudentReport;
+}(React.Component), _class2.propTypes = {
+  users: PropTypes.array.isRequired,
+  artifactType: PropTypes.string.isRequired,
+  artifactId: PropTypes.string.isRequired,
+  rollups: PropTypes.array.isRequired,
+  loading: PropTypes.bool.isRequired,
+  loadPage: PropTypes.func.isRequired,
+  loadUsersOverride: PropTypes.func,
+  setError: PropTypes.func.isRequired,
+  showRollups: PropTypes.bool,
+  getReportOutcome: PropTypes.func.isRequired,
+  hasAnyOutcomes: PropTypes.bool.isRequired,
+  getScore: PropTypes.func.isRequired,
+  viewReportAlignment: PropTypes.func.isRequired,
+  isOpen: PropTypes.func.isRequired,
+  closeReportAlignment: PropTypes.func.isRequired,
+  scope: PropTypes.string.isRequired
+}, _class2.defaultProps = {
+  loadUsersOverride: void 0,
+  showRollups: true
+}, _temp)) || _class);
+export default OutcomesPerStudentReport;

package/es/translated/vi/components/OutcomesPerStudent/styles.css

@@ -0,0 +1,93 @@
+.reportWrapper {
+  position: relative;
+  padding-left: 13rem;
+}
+
+.background {
+  background-color: white;
+}
+
+.table {
+  overflow-x: scroll;
+}
+
+.headerRow {
+  display: flex;
+  align-items: stretch;
+}
+
+.corner {
+  position: absolute;
+  box-sizing: border-box;
+  width: 13rem;
+  left: 0;
+  top: auto;
+  font-size: 3rem;
+  font-weight: normal;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.headerCell, .corner {
+  box-sizing: border-box;
+  height: 5.5rem;
+  border-right: var(--reportBorder);
+  border-bottom: var(--reportBorder);
+}
+
+.headerCell {
+  box-sizing: border-box;
+  border-top: var(--reportBorder);
+  padding: 0.5rem;
+  flex: 1 0 10rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.loadingSpinner {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem 0.3125rem 1.25rem 0;
+}
+
+.studentRow {
+  box-sizing: border-box;
+  height: 4rem;
+  display: flex;
+  align-items: stretch;
+}
+
+.studentName {
+  position: absolute;
+  box-sizing: border-box;
+  left: 0;
+  top: auto;
+  width: 13rem;
+  height: 4rem;
+  padding-left: 0.5rem;
+  border-right: var(--reportBorder);
+  display: flex;
+  justify-content: flex-start;
+  border-bottom: var(--reportBorder);
+  align-items: center;
+
+  & .avatar {
+    padding-right: .5rem;
+  }
+
+  & .name {
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+  }
+}
+
+.scoreCell {
+  box-sizing: border-box;
+  flex: 1 0 10rem;
+  border-bottom: var(--reportBorder);
+}

package/es/translated/vi/components/Pagination/__tests__/index.test.js

@@ -0,0 +1,39 @@
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import { Pagination as InstuiPagination } from '@instructure/ui-pagination';
+import Pagination from "../index.js";
+describe('Pagination', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      numPages: 2,
+      page: 1,
+      updatePage: sinon.spy()
+    }, props);
+  }
+
+  it('renders page numbers', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Pagination, makeProps()));
+    expect(wrapper.find(InstuiPagination.Page)).to.have.length(2);
+  });
+  it('calls updatePage when a page is clicked', function () {
+    var props = makeProps();
+    var wrapper = mount( /*#__PURE__*/React.createElement(Pagination, props));
+    wrapper.find(InstuiPagination.Page).last().simulate('click');
+    expect(props.updatePage.calledWith(2)).to.be.true;
+  });
+  it('does not include pagination for 0 results', function () {
+    var props = makeProps({
+      numPages: 0
+    });
+    var wrapper = mount( /*#__PURE__*/React.createElement(Pagination, props), {
+      disableLifecycleMethods: true
+    });
+    var nextPageButton = wrapper.find('button').findWhere(function (z) {
+      return z.text() == 'Next Page';
+    });
+    expect(nextPageButton).to.have.length(0);
+  });
+});

package/es/translated/vi/components/Pagination/index.js

@@ -0,0 +1,66 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Pagination as InstuiPagination } from '@instructure/ui-pagination';
+import t from 'format-message';
+
+var Pagination = /*#__PURE__*/function (_React$Component) {
+  _inherits(Pagination, _React$Component);
+
+  var _super = _createSuper(Pagination);
+
+  function Pagination() {
+    _classCallCheck(this, Pagination);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Pagination, [{
+    key: "renderPage",
+    value: function renderPage(i) {
+      var _this$props = this.props,
+          page = _this$props.page,
+          updatePage = _this$props.updatePage;
+      return /*#__PURE__*/React.createElement(InstuiPagination.Page, {
+        key: i,
+        current: i === page,
+        onClick: function onClick() {
+          return updatePage(i);
+        },
+        "data-automation": "results__pageButton"
+      }, t.number(i));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var numPages = this.props.numPages;
+      return numPages > 1 && /*#__PURE__*/React.createElement(InstuiPagination, {
+        margin: "small",
+        variant: "compact",
+        labelNext: "Trang Ti\u1EBFp",
+        labelPrev: "Trang Tr\u01B0\u1EDBc"
+      }, Array(numPages).fill(0).map(function (_value, i) {
+        return _this.renderPage(i + 1);
+      }));
+    }
+  }]);
+
+  Pagination.displayName = "Pagination";
+  return Pagination;
+}(React.Component);
+
+Pagination.propTypes = {
+  numPages: PropTypes.number,
+  page: PropTypes.number,
+  updatePage: PropTypes.func.isRequired
+};
+Pagination.defaultProps = {
+  numPages: 1,
+  page: 1
+};
+export { Pagination as default };

package/es/translated/vi/components/Pagination/index.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { number } from '@storybook/addon-knobs';
+import Pagination from "./index.js";
+export default {
+  title: 'Pagination'
+};
+export var standard = function standard() {
+  return /*#__PURE__*/React.createElement(Pagination, {
+    numPages: number('numPages', 2),
+    page: number('page', 1),
+    updatePage: function updatePage() {}
+  });
+};