-
+
-
-
-
- {conversation && conversation.phone_num}
-
-
-
- :
- {` ${item.ro_number || ""} | ${item.ownr_fn || ""} ${
- item.ownr_ln || ""
- } ${item.ownr_co_nm || ""}`}
-
- ))}
-
+
+ setVisible(false)} />
)}
-
+
);
}
diff --git a/client/src/components/document-editor/document-editor.component.jsx b/client/src/components/document-editor/document-editor.component.jsx
new file mode 100644
index 000000000..cb12c1aec
--- /dev/null
+++ b/client/src/components/document-editor/document-editor.component.jsx
@@ -0,0 +1,113 @@
+//import "tui-image-editor/dist/tui-image-editor.css";
+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 LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+const mapStateToProps = createStructuredSelector({
+ currentUser: selectCurrentUser,
+ bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+ //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();
+
+ 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, 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
+
+ markerArea.current.renderAtNaturalSize = true;
+ markerArea.current.renderImageType = "image/jpeg";
+ markerArea.current.renderImageQuality = 1;
+ //markerArea.current.settings.displayMode = "inline";
+ markerArea.current.show();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [triggerUpload]);
+
+ async function b64toBlob(url) {
+ const res = await fetch(url);
+ return await res.blob();
+ }
+
+ return (
+
+ :
+ {` ${item.ro_number || ""} | ${item.ownr_fn || ""} ${
+ item.ownr_ln || ""
+ } ${item.ownr_co_nm || ""}`}
+
+ ))}
+
+
{loading ?
+ {!loading && !uploaded && (
+ })
+ )}
+ {loading &&
+ );
+}
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(DocumentEditorComponent);
diff --git a/client/src/components/document-editor/document-editor.container.jsx b/client/src/components/document-editor/document-editor.container.jsx
new file mode 100644
index 000000000..3819f27f8
--- /dev/null
+++ b/client/src/components/document-editor/document-editor.container.jsx
@@ -0,0 +1,59 @@
+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 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)),
+});
+
+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 || loadingShop) return
+
+ );
+}
diff --git a/client/src/components/documents-upload/documents-upload.utility.js b/client/src/components/documents-upload/documents-upload.utility.js
index 5856d985e..abc0315f1 100644
--- a/client/src/components/documents-upload/documents-upload.utility.js
+++ b/client/src/components/documents-upload/documents-upload.utility.js
@@ -21,8 +21,13 @@ export const handleUpload = (ev, context) => {
const { onError, onSuccess, onProgress } = ev;
const { bodyshop, jobId } = context;
- let key = `${bodyshop.id}/${jobId}/${ev.file.name.replace(/\.[^/.]+$/, "")}`;
- let extension = ev.file.name.split(".").pop();
+ const fileName = ev.file.name || ev.filename;
+
+ let key = `${bodyshop.id}/${jobId}/${fileName.replace(
+ /\.[^/.]+$/,
+ ""
+ )}-${new Date().getTime()}`;
+ let extension = fileName.split(".").pop();
uploadToCloudinary(
key,
extension,
diff --git a/client/src/components/error-boundary/error-boundary.component.jsx b/client/src/components/error-boundary/error-boundary.component.jsx
index cef01e299..0eca73dea 100644
--- a/client/src/components/error-boundary/error-boundary.component.jsx
+++ b/client/src/components/error-boundary/error-boundary.component.jsx
@@ -57,6 +57,23 @@ ${this.state.error.stack}
if (this.state.hasErrored === true) {
logImEXEvent("error_boundary_rendered", { error, info });
+ window.$crisp.push([
+ "set",
+ "session:event",
+ [
+ [
+ [
+ "error_boundary",
+ {
+ error: this.state.error.message,
+ stack: this.state.error.stack,
+ },
+ "red",
+ ],
+ ],
+ ],
+ ]);
+
return (