- Merge client update into test-beta

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/document-editor/document-editor.component.jsx

@@ -1,111 +1,110 @@
 //import "tui-image-editor/dist/tui-image-editor.css";
-import { Result } from "antd";
+import {Result} from "antd";
 import * as markerjs2 from "markerjs2";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
-import { handleUpload } from "../documents-upload/documents-upload.utility";
-import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";
+import React, {useCallback, useEffect, useRef, useState} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
+import {handleUpload} from "../documents-upload/documents-upload.utility";
+import {GenerateSrcUrl} from "../jobs-documents-gallery/job-documents.utility";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
+    currentUser: selectCurrentUser,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
-  const imgRef = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const [uploaded, setuploaded] = useState(false);
-  const markerArea = useRef(null);
-  const { t } = useTranslation();
+export function DocumentEditorComponent({currentUser, bodyshop, document}) {
+    const imgRef = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [uploaded, setuploaded] = useState(false);
+    const markerArea = useRef(null);
+    const {t} = useTranslation();
 
-  const triggerUpload = useCallback(
-    async (dataUrl) => {
-      setLoading(true);
-      handleUpload(
-        {
-          filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
-          file: await b64toBlob(dataUrl),
-          onSuccess: () => {
-            setLoading(false);
-            setuploaded(true);
-          },
-          onError: () => setLoading(false),
+    const triggerUpload = useCallback(
+        async (dataUrl) => {
+            setLoading(true);
+            handleUpload(
+                {
+                    filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
+                    file: await b64toBlob(dataUrl),
+                    onSuccess: () => {
+                        setLoading(false);
+                        setuploaded(true);
+                    },
+                    onError: () => setLoading(false),
+                },
+                {
+                    bodyshop: bodyshop,
+                    uploaded_by: currentUser.email,
+                    jobId: document.jobid,
+                    //billId: billId,
+                    tagsArray: ["edited"],
+                    //callback: callbackAfterUpload,
+                }
+            );
         },
-        {
-          bodyshop: bodyshop,
-          uploaded_by: currentUser.email,
-          jobId: document.jobid,
-          //billId: billId,
-          tagsArray: ["edited"],
-          //callback: callbackAfterUpload,
+        [bodyshop, currentUser, document]
+    );
+
+    useEffect(() => {
+        if (imgRef.current !== null) {
+            // create a marker.js MarkerArea
+            markerArea.current = new markerjs2.MarkerArea(imgRef.current);
+
+            // attach an event handler to assign annotated image back to our image element
+            markerArea.current.addEventListener("close", (closeEvent) => {
+            });
+
+            markerArea.current.addEventListener("render", (event) => {
+                const dataUrl = event.dataUrl;
+                imgRef.current.src = dataUrl;
+                markerArea.current.close();
+                triggerUpload(dataUrl);
+            });
+            // launch marker.js
+
+            markerArea.current.renderAtNaturalSize = true;
+            markerArea.current.renderImageType = "image/jpeg";
+            markerArea.current.renderImageQuality = 1;
+            //markerArea.current.settings.displayMode = "inline";
+            markerArea.current.show();
         }
-      );
-    },
-    [bodyshop, currentUser, document]
-  );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [triggerUpload]);
 
-  useEffect(() => {
-    if (imgRef.current !== null) {
-      // create a marker.js MarkerArea
-      markerArea.current = new markerjs2.MarkerArea(imgRef.current);
-
-      // attach an event handler to assign annotated image back to our image element
-      markerArea.current.addCloseEventListener((closeEvent) => {});
-
-      markerArea.current.addRenderEventListener((dataUrl) => {
-        imgRef.current.src = dataUrl;
-        markerArea.current.close();
-        triggerUpload(dataUrl);
-      });
-      // launch marker.js
-
-      markerArea.current.renderAtNaturalSize = true;
-      markerArea.current.renderImageType = "image/jpeg";
-      markerArea.current.renderImageQuality = 1;
-      //markerArea.current.settings.displayMode = "inline";
-      markerArea.current.show();
+    async function b64toBlob(url) {
+        const res = await fetch(url);
+        return await res.blob();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerUpload]);
 
-  async function b64toBlob(url) {
-    const res = await fetch(url);
-    return await res.blob();
-  }
-
-  return (
-    <div>
-      {!loading && !uploaded && (
-        <img
-          ref={imgRef}
-          src={GenerateSrcUrl(document)}
-          alt="sample"
-          crossOrigin="anonymous"
-          style={{ maxWidth: "90vw", maxHeight: "90vh" }}
-        />
-      )}
-      {loading && <LoadingSpinner message={t("documents.labels.uploading")} />}
-      {uploaded && (
-        <Result
-          status="success"
-          title={t("documents.successes.edituploaded")}
-        />
-      )}
-    </div>
-  );
+    return (
+        <div>
+            {!loading && !uploaded && (
+                <img
+                    ref={imgRef}
+                    src={GenerateSrcUrl(document)}
+                    alt="sample"
+                    crossOrigin="anonymous"
+                    style={{maxWidth: "90vw", maxHeight: "90vh"}}
+                />
+            )}
+            {loading && <LoadingSpinner message={t("documents.labels.uploading")}/>}
+            {uploaded && (
+                <Result
+                    status="success"
+                    title={t("documents.successes.edituploaded")}
+                />
+            )}
+        </div>
+    );
 }
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(DocumentEditorComponent);

client/src/components/document-editor/document-editor.container.jsx

@@ -1,62 +1,62 @@
-import { useQuery } from "@apollo/client";
-import { Result } from "antd";
+import {useQuery} from "@apollo/client";
+import {Result} from "antd";
 import queryString from "query-string";
-import React, { useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { useLocation } from "react-router";
-import { QUERY_BODYSHOP } from "../../graphql/bodyshop.queries";
-import { GET_DOCUMENT_BY_PK } from "../../graphql/documents.queries";
-import { setBodyshop } from "../../redux/user/user.actions";
+import React, {useEffect} from "react";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {useLocation} from "react-router-dom";
+import {QUERY_BODYSHOP} from "../../graphql/bodyshop.queries";
+import {GET_DOCUMENT_BY_PK} from "../../graphql/documents.queries";
+import {setBodyshop} from "../../redux/user/user.actions";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import DocumentEditor from "./document-editor.component";
 
 const mapDispatchToProps = (dispatch) => ({
-  setBodyshop: (bs) => dispatch(setBodyshop(bs)),
+    setBodyshop: (bs) => dispatch(setBodyshop(bs)),
 });
 
 export default connect(null, mapDispatchToProps)(DocumentEditorContainer);
 
-export function DocumentEditorContainer({ setBodyshop }) {
-  //Get the image details for the image to be saved.
-  //Get the document id from the search string.
-  const { documentId } = queryString.parse(useLocation().search);
-  const { t } = useTranslation();
-  const {
-    loading: loadingShop,
-    error: errorShop,
-    data: dataShop,
-  } = useQuery(QUERY_BODYSHOP, {
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
+export function DocumentEditorContainer({setBodyshop}) {
+    //Get the image details for the image to be saved.
+    //Get the document id from the search string.
+    const {documentId} = queryString.parse(useLocation().search);
+    const {t} = useTranslation();
+    const {
+        loading: loadingShop,
+        error: errorShop,
+        data: dataShop,
+    } = useQuery(QUERY_BODYSHOP, {
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
 
-  useEffect(() => {
-    if (dataShop) setBodyshop(dataShop.bodyshops[0]);
-  }, [dataShop, setBodyshop]);
+    useEffect(() => {
+        if (dataShop) setBodyshop(dataShop.bodyshops[0]);
+    }, [dataShop, setBodyshop]);
 
-  const { loading, error, data } = useQuery(GET_DOCUMENT_BY_PK, {
-    variables: { documentId },
-    skip: !documentId,
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "network-only",
-  });
+    const {loading, error, data} = useQuery(GET_DOCUMENT_BY_PK, {
+        variables: {documentId},
+        skip: !documentId,
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+    });
 
-  if (loading || loadingShop) return <LoadingSpinner />;
-  if (error || errorShop)
+    if (loading || loadingShop) return <LoadingSpinner/>;
+    if (error || errorShop)
+        return (
+            <AlertComponent
+                message={error.message || errorShop.message}
+                type="error"
+            />
+        );
+
+    if (!data || !data.documents_by_pk)
+        return <Result status="404" title={t("general.errors.notfound")}/>;
     return (
-      <AlertComponent
-        message={error.message || errorShop.message}
-        type="error"
-      />
+        <div>
+            <DocumentEditor document={data ? data.documents_by_pk : null}/>
+        </div>
     );
-
-  if (!data || !data.documents_by_pk)
-    return <Result status="404" title={t("general.errors.notfound")} />;
-  return (
-    <div>
-      <DocumentEditor document={data ? data.documents_by_pk : null} />
-    </div>
-  );
 }