Merge branch 'develop' into OH2-216

cypress/integration/edit_patient_activity.spec.js

@@ -8,7 +8,7 @@ describe("EditPatientActivity spec", () => {
     cy.get("[class=editPatient]");
   });
 
-  it.skip("should have access to the user credentials", () => { });
+  it.skip("should have access to the user credentials", () => {});
 
   it("should have a PatientDataForm as a child component", () => {
     cy.get("[class=patientDataForm]");
@@ -44,6 +44,8 @@ describe("EditPatientActivity spec", () => {
           { force: true }
         );
 
+        cy.get("[class=MuiDialogContent-root]").contains("Confirm").click();
+
         cy.wait(1000);
         cy.get("[class=profilePicture]")
           .find("img")
@@ -79,11 +81,10 @@ describe("EditPatientActivity spec", () => {
   it("should not leave on the Cancel button click, if the Cancel button of the Cancel Dialog is click", () => {
     cy.get("[id=firstName]").clear().type("Marcelo");
     cy.get("[class=patientDataForm]").contains("Cancel").click();
-    cy.url().then(url => {
+    cy.url().then((url) => {
       cy.get("div.dialog__buttonSet").contains("Keep").click();
-      cy.url().should('eq', url);
+      cy.url().should("eq", url);
     });
     //cy.get("[id=firstName]").should("have.value", "Antonio Carlos");
   });
-
 });

cypress/integration/new_patient_activity.spec.js

@@ -8,7 +8,7 @@ describe("NewPatientActivity spec", () => {
     cy.get("[class=newPatient]");
   });
 
-  it.skip("should have access to the user credentials", () => { });
+  it.skip("should have access to the user credentials", () => {});
 
   it("should have a PatientDataForm as a child component", () => {
     cy.get("[class=patientDataForm]");
@@ -44,6 +44,8 @@ describe("NewPatientActivity spec", () => {
           { force: true }
         );
 
+        cy.get("[class=MuiDialogContent-root]").contains("Confirm").click();
+
         cy.wait(1000);
         cy.get("[class=profilePicture]")
           .find("img")

package.json

@@ -29,6 +29,7 @@
     "@types/react-router": "^5.1.19",
     "@types/react-router-dom": "^5.3.3",
     "@types/yup": "^0.29.0",
+    "browser-image-compression": "^2.0.2",
     "chart.js": "^3.9.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",

src/components/accessories/profilePicture/ProfilePicture.tsx

@@ -14,6 +14,7 @@ import AddRoundedIcon from "@material-ui/icons/AddRounded";
 import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
 import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
 import React, {
+  ChangeEvent,
   FunctionComponent,
   useCallback,
   useEffect,
@@ -25,9 +26,15 @@ import Webcam from "../../accessories/webcam/Webcam";
 import profilePicturePlaceholder from "../../../assets/profilePicturePlaceholder.png";
 import "./styles.scss";
 import { IProps } from "./types";
-import { handlePictureSelection, preprocessImage } from "./utils";
+import {
+  extractPictureFromSelection,
+  handlePictureSelection,
+  preprocessImage,
+} from "./utils";
 import classNames from "classnames";
 import { GridCloseIcon } from "@material-ui/data-grid";
+import { ProfilePictureCropper } from "../profilePictureCropper/ProfilePictureCropper";
+import { isEmpty } from "lodash";
 
 export const ProfilePicture: FunctionComponent<IProps> = ({
   isEditable,
@@ -42,18 +49,25 @@ export const ProfilePicture: FunctionComponent<IProps> = ({
     original: "",
   });
 
-  const [showError, setShowError] = React.useState("");
-  const [showModal, setShowModal] = React.useState(false);
-  const [showWebcam, setShowWebcam] = React.useState(false);
+  const [showError, setShowError] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const [showWebcam, setShowWebcam] = useState(false);
+  const [showCropper, setShowCropper] = useState(false);
+  const [fromFileSystem, setFromFileSystem] = useState(false);
+  const [pictureToResize, setPictureToResize] = useState("");
   const { t } = useTranslation();
 
   const handleCloseError = () => {
+    removePicture();
     setShowError("");
   };
 
   useEffect(() => {
     if (preLoadedPicture) {
-      preprocessImage(setPicture, preLoadedPicture);
+      setPicture({
+        preview: "data:image/jpeg;base64," + preLoadedPicture,
+        original: preLoadedPicture,
+      });
     }
   }, [preLoadedPicture]);
 
@@ -63,6 +77,13 @@ export const ProfilePicture: FunctionComponent<IProps> = ({
     }
   }, [onChange, picture.original]);
 
+  useEffect(() => {
+    if (!showModal && !isEmpty(pictureToResize) && fromFileSystem) {
+      setFromFileSystem(false);
+      openCropper();
+    }
+  }, [pictureToResize]);
+
   const pictureInputRef = useRef<HTMLInputElement>(null);
 
   const choosePicture = () => pictureInputRef.current?.click();
@@ -75,8 +96,11 @@ export const ProfilePicture: FunctionComponent<IProps> = ({
 
   const openWebcam = () => setShowWebcam(true);
   const closeWebcam = () => setShowWebcam(false);
+  const openCropper = () => setShowCropper(true);
+  const closeCropper = () => setShowCropper(false);
 
   const removePicture = () => {
+    setPictureToResize("");
     setPicture({
       preview: profilePicturePlaceholder,
       original: "",
@@ -86,14 +110,36 @@ export const ProfilePicture: FunctionComponent<IProps> = ({
     }
   };
 
+  const handleCropped = useCallback(
+    (value: string) => {
+      preprocessImage(setPicture, value, setShowError);
+      closeCropper();
+    },
+    [setPicture]
+  );
+
   const confirmWebcamPicture = useCallback(
     (image: string) => {
-      preprocessImage(setPicture, image);
+      preprocessImage(setPicture, image, setShowError);
       closeModal();
     },
     [setPicture]
   );
 
+  const handleChange = useCallback(
+    () => (e: ChangeEvent<HTMLInputElement>) => {
+      setFromFileSystem(true);
+      extractPictureFromSelection(setPictureToResize)(e);
+    },
+    [setPictureToResize]
+  );
+
+  const handleReset = () => {
+    closeCropper();
+    removePicture();
+    pictureInputRef.current?.click();
+  };
+
   useEffect(() => {
     if (shouldReset && resetCallback) {
       removePicture();
@@ -103,13 +149,20 @@ export const ProfilePicture: FunctionComponent<IProps> = ({
 
   return (
     <div className="profilePicture">
+      <ProfilePictureCropper
+        open={showCropper}
+        onSave={handleCropped}
+        onReset={handleReset}
+        picture={pictureToResize}
+      />
       <input
         id="profilePicture_input"
         ref={pictureInputRef}
         style={{ display: "none" }}
         disabled={!isEditable}
         type="file"
-        onChange={handlePictureSelection(setPicture, setShowError, 360000)}
+        accept="image/*"
+        onChange={handleChange()}
       />
       <div
         className={classNames("profilePicture_mask", { editable: isEditable })}

src/components/accessories/profilePicture/consts.ts

@@ -0,0 +1 @@
+export const MAX_FILE_UPLOAD_SIZE = 65536; // 65536 ;