Skip to content

Commit

Permalink
feat: planter and tree ids link to webmap (#79)
Browse files Browse the repository at this point in the history
* feat: planter and tree ids link to webmap

* Update Planters.js
  • Loading branch information
VLuisa authored May 5, 2021
1 parent 28805a2 commit cb792f7
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 6 deletions.
5 changes: 4 additions & 1 deletion src/components/PlanterDetail.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { hasPermission, POLICIES } from '../models/auth';
import { AppContext } from './Context';
import EditPlanter from './EditPlanter';
import OptimizedImage from './OptimizedImage';
import LinkToWebmap from './common/LinkToWebmap';

const useStyle = makeStyles((theme) => ({
root: {
Expand Down Expand Up @@ -158,7 +159,9 @@ const PlanterDetail = (props) => {
<Typography variant="h5" color="primary" className={classes.name}>
{planter.firstName} {planter.lastName}
</Typography>
<Typography variant="body2">ID:{planter.id}</Typography>
<Typography variant="body2">
ID: <LinkToWebmap value={planter.id} type="user" />
</Typography>
</Grid>
<Divider />
<Grid container direction="column" className={classes.box}>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Planters.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import Person from '@material-ui/icons/Person';
import Navbar from './Navbar';
import PlanterDetail from './PlanterDetail';
import OptimizedImage from './OptimizedImage';
import LinkToWebmap from './common/LinkToWebmap';

const log = require('loglevel').getLogger('../components/Planters');

Expand Down Expand Up @@ -323,7 +324,9 @@ function Planter(props) {
<Typography className={classes.name}>
{planter.firstName} {planter.lastName}
</Typography>
<Typography>ID: {planter.id}</Typography>
<Typography>
ID: <LinkToWebmap value={planter.id} type="user" />
</Typography>
{planter.organization && (
<Typography>Organization: {planter.organization}</Typography>
)}
Expand Down
16 changes: 13 additions & 3 deletions src/components/TreeDetailDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import Snackbar from '@material-ui/core/Snackbar';
import FileCopy from '@material-ui/icons/FileCopy';
import CloseIcon from '@material-ui/icons/Close';
import OptimizedImage from './OptimizedImage';
import LinkToWebmap from './common/LinkToWebmap';

const useStyles = makeStyles((theme) => ({
chipRoot: {
Expand Down Expand Up @@ -110,13 +111,18 @@ function TreeDetailDialog(props) {
<Grid item container direction="column" spacing={4}>
<Grid item>
<Typography color="primary" variant="h6">
{`Tree ${tree.id}`}
Tree <LinkToWebmap value={tree.id} type="tree" />
<CopyButton label="Tree ID" value={tree.id} />
</Typography>
</Grid>
<Divider />
{[
{ label: 'Planter ID', value: tree.planterId, copy: true },
{
label: 'Planter ID',
value: tree.planterId,
copy: true,
link: true,
},
{
label: 'Planter Identifier',
value: tree.planterIdentifier,
Expand All @@ -138,7 +144,11 @@ function TreeDetailDialog(props) {
<Grid item>
<Typography variant="subtitle1">{item.label}</Typography>
<Typography variant="body1">
{item.value || '---'}
{item.link ? (
<LinkToWebmap value={item.value} type="user" />
) : (
item.value || '---'
)}
{item.value && item.copy && (
<CopyButton label={item.label} value={item.value} />
)}
Expand Down
13 changes: 12 additions & 1 deletion src/components/TreeTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import { getDateTimeStringLocale } from '../common/locale';
import Filter, { FILTER_WIDTH } from './Filter';
import TreeDetails from './TreeDetails.js';
import LinkToWebmap from './common/LinkToWebmap';

// change 88 to unit spacing,
const styles = (theme) => ({
Expand Down Expand Up @@ -229,7 +230,7 @@ class TreeTable extends Component {
>
{columns.map(({ attr, renderer }) => (
<TableCell key={attr}>
{renderer ? renderer(tree[attr]) : tree[attr]}
{formatCell(tree, attr, renderer)}
</TableCell>
))}
</TableRow>
Expand All @@ -254,6 +255,16 @@ class TreeTable extends Component {
}
}

const formatCell = (tree, attr, renderer) => {
if (attr === 'id' || attr === 'planterId') {
return (
<LinkToWebmap value={tree[attr]} type={attr === 'id' ? 'tree' : 'user'} />
);
} else {
return renderer ? renderer(tree[attr]) : tree[attr];
}
};

const mapState = (state) => {
const keys = Object.keys(state.trees.data);
return {
Expand Down
26 changes: 26 additions & 0 deletions src/components/common/LinkToWebmap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import Link from '@material-ui/core/Link';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
openInNewIcon: {
margin: theme.spacing(-0.5, 0.5),
},
}));

export default function LinkToWebmap(props) {
const { value, type } = props;
const classes = useStyles();

return (
<Link
href={`${process.env.REACT_APP_WEBMAP_DOMAIN}/?${type}id=${value}`}
underline="always"
target="_blank"
>
{value}
<OpenInNewIcon fontSize="inherit" className={classes.openInNewIcon} />
</Link>
);
}

0 comments on commit cb792f7

Please sign in to comment.