Room Office Mapping / Home screen now functional / Bugfixes

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);

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);