element", () => {
- // https://on.cypress.io/select
-
- // at first, no option should be selected
- cy.get(".action-select").should("have.value", "--Select a fruit--");
-
- // Select option(s) with matching text content
- cy.get(".action-select").select("apples");
- // confirm the apples were selected
- // note that each value starts with "fr-" in our HTML
- cy.get(".action-select").should("have.value", "fr-apples");
-
- cy.get(".action-select-multiple")
- .select(["apples", "oranges", "bananas"])
- // when getting multiple values, invoke "val" method first
- .invoke("val")
- .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
-
- // Select option(s) with matching value
- cy.get(".action-select")
- .select("fr-bananas")
- // can attach an assertion right away to the element
- .should("have.value", "fr-bananas");
-
- cy.get(".action-select-multiple")
- .select(["fr-apples", "fr-oranges", "fr-bananas"])
- .invoke("val")
- .should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
-
- // assert the selected values include oranges
- cy.get(".action-select-multiple").invoke("val").should("include", "fr-oranges");
- });
-
- it(".scrollIntoView() - scroll an element into view", () => {
- // https://on.cypress.io/scrollintoview
-
- // normally all of these buttons are hidden,
- // because they're not within
- // the viewable area of their parent
- // (we need to scroll to see them)
- cy.get("#scroll-horizontal button").should("not.be.visible");
-
- // scroll the button into view, as if the user had scrolled
- cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible");
-
- cy.get("#scroll-vertical button").should("not.be.visible");
-
- // Cypress handles the scroll direction needed
- cy.get("#scroll-vertical button").scrollIntoView().should("be.visible");
-
- cy.get("#scroll-both button").should("not.be.visible");
-
- // Cypress knows to scroll to the right and down
- cy.get("#scroll-both button").scrollIntoView().should("be.visible");
- });
-
- it(".trigger() - trigger an event on a DOM element", () => {
- // https://on.cypress.io/trigger
-
- // To interact with a range input (slider)
- // we need to set its value & trigger the
- // event to signal it changed
-
- // Here, we invoke jQuery's val() method to set
- // the value and trigger the 'change' event
- cy.get(".trigger-input-range")
- .invoke("val", 25)
- .trigger("change")
- .get("input[type=range]")
- .siblings("p")
- .should("have.text", "25");
- });
-
- it("cy.scrollTo() - scroll the window or element to a position", () => {
- // https://on.cypress.io/scrollto
-
- // You can scroll to 9 specific positions of an element:
- // -----------------------------------
- // | topLeft top topRight |
- // | |
- // | |
- // | |
- // | left center right |
- // | |
- // | |
- // | |
- // | bottomLeft bottom bottomRight |
- // -----------------------------------
-
- // if you chain .scrollTo() off of cy, we will
- // scroll the entire window
- cy.scrollTo("bottom");
-
- cy.get("#scrollable-horizontal").scrollTo("right");
-
- // or you can scroll to a specific coordinate:
- // (x axis, y axis) in pixels
- cy.get("#scrollable-vertical").scrollTo(250, 250);
-
- // or you can scroll to a specific percentage
- // of the (width, height) of the element
- cy.get("#scrollable-both").scrollTo("75%", "25%");
-
- // control the easing of the scroll (default is 'swing')
- cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
-
- // control the duration of the scroll (in ms)
- cy.get("#scrollable-both").scrollTo("center", { duration: 2000 });
- });
-});
diff --git a/client/cypress/e2e/2-advanced-examples/aliasing.cy.js b/client/cypress/e2e/2-advanced-examples/aliasing.cy.js
deleted file mode 100644
index 152b8ece9..000000000
--- a/client/cypress/e2e/2-advanced-examples/aliasing.cy.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/// element in various ways
- .should("have.text", "Column content")
- .should("contain", "Column content")
- .should("have.html", "Column content")
- // chai-jquery uses "is()" to check if element matches selector
- .should("match", "td")
- // to match text content against a regular expression
- // first need to invoke jQuery method text()
- // and then match using regular expression
- .invoke("text")
- .should("match", /column content/i);
-
- // a better way to check element's text content against a regular expression
- // is to use "cy.contains"
- // https://on.cypress.io/contains
- cy.get(".assertion-table")
- .find("tbody tr:last")
- // finds first element with text content matching regular expression
- .contains("td", /column content/i)
- .should("be.visible");
-
- // for more information about asserting element's text
- // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-element’s-text-contents
- });
-
- it(".and() - chain multiple assertions together", () => {
- // https://on.cypress.io/and
- cy.get(".assertions-link").should("have.class", "active").and("have.attr", "href").and("include", "cypress.io");
- });
- });
-
- describe("Explicit Assertions", () => {
- // https://on.cypress.io/assertions
- it("expect - make an assertion about a specified subject", () => {
- // We can use Chai's BDD style assertions
- expect(true).to.be.true;
- const o = { foo: "bar" };
-
- expect(o).to.equal(o);
- expect(o).to.deep.equal({ foo: "bar" });
- // matching text using regular expression
- expect("FooBar").to.match(/bar$/i);
- });
-
- it("pass your own callback function to should()", () => {
- // Pass a function to should that can have any number
- // of explicit assertions within it.
- // The ".should(cb)" function will be retried
- // automatically until it passes all your explicit assertions or times out.
- cy.get(".assertions-p")
- .find("p")
- .should(($p) => {
- // https://on.cypress.io/$
- // return an array of texts from all of the p's
- // @ts-ignore TS6133 unused variable
- const texts = $p.map((i, el) => Cypress.$(el).text());
-
- // jquery map returns jquery object
- // and .get() convert this to simple array
- const paragraphs = texts.get();
-
- // array should have length of 3
- expect(paragraphs, "has 3 paragraphs").to.have.length(3);
-
- // use second argument to expect(...) to provide clear
- // message with each assertion
- expect(paragraphs, "has expected text in each paragraph").to.deep.eq([
- "Some text from first p",
- "More text from second p",
- "And even more text from third p"
- ]);
- });
- });
-
- it("finds element by class name regex", () => {
- cy.get(".docs-header")
- .find("div")
- // .should(cb) callback function will be retried
- .should(($div) => {
- expect($div).to.have.length(1);
-
- const className = $div[0].className;
-
- expect(className).to.match(/heading-/);
- })
- // .then(cb) callback is not retried,
- // it either passes or fails
- .then(($div) => {
- expect($div, "text content").to.have.text("Introduction");
- });
- });
-
- it("can throw any error", () => {
- cy.get(".docs-header")
- .find("div")
- .should(($div) => {
- if ($div.length !== 1) {
- // you can throw your own errors
- throw new Error("Did not find 1 element");
- }
-
- const className = $div[0].className;
-
- if (!className.match(/heading-/)) {
- throw new Error(`Could not find class "heading-" in ${className}`);
- }
- });
- });
-
- it("matches unknown text between two elements", () => {
- /**
- * Text from the first element.
- * @type {string}
- */
- let text;
-
- /**
- * Normalizes passed text,
- * useful before comparing text with spaces and different capitalization.
- * @param {string} s Text to normalize
- */
- const normalizeText = (s) => s.replace(/\s/g, "").toLowerCase();
-
- cy.get(".two-elements")
- .find(".first")
- .then(($first) => {
- // save text from the first element
- text = normalizeText($first.text());
- });
-
- cy.get(".two-elements")
- .find(".second")
- .should(($div) => {
- // we can massage text before comparing
- const secondText = normalizeText($div.text());
-
- expect(secondText, "second text").to.equal(text);
- });
- });
-
- it("assert - assert shape of an object", () => {
- const person = {
- name: "Joe",
- age: 20
- };
-
- assert.isObject(person, "value is object");
- });
-
- it("retries the should callback until assertions pass", () => {
- cy.get("#random-number").should(($div) => {
- const n = parseFloat($div.text());
-
- expect(n).to.be.gte(1).and.be.lte(10);
- });
- });
- });
-});
diff --git a/client/cypress/e2e/2-advanced-examples/connectors.cy.js b/client/cypress/e2e/2-advanced-examples/connectors.cy.js
deleted file mode 100644
index 3cd60d308..000000000
--- a/client/cypress/e2e/2-advanced-examples/connectors.cy.js
+++ /dev/null
@@ -1,96 +0,0 @@
-///
- */
- function waitOneSecond() {
- // return a promise that resolves after 1 second
- // @ts-ignore TS2351 (new Cypress.Promise)
- return new Cypress.Promise((resolve, reject) => {
- setTimeout(() => {
- // set waited to true
- waited = true;
-
- // resolve with 'foo' string
- resolve("foo");
- }, 1000);
- });
- }
-
- cy.then(() => {
- // return a promise to cy.then() that
- // is awaited until it resolves
- // @ts-ignore TS7006
- return waitOneSecond().then((str) => {
- expect(str).to.eq("foo");
- expect(waited).to.be.true;
- });
- });
- });
-});
diff --git a/client/cypress/e2e/2-advanced-examples/viewport.cy.js b/client/cypress/e2e/2-advanced-examples/viewport.cy.js
deleted file mode 100644
index 1d73b915d..000000000
--- a/client/cypress/e2e/2-advanced-examples/viewport.cy.js
+++ /dev/null
@@ -1,59 +0,0 @@
-///
-
+
+
diff --git a/client/src/components/chat-media-selector/chat-media-selector.component.jsx b/client/src/components/chat-media-selector/chat-media-selector.component.jsx
index 0526fde43..b7e7d64a3 100644
--- a/client/src/components/chat-media-selector/chat-media-selector.component.jsx
+++ b/client/src/components/chat-media-selector/chat-media-selector.component.jsx
@@ -1,7 +1,8 @@
import { PictureFilled } from "@ant-design/icons";
import { useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Badge, Popover } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
@@ -9,6 +10,7 @@ import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
+ const {
+ treatments: { Imgproxy }
+ } = useSplitTreatments({
+ attributes: {},
+ names: ["Imgproxy"],
+ splitKey: bodyshop && bodyshop.imexshopid
+ });
const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
fetchPolicy: "network-only",
@@ -42,6 +51,10 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
setSelectedMedia([]);
}, [setSelectedMedia, conversation]);
+ //Knowingly taking on the technical debt of poor implementation below. Done this way to avoid an edge case where no component may be displayed.
+ //Cloudinary will be removed once the migration is completed.
+ //If Imageproxy is on, rely only on the LMS selector
+ //If not on, use the old methods.
const content = (
{loading &&
}
@@ -49,17 +62,37 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
{selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
{t("messaging.labels.maxtenimages")}
) : null}
- {!bodyshop.uselocalmediaserver && data && (
-
- )}
- {bodyshop.uselocalmediaserver && open && (
-
+
+ {Imgproxy.treatment === "on" ? (
+ <>
+ {!bodyshop.uselocalmediaserver && (
+
+ )}
+ {bodyshop.uselocalmediaserver && open && (
+
+ )}
+
+ ) : (
+ <>
+ {!bodyshop.uselocalmediaserver && data && (
+
+ )}
+ {bodyshop.uselocalmediaserver && open && (
+
+ )}
+
)}
{
+ if (f.event && f.event.percent === 100) handleDone(f.file.uid);
+ setFileList(f.fileList);
+ }}
+ beforeUpload={(file, fileList) => {
+ if (ignoreSizeLimit) return true;
+ const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
+ const shouldStopUpload = (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >= 1;
+
+ //Check to see if old files plus newly uploaded ones will be too much.
+ if (shouldStopUpload) {
+ notification.error({
+ key: "cannotuploaddocuments",
+ message: t("documents.labels.upload_limitexceeded_title"),
+ description: t("documents.labels.upload_limitexceeded")
+ });
+ return Upload.LIST_IGNORE;
+ }
+ return true;
+ }}
+ customRequest={(ev) =>
+ handleUpload(
+ ev,
+ {
+ bodyshop: bodyshop,
+ uploaded_by: currentUser.email,
+ jobId: jobId,
+ billId: billId,
+ tagsArray: tagsArray,
+ callback: callbackAfterUpload
+ },
+ notification
+ )
+ }
+ accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
+ // showUploadList={false}
+ >
+ {children || (
+ <>
+
+
+
+ {t("documents.labels.dragtoupload")}
+
+ {!ignoreSizeLimit && (
+
+
+ {t("documents.labels.usage", {
+ percent: pct,
+ used: formatBytes(totalSize),
+ total: formatBytes(bodyshop && bodyshop.jobsizelimit)
+ })}
+
+
+ )}
+
+ )}
+
+ );
+}
+
+export default connect(mapStateToProps, null)(DocumentsUploadImgproxyComponent);
diff --git a/client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js b/client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js
new file mode 100644
index 000000000..7ecbd50bb
--- /dev/null
+++ b/client/src/components/documents-upload-imgproxy/documents-upload-imgproxy.utility.js
@@ -0,0 +1,172 @@
+import axios from "axios";
+import exifr from "exifr";
+import i18n from "i18next";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
+import client from "../../utils/GraphQLClient";
+
+//Context: currentUserEmail, bodyshop, jobid, invoiceid
+
+//Required to prevent headers from getting set and rejected from Cloudinary.
+var cleanAxios = axios.create();
+cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
+
+export const handleUpload = (ev, context, notification) => {
+ logImEXEvent("document_upload", { filetype: ev.file?.type });
+
+ const { onError, onSuccess, onProgress } = ev;
+ const { bodyshop, jobId } = context;
+
+ const fileName = ev.file?.name || ev.filename;
+
+ let extension = fileName.split(".").pop();
+ let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`;
+
+ uploadToS3(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification).catch(
+ (error) => {
+ console.error("Error uploading file to S3", error);
+ notification.error({
+ message: i18n.t("documents.errors.insert", {
+ message: error.message
+ })
+ });
+ }
+ );
+};
+
+//Handles only 1 file at a time.
+export const uploadToS3 = async (
+ key,
+ extension,
+ fileType,
+ file,
+ onError,
+ onSuccess,
+ onProgress,
+ context,
+ notification
+) => {
+ const { bodyshop, jobId, billId, uploaded_by, callback } = context;
+
+ //Get the signed url allowing us to PUT to S3.
+ const signedURLResponse = await axios.post("/media/imgproxy/sign", {
+ filenames: [key],
+ bodyshopid: bodyshop.id,
+ jobid: jobId
+ });
+
+ if (signedURLResponse.status !== 200) {
+ if (onError) onError(signedURLResponse.statusText);
+ notification.error({
+ message: i18n.t("documents.errors.getpresignurl", {
+ message: signedURLResponse.statusText
+ })
+ });
+ return;
+ }
+
+ //Key should be same as we provided to maintain backwards compatibility.
+ const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0];
+
+ const options = {
+ onUploadProgress: (e) => {
+ if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+ }
+ };
+
+ try {
+ const s3UploadResponse = await cleanAxios.put(preSignedUploadUrlToS3, file, options);
+ //Insert the document with the matching key.
+ let takenat;
+ if (fileType.includes("image")) {
+ try {
+ const exif = await exifr.parse(file);
+ takenat = exif && exif.DateTimeOriginal;
+ } catch (error) {
+ console.log("Unable to parse image file for EXIF Data", error.message);
+ }
+ }
+
+ const documentInsert = await client.mutate({
+ mutation: INSERT_NEW_DOCUMENT,
+ variables: {
+ docInput: [
+ {
+ ...(jobId ? { jobid: jobId } : {}),
+ ...(billId ? { billid: billId } : {}),
+ uploaded_by: uploaded_by,
+ key: s3Key,
+ type: fileType,
+ extension: s3UploadResponse.data.format || extension,
+ bodyshopid: bodyshop.id,
+ size: s3UploadResponse.data.bytes || file.size, //Leftover from Cloudinary. We don't do any optimization on upload, so it will always be file.size.
+ takenat
+ }
+ ]
+ }
+ });
+
+ if (!documentInsert.errors) {
+ if (onSuccess)
+ onSuccess({
+ uid: documentInsert.data.insert_documents.returning[0].id,
+ name: documentInsert.data.insert_documents.returning[0].name,
+ status: "done",
+ key: documentInsert.data.insert_documents.returning[0].key
+ });
+ notification.success({
+ key: "docuploadsuccess",
+ message: i18n.t("documents.successes.insert")
+ });
+ if (callback) {
+ callback();
+ }
+ } else {
+ if (onError) onError(JSON.stringify(documentInsert.errors));
+ notification.error({
+ message: i18n.t("documents.errors.insert", {
+ message: JSON.stringify(documentInsert.errors)
+ })
+ });
+ return;
+ }
+ } catch (error) {
+ console.log("Error uploading file to S3", error.message, error.stack);
+ notification.error({
+ message: i18n.t("documents.errors.insert", {
+ message: error.message
+ })
+ });
+ if (onError) onError(JSON.stringify(error.message));
+ }
+};
+
+function replaceAccents(str) {
+ // Verifies if the String has accents and replace them
+ if (str.search(/[\xC0-\xFF]/g) > -1) {
+ str = str
+ .replace(/[\xC0-\xC5]/g, "A")
+ .replace(/[\xC6]/g, "AE")
+ .replace(/[\xC7]/g, "C")
+ .replace(/[\xC8-\xCB]/g, "E")
+ .replace(/[\xCC-\xCF]/g, "I")
+ .replace(/[\xD0]/g, "D")
+ .replace(/[\xD1]/g, "N")
+ .replace(/[\xD2-\xD6\xD8]/g, "O")
+ .replace(/[\xD9-\xDC]/g, "U")
+ .replace(/[\xDD]/g, "Y")
+ .replace(/[\xDE]/g, "P")
+ .replace(/[\xE0-\xE5]/g, "a")
+ .replace(/[\xE6]/g, "ae")
+ .replace(/[\xE7]/g, "c")
+ .replace(/[\xE8-\xEB]/g, "e")
+ .replace(/[\xEC-\xEF]/g, "i")
+ .replace(/[\xF1]/g, "n")
+ .replace(/[\xF2-\xF6\xF8]/g, "o")
+ .replace(/[\xF9-\xFC]/g, "u")
+ .replace(/[\xFE]/g, "p")
+ .replace(/[\xFD\xFF]/g, "y");
+ }
+ return str;
+}
diff --git a/client/src/components/email-documents/email-documents.component.jsx b/client/src/components/email-documents/email-documents.component.jsx
index d3c6b20da..7e17d5565 100644
--- a/client/src/components/email-documents/email-documents.component.jsx
+++ b/client/src/components/email-documents/email-documents.component.jsx
@@ -10,6 +10,8 @@ import AlertComponent from "../alert/alert.component";
import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
import JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
const mapStateToProps = createStructuredSelector({
//currentUser: selectCurrentUser
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(EmailDocumentsCompon
export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState, bodyshop }) {
const { t } = useTranslation();
+ const {
+ treatments: { Imgproxy }
+ } = useSplitTreatments({
+ attributes: {},
+ names: ["Imgproxy"],
+ splitKey: bodyshop && bodyshop.imexshopid
+ });
const [selectedMedia, setSelectedMedia] = selectedMediaState;
const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
@@ -46,17 +55,37 @@ export function EmailDocumentsComponent({ emailConfig, form, selectedMediaState,
10485760 - new Blob([form.getFieldValue("html")]).size ? (
{t("general.errors.sizelimit")}
) : null}
- {!bodyshop.uselocalmediaserver && data && (
-
{
+ logImEXEvent("production_toggle_alert");
+ updateJob({
+ variables: {
+ jobId: data.jobs_by_pk.id,
+ job: {
+ suspended: !data.jobs_by_pk.suspended
+ }
+ }
+ });
+ insertAuditTrail({
+ jobid: data.jobs_by_pk.id,
+ operation: AuditTrailMapping.jobsuspend(
+ data.jobs_by_pk.suspended ? !data.jobs_by_pk.suspended : true
+ ),
+ type: "jobsuspend"
+ });
+ }}
+ icon={data.jobs_by_pk.suspended ?
{
setPrintCenterContext({
@@ -103,8 +136,8 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
}
});
}}
+ icon={
)}
- {
+ if (checked) {
+ form.setFieldsValue({ flat_rate_ats: false });
+ form.setFieldsValue({ rate_ats: form.getFieldValue('rate_ats') || bodyshop.shoprates.rate_ats });
+ }
+ }}
+ />
-
prev.auto_add_ats !== cur.auto_add_ats}>
{() => {
if (form.getFieldValue("auto_add_ats"))
return (
-
+
+
+ );
+
+ return null;
+ }}
+
+
+ {
+ if (checked) {
+ form.setFieldsValue({ auto_add_ats: false });
+ form.setFieldsValue({ rate_ats_flat: form.getFieldValue('rate_ats_flat') || bodyshop.shoprates.rate_ats_flat });
+
+ }
+ }}
+ />
+
+ prev.flat_rate_ats !== cur.flat_rate_ats}>
+ {() => {
+ if (form.getFieldValue("flat_rate_ats"))
+ return (
+
);
diff --git a/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx b/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx
index f85db7c8c..cbc89ab38 100644
--- a/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx
@@ -19,7 +19,13 @@ const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsDownloadButton);
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
export function JobsDocumentsDownloadButton({ bodyshop, galleryImages, identifier }) {
const { t } = useTranslation();
const [download, setDownload] = useState(null);
diff --git a/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx b/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx
index 33f2e964a..51c889729 100644
--- a/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx
@@ -17,7 +17,13 @@ const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsGalleryReassign);
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
export function JobsDocumentsGalleryReassign({ bodyshop, galleryImages, callback }) {
const { t } = useTranslation();
const [form] = Form.useForm();
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index 0dcc18855..58adaccad 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -1,29 +1,34 @@
import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
import { Button, Card, Col, Row, Space } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import { Gallery } from "react-grid-gallery";
import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
import DocumentsUploadComponent from "../documents-upload/documents-upload.component";
import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
import JobsDocumentsDownloadButton from "./jobs-document-gallery.download.component";
import JobsDocumentsGalleryReassign from "./jobs-document-gallery.reassign.component";
import JobsDocumentsDeleteButton from "./jobs-documents-gallery.delete.component";
import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-gallery.selectall.component";
-import Lightbox from "react-image-lightbox";
-import "react-image-lightbox/style.css";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({});
-
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
function JobsDocumentsComponent({
bodyshop,
data,
@@ -114,6 +119,7 @@ function JobsDocumentsComponent({
);
setgalleryImages(documents);
}, [data, setgalleryImages, t]);
+
const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
return (
@@ -137,7 +143,6 @@ function JobsDocumentsComponent({
)}
-
({});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsContainer);
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Imgproxy code. This code will be removed once the imgproxy migration is completed.
+################################################################################################
+*/
+export function JobsDocumentsContainer({
+ jobId,
+ billId,
+ documentsList,
+ billsCallback,
+ refetchOverride,
+ ignoreSizeLimit,
+ bodyshop
+}) {
+ const {
+ treatments: { Imgproxy }
+ } = useSplitTreatments({
+ attributes: {},
+ names: ["Imgproxy"],
+ splitKey: bodyshop && bodyshop.imexshopid
+ });
-export default function JobsDocumentsContainer({ jobId, billId, documentsList, billsCallback }) {
const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
variables: { jobId: jobId },
fetchPolicy: "network-only",
nextFetchPolicy: "network-only",
- skip: !!billId
+ skip: Imgproxy.treatment === "on" || !!billId
});
if (loading) return
+
+ {t("documents.actions.download")}
+ {download && {`(${formatBytes(download.downloaded)} @ ${formatBytes(download.speed)} / second)`} }
+
+
+
+ );
+}
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx
new file mode 100644
index 000000000..2fcd55a9f
--- /dev/null
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-document-imgproxy-gallery.reassign.component.jsx
@@ -0,0 +1,134 @@
+import { useApolloClient } from "@apollo/client";
+import { Button, Form, Popover, Space } from "antd";
+import axios from "axios";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries.js";
+import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import JobSearchSelect from "../job-search-select/job-search-select.component.jsx";
+import { isFunction } from "lodash";
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+ //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyGalleryReassign);
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+export function JobsDocumentsImgproxyGalleryReassign({ bodyshop, galleryImages, callback }) {
+ const { t } = useTranslation();
+ const [form] = Form.useForm();
+ const notification = useNotification();
+
+ const selectedImages = useMemo(() => {
+ return [
+ ...galleryImages.images.filter((image) => image.isSelected),
+ ...galleryImages.other.filter((image) => image.isSelected)
+ ];
+ }, [galleryImages]);
+ const client = useApolloClient();
+ const [open, setOpen] = useState(false);
+ const [loading, setLoading] = useState(false);
+
+ const handleFinish = async ({ jobid }) => {
+ setLoading(true);
+
+ //Check to see if the space remaining on the new job is sufficient. If it isn't cancel this.
+ const newJobData = await client.query({
+ query: GET_DOC_SIZE_BY_JOB,
+ variables: { jobId: jobid }
+ });
+
+ const transferedDocSizeTotal = selectedImages.reduce((acc, val) => acc + val.size, 0);
+
+ const shouldPreventTransfer =
+ bodyshop.jobsizelimit - newJobData.data.documents_aggregate.aggregate.sum.size < transferedDocSizeTotal;
+
+ if (shouldPreventTransfer) {
+ notification.error({
+ key: "cannotuploaddocuments",
+ message: t("documents.labels.reassign_limitexceeded_title"),
+ description: t("documents.labels.reassign_limitexceeded")
+ });
+ setLoading(false);
+ return;
+ }
+
+ const res = await axios.post("/media/imgproxy/rename", {
+ tojobid: jobid,
+ documents: selectedImages.map((i) => {
+ //Need to check if the current key folder is null, or another job.
+ const currentKeys = i.key.split("/");
+ currentKeys[1] = jobid;
+ currentKeys.join("/");
+ return {
+ id: i.id,
+ from: i.key,
+ to: currentKeys.join("/"),
+ extension: i.extension,
+ type: i.type
+ };
+ })
+ });
+ //Add in confirmation & errors.
+ if (isFunction(callback)) callback();
+
+ if (res.errors) {
+ notification.error({
+ message: t("documents.errors.updating", {
+ message: JSON.stringify(res.errors)
+ })
+ });
+ }
+ if (!res.mutationResult?.errors) {
+ notification.success({
+ message: t("documents.successes.updated")
+ });
+ }
+ setOpen(false);
+ setLoading(false);
+ };
+
+ const popContent = (
+
+
+
+ form.submit()}>
+ {t("general.actions.submit")}
+
+ setOpen(false)}>{t("general.actions.cancel")}
+
+
+ );
+
+ return (
+
+ setOpen(true)} loading={loading}>
+ {t("documents.actions.reassign")}
+
+
+ );
+}
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
new file mode 100644
index 000000000..a07ed0bf1
--- /dev/null
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.component.jsx
@@ -0,0 +1,266 @@
+import { EditFilled, FileExcelFilled, SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Col, Row, Space } from "antd";
+import axios from "axios";
+import i18n from "i18next";
+import { isFunction } from "lodash";
+import { useCallback, useEffect, useState } from "react";
+import { Gallery } from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import DocumentsUploadImgproxyComponent from "../documents-upload-imgproxy/documents-upload-imgproxy.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import JobsDocumentsDownloadButton from "./jobs-document-imgproxy-gallery.download.component";
+import JobsDocumentsGalleryReassign from "./jobs-document-imgproxy-gallery.reassign.component";
+import JobsDocumentsDeleteButton from "./jobs-documents-imgproxy-gallery.delete.component";
+import JobsDocumentsGallerySelectAllComponent from "./jobs-documents-imgproxy-gallery.selectall.component";
+
+const mapStateToProps = createStructuredSelector({
+ bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({});
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+function JobsDocumentsImgproxyComponent({
+ bodyshop,
+ data,
+ jobId,
+ refetch,
+ billId,
+ billsCallback,
+ totalSize,
+ downloadIdentifier,
+ ignoreSizeLimit
+}) {
+ const [galleryImages, setGalleryImages] = useState({ images: [], other: [] });
+ const { t } = useTranslation();
+ const [modalState, setModalState] = useState({ open: false, index: 0 });
+
+ const fetchThumbnails = useCallback(() => {
+ fetchImgproxyThumbnails({ setStateCallback: setGalleryImages, jobId });
+ }, [jobId, setGalleryImages]);
+
+ useEffect(() => {
+ if (data) {
+ fetchThumbnails();
+ }
+ }, [data, fetchThumbnails]);
+
+ const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });
+ const hasMobileAccess = HasFeatureAccess({ bodyshop, featureName: "mobile" });
+ return (
+
+
+
+ {
+ //Handle any doc refresh.
+
+ isFunction(refetch) && refetch();
+
+ //Do the imgproxy refresh too
+ fetchThumbnails();
+ }}
+ >
+
+
+
+ {!hasMediaAccess && (
+
+
+
+ )}
+
+
+
+ {hasMediaAccess && !hasMobileAccess && (
+
+
+
+ )}
+
+ {
+ setModalState({ open: true, index: index });
+ // window.open(
+ // item.fullsize,
+ // "_blank",
+ // "toolbar=0,location=0,menubar=0"
+ // );
+ }}
+ onSelect={(index, image) => {
+ setGalleryImages({
+ ...galleryImages,
+ images: galleryImages.images.map((g, idx) =>
+ index === idx ? { ...g, isSelected: !g.isSelected } : g
+ )
+ });
+ }}
+ />
+
+
+
+ {
+ return {
+ backgroundImage:
+
+ {modalState.open && (
+ {
+ const newWindow = window.open(
+ `${window.location.protocol}//${window.location.host}/edit?documentId=${
+ galleryImages.images[modalState.index].id
+ }`,
+ "_blank",
+ "noopener,noreferrer"
+ );
+ if (newWindow) newWindow.opener = null;
+ }}
+ />
+ ]}
+ mainSrc={galleryImages.images[modalState.index].fullsize}
+ nextSrc={galleryImages.images[(modalState.index + 1) % galleryImages.images.length].fullsize}
+ prevSrc={
+ galleryImages.images[(modalState.index + galleryImages.images.length - 1) % galleryImages.images.length]
+ .fullsize
+ }
+ onCloseRequest={() => setModalState({ open: false, index: 0 })}
+ onMovePrevRequest={() =>
+ setModalState({
+ ...modalState,
+ index: (modalState.index + galleryImages.images.length - 1) % galleryImages.images.length
+ })
+ }
+ onMoveNextRequest={() =>
+ setModalState({
+ ...modalState,
+ index: (modalState.index + 1) % galleryImages.images.length
+ })
+ }
+ />
+ )}
+
+
+ );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsImgproxyComponent);
+
+export const fetchImgproxyThumbnails = async ({ setStateCallback, jobId, imagesOnly }) => {
+ const result = await axios.post("/media/imgproxy/thumbnails", { jobid: jobId });
+ const documents = result.data.reduce(
+ (acc, value) => {
+ if (value.type.startsWith("image")) {
+ acc.images.push({
+ src: value.thumbnailUrl,
+ fullsize: value.originalUrl,
+ height: 225,
+ width: 225,
+ isSelected: false,
+ key: value.key,
+ extension: value.extension,
+ id: value.id,
+ type: value.type,
+ size: value.size,
+ tags: [{ value: value.type, title: value.type }]
+ });
+ } else {
+ const fileName = value.key.split("/").pop();
+ acc.other.push({
+ source: value.originalUrlViaProxyPath,
+ src: value.thumbnailUrl,
+ fullsize: value.presignedGetUrl,
+ tags: [
+ {
+ value: fileName,
+ title: fileName
+ },
+
+ { value: value.type, title: value.type },
+ ...(value.bill
+ ? [
+ {
+ value: value.bill.vendor.name,
+ title: i18n.t("vendors.fields.name")
+ },
+ { value: value.bill.date, title: i18n.t("bills.fields.date") },
+ {
+ value: value.bill.invoice_number,
+ title: i18n.t("bills.fields.invoice_number")
+ }
+ ]
+ : [])
+ ],
+ height: 225,
+ width: 225,
+ isSelected: false,
+ extension: value.extension,
+ key: value.key,
+ id: value.id,
+ type: value.type,
+ size: value.size
+ });
+ }
+ return acc;
+ },
+ { images: [], other: [] }
+ );
+
+ setStateCallback(imagesOnly ? documents.images : documents);
+};
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.container.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.container.jsx
new file mode 100644
index 000000000..9191b262c
--- /dev/null
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.container.jsx
@@ -0,0 +1,37 @@
+import { useQuery } from "@apollo/client";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobDocuments from "./jobs-documents-imgproxy-gallery.component";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyContainer({ jobId, billId, documentsList, billsCallback }) {
+ const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
+ variables: { jobId: jobId },
+ fetchPolicy: "network-only",
+ nextFetchPolicy: "network-only",
+ skip: !!billId
+ });
+
+ if (loading) return
+ {t("documents.actions.delete")}
+
+
+ );
+}
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx
new file mode 100644
index 000000000..a970b01b7
--- /dev/null
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component.jsx
@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { Gallery } from "react-grid-gallery";
+import { fetchImgproxyThumbnails } from "./jobs-documents-imgproxy-gallery.component";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+function JobsDocumentImgproxyGalleryExternal({ jobId, externalMediaState }) {
+ const [galleryImages, setgalleryImages] = externalMediaState;
+
+ useEffect(() => {
+ if (jobId) fetchImgproxyThumbnails({ setStateCallback: setgalleryImages, jobId, imagesOnly: true });
+ }, [jobId, setgalleryImages]);
+
+ return (
+
+ {
+ setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
+ }}
+ />
+
+ );
+}
+
+export default JobsDocumentImgproxyGalleryExternal;
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.selectall.component.jsx b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.selectall.component.jsx
new file mode 100644
index 000000000..4d4b0b32e
--- /dev/null
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.selectall.component.jsx
@@ -0,0 +1,63 @@
+import { Button, Space } from "antd";
+import { useTranslation } from "react-i18next";
+
+/*
+################################################################################################
+ Developer Note:
+ Known Technical Debt Item
+ Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
+################################################################################################
+*/
+
+export default function JobsDocumentsImgproxyGallerySelectAllComponent({ galleryImages, setGalleryImages }) {
+ const { t } = useTranslation();
+
+ const handleSelectAll = () => {
+ setGalleryImages({
+ ...galleryImages,
+ other: galleryImages.other.map((i) => {
+ return { ...i, isSelected: true };
+ }),
+ images: galleryImages.images.map((i) => {
+ return { ...i, isSelected: true };
+ })
+ });
+ };
+ const handleSelectAllImages = () => {
+ setGalleryImages({
+ ...galleryImages,
+
+ images: galleryImages.images.map((i) => {
+ return { ...i, isSelected: true };
+ })
+ });
+ };
+ const handleSelectAllDocuments = () => {
+ setGalleryImages({
+ ...galleryImages,
+ other: galleryImages.other.map((i) => {
+ return { ...i, isSelected: true };
+ })
+ });
+ };
+ const handleDeselectAll = () => {
+ setGalleryImages({
+ ...galleryImages,
+ other: galleryImages.other.map((i) => {
+ return { ...i, isSelected: false };
+ }),
+ images: galleryImages.images.map((i) => {
+ return { ...i, isSelected: false };
+ })
+ });
+ };
+
+ return (
+
+ {t("general.actions.selectall")}
+ {t("documents.actions.selectallimages")}
+ {t("documents.actions.selectallotherdocuments")}
+ {t("general.actions.deselectall")}
+
+ );
+}
diff --git a/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.styles.scss b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.styles.scss
new file mode 100644
index 000000000..6df357ffc
--- /dev/null
+++ b/client/src/components/jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.styles.scss
@@ -0,0 +1,10 @@
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+ font-size: 32px;
+ color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+ margin-top: 8px;
+ color: #666;
+}
diff --git a/client/src/components/parts-order-modal/parts-order-modal.component.jsx b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
index 4fc3a5789..c3ade9187 100644
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
@@ -1,16 +1,17 @@
import { DeleteFilled, DownOutlined, WarningFilled } from "@ant-design/icons";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Checkbox, Divider, Dropdown, Form, Input, InputNumber, Radio, Select, Space, Tag } from "antd";
+import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import PartsOrderModalPriceChange from "./parts-order-modal-price-change.component";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop
@@ -32,7 +33,7 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
});
const { t } = useTranslation();
- const handleClick = ({ item }) => {
+ const handleClick = ({ item, key, keyPath }) => {
form.setFieldsValue({ comments: item.props.value });
};
@@ -97,18 +98,17 @@ export function PartsOrderModalComponent({ bodyshop, vendorList, sendTypeState,
)}
- {!isReturn && (
-
-
- {t("parts_orders.labels.parts_order")}
- {t("parts_orders.labels.sublet_order")}
-
-
- )}
+
+
+
+ {t("parts_orders.labels.parts_order")}
+ {t("parts_orders.labels.sublet_order")}
+
+
{t("parts_orders.labels.inthisorder")}
- {(fields, { remove, move }) => {
+ {(fields, { add, remove, move }) => {
return (
{fields.map((field, index) => (
diff --git a/client/src/components/production-list-detail/production-list-detail.component.jsx b/client/src/components/production-list-detail/production-list-detail.component.jsx
index ea2d6ef67..7db55bd07 100644
--- a/client/src/components/production-list-detail/production-list-detail.component.jsx
+++ b/client/src/components/production-list-detail/production-list-detail.component.jsx
@@ -1,17 +1,20 @@
-import { PrinterFilled } from "@ant-design/icons";
-import { useQuery } from "@apollo/client";
-import { Button, Descriptions, Drawer, Space } from "antd";
+import { PauseCircleOutlined, PlayCircleOutlined, PrinterFilled } from "@ant-design/icons";
import { PageHeader } from "@ant-design/pro-layout";
+import { useMutation, useQuery } from "@apollo/client";
+import { Button, Descriptions, Drawer, Space } from "antd";
import queryString from "query-string";
-import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { createStructuredSelector } from "reselect";
-import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
+import { logImEXEvent } from "../../firebase/firebase.utils.js";
+import { QUERY_JOB_CARD_DETAILS, UPDATE_JOB } from "../../graphql/jobs.queries";
+import { insertAuditTrail } from "../../redux/application/application.actions.js";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
+import AuditTrailMapping from "../../utils/AuditTrailMappings.js";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { DateFormatter } from "../../utils/DateFormatter";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
@@ -24,22 +27,29 @@ import JobDetailCardsPartsComponent from "../job-detail-cards/job-detail-cards.p
import CardTemplate from "../job-detail-cards/job-detail-cards.template.component";
import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add-button.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
-import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
-import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
technician: selectTechnician
});
const mapDispatchToProps = (dispatch) => ({
- setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" }))
+ setPrintCenterContext: (context) => dispatch(setModalContext({ context: context, modal: "printCenter" })),
+ insertAuditTrail: ({ jobid, operation, type }) =>
+ dispatch(
+ insertAuditTrail({
+ jobid,
+ operation,
+ type
+ })
+ )
});
export default connect(mapStateToProps, mapDispatchToProps)(ProductionListDetail);
-export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, technician }) {
+export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, technician, insertAuditTrail }) {
const search = queryString.parse(useLocation().search);
const history = useNavigate();
const { selected } = search;
@@ -58,6 +68,7 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
fetchPolicy: "network-only",
nextFetchPolicy: "network-only"
});
+ const [updateJob] = useMutation(UPDATE_JOB);
return (
{!technician ? {
+ logImEXEvent("production_toggle_alert");
+ updateJob({
+ variables: {
+ jobId: theJob.id,
+ job: {
+ suspended: !theJob.suspended
+ }
+ }
+ });
+ insertAuditTrail({
+ jobid: theJob.id,
+ operation: AuditTrailMapping.jobsuspend(theJob.suspended ? !theJob.suspended : true),
+ type: "jobsuspend"
+ });
+ }}
+ icon={theJob.suspended ?
+ )}
{
setPrintCenterContext({
@@ -83,8 +117,8 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
}
});
}}
+ icon={
{!technician ?
-
- {(fields, { add, remove, move }) => {
- return (
-
+ ///< base 64 URL encoded to image path>
+
+ //When working with documents from Cloudinary, the URL does not include the extension.
+ let key;
+ if (/\.[^/.]+$/.test(document.key)) {
+ key = document.key;
+ } else {
+ key = `${document.key}.${document.extension.toLowerCase()}`;
+ }
+ // Build the S3 path to the object.
+ const fullS3Path = `s3://${imgproxyDestinationBucket}/${key}`;
+ const base64UrlEncodedKeyString = base64UrlEncode(fullS3Path);
+ //Thumbnail Generation Block
+ const thumbProxyPath = `${thumbResizeParams}/${base64UrlEncodedKeyString}`;
+ const thumbHmacSalt = createHmacSha256(`${imgproxySalt}/${thumbProxyPath}`);
+
+ //Full Size URL block
+
+ const fullSizeProxyPath = `${base64UrlEncodedKeyString}`;
+ const fullSizeHmacSalt = createHmacSha256(`${imgproxySalt}/${fullSizeProxyPath}`);
+
+ const s3Props = {};
+ if (!document.type.startsWith("image")) {
+ //If not a picture, we need to get a signed download link to the file using S3 (or cloudfront preferably)
+ const command = new GetObjectCommand({
+ Bucket: imgproxyDestinationBucket,
+ Key: key
+ });
+ const presignedGetUrl = await getSignedUrl(s3client, command, { expiresIn: 360 });
+ s3Props.presignedGetUrl = presignedGetUrl;
+
+ const originalProxyPath = `raw:1/${base64UrlEncodedKeyString}`;
+ const originalHmacSalt = createHmacSha256(`${imgproxySalt}/${originalProxyPath}`);
+ s3Props.originalUrlViaProxyPath = `${imgproxyBaseUrl}/${originalHmacSalt}/${originalProxyPath}`;
+ }
+
+ proxiedUrls.push({
+ originalUrl: `${imgproxyBaseUrl}/${fullSizeHmacSalt}/${fullSizeProxyPath}`,
+ thumbnailUrl: `${imgproxyBaseUrl}/${thumbHmacSalt}/${thumbProxyPath}`,
+ fullS3Path,
+ base64UrlEncodedKeyString,
+ thumbProxyPath,
+ ...s3Props,
+ ...document
+ });
+ }
+
+ res.json(proxiedUrls);
+ //Iterate over them, build the link based on the media type, and return the array.
+ } catch (error) {
+ logger.log("imgproxy-thumbnails-error", "ERROR", req.user?.email, jobid, {
+ jobid,
+ billid,
+ message: error.message,
+ stack: error.stack
+ });
+ res.status(400).json({ message: error.message, stack: error.stack });
+ }
+};
+
+exports.getBillFiles = async (req, res) => {
+ //Givena bill ID, get the documents associated to it.
+};
+
+exports.downloadFiles = async (req, res) => {
+ //Given a series of document IDs or keys, generate a file (or a link) to download all images in bulk
+ const { jobid, billid, documentids } = req.body;
+ try {
+ logger.log("imgproxy-download", "DEBUG", req.user?.email, jobid, { billid, jobid, documentids });
+
+ //Delayed as the key structure may change slightly from what it is currently and will require evaluating mobile components.
+ const client = req.userGraphQLClient;
+ //Query for the keys of the document IDs
+ const data = await client.request(GET_DOCUMENTS_BY_IDS, { documentIds: documentids });
+ //Using the Keys, get all of the S3 links, zip them, and send back to the client.
+ const s3client = new S3Client({ region: InstanceRegion() });
+ const archiveStream = archiver("zip");
+ archiveStream.on("error", (error) => {
+ console.error("Archival encountered an error:", error);
+ throw new Error(error);
+ });
+ const passthrough = new stream.PassThrough();
+
+ archiveStream.pipe(passthrough);
+ for (const key of data.documents.map((d) => d.key)) {
+ const response = await s3client.send(new GetObjectCommand({ Bucket: imgproxyDestinationBucket, Key: key }));
+ // :: `response.Body` is a Buffer
+ console.log(path.basename(key));
+ archiveStream.append(response.Body, { name: path.basename(key) });
+ }
+
+ archiveStream.finalize();
+
+ const archiveKey = `archives/${jobid}/archive-${new Date().toISOString()}.zip`;
+
+ const parallelUploads3 = new Upload({
+ client: s3client,
+ queueSize: 4, // optional concurrency configuration
+ leavePartsOnError: false, // optional manually handle dropped parts
+ params: { Bucket: imgproxyDestinationBucket, Key: archiveKey, Body: passthrough }
+ });
+
+ parallelUploads3.on("httpUploadProgress", (progress) => {
+ console.log(progress);
+ });
+
+ const uploadResult = await parallelUploads3.done();
+ //Generate the presigned URL to download it.
+ const presignedUrl = await getSignedUrl(
+ s3client,
+ new GetObjectCommand({ Bucket: imgproxyDestinationBucket, Key: archiveKey }),
+ { expiresIn: 360 }
+ );
+
+ res.json({ success: true, url: presignedUrl });
+ //Iterate over them, build the link based on the media type, and return the array.
+ } catch (error) {
+ logger.log("imgproxy-thumbnails-error", "ERROR", req.user?.email, jobid, {
+ jobid,
+ billid,
+ message: error.message,
+ stack: error.stack
+ });
+ res.status(400).json({ message: error.message, stack: error.stack });
+ }
+};
+
+exports.deleteFiles = async (req, res) => {
+ //Mark a file for deletion in s3. Lifecycle deletion will actually delete the copy in the future.
+ //Mark as deleted from the documents section of the database.
+ const { ids } = req.body;
+ try {
+ logger.log("imgproxy-delete-files", "DEBUG", req.user.email, null, { ids });
+ const client = req.userGraphQLClient;
+
+ //Do this to make sure that they are only deleting things that they have access to
+ const data = await client.request(GET_DOCUMENTS_BY_IDS, { documentIds: ids });
+
+ const s3client = new S3Client({ region: InstanceRegion() });
+
+ const deleteTransactions = [];
+ data.documents.forEach((document) => {
+ deleteTransactions.push(
+ (async () => {
+ try {
+ // Delete the original object
+ const deleteResult = await s3client.send(
+ new DeleteObjectCommand({
+ Bucket: imgproxyDestinationBucket,
+ Key: document.key
+ })
+ );
+
+ return document;
+ } catch (error) {
+ return { document, error: error, bucket: imgproxyDestinationBucket };
+ }
+ })()
+ );
+ });
+
+ const result = await Promise.all(deleteTransactions);
+ const errors = result.filter((d) => d.error);
+
+ //Delete only the succesful deletes.
+ const deleteMutationResult = await client.request(DELETE_MEDIA_DOCUMENTS, {
+ ids: result.filter((t) => !t.error).map((d) => d.id)
+ });
+
+ res.json({ errors, deleteMutationResult });
+ } catch (error) {
+ logger.log("imgproxy-delete-files-error", "ERROR", req.user.email, null, {
+ ids,
+ message: error.message,
+ stack: error.stack
+ });
+ res.status(400).json({ message: error.message, stack: error.stack });
+ }
+};
+
+exports.moveFiles = async (req, res) => {
+ const { documents, tojobid } = req.body;
+ try {
+ logger.log("imgproxy-move-files", "DEBUG", req.user.email, null, { documents, tojobid });
+ const s3client = new S3Client({ region: InstanceRegion() });
+
+ const moveTransactions = [];
+ documents.forEach((document) => {
+ moveTransactions.push(
+ (async () => {
+ try {
+ // Copy the object to the new key
+ const copyresult = await s3client.send(
+ new CopyObjectCommand({
+ Bucket: imgproxyDestinationBucket,
+ CopySource: `${imgproxyDestinationBucket}/${document.from}`,
+ Key: document.to,
+ StorageClass: "INTELLIGENT_TIERING"
+ })
+ );
+
+ // Delete the original object
+ const deleteResult = await s3client.send(
+ new DeleteObjectCommand({
+ Bucket: imgproxyDestinationBucket,
+ Key: document.from
+ })
+ );
+
+ return document;
+ } catch (error) {
+ return { id: document.id, from: document.from, error: error, bucket: imgproxyDestinationBucket };
+ }
+ })()
+ );
+ });
+
+ const result = await Promise.all(moveTransactions);
+ const errors = result.filter((d) => d.error);
+
+ let mutations = "";
+ result
+ .filter((d) => !d.error)
+ .forEach((d, idx) => {
+ //Create mutation text
+ mutations =
+ mutations +
+ `
+ update_doc${idx}:update_documents_by_pk(pk_columns: { id: "${d.id}" }, _set: {key: "${d.to}", jobid: "${tojobid}"}){
+ id
+ }
+ `;
+ });
+
+ const client = req.userGraphQLClient;
+ if (mutations !== "") {
+ const mutationResult = await client.request(`mutation {
+ ${mutations}
+ }`);
+ res.json({ errors, mutationResult });
+ } else {
+ res.json({ errors: "No images were succesfully moved on remote server. " });
+ }
+ } catch (error) {
+ logger.log("imgproxy-move-files-error", "ERROR", req.user.email, null, {
+ documents,
+ tojobid,
+ message: error.message,
+ stack: error.stack
+ });
+ res.status(400).json({ message: error.message, stack: error.stack });
+ }
+};
+
+function base64UrlEncode(str) {
+ return Buffer.from(str).toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function createHmacSha256(data) {
+ return crypto.createHmac("sha256", imgproxyKey).update(data).digest("base64url");
+}
diff --git a/server/media/media.js b/server/media/media.js
index 6706d3392..06b1c9bb8 100644
--- a/server/media/media.js
+++ b/server/media/media.js
@@ -11,12 +11,14 @@ require("dotenv").config({
var cloudinary = require("cloudinary").v2;
cloudinary.config(process.env.CLOUDINARY_URL);
-exports.createSignedUploadURL = (req, res) => {
+const createSignedUploadURL = (req, res) => {
logger.log("media-signed-upload", "DEBUG", req.user.email, null, null);
res.send(cloudinary.utils.api_sign_request(req.body, process.env.CLOUDINARY_API_SECRET));
};
-exports.downloadFiles = (req, res) => {
+exports.createSignedUploadURL = createSignedUploadURL;
+
+const downloadFiles = (req, res) => {
const { ids } = req.body;
logger.log("media-bulk-download", "DEBUG", req.user.email, ids, null);
@@ -26,8 +28,9 @@ exports.downloadFiles = (req, res) => {
});
res.send(url);
};
+exports.downloadFiles = downloadFiles;
-exports.deleteFiles = async (req, res) => {
+const deleteFiles = async (req, res) => {
const { ids } = req.body;
const types = _.groupBy(ids, (x) => DetermineFileType(x.type));
@@ -88,7 +91,9 @@ exports.deleteFiles = async (req, res) => {
}
};
-exports.renameKeys = async (req, res) => {
+exports.deleteFiles = deleteFiles;
+
+const renameKeys = async (req, res) => {
const { documents, tojobid } = req.body;
logger.log("media-bulk-rename", "DEBUG", req.user.email, null, documents);
@@ -146,6 +151,7 @@ exports.renameKeys = async (req, res) => {
res.json({ errors: "No images were succesfully moved on remote server. " });
}
};
+exports.renameKeys = renameKeys;
//Also needs to be updated in upload utility and mobile app.
function DetermineFileType(filetype) {
diff --git a/server/opensearch/os-handler.js b/server/opensearch/os-handler.js
index 9fd500a46..48310c4f2 100644
--- a/server/opensearch/os-handler.js
+++ b/server/opensearch/os-handler.js
@@ -160,6 +160,11 @@ async function OpenSearchUpdateHandler(req, res) {
res.status(200).json(response.body);
}
} catch (error) {
+ // We don't want this spam message existing in development/test,
+ if (process.env?.NODE_ENV !== "production" && error?.message === "Invalid URL") {
+ return res.status(400).json(JSON.stringify(error));
+ }
+
logger.log("os-handler-error", "ERROR", null, null, {
id: req.body.event.data.new.id,
index: req.body.table.name,
@@ -167,6 +172,7 @@ async function OpenSearchUpdateHandler(req, res) {
stack: error.stack
// body: document
});
+
res.status(400).json(JSON.stringify(error));
}
}
diff --git a/server/routes/mediaRoutes.js b/server/routes/mediaRoutes.js
index 699579bb9..59ee836ec 100644
--- a/server/routes/mediaRoutes.js
+++ b/server/routes/mediaRoutes.js
@@ -1,13 +1,28 @@
const express = require("express");
const router = express.Router();
const { createSignedUploadURL, downloadFiles, renameKeys, deleteFiles } = require("../media/media");
+const {
+ generateSignedUploadUrls: createSignedUploadURLImgproxy,
+ getThumbnailUrls: getThumbnailUrlsImgproxy,
+ downloadFiles: downloadFilesImgproxy,
+ moveFiles: moveFilesImgproxy,
+ deleteFiles: deleteFilesImgproxy
+} = require("../media/imgproxy-media");
const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
+const withUserGraphQLClientMiddleware = require("../middleware/withUserGraphQLClientMiddleware");
router.use(validateFirebaseIdTokenMiddleware);
+router.use(withUserGraphQLClientMiddleware);
router.post("/sign", createSignedUploadURL);
router.post("/download", downloadFiles);
router.post("/rename", renameKeys);
router.post("/delete", deleteFiles);
+router.post("/imgproxy/sign", createSignedUploadURLImgproxy);
+router.post("/imgproxy/thumbnails", getThumbnailUrlsImgproxy);
+router.post("/imgproxy/download", downloadFilesImgproxy);
+router.post("/imgproxy/rename", moveFilesImgproxy);
+router.post("/imgproxy/delete", deleteFilesImgproxy);
+
module.exports = router;
diff --git a/server/routes/miscellaneousRoutes.js b/server/routes/miscellaneousRoutes.js
index a3f3ca281..aeb59af93 100644
--- a/server/routes/miscellaneousRoutes.js
+++ b/server/routes/miscellaneousRoutes.js
@@ -14,7 +14,7 @@ const { taskAssignedEmail, tasksRemindEmail } = require("../email/tasksEmails");
const { canvastest } = require("../render/canvas-handler");
const { alertCheck } = require("../alerts/alertcheck");
const updateBodyshopCache = require("../web-sockets/updateBodyshopCache");
-const uuid = require("uuid").v4;
+const { v4 } = require("uuid");
//Test route to ensure Express is responding.
router.get("/test", eventAuthorizationMiddleware, async function (req, res) {
@@ -83,7 +83,7 @@ router.get("/wstest", eventAuthorizationMiddleware, (req, res) => {
// image_path: [],
newMessage: {
conversation: {
- id: uuid(),
+ id: v4(),
archived: false,
bodyshop: {
id: "bfec8c8c-b7f1-49e0-be4c-524455f4e582",
diff --git a/server/routes/smsRoutes.js b/server/routes/smsRoutes.js
index bb23d24e8..1b169747d 100644
--- a/server/routes/smsRoutes.js
+++ b/server/routes/smsRoutes.js
@@ -7,6 +7,7 @@ const { status, markConversationRead } = require("../sms/status");
const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
// Twilio Webhook Middleware for production
+// TODO: Look into this because it technically is never validating anything
const twilioWebhookMiddleware = twilio.webhook({ validate: process.env.NODE_ENV === "PRODUCTION" });
router.post("/receive", twilioWebhookMiddleware, receive);