implement mapping update

client/src/scenes/RoomOfficeNameMapping/components/SingleMapping.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { Table, Label, Icon } from 'semantic-ui-react';
+import { Table, Label, Icon, Dropdown } from 'semantic-ui-react';
 import PromptMessage from '../../../components/PromptMessage';
-import { deleteMapping } from '../../../store/actions';
+import { deleteMapping, updateMapping } from '../../../store/actions';
 
 class SingleMapping extends Component {
-    state  = {showDeletePrompt: false};
+    state  = {showDeletePrompt: false, newOfficeId: null, newResourceId: null};
 
     deleteMapping = () => {
         this.setState({showDeletePrompt: true});
@@ -24,10 +24,70 @@ class SingleMapping extends Component {
         this.onPromptClose();
     };
 
+    onOfficeChange = (event, data) => {
+        const newOfficeId = data.value;
+        const { allResourceOptions, officeId: oldOfficeId } = this.props;
+
+        if (oldOfficeId !== newOfficeId){
+            let newResourceId = null;
+            const roomOptionsForOffice = allResourceOptions[newOfficeId] && allResourceOptions[newOfficeId].roomOptions ?
+                allResourceOptions[newOfficeId].roomOptions : [];
+
+            if (roomOptionsForOffice.length > 0){
+                newResourceId = roomOptionsForOffice[0].value;
+            }
+
+            this.setState({newOfficeId, newResourceId});
+        }else{
+            this.setState({newOfficeId: null, newResourceId: null});
+        }
+    };
+
+    onResourceChange = (event, data) => {
+        const newResourceId = data.value;
+        const oldResourceId = this.props.resourceId;
+
+        if (oldResourceId !== newResourceId){
+            this.setState({newResourceId});
+        }else{
+            this.setState({newResourceId: null});
+        }
+    };
+
+    onMappingUpdate = () => {
+        const { singleMapping: { id, officeSlug, resourceSlug }, updateMapping, officeId, resourceId } = this.props;
+        const { newOfficeId, newResourceId } = this.state;
+
+        const selectedOfficeId = newOfficeId ? newOfficeId : officeId;
+        const selectedResourceId = newResourceId ? newResourceId : resourceId;
+
+        if (parseInt(id)){
+
+            const modifiedMapping = {
+                officeSlug,
+                resourceSlug,
+                officeId: selectedOfficeId,
+                resourceId: selectedResourceId,
+            };
+
+            updateMapping(id, modifiedMapping);
+            this.setState({newOfficeId: null, newResourceId: null});
+        }
+    };
+
     render() {
         const { singleMapping: { officeSlug, resourceSlug } } = this.props;
-        const { officeName, resourceName } = this.props;
-        const { showDeletePrompt } = this.state;
+        const { officeId, resourceId, officeOptions, allResourceOptions, pendingMappings } = this.props;
+        const { showDeletePrompt, newOfficeId, newResourceId } = this.state;
+
+        const selectedOfficeId = newOfficeId ? newOfficeId : officeId;
+        const selectedResourceId = newResourceId ? newResourceId : resourceId;
+
+        const resourceOptions = allResourceOptions && officeId ? allResourceOptions[selectedOfficeId].roomOptions : [];
+
+        const enableActions = !pendingMappings;
+        const enableSave = enableActions && ((newOfficeId !== null) || (newResourceId !== null));
+        const saveIconColor = enableSave ? 'green' : null;
 
         return (
             <Table.Row>
@@ -42,20 +102,36 @@ class SingleMapping extends Component {
                 <Table.Cell>
                     <Label size={'big'}>{`[${officeSlug}-${resourceSlug}]`}</Label>
                 </Table.Cell>
-                <Table.Cell>{officeName}</Table.Cell>
-                <Table.Cell>{resourceName}</Table.Cell>
+                <Table.Cell>
+                    <Dropdown
+                        options={officeOptions}
+                        defaultValue={officeId}
+                        onChange={this.onOfficeChange}
+                    />
+                </Table.Cell>
+                <Table.Cell>
+                    <Dropdown
+                        options={resourceOptions}
+                        value={selectedResourceId}
+                        onChange={this.onResourceChange}
+                    />
+                </Table.Cell>
                 <Table.Cell>
                     <Icon
                         circular
                         name={'check'}
                         size={'large'}
-                        disabled
+                        disabled={!enableSave}
+                        link={enableSave || null}
+                        color={saveIconColor}
+                        onClick={this.onMappingUpdate}
                     />
                     <Icon
                         circular
                         name={'trash'}
                         size={'large'}
-                        link
+                        disabled={!enableActions}
+                        link={enableActions || null}
                         onClick={this.deleteMapping}
                     />
                 </Table.Cell>
@@ -64,8 +140,13 @@ class SingleMapping extends Component {
     }
 }
 
-const mapDispatchToProps = (dispatch) => ({
-    deleteMapping: (id) => deleteMapping(dispatch, id),
+const mapStateToProps = (state) => ({
+    pendingMappings: state.mappingsData.pending,
 });
 
-export default connect(null, mapDispatchToProps)(SingleMapping);
+const mapDispatchToProps = (dispatch) => ({
+    deleteMapping: (id) => deleteMapping(dispatch, id),
+    updateMapping: (id, mapping) => updateMapping(dispatch, id, mapping),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SingleMapping);

client/src/scenes/RoomOfficeNameMapping/index.js

@@ -20,17 +20,30 @@ class RoomOfficeNameMapping extends Component {
         const offices = mappings && mappings.offices ? mappings.offices : [];
         const resources = mappings && mappings.resources ? mappings.resources : [];
 
-        const officesMap = {};
-        const resourcesMap = {};
-
-        offices.forEach((office) => {
+        const officeDropdownOptions = offices.map((office) => {
             const { officeId, officeName } = office;
-            officesMap[officeId] = officeName;
+            return {
+                key: officeId,
+                value: officeId,
+                text: officeName,
+            }
         });
 
+        const allResourceOptions = {};
         resources.forEach((resource) => {
-            const { resourceId, resourceName } = resource;
-            resourcesMap[resourceId] = resourceName;
+            const { resourceId, resourceName, officeId } = resource;
+
+            if (!allResourceOptions[officeId]){
+                allResourceOptions[officeId] = {
+                    roomOptions: []
+                }
+            }
+
+            allResourceOptions[officeId].roomOptions.push({
+                key: resourceId,
+                value: resourceId,
+                text: resourceName,
+            });
         });
 
         return (
@@ -56,8 +69,10 @@ class RoomOfficeNameMapping extends Component {
                                 return <SingleMapping
                                     key={singleMapping.id}
                                     singleMapping={singleMapping}
-                                    officeName={officesMap[officeId]}
-                                    resourceName={resourcesMap[resourceId]}
+                                    officeId={officeId}
+                                    resourceId={resourceId}
+                                    officeOptions={officeDropdownOptions}
+                                    allResourceOptions={allResourceOptions}
                                 />
                             })
                         }

client/src/store/actions/integrationActions.js

@@ -49,6 +49,19 @@ export const deleteMapping = (dispatch, mappingId) => {
         });
 };
 
+export const updateMapping = (dispatch, id, mapping) => {
+    dispatch({type: FETCH_MAPPINGS_PENDING});
+    API.put(`integration/mappings/${id}`, {
+        mapping
+    })
+        .then(response => {
+            dispatch({type: FETCH_MAPPINGS_SUCCESS, payload: response.data});
+        })
+        .catch(error => {
+            dispatch({type: FETCH_MAPPINGS_FAILED, payload: error.response});
+        });
+};
+
 export const addNewMapping = (dispatch, mapping) => {
     dispatch({type: ADD_NEW_MAPPING_PENDING});
     API.post('integration/mappings', {