| @@ -1,13 +1,13 @@ |
| /* eslint-disable flowtype/no-types-missing-file-annotation */ |
| import * as React from 'react' |
| -import {useEffect, useState, Fragment, ChangeEvent } from 'react' |
| +import { useEffect, useState, Fragment, ChangeEvent } from 'react' |
| import { connect, useSelector, useDispatch } from 'react-redux' |
| import { useKeycloak } from '@react-keycloak/web' |
| import area from '@turf/area' |
| import shp from 'shpjs' |
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
| import classNames from 'classnames' |
| -import { Paper } from '@material-ui/core' |
| +import { Paper, Zoom } from '@material-ui/core' |
| import Avatar from '@material-ui/core/Avatar' |
| import Button from '@material-ui/core/Button' |
| import Chip from '@material-ui/core/Chip' |
| @@ -101,44 +101,44 @@ |
| const checkedIcon = <CheckBoxIcon fontSize="small" /> |
| |
| interface Props { |
| - catenaMap: typeof CatenaMap |
| - classes: { |
| - iconContainer: string |
| - icon: string |
| - } |
| - closeSnackbar: Function |
| - setSnackbar: Function |
| - closeDismissSnackbar: Function |
| - setDismissSnackbar: Function |
| - uploadDocument: Function |
| - updateDocument: Function |
| - deleteDocuments: Function |
| - onAreaDelete: Function |
| - onAreaDownload: Function |
| - onAreaFeaturesUpload: Function |
| - onCreateNewProject: Function |
| - onEditProjectGetProjectMembers: Function |
| - onSaveProject: Function |
| - onSelectProject: Function |
| - onRenameProject: Function |
| - onDeleteProject: any |
| - onProjectUndo: any |
| - onFetchContractDetails: Function |
| - project: ProjectType |
| - tabbedPanel: TabbedPanelType |
| - setIsUploadDocumentDialogOpen: Function |
| - setTabbedPanelWindowState: Function |
| - toggleIsEditingStation: Function |
| - editMonitoringStation: Function |
| - toggleIsCreatingStation: Function |
| - onCreateMonitoringStation: Function |
| - manageProjects: ManageProjectsType |
| - settings: SettingsType |
| - theme: { |
| - controlBar: string |
| - controlBarTop: string |
| - toolbuttonPanel: string |
| - } |
| + catenaMap: typeof CatenaMap |
| + classes: { |
| + iconContainer: string |
| + icon: string |
| + } |
| + closeSnackbar: Function |
| + setSnackbar: Function |
| + closeDismissSnackbar: Function |
| + setDismissSnackbar: Function |
| + uploadDocument: Function |
| + updateDocument: Function |
| + deleteDocuments: Function |
| + onAreaDelete: Function |
| + onAreaDownload: Function |
| + onAreaFeaturesUpload: Function |
| + onCreateNewProject: Function |
| + onEditProjectGetProjectMembers: Function |
| + onSaveProject: Function |
| + onSelectProject: Function |
| + onRenameProject: Function |
| + onDeleteProject: any |
| + onProjectUndo: any |
| + onFetchContractDetails: Function |
| + project: ProjectType |
| + tabbedPanel: TabbedPanelType |
| + setIsUploadDocumentDialogOpen: Function |
| + setTabbedPanelWindowState: Function |
| + toggleIsEditingStation: Function |
| + editMonitoringStation: Function |
| + toggleIsCreatingStation: Function |
| + onCreateMonitoringStation: Function |
| + manageProjects: ManageProjectsType |
| + settings: SettingsType |
| + theme: { |
| + controlBar: string |
| + controlBarTop: string |
| + toolbuttonPanel: string |
| + } |
| } |
| |
| const styles = (theme) => ({ |
| @@ -262,7 +262,7 @@ |
| useEffect(() => { |
| dispatch({ type: types.SET_EQIP_NUM_ALREADY_USED, payload: null }) |
| const timeoutHandle = setTimeout(() => { |
| - if(createProjectDetailsEQIPNum !== -1){ |
| + if (createProjectDetailsEQIPNum !== -1) { |
| dispatch(isEQIPNumAlreadyUsed(createProjectDetailsEQIPNum)) |
| } |
| }, 2000) |
| @@ -270,15 +270,15 @@ |
| return () => { |
| clearTimeout(timeoutHandle) |
| } |
| - },[createProjectDetailsEQIPNum]) |
| + }, [createProjectDetailsEQIPNum]) |
| |
| useEffect(() => { |
| - if(eqipIdAlreadyUsed){ |
| + if (eqipIdAlreadyUsed) { |
| const oldErrorInputs = errorInputs |
| oldErrorInputs.push('detailsEQIPNum') |
| setErrorInputs(oldErrorInputs) |
| - } else{ |
| - const newErrorInputs = errorInputs.filter(e => e!== 'detailsEQIPNum') |
| + } else { |
| + const newErrorInputs = errorInputs.filter(e => e !== 'detailsEQIPNum') |
| setErrorInputs(newErrorInputs) |
| } |
| }, [eqipIdAlreadyUsed]) |
| @@ -310,7 +310,7 @@ |
| useEffect(() => { |
| if ( |
| props.manageProjects.isEditingDocument && |
| - selectedProjects.length >= 0 |
| + selectedProjects.length >= 0 |
| ) { |
| const editingDoc = selectedProjects[0].documents.filter( |
| (d) => d.id === props.manageProjects.editingDocumentID |
| @@ -418,15 +418,15 @@ |
| const editingStation = getEditingStation(props.manageProjects) |
| if ( |
| props.manageProjects.isEditingStation && |
| - !createStationDetailsID && |
| - editingStation |
| + !createStationDetailsID && |
| + editingStation |
| ) { |
| loadMonitoringStation(getEditingStation(props.manageProjects)) |
| } |
| if ( |
| activeStep === 1 && |
| - props.manageProjects.newProject && |
| - !isEditingProject |
| + props.manageProjects.newProject && |
| + !isEditingProject |
| ) { |
| drawTestGeometry() |
| } |
| @@ -488,16 +488,16 @@ |
| const renderProjectList = () => { |
| const { manageProjects, theme } = props |
| const isProjectFilterTextEmpty = |
| - !projectFilterText || projectFilterText.trim() === '' |
| + !projectFilterText || projectFilterText.trim() === '' |
| // Filter based on what's in the filter box first. |
| const filteredProjects = manageProjects.projects.filter( |
| (p) => |
| isProjectFilterTextEmpty || |
| - p.eqipNum |
| - .toString() |
| - .toLowerCase() |
| - .includes(projectFilterText.toLowerCase()) || |
| - p.title.toLowerCase().includes(projectFilterText.toLowerCase()) |
| + p.eqipNum |
| + .toString() |
| + .toLowerCase() |
| + .includes(projectFilterText.toLowerCase()) || |
| + p.title.toLowerCase().includes(projectFilterText.toLowerCase()) |
| ) |
| |
| const projects = filteredProjects.map((project) => ( |
| @@ -520,7 +520,7 @@ |
| const project = selectedProjects[0] |
| const docCategories = documentUploadCategories |
| const fileInput: HTMLInputElement = |
| - document.getElementById('docUploadInput') |
| + document.getElementById('docUploadInput') |
| const userFullName = `${users.user['lastName']}, ${users.user['firstName']}` |
| props.uploadDocument( |
| fileInput.files, |
| @@ -599,7 +599,7 @@ |
| let fileNameText = 'Browse to select a file' |
| if ( |
| props.manageProjects.selectedFileNames && |
| - props.manageProjects.selectedFileNames.length > 0 |
| + props.manageProjects.selectedFileNames.length > 0 |
| ) { |
| // string together the fileNames with commas separating for display. |
| fileNameText = '' |
| @@ -650,7 +650,7 @@ |
| variant="contained" |
| disabled={ |
| fileNameText !== '' && |
| - fileNameText !== 'Browse to select a file' |
| + fileNameText !== 'Browse to select a file' |
| } |
| color="primary" |
| style={{ width: '35%' }} |
| @@ -661,7 +661,7 @@ |
| .click() |
| } |
| > |
| - Browse |
| + Browse |
| </Button> |
| </Grid> |
| <Grid item> |
| @@ -727,7 +727,7 @@ |
| color="primary" |
| onClick={() => handleCancelUploadDocumentClick()} |
| > |
| - Cancel |
| + Cancel |
| </Button> |
| </MuiDialogActions> |
| </TopAlignedDialog> |
| @@ -740,9 +740,9 @@ |
| const errors = [] |
| if ( |
| !isEditingStation && |
| - selectedProjects[0].monitoringStations.find( |
| - (m) => m.id === createStationDetailsID |
| - ) |
| + selectedProjects[0].monitoringStations.find( |
| + (m) => m.id === createStationDetailsID |
| + ) |
| ) |
| errors.push('stationID') // No duplicate station ids |
| if (createStationDetailsID.length === 0) errors.push('stationID') // Must have a station ID |
| @@ -870,7 +870,7 @@ |
| style={{ minWidth: 250 }} |
| > |
| <InputLabel htmlFor="treatment-indicator-select"> |
| - Treatment Indicator |
| + Treatment Indicator |
| </InputLabel> |
| <Select |
| value={createStationDetailsTreatmentIndicator} |
| @@ -898,14 +898,14 @@ |
| area-label="Control" |
| value="control" |
| > |
| - Control |
| + Control |
| </MenuItem> |
| <MenuItem |
| key="treatment" |
| aria-label="Treatment" |
| value="treatment" |
| > |
| - Treatment |
| + Treatment |
| </MenuItem> |
| </Select> |
| <FormHelperText /> |
| @@ -990,7 +990,7 @@ |
| } |
| if (geojson.features[0].geometry.type === 'Polygon') { |
| const drainageArea = |
| - area(geojson.features[0]) * 0.000247105 // meters to acres conversion |
| + area(geojson.features[0]) * 0.000247105 // meters to acres conversion |
| setCreateStationDrainageAcres( |
| drainageArea.toString() |
| ) |
| @@ -1036,7 +1036,7 @@ |
| <div className={classes.flexContainer}> |
| <div className={classes.flexTripleItem}> |
| <Typography variant="h6"> |
| - Enter station information manually: |
| + Enter station information manually: |
| </Typography> |
| <Paper elevation={3} style={{ padding: 10, marginTop: 10 }}> |
| <TextField |
| @@ -1076,7 +1076,7 @@ |
| </div> |
| <div style={{ width: 50 }} className={classes.flexItem}> |
| <Typography variant="h5" align="center"> |
| - Or... |
| + Or... |
| </Typography> |
| </div> |
| <div |
| @@ -1086,7 +1086,7 @@ |
| )} |
| > |
| <Typography variant="h6"> |
| - Upload Station information: |
| + Upload Station information: |
| </Typography> |
| <Paper elevation={3} style={{ padding: 10, marginTop: 10 }}> |
| <input |
| @@ -1108,7 +1108,7 @@ |
| .click() |
| } |
| > |
| - Upload Station Coordinates |
| + Upload Station Coordinates |
| </Button> |
| <br /> |
| <input |
| @@ -1130,7 +1130,7 @@ |
| .click() |
| } |
| > |
| - Upload drainage gemoetry |
| + Upload drainage gemoetry |
| </Button> |
| </Paper> |
| </div> |
| @@ -1176,15 +1176,15 @@ |
| let dialogContent = null |
| const { isEditingStation, isCreatingStation } = props.manageProjects |
| switch (activeStep) { |
| - case 0: |
| - dialogContent = renderStationDetailsStep() |
| - break |
| - case 1: |
| - dialogContent = renderStationLocationStep(classes) |
| - break |
| - default: |
| - dialogContent = renderStationDetailsStep() |
| - break |
| + case 0: |
| + dialogContent = renderStationDetailsStep() |
| + break |
| + case 1: |
| + dialogContent = renderStationLocationStep(classes) |
| + break |
| + default: |
| + dialogContent = renderStationDetailsStep() |
| + break |
| } |
| |
| return ( |
| @@ -1211,7 +1211,7 @@ |
| }} |
| disabled={activeStep === 0} |
| > |
| - Back |
| + Back |
| </Button> |
| <Button |
| variant="contained" |
| @@ -1244,7 +1244,7 @@ |
| } |
| }} |
| > |
| - Cancel |
| + Cancel |
| </Button> |
| </MuiDialogActions> |
| </Dialog> |
| @@ -1287,21 +1287,21 @@ |
| const renderCreateProjectDialog = (classes) => { |
| let dialogContent = null |
| switch (activeStep) { |
| - case 0: |
| - dialogContent = renderProjectDetailsStep() |
| - break |
| - case 1: |
| - dialogContent = renderCreateProjectGeometryStep(classes) |
| - break |
| - case 2: |
| - dialogContent = renderProjectMembersStep(classes) |
| - break |
| - case 3: |
| - dialogContent = renderProjectPracticesStep(classes) |
| - break |
| - default: |
| - dialogContent = renderProjectDetailsStep() |
| - break |
| + case 0: |
| + dialogContent = renderProjectDetailsStep() |
| + break |
| + case 1: |
| + dialogContent = renderCreateProjectGeometryStep(classes) |
| + break |
| + case 2: |
| + dialogContent = renderProjectMembersStep(classes) |
| + break |
| + case 3: |
| + dialogContent = renderProjectPracticesStep(classes) |
| + break |
| + default: |
| + dialogContent = renderProjectDetailsStep() |
| + break |
| } |
| |
| return ( |
| @@ -1339,7 +1339,7 @@ |
| }} |
| disabled={activeStep === 0} |
| > |
| - Back |
| + Back |
| </Button> |
| <Button |
| variant="contained" |
| @@ -1363,7 +1363,7 @@ |
| } else if (activeStep === 1) { |
| // delete the viewport child before progressing a step. |
| const geomDiv = |
| - document.getElementById('geometry-div') |
| + document.getElementById('geometry-div') |
| while (geomDiv.firstChild) { |
| geomDiv.removeChild(geomDiv.firstChild) |
| } |
| @@ -1390,7 +1390,7 @@ |
| color="primary" |
| onClick={() => createProjectClear()} |
| > |
| - Cancel |
| + Cancel |
| </Button> |
| </MuiDialogActions> |
| </Dialog> |
| @@ -1413,7 +1413,8 @@ |
| return { |
| name: user.lastName + ', ' + user.firstName, |
| role: user.role, |
| - id: user.id |
| + id: user.id, |
| + email: user.email, |
| } |
| }) |
| |
| @@ -1424,9 +1425,9 @@ |
| title={ |
| <Fragment> |
| <Typography color="inherit"> |
| - Name: {member.name} |
| + Name: {member.name} |
| </Typography> |
| - Role: {member.role} <br /> |
| + Role: {member.role} <br /> |
| </Fragment> |
| } |
| > |
| @@ -1458,7 +1459,7 @@ |
| className={classes.lrMargin} |
| error={errorInputs.indexOf('memberName') >= 0} |
| style={{ minWidth: '45%' }} |
| - > |
| + > |
| <Autocomplete |
| value={createProjectMemberName} |
| onChange={(event, newValue) => { |
| @@ -1475,10 +1476,12 @@ |
| getOptionLabel={(option) => option.name} |
| renderOption={(option) => ( |
| <Fragment> |
| - <ListItemText style={{fontWeight: 'bold'}}> |
| - {option.name} |
| - </ListItemText> |
| - <Typography variant="body2" style={{color: '#969696'}}> |
| + <Tooltip title={option.email} placement={'bottom-start'} TransitionComponent={Zoom}> |
| + <ListItemText style={{ fontWeight: 'bold' }}> |
| + {option.name} |
| + </ListItemText> |
| + </Tooltip> |
| + <Typography variant="body2" style={{ color: '#969696' }}> |
| {option.role} |
| </Typography> |
| </Fragment> |
| @@ -1499,7 +1502,7 @@ |
| variant="contained" |
| color="primary" |
| > |
| - Add Member |
| + Add Member |
| </Button> |
| </p> |
| </div> |
| @@ -1511,14 +1514,14 @@ |
| : 'initial' |
| } |
| > |
| - Members: |
| + Members: |
| </Typography> |
| <Paper className={classes.box} elevation={4}> |
| {members} |
| </Paper> |
| </div> |
| </div> |
| - </MuiDialogContent> |
| + </MuiDialogContent > |
| ) |
| } |
| |
| @@ -1548,7 +1551,7 @@ |
| <div className={classes.flexItem}> |
| <FormControl variant="filled" style={{ minWidth: 250 }}> |
| <InputLabel htmlFor="conservation-practice-select"> |
| - Conservation Practice(s) |
| + Conservation Practice(s) |
| </InputLabel> |
| <Select |
| value={createProjectSelectedPractice} |
| @@ -1577,7 +1580,7 @@ |
| variant="contained" |
| color="primary" |
| > |
| - Add Practice |
| + Add Practice |
| </Button> |
| </p> |
| </div> |
| @@ -1589,7 +1592,7 @@ |
| : 'initial' |
| } |
| > |
| - Conservation Practices: |
| + Conservation Practices: |
| </Typography> |
| <Paper className={classes.box} elevation={4}> |
| {practices} |
| @@ -1677,7 +1680,7 @@ |
| style={{ minWidth: 250 }} |
| > |
| <InputLabel htmlFor="treatment-type-select"> |
| - Treatment Type |
| + Treatment Type |
| </InputLabel> |
| <Select |
| value={createProjectDetailsTreatmentType} |
| @@ -1708,7 +1711,7 @@ |
| style={{ minWidth: 250 }} |
| > |
| <InputLabel htmlFor="project-status-select"> |
| - Project Status |
| + Project Status |
| </InputLabel> |
| <Select |
| value={createProjectDetailsStatus} |
| @@ -1728,16 +1731,16 @@ |
| <em>None</em> |
| </MenuItem> |
| <MenuItem key="New" value="New"> |
| - New |
| + New |
| </MenuItem> |
| <MenuItem key="Approved" value="Approved"> |
| - Approved |
| + Approved |
| </MenuItem> |
| <MenuItem key="Complete" value="Complete"> |
| - Complete |
| + Complete |
| </MenuItem> |
| <MenuItem key="Canceled" value="Canceled"> |
| - Canceled |
| + Canceled |
| </MenuItem> |
| </Select> |
| <FormHelperText /> |
| @@ -1786,9 +1789,9 @@ |
| return ( |
| <MuiDialogContent> |
| <Typography className={classes.centerText}> |
| - The EQIP contract number entered on the previous step is |
| - not valid. Please go back and enter a valid contract |
| - number. |
| + The EQIP contract number entered on the previous step is |
| + not valid. Please go back and enter a valid contract |
| + number. |
| </Typography> |
| </MuiDialogContent> |
| ) |
| @@ -1803,12 +1806,12 @@ |
| }} |
| > |
| <Typography> |
| - The area shown below is linked with the EQIP number you |
| - entered. |
| + The area shown below is linked with the EQIP number you |
| + entered. |
| </Typography> |
| <Typography> |
| - If it looks correct, click "Next". Otherwise, |
| - go back and double check the EQIP number. |
| + If it looks correct, click "Next". Otherwise, |
| + go back and double check the EQIP number. |
| </Typography> |
| </div> |
| <div |
| @@ -1959,7 +1962,7 @@ |
| |
| const renderDismissSnackBar = (classes) => { |
| const { dismissSnackbarMessage, dismissSnackbarOpen } = |
| - props.manageProjects |
| + props.manageProjects |
| return ( |
| <Portal key="dismissSnackBar"> |
| <Snackbar |
| @@ -1978,7 +1981,7 @@ |
| size="small" |
| onClick={() => props.closeDismissSnackbar()} |
| > |
| - DISMISS |
| + DISMISS |
| </Button> |
| <IconButton |
| size="small" |
| @@ -2018,7 +2021,7 @@ |
| size="small" |
| onClick={onUndo} |
| > |
| - UNDO |
| + UNDO |
| </Button> |
| <IconButton |
| size="small" |
| @@ -2067,7 +2070,7 @@ |
| (member) => member.id === id |
| ) |
| const newCreateProjectMembers: MemberType[] = |
| - createProjectMembers.filter((member) => member.id !== id) |
| + createProjectMembers.filter((member) => member.id !== id) |
| |
| props.setSnackbar('Member Removed') |
| |
| @@ -2199,11 +2202,11 @@ |
| } |
| return ( |
| <FontAwesomeIcon icon="cog" spin size="2x" /> |
| - /* <div style={{ padding: '10px' }} className={theme.controlBar}> |
| - <h3>You must be logged in to view this page.</h3> |
| - <br /> |
| - <Button onClick={() => keycloak.login()}>Login</Button> |
| - </div> */ |
| + /* <div style={{ padding: '10px' }} className={theme.controlBar}> |
| + <h3>You must be logged in to view this page.</h3> |
| + <br /> |
| + <Button onClick={() => keycloak.login()}>Login</Button> |
| + </div> */ |
| ) |
| } |
| |
| @@ -1,10 +1,11 @@ |
| /* eslint-disable no-use-before-define */ |
| // @flow |
| -import React, {useState, useEffect} from "react" |
| +import React, { useState, useEffect } from "react" |
| import { useSelector, connect, useDispatch } from 'react-redux' |
| import { |
| FormControl, |
| MenuItem, |
| + Tooltip, |
| Select, |
| Table, |
| TableBody, |
| @@ -14,6 +15,7 @@ |
| TableSortLabel, |
| TableRow, |
| TextField, |
| + Zoom, |
| } from "@material-ui/core" |
| import { |
| saveUsers, |
| @@ -95,7 +97,7 @@ |
| }, [users, sortBy, sortOrder]) |
| |
| React.useEffect(() => { |
| - if(tabbedPanel.windowState !== windowStates.maximized){ |
| + if (tabbedPanel.windowState !== windowStates.maximized) { |
| dispatch(setTabbedPanelWindowState(windowStates.maximized)) |
| } |
| }, []) |
| @@ -113,20 +115,20 @@ |
| ) |
| setUsersFiltered(filteredUsers) |
| } |
| - }, [usersFilterText]) |
| + }, [usersFilterText]) |
| |
| // When a users is updated, we want to send this info back to the db: |
| React.useEffect(() => { |
| // if we actually want this to happen on component unmount, then we have to store the 'usersUpdated' in app-level state, instead of component-level |
| - // so that we can access it via 'getState()' in 'saveUsers' |
| - // however, I don't believe this 'Users' table will be being updated all the time... so if it updates the db upon every table update, I don't think it will cause lag |
| - // React.useEffect(() => { |
| - // return () => { |
| - // props.saveUsers(state.users.usersUpdated) |
| - // state.users.usersUpdated = {} |
| - // } |
| - // }, []) |
| - |
| + // so that we can access it via 'getState()' in 'saveUsers' |
| + // however, I don't believe this 'Users' table will be being updated all the time... so if it updates the db upon every table update, I don't think it will cause lag |
| + // React.useEffect(() => { |
| + // return () => { |
| + // props.saveUsers(state.users.usersUpdated) |
| + // state.users.usersUpdated = {} |
| + // } |
| + // }, []) |
| + |
| return () => { |
| // We only want to update db IF users info has been changed in this table: |
| if (Object.keys(usersUpdated).length > 0) { |
| @@ -151,7 +153,7 @@ |
| copyOfSortedUsers[usersInfoIndex][dropdownType] = newValue |
| setUsersSorted(copyOfSortedUsers) |
| setUsersFiltered(copyOfSortedUsers) |
| - setUsersUpdated({...usersUpdated, [userID]: copyOfSortedUsers[usersInfoIndex]}) |
| + setUsersUpdated({ ...usersUpdated, [userID]: copyOfSortedUsers[usersInfoIndex] }) |
| } |
| |
| const handleStateChange = (userID, newStates) => { |
| @@ -160,7 +162,7 @@ |
| copyOfSortedUsers[usersInfoIndex]['states'] = newStates |
| setUsersSorted(copyOfSortedUsers) |
| setUsersFiltered(copyOfSortedUsers) |
| - setUsersUpdated({...usersUpdated, [userID]: copyOfSortedUsers[usersInfoIndex]}) |
| + setUsersUpdated({ ...usersUpdated, [userID]: copyOfSortedUsers[usersInfoIndex] }) |
| } |
| |
| const onChangeFilterUsers = (evt) => { |
| @@ -176,7 +178,7 @@ |
| s1.firstName.toLowerCase() > s2.firstName.toLowerCase() ? 1 : -1 |
| ) |
| } else if (sortBy === "lastName") { |
| - sortedUsers.sort((s1, s2) => |
| + sortedUsers.sort((s1, s2) => |
| s1.lastName.toLowerCase() > s2.lastName.toLowerCase() ? 1 : -1 |
| ) |
| } else if (sortBy === "role") { |
| @@ -187,7 +189,7 @@ |
| } else { |
| s1Role = s1.role.toLowerCase() |
| } |
| - |
| + |
| let s2Role |
| if (s2.role === null) { |
| s2Role = '' |
| @@ -207,7 +209,7 @@ |
| } else { |
| s1State = s1.abbreviation.toLowerCase() |
| } |
| - |
| + |
| let s2State |
| if (s2.abbreviation === null) { |
| s2State = '' |
| @@ -220,7 +222,7 @@ |
| ) |
| }) |
| } else if (sortBy === "status") { |
| - sortedUsers.sort((s1, s2) => |
| + sortedUsers.sort((s1, s2) => |
| s1.status.toLowerCase() > s2.status.toLowerCase() ? 1 : -1 |
| ) |
| } |
| @@ -245,7 +247,7 @@ |
| const displayTable = () => { |
| let usersDisplayed = usersFilterText === "" ? usersSorted : usersFiltered |
| return ( |
| - <div style={{height: props.height}}> |
| + <div style={{ height: props.height }}> |
| <div key="toolBar" className={'filterUsers'}> |
| <TextField |
| label="Filter Users" |
| @@ -266,7 +268,7 @@ |
| <TableRow> |
| {headers.map((header) => ( |
| <TableCell |
| - style={{width: header.width}} |
| + style={{ width: header.width }} |
| key={"header-" + header.text} |
| className={tableClasses.headerCell} |
| onClick={() => |
| @@ -294,80 +296,82 @@ |
| <TableBody> |
| {usersDisplayed.map((user) => { |
| return ( |
| - <TableRow |
| - className={tableClasses.tableRow} |
| - hover |
| - key={user.id} |
| - > |
| - <TableCell className={tableClasses.bodyCell}> |
| - {user.firstName} |
| - </TableCell> |
| - <TableCell className={tableClasses.bodyCell}> |
| - {user.lastName} |
| - </TableCell> |
| + <Tooltip title={user.email} placement="left" arrow TransitionComponent={Zoom}> |
| + <TableRow |
| + className={tableClasses.tableRow} |
| + hover |
| + key={user.id} |
| + > |
| + <TableCell className={tableClasses.bodyCell}> |
| + {user.firstName} |
| + </TableCell> |
| + <TableCell className={tableClasses.bodyCell}> |
| + {user.lastName} |
| + </TableCell> |
| |
| - {/* Role */} |
| - <TableCell className={tableClasses.bodyCell}> |
| - <FormControl style={{ minWidth: '200px' }} > |
| - <Select |
| - style={{ fontSize: 14, minWidth: '200px' }} |
| - value={user.role} |
| - onChange={(event) => handleChange(event, user.id, 'role')} |
| - > |
| - {roles.map((role) => { |
| - return( |
| - <MenuItem key={role.id} value={role.role}>{role.role}</MenuItem> |
| - ) |
| - })} |
| - </Select> |
| - </FormControl> |
| - </TableCell> |
| + {/* Role */} |
| + <TableCell className={tableClasses.bodyCell}> |
| + <FormControl style={{ minWidth: '200px' }} > |
| + <Select |
| + style={{ fontSize: 14, minWidth: '200px' }} |
| + value={user.role} |
| + onChange={(event) => handleChange(event, user.id, 'role')} |
| + > |
| + {roles.map((role) => { |
| + return ( |
| + <MenuItem key={role.id} value={role.role}>{role.role}</MenuItem> |
| + ) |
| + })} |
| + </Select> |
| + </FormControl> |
| + </TableCell> |
| |
| - {/* State */} |
| - <TableCell className={tableClasses.bodyCell}> |
| - <FormControl style={{ width: '100%' }} > |
| - <Autocomplete |
| - multiple |
| - value={user.states} |
| - id="state-name-select" |
| - options={states} |
| - onChange={(e, newStates) => handleStateChange(user.id, newStates)} |
| - ChipProps={{ |
| - size: 'small', |
| - }} |
| - getOptionLabel={option => { |
| - if (typeof option === 'object') { |
| - return option.abbreviation |
| - } else { |
| - return option |
| + {/* State */} |
| + <TableCell className={tableClasses.bodyCell}> |
| + <FormControl style={{ width: '100%' }} > |
| + <Autocomplete |
| + multiple |
| + value={user.states} |
| + id="state-name-select" |
| + options={states} |
| + onChange={(e, newStates) => handleStateChange(user.id, newStates)} |
| + ChipProps={{ |
| + size: 'small', |
| + }} |
| + getOptionLabel={option => { |
| + if (typeof option === 'object') { |
| + return option.abbreviation |
| + } else { |
| + return option |
| + } |
| + }} |
| + renderInput={(params) => |
| + <TextField |
| + {...params} |
| + /> |
| } |
| - }} |
| - renderInput={(params) => |
| - <TextField |
| - {...params} |
| - /> |
| - } |
| - /> |
| - </FormControl> |
| - </TableCell> |
| + /> |
| + </FormControl> |
| + </TableCell> |
| |
| - {/* Status */} |
| - <TableCell className={tableClasses.bodyCell}> |
| - <FormControl style={{ minWidth: '100px' }}> |
| - <Select |
| - style={{ fontSize: 14, minWidth: '100px' }} |
| - value={user.status} |
| - onChange={(event) => handleChange(event, user.id, 'status')} |
| - > |
| - {statuses.map((status) => { |
| - return( |
| - <MenuItem key={status.id} value={status.status}>{status.status}</MenuItem> |
| - ) |
| - })} |
| - </Select> |
| - </FormControl> |
| - </TableCell> |
| - </TableRow> |
| + {/* Status */} |
| + <TableCell className={tableClasses.bodyCell}> |
| + <FormControl style={{ minWidth: '100px' }}> |
| + <Select |
| + style={{ fontSize: 14, minWidth: '100px' }} |
| + value={user.status} |
| + onChange={(event) => handleChange(event, user.id, 'status')} |
| + > |
| + {statuses.map((status) => { |
| + return ( |
| + <MenuItem key={status.id} value={status.status}>{status.status}</MenuItem> |
| + ) |
| + })} |
| + </Select> |
| + </FormControl> |
| + </TableCell> |
| + </TableRow> |
| + </Tooltip> |
| ) |
| })} |
| </TableBody> |
| @@ -379,10 +383,10 @@ |
| |
| const displayLoading = () => { |
| return ( |
| - <div className={spinnerClasses.center}> |
| - <i className="fa fa-cog fa-spin fa-3x fa-fw" /> |
| - <span className="sr-only">Loading...</span> |
| - </div> |
| + <div className={spinnerClasses.center}> |
| + <i className="fa fa-cog fa-spin fa-3x fa-fw" /> |
| + <span className="sr-only">Loading...</span> |
| + </div> |
| ) |
| } |
| |