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.

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

1801 my projects filtering #1804

Closed
wants to merge 11 commits into from
2 changes: 1 addition & 1 deletion client/src/components/PdfPrint/PdfFooter.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const PdfFooter = ({ project }) => {
};

PdfFooter.propTypes = {
project: PropTypes.shape
project: PropTypes.shape(PropTypes.any)
};

export default PdfFooter;
123 changes: 123 additions & 0 deletions client/src/components/Projects/ColumnHeaderPopups/DatePopup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import Button from "../../Button/Button";
import RadioButton from "../../UI/RadioButton";
import "react-datepicker/dist/react-datepicker.css";
import DateRangePicker from "../../UI/DateRangePicker";
import { MdClose } from "react-icons/md";

const DatePopup = ({
close,
header,
criteria,
setCriteria,
order,
orderBy,
setSort,
setCheckedProjectIds,
setSelectAllChecked
}) => {
const [newOrder, setNewOrder] = useState(
header.id !== orderBy ? null : order
);
const [newStartDate, setNewStartDate] = useState(
criteria[header.startDatePropertyName]
);
const [newEndDate, setNewEndDate] = useState(
criteria[header.endDatePropertyName]
);

const setDefault = () => {
setNewStartDate(null);
setNewEndDate(null);
setNewOrder(null);
setCheckedProjectIds([]);
setSelectAllChecked(false);
};

const applyChanges = () => {
setCriteria({
...criteria,
[header.startDatePropertyName]: newStartDate,
[header.endDatePropertyName]: newEndDate
});
if (newOrder) {
setSort(header.id, newOrder);
}
setCheckedProjectIds([]);
setSelectAllChecked(false);
close();
};

return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<MdClose
style={{
backgroundColor: "transparent",
color: "black",
position: "absolute",
top: "0.5rem",
right: "0.5rem"
}}
alt={`Close popup`}
onClick={close}
/>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<RadioButton
label="Sort Newest to Oldest"
value="desc"
checked={newOrder === "desc"}
onChange={() => setNewOrder("desc")}
/>
<RadioButton
label="Sort Oldest to Newest"
value="asc"
checked={newOrder === "asc"}
onChange={() => setNewOrder("asc")}
/>
<hr style={{ width: "100%" }} />
</div>
<DateRangePicker
startDate={newStartDate}
endDate={newEndDate}
setStartDate={date => {
setNewStartDate(date);
}}
setEndDate={date => {
setNewEndDate(date);
}}
startDatePlaceholder="Start Date"
endDatePlaceholder="End Date"
/>
<hr style={{ width: "100%" }} />
<div style={{ display: "flex" }}>
<Button onClick={setDefault} variant="text">
Reset
</Button>
<Button
onClick={applyChanges}
variant="contained"
color={"colorPrimary"}
>
Apply
</Button>
</div>
</div>
);
};

DatePopup.propTypes = {
close: PropTypes.func,
header: PropTypes.any,
criteria: PropTypes.any,
setCriteria: PropTypes.func,
order: PropTypes.string,
orderBy: PropTypes.string,
setSort: PropTypes.func,
setCheckedProjectIds: PropTypes.func,
setSelectAllChecked: PropTypes.func
};

export default DatePopup;
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import React from "react";
import PropTypes from "prop-types";
import "react-datepicker/dist/react-datepicker.css";
import { MdFilterAlt } from "react-icons/md";
import Popup from "reactjs-popup";
import DatePopup from "./DatePopup";
import TextPopup from "./TextPopup";
import VisibilityPopup from "./VisibilityPopup";
import StatusPopup from "./StatusPopup";

const ProjectTableColumnHeader = ({
header,
criteria,
setCriteria,
order,
orderBy,
setSort,
setCheckedProjectIds,
setSelectAllChecked
}) => {
return (
<div style={{ width: "100%", height: "100%" }}>
{header.id !== "checkAllProjects" && header.id !== "contextMenu" ? (
<Popup
trigger={
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
<span>{header.label}</span>
<MdFilterAlt
style={{
backgroundColor: "transparent",
color: "white",
marginLeft: "0.5rem"
}}
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"
offsetY={10}
arrow={false}
contentStyle={{ width: "auto" }}
>
{close => {
return !header.popupType ? null : header.popupType ===
"datetime" ? (
<DatePopup
close={close}
header={header}
criteria={criteria}
setCriteria={setCriteria}
order={order}
orderBy={orderBy}
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
/>
) : header.popupType === "text" ? (
<TextPopup
close={close}
header={header}
criteria={criteria}
setCriteria={setCriteria}
order={order}
orderBy={orderBy}
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
/>
) : header.popupType === "visibility" ? (
<VisibilityPopup
close={close}
header={header}
criteria={criteria}
setCriteria={setCriteria}
order={order}
orderBy={orderBy}
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
/>
) : header.popupType === "status" ? (
<StatusPopup
close={close}
header={header}
criteria={criteria}
setCriteria={setCriteria}
order={order}
orderBy={orderBy}
setSort={setSort}
setCheckedProjectIds={setCheckedProjectIds}
setSelectAllChecked={setSelectAllChecked}
/>
) : null;
}}
</Popup>
) : (
<span>{header.label}</span>
)}
</div>
);
};

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

setCheckedProjectIds: PropTypes.func,
setSelectAllChecked: PropTypes.func
};

export default ProjectTableColumnHeader;
106 changes: 106 additions & 0 deletions client/src/components/Projects/ColumnHeaderPopups/StatusPopup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import Button from "../../Button/Button";
import RadioButton from "../../UI/RadioButton";
import "react-datepicker/dist/react-datepicker.css";
import { MdClose } from "react-icons/md";

const StatusPopup = ({
close,
header,
criteria,
setCriteria,
order,
orderBy,
setSort,
setCheckedProjectIds,
setSelectAllChecked
}) => {
const [newOrder, setNewOrder] = useState(
header.id !== orderBy ? null : order
);

// TODO More state variables for status filtering go here

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

const applyChanges = () => {
// Set Criteria for status
if (newOrder) {
setSort(header.id, newOrder);
}
setCheckedProjectIds([]);
setSelectAllChecked(false);
close();
};

return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<MdClose
style={{
backgroundColor: "transparent",
color: "black",
position: "absolute",
top: "0.5rem",
right: "0.5rem"
}}
alt={`Close popup`}
onClick={close}
/>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
{/* If there is a dateSnapshotted (i.e., project is snapshot), property value is 1 */}
<RadioButton
label="Sort Drafts First"
value="asc"
checked={newOrder == "asc"}
onChange={() => setNewOrder("asc")}
/>
<RadioButton
label="Sort Snapshots First"
value="desc"
checked={newOrder === "desc"}
onChange={() => setNewOrder("desc")}
/>
<hr style={{ width: "100%" }} />
</div>
<div>(Under Construction)</div>

<hr style={{ width: "100%" }} />
<div style={{ display: "flex" }}>
<Button onClick={setDefault} variant="text">
Reset
</Button>
<Button
onClick={applyChanges}
variant="contained"
color={"colorPrimary"}
>
Apply
</Button>
</div>
</div>
);
};

StatusPopup.propTypes = {
close: PropTypes.func,
header: PropTypes.any,
criteria: PropTypes.any,
setCriteria: PropTypes.func,
order: PropTypes.string,
orderBy: PropTypes.string,
setSort: PropTypes.func,
setCheckedProjectIds: PropTypes.func,
setSelectAllChecked: PropTypes.func
};

export default StatusPopup;
Loading
Loading