Save, and edit changes

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -8,7 +8,14 @@ import SaveChangesDialog from './SaveChangesDialog';
 
 class Configure extends React.Component {
   render() {
-    const { canSave, currentUser, root, savePending, settings } = this.props;
+    const {
+      canSave,
+      currentUser,
+      root,
+      savePending,
+      settings,
+      clearPending,
+    } = this.props;
 
     if (!can(currentUser, 'UPDATE_CONFIG')) {
       return <p>{t('configure.access_message')}</p>;
@@ -17,6 +24,9 @@ class Configure extends React.Component {
     const passProps = {
       root,
       settings,
+      savePending,
+      clearPending,
+      canSave,
     };
 
     return (
@@ -84,6 +94,7 @@ Configure.propTypes = {
   children: PropTypes.node.isRequired,
   saveDialog: PropTypes.bool,
   hideSaveDialog: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
 };
 
 export default Configure;

client/coral-admin/src/routes/Configure/components/OrganizationSettings.css

@@ -16,7 +16,7 @@
 }
 
 .detailValue {
-  padding: 6px 10px;
+  padding: 6px 0;
   border: solid 1px transparent;
   display: block;
   font-size: 1em;
@@ -24,6 +24,8 @@
 }
 
 .editable {
+  padding-left: 10px;
+  padding-right: 10px;
   border-color: grey;
 }
 
@@ -32,20 +34,31 @@
   list-style: none;
 }
 
-.editButton {
-  position: absolute;
-  right: 10px;
-  top: 10px;
+.button, .button:disabled {
+  background: white;
+  border: solid 1px grey;
 }
 
 .actionBox {
   position: absolute;
-  right: 10px;
-  top: 10px; 
+  right: 20px;
+  top: 20px;
   text-align: center;
+  width: 100px;
 }
 
 .cancelButton {
   padding: 10px;
   display: block;
+  color: #4f5c67;
+  font-weight: 500;
+  
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.changedSave {
+  background-color: #00796B;
+  color: white;
 }

client/coral-admin/src/routes/Configure/components/OrganizationSettings.js

@@ -17,6 +17,12 @@ class OrganizationSettings extends React.Component {
     }));
   };
 
+  disableEditing = () => {
+    this.setState(() => ({
+      editing: false,
+    }));
+  };
+
   updateName = event => {
     const updater = { organizationName: { $set: event.target.value } };
     this.props.updatePending({ updater });
@@ -27,32 +33,56 @@ class OrganizationSettings extends React.Component {
     this.props.updatePending({ updater });
   };
 
+  cancelEditing = () => {
+    this.disableEditing();
+    this.props.clearPending();
+  };
+
+  save = async () => {
+    await this.props.savePending();
+    this.disableEditing();
+  };
+
   render() {
-    const { settings, slotPassthrough } = this.props;
+    const { settings, slotPassthrough, canSave } = this.props;
     return (
       <ConfigurePage title={t('configure.organization_information')}>
         <p>{t('configure.organization_info_copy')}</p>
         <p>{t('configure.organization_info_copy_2')}</p>
         <ConfigureCard>
           {!this.state.editing ? (
-            <Button
-              className={styles.editButton}
-              icon="settings"
-              onClick={this.toggleEditing}
-            >
-              Edit Info
-            </Button>
+            <div className={styles.actionBox}>
+              <Button
+                className={styles.button}
+                icon="settings"
+                onClick={this.toggleEditing}
+                full
+              >
+                {t('configure.edit_info')}
+              </Button>
+            </div>
           ) : (
             <div className={styles.actionBox}>
-              <Button icon="done" onClick={this.toggleEditing}>
-                Save
-              </Button>
-              <a className={styles.cancelButton}>Cancel</a>
+              {canSave ? (
+                <Button
+                  raised
+                  onClick={this.save}
+                  className={styles.changedSave}
+                  icon="check"
+                  full
+                >
+                  {t('configure.save')}
+                </Button>
+              ) : (
+                <Button className={styles.button} disabled icon="check" full>
+                  {t('configure.save')}
+                </Button>
+              )}
+              <a className={styles.cancelButton} onClick={this.cancelEditing}>
+                {t('cancel')}
+              </a>
             </div>
           )}
-
-          {console.log(this.props.slotPassthrough)}
-
           <ul className={styles.detailList}>
             <li className={styles.detailItem}>
               <label
@@ -99,10 +129,13 @@ class OrganizationSettings extends React.Component {
 }
 
 OrganizationSettings.propTypes = {
+  savePending: PropTypes.func.isRequired,
+  clearPending: PropTypes.func.isRequired,
   updatePending: PropTypes.func.isRequired,
   errors: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   slotPassthrough: PropTypes.object.isRequired,
+  canSave: PropTypes.bool.isRequired,
 };
 
 export default OrganizationSettings;

client/coral-admin/src/routes/Configure/containers/Configure.js

@@ -84,18 +84,21 @@ class ConfigureContainer extends React.Component {
       return <Spinner />;
     }
 
+    const activeSection = this.props.routes[3].path;
+
     return (
       <Configure
         saveChanges={this.saveChanges}
         discardChanges={this.discardChanges}
         saveDialog={this.props.saveDialog}
-        activeSection={this.props.routes[3].path}
+        activeSection={activeSection}
         hideSaveDialog={this.props.hideSaveDialog}
         canSave={this.props.canSave}
         currentUser={this.props.currentUser}
         root={this.props.root}
         settings={this.props.mergedSettings}
         handleSectionChange={this.handleSectionChange}
+        clearPending={this.props.clearPending}
         savePending={this.savePending}
       >
         {this.props.children}