Skip to content

Commit

Permalink
resolve merge conflicts and fix react-modal issue
Browse files Browse the repository at this point in the history
  • Loading branch information
agutiernc committed Jan 10, 2024
2 parents 5fcb919 + 2b6f74d commit bbbabff
Show file tree
Hide file tree
Showing 17 changed files with 1,198 additions and 20 deletions.
50 changes: 50 additions & 0 deletions client/package-lock.json

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

1 change: 1 addition & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"react-input-mask": "^2.0.4",
"react-jss": "^10.8.2",
"react-loader": "^2.4.7",
"react-modal": "^3.16.1",
"react-quill": "^2.0.0",
"react-router-dom": "^6.18.0",
"react-select": "^5.2.2",
Expand Down
73 changes: 66 additions & 7 deletions client/src/components/Checklist/ChecklistModal.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,78 @@
import React from "react";
import ModalDialog from "../UI/AriaModal/ModalDialog";
import { createUseStyles } from "react-jss";
import Modal from "react-modal";
import PropTypes from "prop-types";
import ChecklistContent from "./ChecklistContent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faX } from "@fortawesome/free-solid-svg-icons";

import "./ChecklistModal.css";

const useStyles = createUseStyles({
modalActions: {
display: "flex",
justifyContent: "flex-end",
margin: "42px auto"
},
close: {
display: "flex",
justifyContent: "flex-end",
border: "0 solid white",
backgroundColor: "transparent",
"&:hover": {
cursor: "pointer"
}
}
});

const modalStyleDefaultOverrides = {
overlay: {
zIndex: "999",
position: "fixed",
width: "100vw",
height: "100vh",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(255, 255, 255, 0.7)",
fontSize: "1rem",
fontWeight: "normal"
},
content: {
maxWidth: "90vw",
minWidth: "40vw",
padding: "1rem",
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "stretch",
border: "1px solid #d8dce3",
borderRadius: "0",
boxSizing: "border-box",
boxShadow: "0px 5px 10px rgba(0, 46, 109, 0.5)",
backgroundColor: "rgba(255, 255, 255, 1)"
}
};

const ChecklistModal = ({ checklistModalOpen, toggleChecklistModal }) => {
if (!checklistModalOpen) return null;
const classes = useStyles();

return (
<ModalDialog
title="Checklist"
mounted={checklistModalOpen}
onClose={toggleChecklistModal}
<Modal
closeTimeoutMS={1500}
isOpen={checklistModalOpen}
onRequestClose={toggleChecklistModal}
shouldCloseOnOverlayClick={true}
contentLabel="Checklist Modal"
style={modalStyleDefaultOverrides}
className={classes.modal}
>
<span className={classes.close} onClick={toggleChecklistModal}>
<FontAwesomeIcon icon={faX} />
</span>
<ChecklistContent />
</ModalDialog>
</Modal>
);
};

Expand Down
40 changes: 37 additions & 3 deletions client/src/components/Projects/ProjectContextMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
faCamera,
faTrash,
faClone,
faFileCsv
faFileCsv,
faPencil
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Expand All @@ -31,6 +32,12 @@ const useStyles = createUseStyles({
cursor: "pointer"
}
},
listItemDisabled: {
display: "flex",
flexDirection: "row",
padding: "0.5rem",
color: "gray"
},
listItemIcon: { marginRight: "0.3rem" }
});

Expand All @@ -40,6 +47,7 @@ const ProjectContextMenu = ({
handleCopyModalOpen,
handleDeleteModalOpen,
handleSnapshotModalOpen,
handleRenameSnapshotModalOpen,
handleDownloadCsv,
handlePrintPdf,
handleHide
Expand All @@ -55,7 +63,32 @@ const ProjectContextMenu = ({

return (
<ul className={classes.list}>
{project.dateSnapshotted || project.loginId !== account.id ? null : (
{project.dateSnapshotted && project.loginId == account.id ? (
<li
className={classes.listItem}
onClick={() => handleClick(handleRenameSnapshotModalOpen)}
>
<FontAwesomeIcon
icon={faPencil}
className={classes.listItemIcon}
alt={`Snapshot Project #${project.id} Icon`}
/>
Rename Snapshot
</li>
) : null}

{project.dateSnapshotted && project.loginId !== account.id ? (
<li className={classes.listItemDisabled}>
<FontAwesomeIcon
icon={faPencil}
className={classes.listItemIcon}
alt={`Snapshot Project #${project.id} Icon`}
/>
Rename Snapshot
</li>
) : null}

{!project.dateSnapshotted && project.loginId == account.id ? (
<li
className={classes.listItem}
onClick={() => handleClick(handleSnapshotModalOpen)}
Expand All @@ -67,7 +100,7 @@ const ProjectContextMenu = ({
/>
Convert to Snapshot
</li>
)}
) : null}

<li
onClick={() => handleClick(handlePrintPdf)}
Expand Down Expand Up @@ -165,6 +198,7 @@ ProjectContextMenu.propTypes = {
handleCopyModalOpen: PropTypes.func,
handleDeleteModalOpen: PropTypes.func,
handleSnapshotModalOpen: PropTypes.func,
handleRenameSnapshotModalOpen: PropTypes.func,
handleDownloadCsv: PropTypes.func,
handlePrintPdf: PropTypes.func,
handleHide: PropTypes.func
Expand Down
7 changes: 5 additions & 2 deletions client/src/components/Projects/ProjectTableRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,8 @@ const ProjectTableRow = ({
handleSnapshotModalOpen,
handleHide,
handleCheckboxChange,
checkedProjects
checkedProjects,
handleRenameSnapshotModalOpen
}) => {
const classes = useStyles();
const momentModified = moment(project.dateModified);
Expand Down Expand Up @@ -366,6 +367,7 @@ const ProjectTableRow = ({
handleDownloadCsv={handleDownloadCsv}
handlePrintPdf={handlePrintPdf}
handleSnapshotModalOpen={handleSnapshotModalOpen}
handleRenameSnapshotModalOpen={handleRenameSnapshotModalOpen}
handleHide={handleHide}
/>
)}
Expand Down Expand Up @@ -397,7 +399,8 @@ ProjectTableRow.propTypes = {
handleSnapshotModalOpen: PropTypes.func.isRequired,
handleHide: PropTypes.func.isRequired,
handleCheckboxChange: PropTypes.func.isRequired,
checkedProjects: PropTypes.array.isRequired
checkedProjects: PropTypes.array.isRequired,
handleRenameSnapshotModalOpen: PropTypes.func.isRequired
};

export default ProjectTableRow;
Loading

0 comments on commit bbbabff

Please sign in to comment.