Skip to content

Commit

Permalink
Merge pull request #204 from policy-design-lab/release-0.10.0
Browse files Browse the repository at this point in the history 
Frontend Release 0.10.0
  • Loading branch information
@pengyin-shan
pengyin-shan authored Oct 17, 2023
2 parents 2da73ab + 8973b43 commit fc1bb09
Show file tree
Hide file tree
Showing 30 changed files with 2,787 additions and 78 deletions.
16 changes: 16 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## [0.10.0] - 2023-10-17

### Added

- ACEP page and corresponding components for its attributes [#200](https://github.com/policy-design-lab/pdl-frontend/issues/200)

- RCPP page and corresponding components for its attributes [#196](https://github.com/policy-design-lab/pdl-frontend/issues/196)

### Changed
- Reverse some unnecessary changes in EQIP, CSP and CRP table [#199](https://github.com/policy-design-lab/pdl-frontend/issues/199)


## Fixed
- Adjust program drawer to remove over-length scroll bar in Chrome/Firefox [#198](https://github.com/policy-design-lab/pdl-frontend/issues/198)


## [0.9.0] - 2023-09-18

### Added
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "policy-design-lab",
"version": "0.9.0",
"version": "0.10.0",
"description": "the front end of policy design lab",
"repository": "https://github.com/policy-design-lab/pdl-frontend",
"main": "src/app.tsx",
Expand Down
170 changes: 159 additions & 11 deletions src/components/ProgramDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ ProgramDrawer.propTypes = {
};

let currentChecked = 0;
const menuHeight = window.innerHeight < 900 ? "38%" : "40%";

function EQIPCheckboxList({ setEQIPChecked, setShowPopUp, zeroCategory }) {
const [checked, setChecked] = React.useState(currentChecked);

Expand Down Expand Up @@ -436,17 +438,86 @@ function CRPCheckboxList({ setCRPChecked, setShowPopUp, zeroCategory }) {
);
}

function RCPPCheckboxList({ setRCPPChecked, setShowPopUp, zeroCategory }) {
const [checked, setChecked] = React.useState(currentChecked);

const handleToggle = (value: number) => () => {
setChecked(value);
setRCPPChecked(value);
currentChecked = value;
setShowPopUp(false);
};

const RCPPList = ["Total RCPP"];

return (
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "#ecf0ee" }}>
{RCPPList.map((category, value) => {
const labelId = `checkbox-list-label-${value}`;
if (zeroCategory && zeroCategory.includes(category)) {
return (
<ListItem key={category} disablePadding>
<ListItemButton role={undefined} dense sx={{ pl: 8, cursor: "pointer" }}>
<Radio
edge="start"
disabled
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
sx={{
"&.Mui-checked": {
color: "#2f7164"
}
}}
/>
<ListItemText
id={labelId}
primary={`No payment reported for ${category}`}
sx={{ fontStyle: "italic", color: "#7676764D" }}
/>
</ListItemButton>
</ListItem>
);
}
return (
<Box key={category}>
<ListItem key={category} disablePadding>
<ListItemButton role={undefined} onClick={handleToggle(value)} dense sx={{ pl: 8 }}>
<Radio
edge="start"
checked={checked === value}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
sx={{
"&.Mui-checked": {
color: "#2f7164"
}
}}
/>
<ListItemText id={labelId} primary={category} />
</ListItemButton>
</ListItem>
</Box>
);
})}
</List>
);
}

interface ProgramDrawerProps {
setEQIPChecked?: (value: number) => void;
setCSPChecked?: (value: number) => void;
setCRPChecked?: (value: number) => void;
setRCPPChecked?: (value: number) => void;
zeroCategories?: string[];
}

export default function ProgramDrawer({
setEQIPChecked,
setCSPChecked,
setCRPChecked,
setRCPPChecked,
zeroCategories
}: ProgramDrawerProps): JSX.Element {
const location = useLocation();
Expand Down Expand Up @@ -507,8 +578,42 @@ export default function ProgramDrawer({

prevCrpOpen.current = crpOpen;
}, [crpOpen]);
const [rcppOpen, setRcppOpen] = React.useState(false);
const rcppRef = React.useRef<HTMLLIElement>(null);
const handleRcppClick = () => {
if (location.pathname !== "/rcpp") {
navigate("/rcpp");
window.location.reload(false);
}
};
const prevRcppOpen = React.useRef(rcppOpen);
React.useEffect(() => {
if (prevRcppOpen.current && !rcppOpen) {
rcppRef.current.focus();
}

prevRcppOpen.current = rcppOpen;
}, [rcppOpen]);

// ACEP Menu
const [acepOpen, setAcepOpen] = React.useState(false);
const acepRef = React.useRef<HTMLLIElement>(null);
const handleAcepClick = () => {
if (location.pathname !== "/acep") {
navigate("/acep");
window.location.reload(false);
} else {
setAcepOpen((prevAcepOpen) => !prevAcepOpen);
}
};
const prevAcepOpen = React.useRef(acepOpen);
React.useEffect(() => {
if (prevAcepOpen.current && !acepOpen) {
acepRef.current.focus();
}

const crpMenuHeight = window.innerHeight < 900 ? "38%" : "40%";
prevAcepOpen.current = acepOpen;
}, [acepOpen]);

return (
<Drawer
Expand All @@ -525,7 +630,7 @@ export default function ProgramDrawer({
}}
open
>
<Box sx={{ height: 100 }} />
<Box id="filler" sx={{ minHeight: 100 }} />
<MenuItem style={{ whiteSpace: "normal" }} sx={{ my: 1, pl: 3 }}>
<Typography>Total Conservation Programs Benefits</Typography>
</MenuItem>
Expand Down Expand Up @@ -570,7 +675,7 @@ export default function ProgramDrawer({
anchorEl={eqipRef.current}
role={undefined}
placement="right-start"
sx={{ height: "50%", overflowY: "scroll", maxWidth: "20%" }}
sx={{ height: "50%", overflowY: "auto", maxWidth: "20%" }}
>
<Box>
<EQIPCheckboxList
Expand Down Expand Up @@ -622,7 +727,7 @@ export default function ProgramDrawer({
anchorEl={cspRef.current}
role={undefined}
placement="right-start"
sx={{ height: crpMenuHeight, overflowY: "scroll", maxWidth: "20%" }}
sx={{ maxHeight: menuHeight, overflowY: "auto", maxWidth: "20%" }}
>
<Box>
<CSPCheckboxList
Expand Down Expand Up @@ -674,7 +779,7 @@ export default function ProgramDrawer({
anchorEl={crpRef.current}
role={undefined}
placement="right-start"
sx={{ height: "40%", overflowY: "scroll", maxWidth: "20%" }}
sx={{ maxHeight: menuHeight, overflowY: "auto", maxWidth: "20%" }}
>
<Box>
<CRPCheckboxList
Expand All @@ -685,12 +790,55 @@ export default function ProgramDrawer({
</Box>
</Popper>
</Box>
<MenuItem style={{ whiteSpace: "normal" }} sx={{ my: 1, pl: 3 }}>
<Typography>ACEP: Agriculture Conservation Easement Program</Typography>
</MenuItem>
<MenuItem style={{ whiteSpace: "normal" }} sx={{ my: 1, pl: 3 }}>
<Typography>RCPP: Regional Conservation Partnership Program</Typography>
</MenuItem>
<Box>
<MenuItem
ref={acepRef}
style={{ whiteSpace: "normal" }}
sx={{ my: 1, pl: 3, pr: 0, py: 0, backgroundColor: acepOpen ? "#ecf0ee" : "grey" }}
onClick={handleAcepClick}
>
<Box sx={{ display: "flex", flexDirection: "horizontal", alignItems: "center", my: 1 }}>
{location.pathname === "/acep" ? (
<Typography sx={{ color: "#2f7164", pt: 0.8, pb: 0.8 }}>
<strong>ACEP: Agriculture Conservation Easement Program</strong>
</Typography>
) : (
<Typography>ACEP: Agriculture Conservation Easement Program</Typography>
)}
</Box>
</MenuItem>
</Box>
<Box>
<MenuItem
ref={rcppRef}
style={{ whiteSpace: "normal" }}
sx={{ my: 1, pl: 3, pr: 0, py: 0, backgroundColor: rcppOpen ? "#ecf0ee" : "grey" }}
onClick={handleRcppClick}
>
<Box sx={{ display: "flex", flexDirection: "horizontal", alignItems: "center" }}>
{location.pathname === "/rcpp" ? (
<Typography sx={{ color: "#2f7164", pt: 0.8, pb: 0.8 }}>
<strong>RCPP: Regional Conservation Partnership Program</strong>
</Typography>
) : (
<Typography>RCPP: Regional Conservation Partnership Program</Typography>
)}
{/* <Box
sx={{
maxWidth: 40,
py: 3,
color: "#ffffff",
backgroundColor: "#2f7164",
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
maxHeight: 48
}}
>
</Box> */}
</Box>
</MenuItem>
</Box>
<MenuItem style={{ whiteSpace: "normal" }} sx={{ my: 1, pl: 3 }}>
<Typography>Other Conservation</Typography>
</MenuItem>
Expand Down
2 changes: 1 addition & 1 deletion src/components/SemiDonutChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function SemiDonutChart({ data, label1, label2 }: any): JSX.Eleme

return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? "start" : "end"} dominantBaseline="central">
{`${(percent * 100).toFixed(1)}%`}
{`${(percent * 100).toFixed(2)}%`}
</text>
);
};
Expand Down
Loading

0 comments on commit fc1bb09

Please sign in to comment.