generated from hackforla/.github-hackforla-base-repo-template
-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1520 multi project toolbar menu (#1639)
* added ProjectCheckBoxMenu and set up where check boxes will be * added checkboxes and menu to project table - hide feature works * added useHiddenStatus hook for checkbox button * added code to disable hide button in ProjectCheckBoxMenu & adjust div for missing ProjectCheckBoxmenu * header checkbox checks/unchecks all project rows * added filters to handleHeaderCheckbox & uncheck checkboxes when filter applied * added permissions check in useHiddenStatus & ProjectCheckBoxMenu * fixed select all for current page only * multi-select delete feature working. added new multi-project data hook * refactored handleHide * delete and hidden buttons working. refactored ProjectCheckBoxMenu * added tooltips for toolbar menu - delete btn * added tooltip to hide btn * added tooltip & msg * added tooltip style and renamed ProjectCheckBoxMenu to MultiProjectToolbarMenu * added styles to tooltip. reset checked projects state on page change * added message types for tooltip. added comments * fixed tooltip message for delete button * renamed toolbarmenu component * fixed bug on handleHide for context menu * added print btn * added print pdf button and functionality * toolbar load on initial. tweaked tooltip for pdf btn
- Loading branch information
Showing
8 changed files
with
472 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
209 changes: 209 additions & 0 deletions
209
client/src/components/Projects/MultiProjectToolbarMenu.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,209 @@ | ||
| import React, { useContext, useRef } from "react"; | ||
| import UserContext from "../../contexts/UserContext"; | ||
| import PropTypes from "prop-types"; | ||
| import { createUseStyles } from "react-jss"; | ||
| import { | ||
| faEyeSlash, | ||
| faEye, | ||
| faTrashCan, | ||
| faPrint | ||
| } from "@fortawesome/free-solid-svg-icons"; | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
| import { Tooltip } from "react-tooltip"; | ||
| import PdfPrint from "../PdfPrint/PdfPrint"; | ||
| import moment from "moment"; | ||
| import { useReactToPrint } from "react-to-print"; | ||
|
|
||
| const useStyles = createUseStyles({ | ||
| container: { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| alignItems: "center", | ||
| marginLeft: "0.5em", | ||
| marginBottom: "-1em" | ||
| }, | ||
| list: { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| listStyleType: "none", | ||
| justifyContent: "space-between", | ||
| alignItems: "center", | ||
| width: "6.5em" | ||
| }, | ||
| button: { | ||
| border: "none", | ||
| padding: 0, | ||
| background: "none" | ||
| }, | ||
| multiStatus: { | ||
| color: "#002E6D" | ||
| } | ||
| }); | ||
|
|
||
| const MultiProjectToolbarMenu = ({ | ||
| handleHideBoxes, | ||
| handleDeleteModalOpen, | ||
| checkedProjects, | ||
| criteria, | ||
| projects, | ||
| pdfProjectData | ||
| }) => { | ||
| const momentModified = moment(projects.dateModified); | ||
| const printRef = useRef(null); | ||
| const classes = useStyles(); | ||
| const userContext = useContext(UserContext); | ||
| const account = userContext.account; | ||
| const isProjectOwner = account.id === projects.loginId; | ||
|
|
||
| const isBtnDisabled = (projProp, criteriaProp) => { | ||
| const sameDateVals = projects[projProp] !== false; | ||
| const criteriaFilter = criteria[criteriaProp] === "all"; | ||
|
|
||
| // disable button if current user is not the owner | ||
| // or if criteria is "all" and the date values are different | ||
| return !isProjectOwner || (criteriaFilter && !sameDateVals); | ||
| }; | ||
|
|
||
| const isHideBtnDisabled = isBtnDisabled("dateHidden", "visibility"); | ||
| const isDelBtnDisabled = isBtnDisabled("dateTrashed", "status"); | ||
|
|
||
| const tooltipMsg = (criteriaProp, msg, dateProp) => { | ||
| if (checkedProjects.length === 0) return; | ||
|
|
||
| if (!isProjectOwner) { | ||
| return "You have selected a project that does not belong to you"; | ||
| } | ||
|
|
||
| // show recover message if project is deleted | ||
| if (projects.dateTrashed && criteriaProp === "status") { | ||
| return "Restore from Trash"; | ||
| } | ||
|
|
||
| // show message when selecting mixed types (e.g. hide & unhide) | ||
| if (checkedProjects.length > 1 && projects[dateProp] === false) { | ||
| return criteria[criteriaProp] === "all" ? msg : ""; | ||
| } | ||
| }; | ||
|
|
||
| const hasPdfData = () => { | ||
| return pdfProjectData && pdfProjectData.pdf !== null; | ||
| }; | ||
|
|
||
| const handlePrintPdf = useReactToPrint({ | ||
| content: () => printRef.current, | ||
| bodyClass: "printContainer", | ||
| pageStyle: ".printContainer {overflow: hidden;}" | ||
| }); | ||
|
|
||
| return ( | ||
| <div className={classes.container}> | ||
| <div className={classes.multiStatus}> | ||
| {checkedProjects.length} Projects Selected | ||
| </div> | ||
| <ul className={classes.list}> | ||
| <li> | ||
| <button | ||
| id="print-btn" | ||
| className={classes.button} | ||
| onClick={handlePrintPdf} | ||
| disabled={checkedProjects.length !== 1} | ||
| > | ||
| <FontAwesomeIcon icon={faPrint} /> | ||
| </button> | ||
| {checkedProjects.length !== 1 ? ( | ||
| <Tooltip | ||
| style={{ | ||
| backgroundColor: "#e6e3e3", | ||
| color: "#000", | ||
| width: "11%", | ||
| borderRadius: "10px", | ||
| fontWeight: "bold", | ||
| textAlign: "center" | ||
| }} | ||
| anchorSelect="#print-btn" | ||
| content="Please select one project" | ||
| /> | ||
| ) : ( | ||
| "" | ||
| )} | ||
| {hasPdfData() && ( | ||
| <div style={{ display: "none" }}> | ||
| <PdfPrint | ||
| ref={printRef} | ||
| rules={pdfProjectData.pdf} | ||
| dateModified={momentModified.format("MM/DD/YYYY")} | ||
| /> | ||
| </div> | ||
| )} | ||
| </li> | ||
| <li> | ||
| <button | ||
| id="hide-btn" | ||
| className={classes.button} | ||
| disabled={isHideBtnDisabled} | ||
| onClick={handleHideBoxes} | ||
| > | ||
| {!projects.dateHidden ? ( | ||
| <FontAwesomeIcon icon={faEyeSlash} /> | ||
| ) : ( | ||
| <FontAwesomeIcon icon={faEye} /> | ||
| )} | ||
|
|
||
| <Tooltip | ||
| style={{ | ||
| backgroundColor: "#e6e3e3", | ||
| color: "#000", | ||
| width: "10%", | ||
| borderRadius: "10px" | ||
| }} | ||
| anchorSelect="#hide-btn" | ||
| content={tooltipMsg( | ||
| "visibility", | ||
| "Your selection includes both hidden and visible items", | ||
| "dateHidden" | ||
| )} | ||
| /> | ||
| </button> | ||
| </li> | ||
| <li> | ||
| <button | ||
| id="delete-btn" | ||
| className={classes.button} | ||
| disabled={isDelBtnDisabled} | ||
| onClick={handleDeleteModalOpen} | ||
| > | ||
| <FontAwesomeIcon | ||
| icon={faTrashCan} | ||
| color={isDelBtnDisabled ? "#1010104d" : "red"} | ||
| /> | ||
| <Tooltip | ||
| style={{ | ||
| backgroundColor: "#e6e3e3", | ||
| color: "#000", | ||
| width: "10%", | ||
| borderRadius: "10px" | ||
| }} | ||
| anchorSelect="#delete-btn" | ||
| content={tooltipMsg( | ||
| "status", | ||
| "Your selection includes both deleted and active items", | ||
| "dateTrashed" | ||
| )} | ||
| /> | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| MultiProjectToolbarMenu.propTypes = { | ||
| handleHideBoxes: PropTypes.func.isRequired, | ||
| handleDeleteModalOpen: PropTypes.func.isRequired, | ||
| checkedProjects: PropTypes.array.isRequired, | ||
| criteria: PropTypes.object.isRequired, | ||
| projects: PropTypes.object.isRequired, | ||
| pdfProjectData: PropTypes.object | ||
| }; | ||
|
|
||
| export default MultiProjectToolbarMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.