Edit SIS terms

Initial values do not work yet ...

src/components/SisIntegration/EditTerm/EditTerm.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button } from 'react-bootstrap';
+import { CloseIcon } from '../../icons';
+import { FormattedMessage } from 'react-intl';
+import { Field, reduxForm } from 'redux-form';
+import DatetimeField from '../../forms/Fields/DatetimeField';
+import SubmitButton from '../../forms/SubmitButton';
+
+const EditTerm = ({
+  isOpen,
+  onClose,
+  submitting,
+  handleSubmit,
+  anyTouched,
+  submitFailed = false,
+  submitSucceeded = false,
+  invalid,
+  reset
+}) =>
+  <Modal show={isOpen} backdrop="static" onHide={onClose}>
+    <Modal.Header closeButton>
+      <Modal.Title>
+        <FormattedMessage
+          id="app.editSisTerm.title"
+          defaultMessage="Edit SIS Term"
+        />
+      </Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <Field
+        name="beginning"
+        component={DatetimeField}
+        label={
+          <FormattedMessage
+            id="app.editSisTerm.beginning"
+            defaultMessage="Beginning of the term:"
+          />
+        }
+      />
+      <Field
+        name="end"
+        component={DatetimeField}
+        label={
+          <FormattedMessage
+            id="app.editSisTerm.end"
+            defaultMessage="End of the term:"
+          />
+        }
+      />
+      <Field
+        name="advertiseUntil"
+        component={DatetimeField}
+        label={
+          <FormattedMessage
+            id="app.editSisTerm.advertiseUntil"
+            defaultMessage="Advertise this term to students until:"
+          />
+        }
+      />
+    </Modal.Body>
+    <Modal.Footer>
+      <SubmitButton
+        id="edit-sis-term"
+        handleSubmit={data => handleSubmit(data).then(() => reset())}
+        submitting={submitting}
+        dirty={anyTouched}
+        hasSucceeded={submitSucceeded}
+        hasFailed={submitFailed}
+        invalid={invalid}
+        messages={{
+          submit: (
+            <FormattedMessage id="app.editSisTerm.save" defaultMessage="Save" />
+          ),
+          submitting: (
+            <FormattedMessage
+              id="app.editSisTerm.saving"
+              defaultMessage="Saving ..."
+            />
+          ),
+          success: (
+            <FormattedMessage
+              id="app.editSisTerm.successs"
+              defaultMessage="Saved"
+            />
+          )
+        }}
+      />
+
+      <Button bsStyle="default" className="btn-flat" onClick={onClose}>
+        <CloseIcon />{' '}
+        <FormattedMessage id="app.editSisTerm.close" defaultMessage="Close" />
+      </Button>
+    </Modal.Footer>
+  </Modal>;
+
+EditTerm.propTypes = {
+  handleSubmit: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  submitFailed: PropTypes.bool,
+  anyTouched: PropTypes.bool,
+  submitSucceeded: PropTypes.bool,
+  submitting: PropTypes.bool,
+  invalid: PropTypes.bool,
+  reset: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired
+};
+
+export default reduxForm({ form: 'edit-sis-term' })(EditTerm);

src/components/SisIntegration/EditTerm/index.js

@@ -0,0 +1 @@
+export default from './EditTerm';

src/pages/SisIntegration/SisIntegration.js

@@ -3,14 +3,16 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 import { Row, Col, Button } from 'react-bootstrap';
+import moment from 'moment';
 
 import PageContent from '../../components/layout/PageContent';
 import { isLoggedAsSuperAdmin } from '../../redux/selectors/users';
 import { loggedInUserIdSelector } from '../../redux/selectors/auth';
 import {
   fetchAllTerms,
   create,
-  deleteTerm
+  deleteTerm,
+  editTerm
 } from '../../redux/modules/sisTerms';
 import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer';
 import {
@@ -21,9 +23,12 @@ import AddSisTermForm from '../../components/forms/AddSisTermForm/AddSisTermForm
 import TermsList from '../../components/SisIntegration/TermsList/TermsList';
 import Box from '../../components/widgets/Box/Box';
 import Confirm from '../../components/forms/Confirm';
-import { DeleteIcon } from '../../components/icons';
+import { EditIcon, DeleteIcon } from '../../components/icons';
+import EditTerm from '../../components/SisIntegration/EditTerm';
 
 class SisIntegration extends Component {
+  state = { openEdit: null };
+
   static loadAsync = (params, dispatch, userId, isSuperAdmin) =>
     Promise.all([dispatch(fetchAllTerms)]);
 
@@ -33,7 +38,13 @@ class SisIntegration extends Component {
   }
 
   render() {
-    const { fetchStatus, createNewTerm, deleteTerm, sisTerms } = this.props;
+    const {
+      fetchStatus,
+      createNewTerm,
+      deleteTerm,
+      editTerm,
+      sisTerms
+    } = this.props;
 
     return (
       <PageContent
@@ -79,6 +90,18 @@ class SisIntegration extends Component {
                     terms={sisTerms}
                     createActions={id =>
                       <div>
+                        <Button
+                          bsSize="xs"
+                          className="btn-flat"
+                          bsStyle="warning"
+                          onClick={() => this.setState({ openEdit: id })}
+                        >
+                          <EditIcon />{' '}
+                          <FormattedMessage
+                            id="app.sisIntegration.editButton"
+                            defaultMessage="Edit"
+                          />
+                        </Button>
                         <Confirm
                           id={id}
                           onConfirmed={() => deleteTerm(id)}
@@ -101,6 +124,15 @@ class SisIntegration extends Component {
                             />
                           </Button>
                         </Confirm>
+                        <EditTerm
+                          id={id}
+                          isOpen={this.state.openEdit === id}
+                          onClose={() => this.setState({ openEdit: null })}
+                          onSubmit={data =>
+                            editTerm(this.state.openEdit, data).then(() =>
+                              this.setState({ openEdit: null })
+                            )}
+                        />
                       </div>}
                   />
                 </Box>}
@@ -122,6 +154,7 @@ SisIntegration.propTypes = {
   fetchStatus: PropTypes.string,
   createNewTerm: PropTypes.func,
   deleteTerm: PropTypes.func,
+  editTerm: PropTypes.func,
   sisTerms: PropTypes.array.isRequired
 };
 
@@ -138,7 +171,16 @@ const mapDispatchToProps = (dispatch, { params }) => ({
   loadAsync: (userId, isSuperAdmin) =>
     SisIntegration.loadAsync(params, dispatch, userId, isSuperAdmin),
   createNewTerm: data => dispatch(create(data)),
-  deleteTerm: id => dispatch(deleteTerm(id))
+  deleteTerm: id => dispatch(deleteTerm(id)),
+  editTerm: (id, data) => {
+    // convert deadline times to timestamps
+    const processedData = Object.assign({}, data, {
+      beginning: moment(data.beginning).unix(),
+      end: moment(data.end).unix(),
+      advertiseUntil: moment(data.advertiseUntil).unix()
+    });
+    return dispatch(editTerm(id, processedData));
+  }
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(SisIntegration);