From 62d5c17de2141ca0eaec65f7a1ce66de457e0314 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Thu, 18 Aug 2022 14:46:40 -0700
Subject: [PATCH] IO-2027 LMS Texting & Emails.

---
 .../chat-media-selector.component.jsx         | 14 +++-
 .../email-documents.component.jsx             | 12 ++-
 .../email-overlay/email-overlay.component.jsx | 15 ++--
 ...ments-local-gallery.external.component.jsx | 79 +++++++++++++++++++
 4 files changed, 108 insertions(+), 12 deletions(-)
 create mode 100644 client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx

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 35ea6fe1d..eea2824de 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
@@ -9,6 +9,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 JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -58,17 +59,24 @@ export function ChatMediaSelector({
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
-      {data && (
+      {!bodyshop.uselocalmediaserver && data && (
         <JobDocumentsGalleryExternal
           data={data ? data.documents : []}
           externalMediaState={[selectedMedia, setSelectedMedia]}
         />
       )}
+      {bodyshop.uselocalmediaserver && visible && (
+        <JobDocumentsLocalGalleryExternal
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+          jobId={
+            conversation.job_conversations[0] &&
+            conversation.job_conversations[0].jobid
+          }
+        />
+      )}
     </div>
   );
 
-  if (bodyshop.uselocalmediaserver) return null;
-
   return (
     <Popover
       content={
diff --git a/client/src/components/email-documents/email-documents.component.jsx b/client/src/components/email-documents/email-documents.component.jsx
index a47e78de9..f1171f98e 100644
--- a/client/src/components/email-documents/email-documents.component.jsx
+++ b/client/src/components/email-documents/email-documents.component.jsx
@@ -5,12 +5,15 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import { selectEmailConfig } from "../../redux/email/email.selectors";
+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 JobsDocumentsLocalGalleryExternalComponent from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
   emailConfig: selectEmailConfig,
 });
 const mapDispatchToProps = (dispatch) => ({
@@ -25,6 +28,7 @@ export function EmailDocumentsComponent({
   emailConfig,
   form,
   selectedMediaState,
+  bodyshop,
 }) {
   const { t } = useTranslation();
 
@@ -52,12 +56,18 @@ export function EmailDocumentsComponent({
         10485760 - new Blob([form.getFieldValue("html")]).size ? (
         <div style={{ color: "red" }}>{t("general.errors.sizelimit")}</div>
       ) : null}
-      {data && (
+      {!bodyshop.uselocalmediaserver && data && (
         <JobDocumentsGalleryExternal
           data={data ? data.documents : []}
           externalMediaState={[selectedMedia, setSelectedMedia]}
         />
       )}
+      {bodyshop.uselocalmediaserver && (
+        <JobsDocumentsLocalGalleryExternalComponent
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+          jobId={emailConfig.jobid}
+        />
+      )}
     </div>
   );
 }
diff --git a/client/src/components/email-overlay/email-overlay.component.jsx b/client/src/components/email-overlay/email-overlay.component.jsx
index 5fd70a838..7db03471d 100644
--- a/client/src/components/email-overlay/email-overlay.component.jsx
+++ b/client/src/components/email-overlay/email-overlay.component.jsx
@@ -160,14 +160,13 @@ export function EmailOverlayComponent({
       </Form.Item>
 
       <Tabs>
-        {!bodyshop.uselocalmediaserver && (
-          <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
-            <EmailDocumentsComponent
-              selectedMediaState={selectedMediaState}
-              form={form}
-            />
-          </Tabs.TabPane>
-        )}
+        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
+          <EmailDocumentsComponent
+            selectedMediaState={selectedMediaState}
+            form={form}
+          />
+        </Tabs.TabPane>
+
         <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
           {bodyshop.uselocalmediaserver && emailConfig.jobid && (
             <a href={CreateExplorerLinkForJob({ jobid: emailConfig.jobid })}>
diff --git a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
new file mode 100644
index 000000000..46625f419
--- /dev/null
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.external.component.jsx
@@ -0,0 +1,79 @@
+import React, { useEffect } from "react";
+import Gallery from "react-grid-gallery";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  getJobMedia,
+  toggleMediaSelected,
+} from "../../redux/media/media.actions";
+import { selectAllMedia } from "../../redux/media/media.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  allMedia: selectAllMedia,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getJobMedia: (id) => dispatch(getJobMedia(id)),
+
+  toggleMediaSelected: ({ jobid, filename }) =>
+    dispatch(toggleMediaSelected({ jobid, filename })),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobDocumentsLocalGalleryExternal);
+
+function JobDocumentsLocalGalleryExternal({
+  jobId,
+  externalMediaState,
+  getJobMedia,
+  toggleMediaSelected,
+  allMedia,
+}) {
+  const [galleryImages, setgalleryImages] = externalMediaState;
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if ( jobId) {
+      getJobMedia(jobId);
+    }
+  }, [jobId, getJobMedia]);
+
+  useEffect(() => {
+    let documents =
+      allMedia && allMedia[jobId]
+        ? allMedia[jobId].reduce((acc, val) => {
+            if (
+              val.type &&
+              val.type.mime &&
+              val.type.mime.startsWith("image")
+            ) {
+              acc.push(val);
+            }
+            return acc;
+          }, [])
+        : [];
+
+    setgalleryImages(documents);
+  }, [allMedia, jobId, setgalleryImages, t]);
+
+  return (
+    <div className="clearfix">
+      <Gallery
+        images={galleryImages}
+        backdropClosesModal={true}
+        onSelectImage={(index, image) => {
+          setgalleryImages(
+            galleryImages.map((g, idx) =>
+              index === idx ? { ...g, isSelected: !g.isSelected } : g
+            )
+          );
+        }}
+      />
+    </div>
+  );
+}