IO-1144 Image Editor Changes.

bodyshop_translations.babel

@@ -11040,6 +11040,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>uploading</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>usage</name>
                                         <definition_loaded>false</definition_loaded>
@@ -11087,6 +11108,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>edituploaded</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>insert</name>
                                         <definition_loaded>false</definition_loaded>

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

@@ -1,8 +1,8 @@
 //import "tui-image-editor/dist/tui-image-editor.css";
-import { Spin } from "antd";
+import { Result } from "antd";
 import * as markerjs2 from "markerjs2";
-import React, { useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -11,6 +11,7 @@ import {
 } 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,
@@ -23,37 +24,49 @@ const mapDispatchToProps = (dispatch) => ({
 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 triggerUpload = async (dataUrl) => {
+  const { t } = useTranslation();
-    setLoading(true);
+
-    handleUpload(
+  const triggerUpload = useCallback(
-      {
+    async (dataUrl) => {
-        filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
+      setLoading(true);
-        file: await b64toBlob(dataUrl),
+      handleUpload(
-        onSuccess: () => setLoading(false),
+        {
-        onError: () => setLoading(false),
+          filename: `${document.key.split("/").pop()}-${Date.now()}.jpg`,
-      },
+          file: await b64toBlob(dataUrl),
-      {
+          onSuccess: () => {
-        bodyshop: bodyshop,
+            setLoading(false);
-        uploaded_by: currentUser.email,
+            setuploaded(true);
-        jobId: document.jobid,
+          },
-        //billId: billId,
+          onError: () => setLoading(false),
-        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);
+      console.log(`markerArea.current`, markerArea.current);
       // attach an event handler to assign annotated image back to our image element
       markerArea.current.addCloseEventListener((closeEvent) => {
         console.log("Close Event", closeEvent);
       });
 
       markerArea.current.addRenderEventListener((dataUrl) => {
+        imgRef.current.src = dataUrl;
+        markerArea.current.close();
         triggerUpload(dataUrl);
       });
       // launch marker.js
@@ -65,7 +78,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
       markerArea.current.show();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imgRef.current, triggerUpload]);
+  }, [triggerUpload]);
 
   async function b64toBlob(url) {
     const res = await fetch(url);
@@ -74,7 +87,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
 
   return (
     <div>
-      <Spin spinning={loading}>
+      {!loading && !uploaded && (
         <img
           ref={imgRef}
           src={GenerateSrcUrl(document)}
@@ -82,7 +95,14 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
           crossOrigin="anonymous"
           style={{ maxWidth: "90vw", maxHeight: "90vh" }}
         />
-      </Spin>
+      )}
+      {loading && <LoadingSpinner message={t("documents.labels.uploading")} />}
+      {uploaded && (
+        <Result
+          status="success"
+          title={t("documents.successes.edituploaded")}
+        />
+      )}
     </div>
   );
 }

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

@@ -1,29 +1,55 @@
 import { useQuery } from "@apollo/client";
-import { Modal, Result } from "antd";
+import { Result } from "antd";
 import queryString from "query-string";
-import React from "react";
+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 AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import DocumentEditor from "./document-editor.component";
-import { useTranslation } from "react-i18next";
 
-export default function DocumentEditorContainer() {
+const mapDispatchToProps = (dispatch) => ({
+  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",
+  });
+
+  useEffect(() => {
+    if (dataShop) setBodyshop(dataShop.bodyshops[0]);
+  }, [dataShop, setBodyshop]);
 
   const { loading, error, data } = useQuery(GET_DOCUMENT_BY_PK, {
     variables: { documentId },
     skip: !documentId,
   });
 
-  if (loading) return <LoadingSpinner />;
+  if (loading || loadingShop) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error || errorShop)
+    return (
+      <AlertComponent
+        message={error.message || errorShop.message}
+        type="error"
+      />
+    );
 
-  if (!data.documents_by_pk)
+  if (!data || !data.documents_by_pk)
     return <Result status="404" title={t("general.errors.notfound")} />;
   return (
     <div>

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -1,5 +1,5 @@
-import { FileExcelFilled } from "@ant-design/icons";
+import { FileExcelFilled, EditFilled, SyncOutlined } from "@ant-design/icons";
-import { Card, Col, Row, Space } from "antd";
+import { Card, Col, Row, Space, Button } from "antd";
 import React, { useEffect, useState } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
@@ -23,6 +23,25 @@ function JobsDocumentsComponent({
 }) {
   const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
   const { t } = useTranslation();
+  const [index, setIndex] = useState(0);
+
+  const onCurrentImageChange = (index) => {
+    setIndex(index);
+  };
+
+  useEffect(() => {
+    console.log("Added event listening for reteching.");
+    window.addEventListener("storage", (ev) => {
+      if (ev.key === "refetch" && ev.newValue === true) {
+        refetch && refetch();
+        localStorage.setItem("refetch", false);
+      }
+    });
+
+    return () => {
+      window.removeEventListener("storage");
+    };
+  }, [refetch]);
 
   useEffect(() => {
     let documents = data.reduce(
@@ -101,6 +120,9 @@ function JobsDocumentsComponent({
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
+            <Button onClick={() => refetch && refetch()}>
+              <SyncOutlined />
+            </Button>
             <JobsDocumentsGallerySelectAllComponent
               galleryImages={galleryImages}
               setGalleryImages={setgalleryImages}
@@ -135,6 +157,27 @@ function JobsDocumentsComponent({
             <Gallery
               images={galleryImages.images}
               backdropClosesModal={true}
+              currentImageWillChange={onCurrentImageChange}
+              customControls={[
+                <Button
+                  style={{
+                    float: "right",
+
+                    zIndex: "5",
+                  }}
+                  onClick={() => {
+                    console.log(`Clicked`);
+                    const newWindow = window.open(
+                      `${window.location.protocol}//${window.location.host}/edit?documentId=${galleryImages.images[index].id}`,
+                      "_blank",
+                      "noopener,noreferrer"
+                    );
+                    if (newWindow) newWindow.opener = null;
+                  }}
+                >
+                  <EditFilled style={{}} />
+                </Button>,
+              ]}
               onClickImage={(props) => {
                 window.open(
                   props.target.src,

client/src/translations/en_us/common.json

@@ -6,7 +6,7 @@
 			},
 			"errors": {
 				"deleting": "Error encountered while deleting allocation. {{message}}",
-				"saving": "Error while allocating. {{message}}",
+				"saving": "Error while allocating.  {{message}}",
 				"validation": "Please ensure all fields are entered correctly.  "
 			},
 			"fields": {
@@ -701,10 +701,12 @@
 				"upload": "Upload",
 				"upload_limitexceeded": "Uploading all selected documents will exceed the job storage limit for your shop.  ",
 				"upload_limitexceeded_title": "Unable to upload document(s)",
+				"uploading": "Uploading...",
 				"usage": "of job storage used.  ({{used}} / {{total}})"
 			},
 			"successes": {
 				"delete": "Document(s) deleted successfully.",
+				"edituploaded": "Edited document uploaded successfully.  Please close this window and refresh the documents list.",
 				"insert": "Uploaded document successfully. ",
 				"updated": "Document updated successfully. "
 			}

client/src/translations/es/common.json

@@ -701,10 +701,12 @@
 				"upload": "Subir",
 				"upload_limitexceeded": "",
 				"upload_limitexceeded_title": "",
+				"uploading": "",
 				"usage": ""
 			},
 			"successes": {
 				"delete": "Documento eliminado con éxito.",
+				"edituploaded": "",
 				"insert": "Documento cargado con éxito.",
 				"updated": ""
 			}

client/src/translations/fr/common.json

@@ -701,10 +701,12 @@
 				"upload": "Télécharger",
 				"upload_limitexceeded": "",
 				"upload_limitexceeded_title": "",
+				"uploading": "",
 				"usage": ""
 			},
 			"successes": {
 				"delete": "Le document a bien été supprimé.",
+				"edituploaded": "",
 				"insert": "Document téléchargé avec succès.",
 				"updated": ""
 			}