Awarding shadow assignment points to multiple students simultaneously.

krulis-martin · krulis-martin · commit f22cac79cf8d · 2021-11-03T23:04:17.000+01:00
diff --git a/src/components/Assignments/ShadowAssignmentPointsTable/ShadowAssignmentPointsTable.js b/src/components/Assignments/ShadowAssignmentPointsTable/ShadowAssignmentPointsTable.js
@@ -1,25 +1,32 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl } from 'react-intl';
-
-import { Table, Modal } from 'react-bootstrap';
+import { Field, reduxForm } from 'redux-form';
+import { Container, Row, Col, Table, Modal } from 'react-bootstrap';
 
 import UsersNameContainer from '../../../containers/UsersNameContainer';
 import EditShadowAssignmentPointsForm, {
   getPointsFormInitialValues,
   transformPointsFormSubmitData,
 } from '../../forms/EditShadowAssignmentPointsForm';
 import Box from '../../widgets/Box';
+import Callout from '../../widgets/Callout';
+import { TextField, NumericTextField, SimpleCheckboxField } from '../../forms/Fields';
+import SubmitButton from '../../forms/SubmitButton';
 import DateTime from '../../widgets/DateTime';
 import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import Confirm from '../../forms/Confirm';
-import Icon, { EditIcon, DeleteIcon } from '../../icons';
+import Icon, { BanIcon, EditIcon, DeleteIcon, SaveIcon } from '../../icons';
 import { createUserNameComparator } from '../../helpers/users';
 import { arrayToObject, safeGet } from '../../../helpers/common';
 import withLinks from '../../../helpers/withLinks';
 
 class ShadowAssignmentPointsTable extends Component {
-  state = { dialogStudentId: null, dialogPointsId: null };
+  state = { dialogStudentId: null, dialogPointsId: null, multiAwardMode: false };
+
+  toggleMultiAwardMode = () => {
+    this.setState({ multiAwardMode: !this.state.multiAwardMode });
+  };
 
   openDialog = (studentId, pointsId = null) =>
     this.setState({
@@ -50,6 +57,14 @@ class ShadowAssignmentPointsTable extends Component {
       points,
       permissionHints,
       maxPoints,
+      submitting,
+      handleSubmit,
+      onSubmit,
+      dirty,
+      submitFailed = false,
+      submitSucceeded = false,
+      invalid,
+      warning,
       intl: { locale },
       links: { GROUP_USER_SOLUTIONS_URI_FACTORY },
     } = this.props;
@@ -61,14 +76,82 @@ class ShadowAssignmentPointsTable extends Component {
         title={
           <FormattedMessage id="app.shadowAssignmentPointsTable.title" defaultMessage="Shadow Assignment Points" />
         }
-        collapsable
         isOpen
         noPadding
-        unlimitedHeight>
+        unlimitedHeight
+        footer={
+          permissionHints.createPoints ? (
+            this.state.multiAwardMode ? (
+              <>
+                <Container fluid>
+                  <Row>
+                    <Col>
+                      <NumericTextField
+                        name="points"
+                        maxLength={6}
+                        validateMin={-10000}
+                        validateMax={10000}
+                        label={
+                          <FormattedMessage id="app.editShadowAssignmentPointsForm.points" defaultMessage="Points:" />
+                        }
+                      />
+                    </Col>
+
+                    <Col lg={9}>
+                      <Field
+                        name="note"
+                        component={TextField}
+                        maxLength={1024}
+                        label={<FormattedMessage id="app.editShadowAssignmentPointsForm.note" defaultMessage="Note:" />}
+                      />
+                    </Col>
+                  </Row>
+                </Container>
+
+                {warning && <Callout variant="warning">{warning}</Callout>}
+
+                <div className="text-center text-nowrap mb-1">
+                  <TheButtonGroup>
+                    <SubmitButton
+                      id="multi-assign-form"
+                      handleSubmit={handleSubmit(data => onSubmit(data).then(this.toggleMultiAwardMode))}
+                      submitting={submitting}
+                      dirty={dirty}
+                      hasSucceeded={submitSucceeded}
+                      hasFailed={submitFailed}
+                      invalid={invalid}
+                      defaultIcon={<SaveIcon gapRight />}
+                      messages={{
+                        submit: <FormattedMessage id="generic.save" defaultMessage="Save" />,
+                        submitting: <FormattedMessage id="generic.saving" defaultMessage="Saving..." />,
+                        success: <FormattedMessage id="generic.saved" defaultMessage="Saved" />,
+                      }}
+                    />
+                    <Button variant="danger" onClick={this.toggleMultiAwardMode}>
+                      <BanIcon gapRight />
+                      <FormattedMessage id="generic.cancel" defaultMessage="Cancel" />
+                    </Button>
+                  </TheButtonGroup>
+                </div>
+              </>
+            ) : (
+              <div className="text-center">
+                <Button variant="primary" onClick={this.toggleMultiAwardMode}>
+                  <Icon gapRight icon={['far', 'check-square']} />
+                  <FormattedMessage
+                    id="app.shadowAssignmentPointsTable.multiAwardButton"
+                    defaultMessage="Award Points Collectively"
+                  />
+                </Button>
+              </div>
+            )
+          ) : null
+        }>
         <>
-          <Table responsive hover>
+          <Table responsive hover className="mb-1">
             <thead>
               <tr>
+                {this.state.multiAwardMode && <th />}
                 <th>
                   <FormattedMessage id="app.shadowAssignmentPointsTable.user" defaultMessage="User" />
                 </th>
@@ -91,6 +174,13 @@ class ShadowAssignmentPointsTable extends Component {
                 const awardedAt = safeGet(studentPoints, [student.id, 'awardedAt'], null);
                 return (
                   <tr key={student.id}>
+                    {this.state.multiAwardMode && (
+                      <td className="shrink-col">
+                        {points === null && permissionHints.createPoints && (
+                          <Field name={`students.${student.id}`} component={SimpleCheckboxField} />
+                        )}
+                      </td>
+                    )}
                     <td className="text-nowrap">
                       <UsersNameContainer
                         userId={student.id}
@@ -101,20 +191,18 @@ class ShadowAssignmentPointsTable extends Component {
                     <td className="text-center text-nowrap">{points !== null ? points : <span>&mdash;</span>}</td>
                     <td>{awardedAt && <DateTime unixts={awardedAt} showRelative />}</td>
                     <td>{safeGet(studentPoints, [student.id, 'note'], null)}</td>
-                    {points === null ? (
-                      <td className="shrink-col text-nowrap text-right">
-                        {permissionHints.createPoints && (
+                    <td className="shrink-col text-nowrap text-right">
+                      {points === null ? (
+                        permissionHints.createPoints && (
                           <Button variant="success" onClick={() => this.openDialog(student.id)} size="xs">
                             <Icon gapRight icon={['far', 'star']} />
                             <FormattedMessage
                               id="app.shadowAssignmentPointsTable.createPointsButton"
                               defaultMessage="Award Points"
                             />
                           </Button>
-                        )}
-                      </td>
-                    ) : (
-                      <td className="shrink-col text-nowrap text-right">
+                        )
+                      ) : (
                         <TheButtonGroup>
                           {permissionHints.updatePoints && (
                             <Button variant="warning" onClick={() => this.openDialog(student.id, pointsId)} size="xs">
@@ -143,8 +231,8 @@ class ShadowAssignmentPointsTable extends Component {
                             </Confirm>
                           )}
                         </TheButtonGroup>
-                      </td>
-                    )}
+                      )}
+                    </td>
                   </tr>
                 );
               })}
@@ -187,8 +275,41 @@ ShadowAssignmentPointsTable.propTypes = {
   maxPoints: PropTypes.number.isRequired,
   setPoints: PropTypes.func.isRequired,
   removePoints: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  submitFailed: PropTypes.bool,
+  dirty: PropTypes.bool,
+  submitSucceeded: PropTypes.bool,
+  submitting: PropTypes.bool,
+  invalid: PropTypes.bool,
+  warning: PropTypes.any,
   intl: PropTypes.object.isRequired,
   links: PropTypes.object,
 };
 
-export default withLinks(injectIntl(ShadowAssignmentPointsTable));
+const warn = ({ points }, { maxPoints }) => {
+  const warnings = {};
+
+  if (maxPoints > 0) {
+    if (points > maxPoints || points < 0) {
+      warnings._warning = (
+        <FormattedMessage
+          id="app.editShadowAssignmentPointsForm.validation.pointsOutOfRange"
+          defaultMessage="Points are out of regular range. Regular score for this assignment is between 0 and {maxPoints}."
+          values={{ maxPoints }}
+        />
+      );
+    }
+  }
+
+  return warnings;
+};
+
+export default withLinks(
+  reduxForm({
+    form: 'multi-assign-form',
+    enableReinitialize: true,
+    keepDirtyOnReinitialize: false,
+    warn,
+  })(injectIntl(ShadowAssignmentPointsTable))
+);
diff --git a/src/components/Exercises/ReferenceSolutionsTable/ReferenceSolutionsTableRow.js b/src/components/Exercises/ReferenceSolutionsTable/ReferenceSolutionsTableRow.js
@@ -66,7 +66,7 @@ const ReferenceSolutionsTableRow = ({
                 <Tooltip id="failure">
                   {lastSubmission.failure.description || (
                     <FormattedMessage
-                      id="app.referenceSolutionTable.stillEvaluating"
+                      id="app.referenceSolutionTable.evaluationFailed"
                       defaultMessage="Last evaluation failed"
                     />
                   )}
diff --git a/src/containers/ShadowAssignmentPointsContainer/ShadowAssignmentPointsContainer.js b/src/containers/ShadowAssignmentPointsContainer/ShadowAssignmentPointsContainer.js
@@ -1,16 +1,44 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { defaultMemoize } from 'reselect';
+import moment from 'moment';
 
 import ShadowAssignmentPointsTable from '../../components/Assignments/ShadowAssignmentPointsTable';
 
 import { fetchGroupIfNeeded } from '../../redux/modules/groups';
 import { fetchByIds } from '../../redux/modules/users';
-import { safeGet } from '../../helpers/common';
 import { setShadowAssignmentPoints, removeShadowAssignmentPoints } from '../../redux/modules/shadowAssignments';
 import { studentsOfGroupSelector } from '../../redux/selectors/usersGroups';
+import { safeGet, arrayToObject } from '../../helpers/common';
+
+const prepareInitialValues = defaultMemoize((students, maxPoints) => ({
+  points: maxPoints,
+  note: '',
+  students: Object.fromEntries(students.map(({ id }) => [id, false])),
+}));
 
 class ShadowAssignmentPointsContainer extends Component {
+  multiAssignSubmit = data => {
+    const pointsId = null;
+    const awardedAt = moment().startOf('minute').unix();
+    const studentPoints = arrayToObject(this.props.points, ({ awardeeId }) => awardeeId);
+    const { note, points, students } = data;
+    return Promise.all(
+      this.props.students
+        .filter(({ id }) => safeGet(studentPoints, [id, 'points'], null) === null && students[id])
+        .map(({ id }) =>
+          this.props.setPoints({
+            awardeeId: id, // only the student ID changes among setPoint calls
+            pointsId,
+            points,
+            note,
+            awardedAt,
+          })
+        )
+    );
+  };
+
   componentDidMount = () => this.props.loadAsync();
 
   componentDidUpdate(prevProps) {
@@ -30,6 +58,8 @@ class ShadowAssignmentPointsContainer extends Component {
         permissionHints={permissionHints}
         setPoints={setPoints}
         removePoints={removePoints}
+        initialValues={prepareInitialValues(students, maxPoints)}
+        onSubmit={this.multiAssignSubmit}
       />
     );
   }
diff --git a/src/locales/cs.json b/src/locales/cs.json
@@ -1195,8 +1195,9 @@
   "app.referenceSolution.title": "Podrobnosti referenčního řešení",
   "app.referenceSolutionDetail.exercise": "Úloha",
   "app.referenceSolutionDetail.title.details": "Detail referenčního řešení",
+  "app.referenceSolutionTable.evaluationFailed": "Poslední vyhodnocení selhalo",
   "app.referenceSolutionTable.noDescription": "popis nebyl uveden",
-  "app.referenceSolutionTable.stillEvaluating": "Poslední vyhodnocení selhalo",
+  "app.referenceSolutionTable.stillEvaluating": "Řešení se stále vyhodnocuje",
   "app.registration.external.gotoSignin": "Stránka přihlášení",
   "app.registration.external.link": "Navštívit stránky podpory",
   "app.registration.external.mail": "Kontaktovat podporu",
@@ -1354,6 +1355,7 @@
   "app.shadowAssignmentPointsTable.awardedAt": "Ohodnoceno",
   "app.shadowAssignmentPointsTable.createPointsButton": "Ohodnotit",
   "app.shadowAssignmentPointsTable.formModalTitle": "Přiřadit body za stínovou úlohu",
+  "app.shadowAssignmentPointsTable.multiAwardButton": "Ohodnotit hromadně",
   "app.shadowAssignmentPointsTable.note": "Poznámka",
   "app.shadowAssignmentPointsTable.receivedPoints": "Body",
   "app.shadowAssignmentPointsTable.removePointsButtonConfirmation": "Opravdu si přejete odebrat přidělené body?",
@@ -1620,6 +1622,7 @@
   "generic.acknowledge": "Beru na vědomí",
   "generic.assignedAt": "Zadáno",
   "generic.author": "Autor",
+  "generic.cancel": "Zrušit",
   "generic.clearAll": "Zrušit vše",
   "generic.close": "Zavřít",
   "generic.correctness": "Správnost",
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1195,8 +1195,9 @@
   "app.referenceSolution.title": "Reference Solution Detail",
   "app.referenceSolutionDetail.exercise": "Exercise",
   "app.referenceSolutionDetail.title.details": "Reference Solution Detail",
+  "app.referenceSolutionTable.evaluationFailed": "Last evaluation failed",
   "app.referenceSolutionTable.noDescription": "no description given",
-  "app.referenceSolutionTable.stillEvaluating": "Last evaluation failed",
+  "app.referenceSolutionTable.stillEvaluating": "Last submission is still evaluating",
   "app.registration.external.gotoSignin": "Sign-in Page",
   "app.registration.external.link": "Visit Help Page",
   "app.registration.external.mail": "Contact Support",
@@ -1354,6 +1355,7 @@
   "app.shadowAssignmentPointsTable.awardedAt": "Awarded At",
   "app.shadowAssignmentPointsTable.createPointsButton": "Award Points",
   "app.shadowAssignmentPointsTable.formModalTitle": "Set Shadow Assignment Points",
+  "app.shadowAssignmentPointsTable.multiAwardButton": "Award Points Collectively",
   "app.shadowAssignmentPointsTable.note": "Note",
   "app.shadowAssignmentPointsTable.receivedPoints": "Points",
   "app.shadowAssignmentPointsTable.removePointsButtonConfirmation": "Do you really wish to remove awarded points?",
@@ -1620,6 +1622,7 @@
   "generic.acknowledge": "Acknowledge",
   "generic.assignedAt": "Assigned at",
   "generic.author": "Author",
+  "generic.cancel": "Cancel",
   "generic.clearAll": "Clear All",
   "generic.close": "Close",
   "generic.correctness": "Correctness",
