add mappings page; implement delete mapping function

client/src/components/PromptMessage/index.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import {Button, Modal} from "semantic-ui-react";
+
+
+class PromptMessage extends Component {
+    render() {
+        const {
+            show = false,
+            size = 'tiny',
+            title = '',
+            message = '',
+            noActionLabel = 'No',
+            yesActionLabel = 'Yes',
+            yesActionIconName = 'checkmark',
+            onClose = null,
+            onActionNo = null,
+            onActionYes = null,
+        } = this.props;
+
+        return (
+            <Modal size={size} open={show} onClose={onClose}>
+                <Modal.Header>{title}</Modal.Header>
+                <Modal.Content>
+                    <p>{message}</p>
+                </Modal.Content>
+                <Modal.Actions>
+                    <Button negative onClick={onActionNo}>{noActionLabel}</Button>
+                    <Button positive icon={yesActionIconName} onClick={onActionYes} labelPosition='right' content={yesActionLabel} />
+                </Modal.Actions>
+            </Modal>
+        );
+    }
+}
+
+export default PromptMessage;

client/src/constants/menuItems.js

@@ -3,6 +3,7 @@ import Home from '../scenes/Home';
 import IncidentsReport from '../scenes/IncidentsReport';
 import SpecificMemberIncidentsReport from '../scenes/SpecificMemberIncidentsReport';
 import MemberPracticeSummaryReport from '../scenes/MemberPracticeSummaryReport';
+import RoomOfficeNameMapping from '../scenes/RoomOfficeNameMapping';
 
 export const mainMenuItems = [
     {
@@ -46,4 +47,11 @@ export const mainMenuItems = [
         url: '/dlock',
         component: UploadDLockData,
     },
+    {
+        id: 'roomOfficeNameMapping',
+        showInMenu: true,
+        title: 'Room Office Name Mapping',
+        url: '/room-office-name-mapping',
+        component: RoomOfficeNameMapping,
+    }
 ];

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

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { Table, Label, Icon } from 'semantic-ui-react';
+import PromptMessage from '../../../components/PromptMessage';
+import { deleteMapping } from '../../../store/actions';
+
+class SingleMapping extends Component {
+    state  = {showDeletePrompt: false};
+
+    deleteMapping = () => {
+        this.setState({showDeletePrompt: true});
+    };
+
+    onPromptClose = () => {
+        this.setState({showDeletePrompt: false});
+    };
+
+    onPromptYes = () => {
+        const { singleMapping: { id }, deleteMapping } = this.props;
+        if (parseInt(id)){
+            deleteMapping(id);
+        }
+        this.onPromptClose();
+    };
+
+    render() {
+        const { singleMapping: { officeSlug, resourceSlug } } = this.props;
+        const { officeName, resourceName } = this.props;
+        const { showDeletePrompt } = this.state;
+
+        return (
+            <Table.Row>
+                <PromptMessage
+                    onClose={this.onPromptClose}
+                    onActionNo={this.onPromptClose}
+                    onActionYes={this.onPromptYes}
+                    title={'Delete mapping'}
+                    message={'Do you want to delete this mapping ?'}
+                    show={showDeletePrompt}
+                />
+                <Table.Cell>
+                    <Label size={'big'}>{`[${officeSlug}-${resourceSlug}]`}</Label>
+                </Table.Cell>
+                <Table.Cell>{officeName}</Table.Cell>
+                <Table.Cell>{resourceName}</Table.Cell>
+                <Table.Cell>
+                    <Icon
+                        circular
+                        name={'check'}
+                        size={'large'}
+                        disabled
+                    />
+                    <Icon
+                        circular
+                        name={'trash'}
+                        size={'large'}
+                        link
+                        onClick={this.deleteMapping}
+                    />
+                </Table.Cell>
+            </Table.Row>
+        );
+    }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+    deleteMapping: (id) => deleteMapping(dispatch, id),
+});
+
+export default connect(null, mapDispatchToProps)(SingleMapping);

client/src/scenes/RoomOfficeNameMapping/index.js

@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Container, Message, Loader, Table } from 'semantic-ui-react';
+
+import MainMenu from '../../components/MainMenu';
+import { fetchMappings } from '../../store/actions';
+import SingleMapping from './components/SingleMapping';
+
+class RoomOfficeNameMapping extends Component {
+
+    componentDidMount() {
+        const { fetchMappings } = this.props;
+
+        fetchMappings();
+    }
+
+    render () {
+        const { pendingMappings, mappings } = this.props;
+        const existingMappings = mappings && mappings.existingMappings ? mappings.existingMappings : [];
+        const offices = mappings && mappings.offices ? mappings.offices : [];
+        const resources = mappings && mappings.resources ? mappings.resources : [];
+
+        const officesMap = {};
+        const resourcesMap = {};
+
+        offices.forEach((office) => {
+            const { officeId, officeName } = office;
+            officesMap[officeId] = officeName;
+        });
+
+        resources.forEach((resource) => {
+            const { resourceId, resourceName } = resource;
+            resourcesMap[resourceId] = resourceName;
+        });
+
+        return (
+            <Container>
+                <Loader active={pendingMappings} />
+                <MainMenu/>
+                <h3>Room-Office-Name Mappings</h3>
+                <hr/>
+                <br/>
+                <Table singleLine unstackable>
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.HeaderCell>File name</Table.HeaderCell>
+                            <Table.HeaderCell>Office</Table.HeaderCell>
+                            <Table.HeaderCell>Resource</Table.HeaderCell>
+                            <Table.HeaderCell>Actions</Table.HeaderCell>
+                        </Table.Row>
+                    </Table.Header>
+                    <Table.Body>
+                        {
+                            existingMappings.map((singleMapping) => {
+                                const { officeId, resourceId } = singleMapping;
+                                return <SingleMapping
+                                    key={singleMapping.id}
+                                    singleMapping={singleMapping}
+                                    officeName={officesMap[officeId]}
+                                    resourceName={resourcesMap[resourceId]}
+                                />
+                            })
+                        }
+                    </Table.Body>
+                </Table>
+                <br/>
+                <Message>
+                    <h4>To add the mapping, upload new DL lock files and you will be prompted with new mapping options if the file name contains the unknown location</h4>
+                </Message>
+            </Container>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    pendingMappings: state.mappingsData.pending,
+    mappings: state.mappingsData.result,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    fetchMappings: () => fetchMappings(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(RoomOfficeNameMapping);

client/src/store/actions/integrationActions.js

@@ -38,6 +38,17 @@ export const fetchMappings = (dispatch) => {
         });
 };
 
+export const deleteMapping = (dispatch, mappingId) => {
+    dispatch({type: FETCH_MAPPINGS_PENDING});
+    API.delete(`integration/mappings/${mappingId}`)
+        .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', {