add mapping; prevent upload before mapping office / resource

client/src/scenes/UploadDLockData/components/UnknownMapping.js

@@ -0,0 +1,172 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import {Button, Dropdown, Message} from "semantic-ui-react";
+import Fuse from 'fuse.js';
+import { addNewMapping } from "../../../store/actions";
+
+class UnknownMapping extends Component {
+    constructor(props) {
+        super(props);
+
+        const guessedValues = this.guessDropdownValues(this.props);
+
+        this.state = {
+            selectedOfficeId: guessedValues.officeValue,
+            selectedResourceId: guessedValues.resourceValue,
+        }
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        const guessedValues = this.guessDropdownValues(nextProps);
+        this.setState({selectedOfficeId: guessedValues.officeValue, selectedResourceId: guessedValues.resourceValue});
+    }
+
+    guessDropdownValues(props){
+        const { mappings, mapping } = props;
+
+        const offices = mappings && mappings.offices ? mappings.offices : [];
+        const resources = mappings && mappings.resources ? mappings.resources : [];
+
+        const fuzzySearchOptions = {
+            shouldSort: true,
+            threshold: 0.5,
+            location: 0,
+            distance: 100,
+            maxPatternLength: 32,
+            minMatchCharLength: 1,
+            keys: [
+                "officeName",
+                "resourceName",
+            ]
+        };
+
+        const officesFuse = new Fuse(offices, fuzzySearchOptions);
+        const fuzzyOfficeSearchResults = officesFuse.search(mapping.officeSlug);
+
+        let officeValue = null;
+        if (fuzzyOfficeSearchResults.length > 0){
+            officeValue = fuzzyOfficeSearchResults[0].officeId;
+        }else if (offices.length > 0){
+            officeValue = offices[0].officeId;
+        }
+
+        const filteredResources = resources.filter(resource => resource.officeId === officeValue);
+
+        const resourcesFuse = new Fuse(filteredResources, fuzzySearchOptions);
+        const fuzzyResourcesSearchResults = resourcesFuse.search(mapping.resourceSlug);
+
+        let resourceValue = null;
+        if (fuzzyResourcesSearchResults.length > 0){
+            resourceValue = fuzzyResourcesSearchResults[0].resourceId;
+        }else if (filteredResources.length > 0){
+            resourceValue = filteredResources[0].resourceId;
+        }
+
+        return {
+            officeValue,
+            resourceValue,
+        }
+    }
+
+    onOfficeChange(event, data) {
+        const { mappings } = this.props;
+
+        const selectedOfficeId = data.value || null;
+        const resources = mappings && mappings.resources ? mappings.resources : [];
+        const filteredResources = resources.filter(resource => resource.officeId === selectedOfficeId);
+        const selectedResourceId = filteredResources.length > 0 ? filteredResources[0].resourceId : null;
+        this.setState({selectedOfficeId, selectedResourceId});
+    }
+
+    onResourceChange(event, data) {
+        const selectedResourceId = data.value || null;
+        this.setState({selectedResourceId});
+    }
+
+    onSave(){
+        const { addNewMapping, mapping } = this.props;
+        const { selectedOfficeId, selectedResourceId } = this.state;
+        const officeSlug = mapping.officeSlug;
+        const resourceSlug = mapping.resourceSlug;
+
+        const newMapping = {
+            officeSlug,
+            resourceSlug,
+            officeId: selectedOfficeId,
+            resourceId: selectedResourceId,
+        };
+
+        addNewMapping(newMapping);
+    }
+
+    render() {
+        const { mapping, mappings } = this.props;
+        const { selectedOfficeId, selectedResourceId } = this.state;
+
+        const offices = mappings && mappings.offices ? mappings.offices : [];
+        const resources = mappings && mappings.resources ? mappings.resources : [];
+
+        const officeDropdownOptions = offices.map(office => {
+            return {
+                key: office.officeId,
+                value: office.officeId,
+                text: office.officeName,
+            }
+        });
+
+        const filteredResources = resources.filter(resource => resource.officeId === selectedOfficeId);
+
+        const resourceDropdownOptions = filteredResources.map(resource => {
+            return {
+                key: resource.resourceId,
+                value: resource.resourceId,
+                text: resource.resourceName,
+            }
+        });
+
+        const saveButtonDisabled = !selectedOfficeId || !selectedResourceId;
+
+        return (
+        <div>
+            <br/>
+            <Message>
+                <Message.Header>{mapping.file}</Message.Header>
+                <br/>
+                <span>
+                    This file contains the unknown location. Based on ORD data, it seems that this file is related to {' '}
+                    <Dropdown
+                        inline
+                        options={officeDropdownOptions}
+                        onChange={this.onOfficeChange.bind(this)}
+                        value={selectedOfficeId}
+                    />
+                    {' '}
+                    /
+                    {' '}
+                    <Dropdown
+                        inline
+                        options={resourceDropdownOptions}
+                        onChange={this.onResourceChange.bind(this)}
+                        value={selectedResourceId}
+                    />
+                </span>
+                <br/>
+                <Button
+                    disabled={saveButtonDisabled}
+                    onClick={this.onSave.bind(this)}
+                >Save</Button>
+            </Message>
+        </div>);
+    }
+}
+
+const mapStateToProps = (state) => ({
+    mappings: state.mappingsData.result,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    addNewMapping: (mapping) => addNewMapping(dispatch, mapping),
+});
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(UnknownMapping);