From 30c152db552c8b4de5001431ef9b4b986ba50e0c Mon Sep 17 00:00:00 2001
From: Senad Uka <senaduka@gmail.com>
Date: Wed, 28 Aug 2019 17:43:18 +0200
Subject: [PATCH] Room Office Mapping / Home screen now functional / Bugfixes

---
 client/src/components/MainMenu/index.js       |   2 +-
 client/src/components/PromptMessage/index.js  |  35 ++++
 client/src/constants/menuItems.js             |  20 +++
 client/src/scenes/Home/index.js               |  37 +++--
 .../components/SingleMapping.js               | 152 ++++++++++++++++++
 .../src/scenes/RoomOfficeNameMapping/index.js |  99 ++++++++++++
 .../src/store/actions/integrationActions.js   |  24 +++
 controllers/integration.js                    |  44 ++++-
 routes/index.js                               |   4 +
 services/officeRnD/resources.js               |  16 +-
 10 files changed, 410 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/PromptMessage/index.js
 create mode 100644 client/src/scenes/RoomOfficeNameMapping/components/SingleMapping.js
 create mode 100644 client/src/scenes/RoomOfficeNameMapping/index.js

diff --git a/client/src/components/MainMenu/index.js b/client/src/components/MainMenu/index.js
index 1fd8f65..7210e9c 100644
--- a/client/src/components/MainMenu/index.js
+++ b/client/src/components/MainMenu/index.js
@@ -5,7 +5,7 @@ import { Menu } from 'semantic-ui-react';
 import { mainMenuItems } from '../../constants/menuItems';
 
 const MainMenu = () =>
-    (<Menu>
+    (<Menu size={'huge'}>
         {
             mainMenuItems.map(mainMenuItem => {
                 if (!mainMenuItem.showInMenu){
diff --git a/client/src/components/PromptMessage/index.js b/client/src/components/PromptMessage/index.js
new file mode 100644
index 0000000..e85e9ad
--- /dev/null
+++ b/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;
diff --git a/client/src/constants/menuItems.js b/client/src/constants/menuItems.js
index 2c7b8bf..c07add6 100644
--- a/client/src/constants/menuItems.js
+++ b/client/src/constants/menuItems.js
@@ -3,11 +3,13 @@ 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 = [
     {
         id: 'home',
         showInMenu: true,
+        showOnHomePage: false,
         title: 'Home',
         url: '/',
         component: Home,
@@ -15,35 +17,53 @@ export const mainMenuItems = [
     {
         id: 'memberPracticeSummaryReport',
         showInMenu: true,
+        showOnHomePage: true,
         title: 'Member Practice Summary Report',
         url: '/member-practice-summary-report',
         component: MemberPracticeSummaryReport,
+        description: 'Generate a report for a year, for all members',
     },
     {
         id: 'specificMemberIncidentsReport',
         showInMenu: true,
+        showOnHomePage: true,
         title: 'Member Incidents Report',
         url: '/specific-member-incidents-report',
         component: SpecificMemberIncidentsReport,
+        description: 'Displays all incidents with a total charge amount in a selected month for a selected member. It is also possible to send displayed fees to the ORD',
     },
     {
         id: 'specificMemberIncidentsReportWithMemberId',
         showInMenu: false,
+        showOnHomePage: false,
         url: '/specific-member-incidents-report/:memberId',
         component: SpecificMemberIncidentsReport,
     },
     {
         id: 'report',
         showInMenu: true,
+        showOnHomePage: true,
         title: 'Incidents Report',
         url: '/incidents-report',
         component: IncidentsReport,
+        description: 'Display all incidents in a selected month for all members. It is also possible to send displayed fees to the ORD',
     },
     {
         id: 'uploadDLockData',
         showInMenu: true,
+        showOnHomePage: true,
         title: 'DLock',
         url: '/dlock',
         component: UploadDLockData,
+        description: 'Upload DLock files to the system',
     },
+    {
+        id: 'roomOfficeNameMapping',
+        showInMenu: true,
+        showOnHomePage: true,
+        title: 'Room Office Mapping',
+        url: '/room-office-name-mapping',
+        component: RoomOfficeNameMapping,
+        description: 'Edit / delete existing office-room mappings',
+    }
 ];
diff --git a/client/src/scenes/Home/index.js b/client/src/scenes/Home/index.js
index 599ec3b..b344612 100644
--- a/client/src/scenes/Home/index.js
+++ b/client/src/scenes/Home/index.js
@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 
-import { Container, Form } from 'semantic-ui-react';
+import { Container, Message } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
+import { mainMenuItems } from '../../constants/menuItems';
 
 class Home extends Component {
 
@@ -10,25 +11,23 @@ class Home extends Component {
         return (
             <Container>
                 <MainMenu/>
-                <h3>Report</h3>
+                <h3>SIMA SPACE </h3>
                 <hr/>
-                <Form>
-                    <Form.Group widths="equal">
-                        <Form.Input
-                            fluid
-                            required
-                            label="Start date"
-                            type="date"
-                        />
-                        <Form.Input
-                            fluid
-                            required
-                            label="End date"
-                            type="date"
-                        />
-                    </Form.Group>
-                    <Form.Button>Show report</Form.Button>
-                </Form>
+                {
+                    mainMenuItems.map((menuItem) => {
+                        const { showOnHomePage, title, description, url} = menuItem;
+                        if (showOnHomePage){
+
+                            return (
+                                <Message size={'large'}>
+                                    <a href={url}><Message.Header>{title}</Message.Header></a>
+                                    <br/>
+                                    {description}
+                                </Message>
+                            );
+                        }
+                    })
+                }
             </Container>
         );
     }
diff --git a/client/src/scenes/RoomOfficeNameMapping/components/SingleMapping.js b/client/src/scenes/RoomOfficeNameMapping/components/SingleMapping.js
new file mode 100644
index 0000000..2e7d36d
--- /dev/null
+++ b/client/src/scenes/RoomOfficeNameMapping/components/SingleMapping.js
@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { Table, Label, Icon, Dropdown } from 'semantic-ui-react';
+import PromptMessage from '../../../components/PromptMessage';
+import { deleteMapping, updateMapping } from '../../../store/actions';
+
+class SingleMapping extends Component {
+    state  = {showDeletePrompt: false, newOfficeId: null, newResourceId: null};
+
+    deleteMapping = () => {
+        this.setState({showDeletePrompt: true});
+    };
+
+    onPromptClose = () => {
+        this.setState({showDeletePrompt: false});
+    };
+
+    onPromptYes = () => {
+        const { singleMapping: { id }, deleteMapping } = this.props;
+        if (parseInt(id)){
+            deleteMapping(id);
+        }
+        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 { 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>
+                <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>
+                    <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={!enableSave}
+                        link={enableSave || null}
+                        color={saveIconColor}
+                        onClick={this.onMappingUpdate}
+                    />
+                    <Icon
+                        circular
+                        name={'trash'}
+                        size={'large'}
+                        disabled={!enableActions}
+                        link={enableActions || null}
+                        onClick={this.deleteMapping}
+                    />
+                </Table.Cell>
+            </Table.Row>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    pendingMappings: state.mappingsData.pending,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    deleteMapping: (id) => deleteMapping(dispatch, id),
+    updateMapping: (id, mapping) => updateMapping(dispatch, id, mapping),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SingleMapping);
diff --git a/client/src/scenes/RoomOfficeNameMapping/index.js b/client/src/scenes/RoomOfficeNameMapping/index.js
new file mode 100644
index 0000000..19fa6ec
--- /dev/null
+++ b/client/src/scenes/RoomOfficeNameMapping/index.js
@@ -0,0 +1,99 @@
+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 officeDropdownOptions = offices.map((office) => {
+            const { officeId, officeName } = office;
+            return {
+                key: officeId,
+                value: officeId,
+                text: officeName,
+            }
+        });
+
+        const allResourceOptions = {};
+        resources.forEach((resource) => {
+            const { resourceId, resourceName, officeId } = resource;
+
+            if (!allResourceOptions[officeId]){
+                allResourceOptions[officeId] = {
+                    roomOptions: []
+                }
+            }
+
+            allResourceOptions[officeId].roomOptions.push({
+                key: resourceId,
+                value: resourceId,
+                text: resourceName,
+            });
+        });
+
+        return (
+            <Container>
+                <Loader active={pendingMappings} />
+                <MainMenu/>
+                <h3>Room Office Mapping</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}
+                                    officeId={officeId}
+                                    resourceId={resourceId}
+                                    officeOptions={officeDropdownOptions}
+                                    allResourceOptions={allResourceOptions}
+                                />
+                            })
+                        }
+                    </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);
diff --git a/client/src/store/actions/integrationActions.js b/client/src/store/actions/integrationActions.js
index d2b4d1f..bef2eb7 100644
--- a/client/src/store/actions/integrationActions.js
+++ b/client/src/store/actions/integrationActions.js
@@ -38,6 +38,30 @@ 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 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', {
diff --git a/controllers/integration.js b/controllers/integration.js
index 6b4c282..5b17d23 100644
--- a/controllers/integration.js
+++ b/controllers/integration.js
@@ -2,7 +2,7 @@
 
 const moment = require('moment-timezone');
 
-const { getMappingsFromDatabase, fetchOffices, fetchResources, saveNewMappingToDatabase } = require('../services/officeRnD/resources');
+const { getMappingsFromDatabase, fetchOffices, fetchResources, saveNewMappingToDatabase, deleteMappingById, updateMappingById } = require('../services/officeRnD/resources');
 const { getAllIncidents, getMemberPracticeSummaryReport } = require('../services/integration/reports');
 const { getMembersFeesForDateRange } = require('../services/integration/invoiceIntegration');
 const { deleteFeesFromORD, addFeesToORD } = require('../services/officeRnD/fees');
@@ -13,7 +13,7 @@ const { checkIfProcessing } = require('../services/integration/processingStatus'
 const { UI_TIMEZONE } = require('../constants/constants');
 
 const getKnownOfficeResourceMappings = (req, res) => {
-    const dataToFetch = [getMappingsFromDatabase(), fetchOffices(), fetchResources() ];
+    const dataToFetch = [getMappingsFromDatabase(), fetchOffices(), fetchResources()];
 
     Promise.all(dataToFetch)
         .then(result => {
@@ -24,6 +24,7 @@ const getKnownOfficeResourceMappings = (req, res) => {
             });
         })
         .catch(error => {
+            console.log('Error with fetching mappings : ', error);
             res.status(500).send();
         });
 };
@@ -41,6 +42,43 @@ const addNewMapping = (req, res) => {
     }
 };
 
+const deleteMapping = (req, res) => {
+    const mappingId = req.params.mappingId;
+
+    if (mappingId && parseInt(mappingId)){
+        deleteMappingById(mappingId)
+            .then(() => {
+                getKnownOfficeResourceMappings(req, res);
+            })
+            .catch((error) => {
+                console.log('Error deleting mapping with id = ', mappingId);
+                console.log(error);
+                res.status(500).send();
+            });
+    }else{
+        getKnownOfficeResourceMappings(req, res);
+    }
+};
+
+const updateMapping = (req, res) => {
+    const mappingId = req.params.mappingId;
+    const mapping = req.body && req.body.mapping ? req.body.mapping : null;
+
+    if (mappingId && parseInt(mappingId)){
+        updateMappingById(mappingId, mapping)
+            .then(() => {
+                getKnownOfficeResourceMappings(req, res);
+            })
+            .catch((error) => {
+                console.log('Error updating mapping with id = ', mappingId);
+                console.log(error);
+                res.status(500).send();
+            });
+    }else{
+        getKnownOfficeResourceMappings(req, res);
+    }
+};
+
 const getAllIncidentsController = (req, res) => {
     const dateRange = {
         startDate: req.params.startDate,
@@ -170,6 +208,8 @@ const getPracticeSummaryReport = (req, res) => {
 module.exports = {
     getKnownOfficeResourceMappings,
     addNewMapping,
+    deleteMapping,
+    updateMapping,
     getAllIncidentsController,
     getMemberIncidents,
     addFees,
diff --git a/routes/index.js b/routes/index.js
index 27add39..c8d30fe 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -6,6 +6,8 @@ const { fetchMembersList } = require('../controllers/officeRnD');
 const {
     getKnownOfficeResourceMappings,
     addNewMapping,
+    deleteMapping,
+    updateMapping,
     getAllIncidentsController,
     getMemberIncidents,
     addFees,
@@ -23,6 +25,8 @@ router.get('/', apiStatusCheck);
 router.post('/doorLock/upload', uploadDoorLockData);
 router.get('/integration/mappings', getKnownOfficeResourceMappings);
 router.post('/integration/mappings', addNewMapping);
+router.delete('/integration/mappings/:mappingId', deleteMapping);
+router.put('/integration/mappings/:mappingId', updateMapping);
 
 router.get('/integration/report/member/:memberId/:startDate/:endDate', getMemberIncidents);
 router.get('/integration/report/allIncidents/:startDate/:endDate', getAllIncidentsController);
diff --git a/services/officeRnD/resources.js b/services/officeRnD/resources.js
index 37d73b7..918bc68 100644
--- a/services/officeRnD/resources.js
+++ b/services/officeRnD/resources.js
@@ -70,7 +70,19 @@ const getResourceMappings = () => {
 };
 
 const getMappingsFromDatabase = () => {
-    return db.officeResourceMapping.findAll();
+    return db.officeResourceMapping.findAll({order: [['id']]});
+};
+
+const deleteMappingById = (id) => {
+    return db.officeResourceMapping.destroy({where: {id}});
+};
+
+const updateMappingById = (id, mapping) => {
+    if (mapping.id) {
+        delete mapping.id;
+    }
+
+    return db.officeResourceMapping.update(mapping, {where: {id}});
 };
 
 const saveNewMappingToDatabase = (mapping) => {
@@ -83,4 +95,6 @@ module.exports = {
     fetchResources,
     getResourceMappings,
     saveNewMappingToDatabase,
+    deleteMappingById,
+    updateMappingById,
 };