Fixing bug that resets the shadow assignment points form.

ReCodEx · Oct 6, 2021 · 1362be2 · 1362be2
1 parent 4433905
commit 1362be2
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 48 deletions.
diff --git a/src/components/Assignments/ShadowAssignmentPointsTable/ShadowAssignmentPointsTable.js b/src/components/Assignments/ShadowAssignmentPointsTable/ShadowAssignmentPointsTable.js
@@ -150,6 +150,7 @@ class ShadowAssignmentPointsTable extends Component {
               })}
             </tbody>
           </Table>
+
           <Modal show={this.state.dialogOpen} backdrop="static" onHide={this.closeDialog} size="xl">
             <Modal.Header closeButton>
               <Modal.Title>

diff --git a/src/components/forms/EditShadowAssignmentPointsForm/EditShadowAssignmentPointsForm.js b/src/components/forms/EditShadowAssignmentPointsForm/EditShadowAssignmentPointsForm.js
@@ -2,16 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { reduxForm, Field } from 'redux-form';
-import { Form, FormGroup, Container, Row, Col } from 'react-bootstrap';
+import { Form, Container, Row, Col } from 'react-bootstrap';
 import moment from 'moment';
+import { defaultMemoize } from 'reselect';
 
 import SubmitButton from '../SubmitButton';
 import { TextField, DatetimeField, NumericTextField } from '../Fields';
 import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import Callout from '../../widgets/Callout';
 import Icon, { RefreshIcon, DeleteIcon, SaveIcon } from '../../icons';
 
-export const getPointsFormInitialValues = (userPoints, awardeeId) => {
+export const getPointsFormInitialValues = defaultMemoize((userPoints, awardeeId) => {
   return userPoints
     ? {
         pointsId: userPoints.id,
@@ -27,7 +28,7 @@ export const getPointsFormInitialValues = (userPoints, awardeeId) => {
         awardedAt: moment().startOf('minute'),
         note: '',
       };
-};
+});
 
 export const transformPointsFormSubmitData = ({ pointsId = null, awardedAt, ...formData }) => ({
   pointsId,
@@ -69,34 +70,21 @@ const EditShadowAssignmentPointsForm = ({
           />
         </Col>
         <Col md={12} lg={7}>
-          <table className="full-width">
-            <tbody>
-              <tr>
-                <td>
-                  <Field
-                    name="awardedAt"
-                    component={DatetimeField}
-                    label={
-                      <FormattedMessage
-                        id="app.editShadowAssignmentPointsForm.awardedAt"
-                        defaultMessage="Awarded at:"
-                      />
-                    }
-                  />
-                </td>
-                <td className="valign-bottom shrink-col">
-                  <FormGroup>
-                    <Button onClick={() => change('awardedAt', moment().startOf('minute'))}>
-                      <Icon icon="history" gapRight />
-                      <FormattedMessage id="app.editShadowAssignmentPointsForm.setNow" defaultMessage="Now" />
-                    </Button>
-                  </FormGroup>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <Field
+            name="awardedAt"
+            component={DatetimeField}
+            ignoreDirty
+            label={<FormattedMessage id="app.editShadowAssignmentPointsForm.awardedAt" defaultMessage="Awarded at:" />}
+            append={
+              <Button variant="primary" noShadow onClick={() => change('awardedAt', moment().startOf('minute'))}>
+                <Icon icon="history" gapRight />
+                <FormattedMessage id="app.editShadowAssignmentPointsForm.setNow" defaultMessage="Now" />
+              </Button>
+            }
+          />
         </Col>
       </Row>
+
       <Row>
         <Col sm={12}>
           <Field

diff --git a/src/components/forms/Fields/DatetimeField.js b/src/components/forms/Fields/DatetimeField.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 
-import { Form, FormGroup, FormLabel } from 'react-bootstrap';
+import { Form, FormGroup, FormLabel, InputGroup } from 'react-bootstrap';
 import classnames from 'classnames';
 
 import withLinks from '../../../helpers/withLinks';
@@ -34,6 +34,8 @@ class DatetimeField extends Component {
       onlyDate = false,
       label = null,
       ignoreDirty = false,
+      append = null,
+      prepend = null,
       ...props
     } = this.props;
 
@@ -44,23 +46,27 @@ class DatetimeField extends Component {
         {Boolean(label) && (
           <FormLabel className={error ? 'text-danger' : warning ? 'text-warning' : undefined}>{label}</FormLabel>
         )}
-        <Datetime
-          {...input}
-          {...props}
-          locale={lang}
-          timeFormat={onlyDate ? false : 'H:mm'}
-          onFocus={() => this.onFocus()}
-          inputProps={{
-            disabled,
-            className: classnames({
-              'form-control': true,
-              [styles.dirty]: dirty && !ignoreDirty && !error && !warning,
-              [styles.active]: active,
-              'border-danger': error,
-              'border-warning': !error && warning,
-            }),
-          }}
-        />
+        <InputGroup>
+          <Datetime
+            {...input}
+            {...props}
+            locale={lang}
+            timeFormat={onlyDate ? false : 'H:mm'}
+            onFocus={() => this.onFocus()}
+            inputProps={{
+              disabled,
+              className: classnames({
+                'form-control': true,
+                [styles.dirty]: dirty && !ignoreDirty && !error && !warning,
+                [styles.active]: active,
+                'border-danger': error,
+                'border-warning': !error && warning,
+              }),
+            }}
+          />
+          {prepend && <InputGroup.Prepend>{prepend}</InputGroup.Prepend>}
+          {append && <InputGroup.Append>{append}</InputGroup.Append>}
+        </InputGroup>
 
         {error && <Form.Text className="text-danger">{error}</Form.Text>}
         {!error && warning && <Form.Text className="text-warning">{warning}</Form.Text>}
@@ -87,6 +93,8 @@ DatetimeField.propTypes = {
   disabled: PropTypes.bool,
   ignoreDirty: PropTypes.bool,
   onlyDate: PropTypes.bool,
+  append: PropTypes.element,
+  prepend: PropTypes.element,
 };
 
 export default withLinks(DatetimeField);
diff --git a/src/containers/App/recodex.css b/src/containers/App/recodex.css
@@ -230,8 +230,14 @@ table.table-hover td.clickable:hover, table.table-hover th.clickable:hover {
 
 
 /*
- * AdminLTE Boxes
+ * AdminLTE Enhancements and Overrides
  */
+
+/* fixing Datetime form input for input group appends and prepends */
+.input-group > .rdt {
+  flex: 1 1 auto;
+}
+
 @keyframes card-target {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 240, 96, 0);