Skip to content

Commit

Permalink
Merge pull request #387 from cityofaustin/6845-sg-new-component-list
Browse files Browse the repository at this point in the history 
Implement ability to toggle and edit components from full page map #6845
  • Loading branch information
@sergiogcx
sergiogcx authored Aug 12, 2021
2 parents ecf79c6 + f76f046 commit f953ea6
Show file tree
Hide file tree
Showing 5 changed files with 332 additions and 153 deletions.
3 changes: 1 addition & 2 deletions moped-editor/src/utils/mapHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -835,8 +835,6 @@ export function useLayerSelect(initialSelectedLayerNames, classes) {
? [...prevLayers.filter(name => name !== layerName)]
: [...prevLayers, layerName];
});

handleMenuClose();
};

/**
Expand Down Expand Up @@ -906,6 +904,7 @@ export function useLayerSelect(initialSelectedLayerNames, classes) {
keepMounted
open={Boolean(anchorEl)}
onClose={handleMenuClose}
transitionDuration={0}
>
{getLayerNames().map(name => {
if (!showProjectFeatures && projectFeatureLayerNames.includes(name))
Expand Down
2 changes: 1 addition & 1 deletion moped-editor/src/views/projects/newProjectView/NewProjectMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const useStyles = makeStyles(theme => ({
right: "1rem",
zIndex: 1,
height: "3rem",
width: "205px",
width: "206px",
backgroundColor: "white",
"&:hover": {
backgroundColor: "white",
Expand Down
6 changes: 5 additions & 1 deletion moped-editor/src/views/projects/projectView/ProjectComponentEdit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@ const useStyles = makeStyles(theme => ({
mapToolsDivider: {
marginTop: ".5rem",
},
layerSelectBox: {
maxHeight: "35vh",
overflow: "scroll"
},
}));

/**
Expand Down Expand Up @@ -773,7 +777,7 @@ const ProjectComponentEdit = ({
<Grid
item
xs={12}
style={{ maxHeight: "35vh", overflow: "scroll" }}
className={classes.layerSelectBox}
>
<Grid container spacing={1} xs={12} style={{ margin: 0 }}>
<Grid item xs={12}>
Expand Down
245 changes: 116 additions & 129 deletions moped-editor/src/views/projects/projectView/ProjectComponents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,39 @@ import { useParams } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import { COMPONENTS_QUERY } from "../../../queries/project";
import {
CardContent,
Grid,
Paper,
Table,
TableBody,
TableContainer,
TableHead,
TableRow,
TableCell,
CircularProgress,
ClickAwayListener,
Icon,
Button,
List,
ListItem,
ListItemIcon,
Checkbox,
ListItemText,
ListItemSecondaryAction,
IconButton,
} from "@material-ui/core";

import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
import { ErrorBoundary } from "react-error-boundary";
import ApolloErrorHandler from "../../../components/ApolloErrorHandler";
import ProjectComponentsMapView from "./ProjectComponentsMapView";
import { createFeatureCollectionFromProjectFeatures } from "../../../utils/mapHelpers";
import ProjectSummaryMapFallback from "./ProjectSummaryMapFallback";
import ProjectComponentEdit from "./ProjectComponentEdit";
import Alert from "@material-ui/lab/Alert";
import { ArrowForwardIos } from "@material-ui/icons";

const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
listItemCheckbox: {
color: "black !important",
},
listItemSecondaryAction: {
fontSize: "1.125rem",
},
componentItem: {
cursor: "pointer",
backgroundColor: theme.palette.background.paper,
Expand All @@ -47,9 +51,7 @@ const useStyles = makeStyles(theme => ({
background: "#b3e5fc", // Lightblue 100
},
},
componentButtonAddNew: {
marginTop: theme.spacing(2),
},
componentButtonAddNew: {},
}));

/**
Expand Down Expand Up @@ -185,124 +187,109 @@ const ProjectComponents = () => {
projectFeatureCollection={featureFullCollection}
/>
)}
<CardContent>
{!componentEditMode && (
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
{componentsAvailable && (
<Paper className={classes.root}>
<ClickAwayListener onClickAway={handleComponentClickAway}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell>Type</TableCell>
<TableCell>Subtype</TableCell>
<TableCell>Sub-Components</TableCell>
<TableCell>Details</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.moped_proj_components.map(
(component, compIndex) => {
const projComponentId =
component.project_component_id;
return (
<TableRow
role="checkbox"
tabIndex={compIndex}
key={"mcTableRow-" + projComponentId}
onClick={() =>
handleComponentClick(projComponentId)
}
className={
projComponentId === selectedComp
? classes.componentItemBlue
: classes.componentItem
}
>
<TableCell>
{
component?.moped_components
?.component_type
}
</TableCell>
<TableCell>
{
component?.moped_components
?.component_subtype
}
</TableCell>
<TableCell>
{[
...new Set(
component.moped_proj_components_subcomponents.map(
mpcs =>
mpcs.moped_subcomponent
.subcomponent_name
)
),
]
.sort()
.join(", ")}
</TableCell>
<TableCell align={"center"}>
<DoubleArrowIcon
onClick={handleComponentDetailsClick}
/>
</TableCell>
</TableRow>
);
}
)}
</TableBody>
</Table>
</TableContainer>
</ClickAwayListener>
</Paper>
)}
{!componentsAvailable && (
<Alert severity="info">
There aren't any components for this project.
</Alert>
)}
<Button
className={classes.componentButtonAddNew}
onClick={handleAddNewComponentClick}
variant="outlined"
color="default"
size={"large"}
startIcon={<Icon>add</Icon>}
>
Add new component
</Button>
</Grid>
{!componentEditMode && (
<ErrorBoundary
FallbackComponent={({ error, resetErrorBoundary }) => (
<ProjectSummaryMapFallback
error={error}
resetErrorBoundary={resetErrorBoundary}
projectId={projectId}
setIsEditing={null}
refetchProjectDetails={refetch}
mapData={projectFeatureCollection}
/>
)}
onReset={() => setMapError(false)}
resetKeys={[mapError]}
>
<ProjectComponentsMapView
projectFeatureCollection={projectFeatureCollection}
setIsEditing={false}
noPadding
>
<Button
className={classes.componentButtonAddNew}
onClick={handleAddNewComponentClick}
variant="outlined"
color="default"
size={"large"}
startIcon={<Icon>add</Icon>}
fullWidth
>
Add new component
</Button>
{componentsAvailable && (
<Grid item xs={12} md={6}>
<ErrorBoundary
FallbackComponent={({ error, resetErrorBoundary }) => (
<ProjectSummaryMapFallback
error={error}
resetErrorBoundary={resetErrorBoundary}
projectId={projectId}
setIsEditing={null}
refetchProjectDetails={refetch}
mapData={projectFeatureCollection}
/>
)}
onReset={() => setMapError(false)}
resetKeys={[mapError]}
>
<ProjectComponentsMapView
projectFeatureCollection={projectFeatureCollection}
setIsEditing={false}
/>
</ErrorBoundary>
</Grid>
<ClickAwayListener onClickAway={handleComponentClickAway}>
<List className={classes.root}>
{data.moped_proj_components.map((component, compIndex) => {
const projComponentId = component.project_component_id;
return (
<ListItem
key={"mcListItem-" + projComponentId}
role={undefined}
dense
button
onClick={() => handleComponentClick(projComponentId)}
className={
projComponentId === selectedComp
? classes.componentItemBlue
: classes.componentItem
}
>
<ListItemIcon>
<Checkbox
edge="start"
className={classes.listItemCheckbox}
checked={projComponentId === selectedComp}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": null }}
/>
</ListItemIcon>
<ListItemText
id={"mcListItemText-" + projComponentId}
primary={component?.moped_components?.component_type}
secondary={
(component?.moped_components?.component_subtype ??
"") +
[
...new Set(
component.moped_proj_components_subcomponents.map(
mpcs =>
mpcs.moped_subcomponent.subcomponent_name
)
),
]
.sort()
.join(", ")
}
/>
<ListItemSecondaryAction
onClick={() => {
handleComponentClick(projComponentId);
handleComponentDetailsClick();
}}
>
<IconButton edge="end" aria-label="comments">
<ArrowForwardIos
className={classes.listItemSecondaryAction}
/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
</ClickAwayListener>
)}
</Grid>
)}
</CardContent>
{!componentsAvailable && (
<Alert severity="info">
There aren't any components for this project.
</Alert>
)}
</ProjectComponentsMapView>
</ErrorBoundary>
)}
</ApolloErrorHandler>
);
};
Expand Down
Loading

0 comments on commit f953ea6

Please sign in to comment.