Create & implement facilities tab

- create facilities tab for displaying a text list of facilities - add free text search field to search on name, and country name fields - add functionality to download a CSV of facilities filtered by free text search - update Redux actions to handle toggling & displaying the facilities tab and storing the free text search value - adjust application HTML element hierarchy & style sheet in order to - prevent the enter app from scrolling vertically - enable select components to scroll vertically when necessary
opensupplyhub · Mar 4, 2019 · 12ed908 · 12ed908
1 parent dae70dc
commit 12ed908
Show file tree

Hide file tree

Showing 27 changed files with 844 additions and 241 deletions.
diff --git a/src/app/src/App.jsx b/src/app/src/App.jsx
@@ -35,11 +35,18 @@ import {
     profileRoute,
 } from './util/constants';
 
-const styles = {
-    root: {
+const appStyles = Object.freeze({
+    root: Object.freeze({
         flexGrow: 1,
-    },
-};
+    }),
+    mainPanelStyle: Object.freeze({
+        top: '64px',
+        right: '0',
+        left: '0',
+        position: 'fixed',
+        bottom: '47px',
+    }),
+});
 
 class App extends Component {
     componentDidMount() {
@@ -52,7 +59,7 @@ class App extends Component {
                 <Router history={history}>
                     <div className="App">
                         <Navbar />
-                        <div>
+                        <main style={appStyles.mainPanelStyle}>
                             <Switch>
                                 <Route
                                     exact
@@ -92,7 +99,7 @@ class App extends Component {
                                     component={FacilityLists}
                                 />
                             </Switch>
-                        </div>
+                        </main>
                         <Footer />
                         <ToastContainer
                             position="bottom-center"
@@ -115,4 +122,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(() => ({}), mapDispatchToProps)(withStyles(styles)(App));
+export default connect(() => ({}), mapDispatchToProps)(withStyles(appStyles)(App));
diff --git a/src/app/src/__tests__/utils.facilitiesCSV.tests.js b/src/app/src/__tests__/utils.facilitiesCSV.tests.js
@@ -0,0 +1,79 @@
+/* eslint-env jest */
+import isEqual from 'lodash/isEqual';
+
+import {
+    csvHeaders,
+    createFacilityRowFromFeature,
+    formatDataForCSV,
+} from '../util/util.facilitiesCSV';
+
+it('creates a new facility row array from a feature', () => {
+    const feature = {
+        properties: {
+            name: 'name',
+            address: 'address',
+            country_code: 'country_code',
+            country_name: 'country_name',
+            oar_id: 'oar_id',
+        },
+        geometry: {
+            coordinates: [
+                'lng',
+                'lat',
+            ],
+        },
+    };
+
+    const expectedRowArray = [
+        'oar_id',
+        'name',
+        'address',
+        'country_code',
+        'country_name',
+        'lat',
+        'lng',
+    ];
+
+    expect(isEqual(
+        createFacilityRowFromFeature(feature),
+        expectedRowArray,
+    )).toBe(true);
+});
+
+it('creates a 2-d array including headers for exporting as a CSV', () => {
+    const facilities = [
+        {
+            properties: {
+                name: 'name',
+                address: 'address',
+                country_code: 'country_code',
+                country_name: 'country_name',
+                oar_id: 'oar_id',
+            },
+            geometry: {
+                coordinates: [
+                    'lng',
+                    'lat',
+                ],
+            },
+        },
+    ];
+
+    const expected2DArray = [
+        csvHeaders,
+        [
+            'oar_id',
+            'name',
+            'address',
+            'country_code',
+            'country_name',
+            'lat',
+            'lng',
+        ],
+    ];
+
+    expect(isEqual(
+        formatDataForCSV(facilities),
+        expected2DArray,
+    )).toBe(true);
+});
diff --git a/src/app/src/actions/ui.js b/src/app/src/actions/ui.js
@@ -2,3 +2,9 @@ import { createAction } from 'redux-act';
 
 export const makeSidebarGuideTabActive = createAction('MAKE_SIDEBAR_GUIDE_TAB_ACTIVE');
 export const makeSidebarSearchTabActive = createAction('MAKE_SIDEBAR_SEARCH_TAB_ACTIVE');
+export const makeSidebarFacilitiesTabActive = createAction('MAKE_SIDEBAR_FACILITIES_TAB_ACTIVE');
+
+export const updateSidebarFacilitiesTabSearch =
+    createAction('UPDATE_SIDEBAR_FACILITIES_TAB_TEXT_SEARCH');
+export const resetSidebarFacilitiesTabSearch =
+    createAction('RESET_SIDEBAR_FACILITIES_TAB_TEXT_SEARCH');
diff --git a/src/app/src/components/AppGrid.jsx b/src/app/src/components/AppGrid.jsx
@@ -16,7 +16,6 @@ export default function AppGrid({
                 style={{
                     marginLeft: 'auto',
                     marginRight: 'auto',
-                    marginTop: '64px',
                 }}
             >
                 <Grid container style={style}>

diff --git a/src/app/src/components/AppOverflow.jsx b/src/app/src/components/AppOverflow.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { node } from 'prop-types';
+
+export default function AppOverflow({
+    children,
+}) {
+    return (
+        <div style={{ height: '100%', overflow: 'auto' }}>
+            {children}
+        </div>
+    );
+}
+
+AppOverflow.propTypes = {
+    children: node.isRequired,
+};
diff --git a/src/app/src/components/Contribute.jsx b/src/app/src/components/Contribute.jsx
@@ -6,6 +6,7 @@ import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import ContributeHeader from './ContributeHeader';
 import ContributeForm from './ContributeForm';
 import ContributeTroubleshooting from './ContributeTroubleshooting';
@@ -49,31 +50,33 @@ function ContributeList({
     }
 
     return (
-        <AppGrid title="Contribute">
-            <Grid container className="margin-bottom-64">
-                <Grid item xs={12}>
-                    <ContributeHeader />
-                    <ContributeForm />
-                    <div className="form__field">
-                        <p className="form__label">
-                            Once the list has been successfully
-                            uploaded, view your list and confirm or deny
-                            matches.
-                        </p>
-                    </div>
-                    <div className="form__field">
-                        <Link
-                            to={listsRoute}
-                            href={listsRoute}
-                            className="outlined-button outlined-button--link margin-top-16"
-                        >
-                            View My Lists
-                        </Link>
-                    </div>
+        <AppOverflow>
+            <AppGrid title="Contribute">
+                <Grid container className="margin-bottom-64">
+                    <Grid item xs={12}>
+                        <ContributeHeader />
+                        <ContributeForm />
+                        <div className="form__field">
+                            <p className="form__label">
+                                Once the list has been successfully
+                                uploaded, view your list and confirm or deny
+                                matches.
+                            </p>
+                        </div>
+                        <div className="form__field">
+                            <Link
+                                to={listsRoute}
+                                href={listsRoute}
+                                className="outlined-button outlined-button--link margin-top-16"
+                            >
+                                View My Lists
+                            </Link>
+                        </div>
+                    </Grid>
+                    <ContributeTroubleshooting />
                 </Grid>
-                <ContributeTroubleshooting />
-            </Grid>
-        </AppGrid>
+            </AppGrid>
+        </AppOverflow>
     );
 }
 

diff --git a/src/app/src/components/ControlledTextInput.jsx b/src/app/src/components/ControlledTextInput.jsx
@@ -9,6 +9,7 @@ export default function ControlledTextInput({
     hint,
     value,
     onChange,
+    placeholder,
 }) {
     return (
         <Fragment>
@@ -21,6 +22,7 @@ export default function ControlledTextInput({
                 className="noFocus form__text-input"
                 value={value}
                 onChange={onChange}
+                placeholder={placeholder}
             />
         </Fragment>
     );
@@ -29,6 +31,7 @@ export default function ControlledTextInput({
 ControlledTextInput.defaultProps = {
     type: 'text',
     hint: '',
+    placeholder: '',
 };
 
 ControlledTextInput.propTypes = {
@@ -37,4 +40,5 @@ ControlledTextInput.propTypes = {
     type: string,
     hint: string,
     onChange: func.isRequired,
+    placeholder: string,
 };
diff --git a/src/app/src/components/FacilityListItems.jsx b/src/app/src/components/FacilityListItems.jsx
@@ -8,6 +8,7 @@ import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import FacilityListItemsEmpty from './FacilityListItemsEmpty';
 import FacilityListItemsTable from './FacilityListItemsTable';
 
@@ -101,59 +102,61 @@ class FacilityListItems extends Component {
         }
 
         return (
-            <Grid
-                container
-                justify="center"
-            >
+            <AppOverflow>
                 <Grid
-                    item
-                    style={facilityListItemsStyles.tableStyles}
+                    container
+                    justify="center"
                 >
-                    <div style={facilityListItemsStyles.headerStyles}>
-                        <div>
-                            <h2 style={facilityListItemsStyles.titleStyles}>
-                                {data.name || data.id}
-                            </h2>
-                            <Typography
-                                variant="subheading"
-                                style={facilityListItemsStyles.descriptionStyles}
-                            >
-                                {data.description || ''}
-                            </Typography>
+                    <Grid
+                        item
+                        style={facilityListItemsStyles.tableStyles}
+                    >
+                        <div style={facilityListItemsStyles.headerStyles}>
+                            <div>
+                                <h2 style={facilityListItemsStyles.titleStyles}>
+                                    {data.name || data.id}
+                                </h2>
+                                <Typography
+                                    variant="subheading"
+                                    style={facilityListItemsStyles.descriptionStyles}
+                                >
+                                    {data.description || ''}
+                                </Typography>
+                            </div>
+                            <div>
+                                <Button
+                                    variant="outlined"
+                                    color="primary"
+                                    style={facilityListItemsStyles.buttonStyles}
+                                    onClick={() => downloadListItemCSV(data)}
+                                >
+                                    Download CSV
+                                </Button>
+                                <Button
+                                    variant="outlined"
+                                    component={Link}
+                                    to={listsRoute}
+                                    href={listsRoute}
+                                    style={facilityListItemsStyles.buttonStyles}
+                                >
+                                    Back to lists
+                                </Button>
+                            </div>
                         </div>
-                        <div>
-                            <Button
-                                variant="outlined"
-                                color="primary"
-                                style={facilityListItemsStyles.buttonStyles}
-                                onClick={() => downloadListItemCSV(data)}
-                            >
-                                Download CSV
-                            </Button>
-                            <Button
-                                variant="outlined"
-                                component={Link}
-                                to={listsRoute}
-                                href={listsRoute}
-                                style={facilityListItemsStyles.buttonStyles}
-                            >
-                                Back to lists
-                            </Button>
-                        </div>
-                    </div>
-                    {
-                        data.items.length
-                            ? (
-                                <Switch>
-                                    <Route
-                                        path={facilityListItemsRoute}
-                                        component={FacilityListItemsTable}
-                                    />
-                                </Switch>)
-                            : <FacilityListItemsEmpty />
-                    }
+                        {
+                            data.items.length
+                                ? (
+                                    <Switch>
+                                        <Route
+                                            path={facilityListItemsRoute}
+                                            component={FacilityListItemsTable}
+                                        />
+                                    </Switch>)
+                                : <FacilityListItemsEmpty />
+                        }
+                    </Grid>
                 </Grid>
-            </Grid>
+            </AppOverflow>
         );
     }
 }