Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1646 visibility and status #1815

Closed
wants to merge 7 commits into from
Closed

1646 visibility and status #1815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c1d3f89
initial push
Jonathanko52 Aug 28, 2024
f145f62
pulled from develop
Jonathanko52 Aug 28, 2024
1d4fb27
CSS on header
Jonathanko52 Aug 29, 2024
eeae814
Visibility filter working
Jonathanko52 Aug 30, 2024
e7ff9d3
mvp done. Looking into css
Jonathanko52 Sep 1, 2024
bfdd279
fixed issue of filter values not being saved in dropdown
Jonathanko52 Sep 4, 2024
720c1d9
Delete label and row background added
Jonathanko52 Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion client/src/components/PdfPrint/PdfPrint.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,6 @@ export const PdfPrint = forwardRef((props, ref) => {
</tr>
</tfoot>
</table>

<PdfFooter project={project} />
</div>
);
Expand Down
65 changes: 46 additions & 19 deletions client/src/components/Projects/ColumnHeaderPopups/ProjectTableColumnHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,54 @@
import React from "react";
import PropTypes from "prop-types";
import "react-datepicker/dist/react-datepicker.css";
import { MdFilterAlt } from "react-icons/md";
import { MdFilterList } from "react-icons/md";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You probably got the idea for this icon from the prototype, but, the prototype is several months old, and the design team has changed the icons they want to use in the design guide See https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit#slide=id.g2e77662f2ce_0_10 page 17. The upshot is that you need to change the icon back to MdFilterAlt.

import Popup from "reactjs-popup";
import DatePopup from "./DatePopup";
import TextPopup from "./TextPopup";
import VisibilityPopup from "./VisibilityPopup";
import StatusPopup from "./StatusPopup";
import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
icon: {
backgroundColor: "transparent",
color: "grey",
fontSize: "1.2em",
marginLeft: "1.2em",
"&:hover": {
color: "#000000"
}
}
});

const ProjectTableColumnHeader = ({
header,
toggledHeader,
handleHeaderToggle,
criteria,
setCriteria,
order,
orderBy,
setSort,
setCheckedProjectIds,
setSelectAllChecked
setSelectAllChecked,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want any of these five new props. You should be getting and setting criteria via the criteria and setCriteria props.

visibilitySetting,
setVisibilitySetting,
statusSettings,
setStatusSettings
}) => {
const classes = useStyles();

return (
<div style={{ width: "100%", height: "100%" }}>
{header.id !== "checkAllProjects" && header.id !== "contextMenu" ? (
<Popup
onOpen={() => {
handleHeaderToggle(header.id);
}}
onClose={() => {
handleHeaderToggle(header.id);
}}
trigger={
<div
style={{
Expand All @@ -30,23 +57,10 @@ const ProjectTableColumnHeader = ({
}}
>
<span>{header.label}</span>
<MdFilterAlt
style={{
backgroundColor: "transparent",
color: "white",
marginLeft: "0.5rem"
}}
<MdFilterList
className={classes.icon}
alt={`Show column filter and sort popup`}
/>
{/* <FontAwesomeIcon
style={{
backgroundColor: "transparent",
color: "white",
marginLeft: "0.5rem"
}}
icon={faFilter}
alt={`Show column filter and sort popup`}
/> */}
</div>
}
position="bottom center"
Expand All @@ -67,6 +81,7 @@ const ProjectTableColumnHeader = ({
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
toggledHeader={toggledHeader}
/>
) : header.popupType === "text" ? (
<TextPopup
Expand All @@ -79,6 +94,7 @@ const ProjectTableColumnHeader = ({
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
toggledHeader={toggledHeader}
/>
) : header.popupType === "visibility" ? (
<VisibilityPopup
Expand All @@ -91,6 +107,9 @@ const ProjectTableColumnHeader = ({
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
toggledHeader={toggledHeader}
visibilitySetting={visibilitySetting}
setVisibilitySetting={setVisibilitySetting}
/>
) : header.popupType === "status" ? (
<StatusPopup
Expand All @@ -103,6 +122,9 @@ const ProjectTableColumnHeader = ({
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
toggledHeader={toggledHeader}
statusSettings={statusSettings}
setStatusSettings={setStatusSettings}
/>
) : null;
}}
Expand All @@ -116,14 +138,19 @@ const ProjectTableColumnHeader = ({

ProjectTableColumnHeader.propTypes = {
header: PropTypes.any,
toggledHeader: PropTypes.string,
criteria: PropTypes.any,
setCriteria: PropTypes.func,
order: PropTypes.string,
orderBy: PropTypes.string,
setSort: PropTypes.func,

handleHeaderToggle: PropTypes.func,
setCheckedProjectIds: PropTypes.func,
setSelectAllChecked: PropTypes.func
setSelectAllChecked: PropTypes.func,
visibilitySetting: PropTypes.string,
setVisibilitySetting: PropTypes.func,
statusSettings: PropTypes.string,
setStatusSettings: PropTypes.func
};

export default ProjectTableColumnHeader;
71 changes: 61 additions & 10 deletions client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Button from "../../Button/Button";
import RadioButton from "../../UI/RadioButton";
import "react-datepicker/dist/react-datepicker.css";
import { MdClose } from "react-icons/md";
import UniversalSelect from "../../UI/UniversalSelect";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just figured out a day or two ago that the UniversalSelect control is not working. If it is used as a controlled input, it does not not track the existing controlled value when it is first rendered. We need to either fix it, or go back to using a standard react control.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this was what resulted in me going out of scope for this task. I discovered that when I attempted to change the sorting option, it would reset the filter option. I believe that the issue was that the StatusPopup component was being rendered each time, and so the existing controlled value was lost. I decided the best approach to fixing this was to save that value in state of the Project page.


const StatusPopup = ({
close,
Expand All @@ -14,25 +15,66 @@ const StatusPopup = ({
orderBy,
setSort,
setCheckedProjectIds,
setSelectAllChecked
setSelectAllChecked,
statusSettings,
setStatusSettings
}) => {
const [newOrder, setNewOrder] = useState(
header.id !== orderBy ? null : order
);

// TODO More state variables for status filtering go here

const statusOptions = [
{ value: "draft", label: "Draft" },
{ value: "snapshot", label: "Snapshot" },
{ value: "draftsnapshot", label: "Draft and Snapshot" },
{ value: "deleted", label: "Deleted" },
{ value: "all", label: "All" }
];
console.log("statusSettings", statusSettings);
const setDefault = () => {
setCriteria({
...criteria,
[header.id]: ""
});
setStatusSettings(null);
setCheckedProjectIds([]);
setSelectAllChecked(false);
};

const applyChanges = () => {
// Set Criteria for status
switch (statusSettings) {
case "draft":
setCriteria({
...criteria,
type: statusSettings
});
break;
case "snapshot":
setCriteria({
...criteria,
type: statusSettings,
status: "active"
});
break;
case "draftsnapshot":
setCriteria({
...criteria,
type: statusSettings,
status: "active"
});
break;
case "deleted":
setCriteria({
...criteria,
type: "all",
status: statusSettings
});
break;
case "all":
setCriteria({
...criteria,
type: "all",
status: "all"
});
break;
}

if (newOrder) {
setSort(header.id, newOrder);
}
Expand All @@ -41,6 +83,10 @@ const StatusPopup = ({
close();
};

const handleChangeStatus = statusValue => {
setStatusSettings(statusValue);
};

return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
Expand Down Expand Up @@ -72,7 +118,10 @@ const StatusPopup = ({
/>
<hr style={{ width: "100%" }} />
</div>
<div>(Under Construction)</div>
<UniversalSelect
Copy link
Member

@entrotech entrotech Sep 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need two controls on this popup. One controls criteria.type, which should have possible values ["draft", "snapshot", or "all"]. This should probably be a set of radio buttons, with the labels ["Draft", "Snapshot", "Draft and Snapshot"]. It could also be done as a drop-down list, but my preference would be radio buttons, since there are only three choices, and a choice can be made with a single click.
The second controls criteria.status, which should have possible values of ["active", "deleted" or "all"], which I would prefer to see as another set of Radio Buttons, but to be somewhat consistent with the prototype, we can make it a checkbox, where unchecked sets criteria.status to "all" and checked sets the criteria.type to "active". Note that it is not possible to set the criteria.status to "deleted" to see only deleted projects.

options={statusOptions}
onChange={e => handleChangeStatus(e.target.value)}
></UniversalSelect>

<hr style={{ width: "100%" }} />
<div style={{ display: "flex" }}>
Expand Down Expand Up @@ -100,7 +149,9 @@ StatusPopup.propTypes = {
orderBy: PropTypes.string,
setSort: PropTypes.func,
setCheckedProjectIds: PropTypes.func,
setSelectAllChecked: PropTypes.func
setSelectAllChecked: PropTypes.func,
statusSettings: PropTypes.string,
setStatusSettings: PropTypes.func
};

export default StatusPopup;
38 changes: 28 additions & 10 deletions client/src/components/Projects/ColumnHeaderPopups/VisibilityPopup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Button from "../../Button/Button";
import RadioButton from "../../UI/RadioButton";
import "react-datepicker/dist/react-datepicker.css";
import { MdClose } from "react-icons/md";
import UniversalSelect from "../../UI/UniversalSelect";
Copy link
Member

@entrotech entrotech Sep 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The prototype calls for using a set of Radio Buttons, so you don't need a select drop-down. As we discussed last week, the search box in the prototype does not make sense and should be dropped.


const VisibilityPopup = ({
close,
Expand All @@ -14,25 +15,32 @@ const VisibilityPopup = ({
orderBy,
setSort,
setCheckedProjectIds,
setSelectAllChecked
setSelectAllChecked,
visibilitySetting,
setVisibilitySetting
}) => {
const [newOrder, setNewOrder] = useState(
header.id !== orderBy ? null : order
);

// TODO More state variables for visibility filtering go here
const visibilityOptions = [
{ value: "visible", label: "Visible" },
{ value: "hidden", label: "Hidden" },
{ value: "all", label: "Visible and Hidden" }
];

const setDefault = () => {
setCriteria({
...criteria,
[header.id]: ""
});
setVisibilitySetting("visible");
setNewOrder(null);
setCheckedProjectIds([]);
setSelectAllChecked(false);
};

const applyChanges = () => {
// Set Criteria for status
setCriteria({
...criteria,
visibility: visibilitySetting
});
if (newOrder) {
setSort(header.id, newOrder);
}
Expand All @@ -41,6 +49,9 @@ const VisibilityPopup = ({
close();
};

const handleChangeVisibility = visibilityValue => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't want to apply the change to the filter when the user picks a choice from the list - need to wait until they click on the Apply button.

setVisibilitySetting(visibilityValue);
};
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
Expand Down Expand Up @@ -72,8 +83,13 @@ const VisibilityPopup = ({
/>
<hr style={{ width: "100%" }} />
</div>
<div>(Under Construction)</div>

<UniversalSelect
defaultValue={visibilityOptions.find(
option => option.value === visibilitySetting
)}
options={visibilityOptions}
onChange={e => handleChangeVisibility(e.target.value)}
></UniversalSelect>
<hr style={{ width: "100%" }} />
<div style={{ display: "flex" }}>
<Button onClick={setDefault} variant="text">
Expand All @@ -100,7 +116,9 @@ VisibilityPopup.propTypes = {
orderBy: PropTypes.string,
setSort: PropTypes.func,
setCheckedProjectIds: PropTypes.func,
setSelectAllChecked: PropTypes.func
setSelectAllChecked: PropTypes.funcs,
visibilitySetting: PropTypes.string,
setVisibilitySetting: PropTypes.func
};

export default VisibilityPopup;
13 changes: 6 additions & 7 deletions client/src/components/Projects/ProjectTableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,7 @@ const ProjectTableRow = ({
// deleted, in which case it will show the deleted date followed by "-Deleted" in red.
const dateModifiedDisplay = () => {
if (project.dateTrashed) {
return (
<span>
{formatDate(project.dateTrashed)}
<span style={{ color: "red" }}>-Deleted</span>
</span>
);
return <span>{formatDate(project.dateTrashed)}</span>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know why you moved the deleted indicator to the visibility column. Maybe you misunderstood our conversation last week where I pointed out that the Date Modified column is where you would see that the deleted date is displayed if the project is deleted, per Emily's request, but we don't want to move it to the Status column.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For this one, I refered to the figma and checklist of action items.

#1646

Screenshot 2024-09-04 at 10 39 47 AM

Link to prototype:

https://www.figma.com/proto/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?type=design&node-id=12173-2052&t=wQuxLI1JbOw0OzLn-1&scaling=scale-down&page-id=2499%3A11472&starting-point-node-id=11997%3A885

}

return <span>{formatDate(project.dateModified)}</span>;
Expand All @@ -101,7 +96,10 @@ const ProjectTableRow = ({
};

return (
<tr key={project.id}>
<tr
key={project.id}
style={{ background: project.dateTrashed ? "#ffdcdc" : "" }}
>
<td className={classes.tdCenterAlign}>
<input
style={{ height: "15px" }}
Expand All @@ -127,6 +125,7 @@ const ProjectTableRow = ({
</td>
<td className={classes.td}>
{project.dateSnapshotted ? "Snapshot" : "Draft"}
{project.dateTrashed ? " (deleted)" : ""}
</td>
<td className={classes.td}>
<Link to={`/calculation/1/${project.id}`}>{project.name}</Link>
Expand Down
Loading
Loading