Uploads and viewing from bills.

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -1,22 +1,35 @@
-import React, { useEffect } from "react";
 import { SyncOutlined } from "@ant-design/icons";
+import { Button, Card, Space } from "antd";
+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 { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  getBillMedia,
+  getJobMedia,
+  toggleMediaSelected,
+} from "../../redux/media/media.actions";
 import { selectAllMedia } from "../../redux/media/media.selectors";
-import { getJobMedia } from "../../redux/media/media.actions";
-import { Button, Card, Space } from "antd";
-import { useTranslation } from "react-i18next";
-import Gallery from "react-grid-gallery";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
-import { Link } from "react-router-dom";
+import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   allMedia: selectAllMedia,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   getJobMedia: (id) => dispatch(getJobMedia(id)),
+  getBillMedia: ({ jobid, invoice_number }) => {
+    console.log(jobid);
+    dispatch(getBillMedia({ jobid, invoice_number }));
+  },
+  toggleMediaSelected: ({ jobid, filename }) =>
+    dispatch(toggleMediaSelected({ jobid, filename })),
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -24,23 +37,39 @@ export default connect(
 
 export function JobsDocumentsLocalGallery({
   bodyshop,
+  toggleMediaSelected,
   getJobMedia,
+  getBillMedia,
   allMedia,
   job,
+  invoice_number,
+  vendorid,
 }) {
   const { t } = useTranslation();
   useEffect(() => {
     if (job) {
-      getJobMedia(job.id);
+      if (invoice_number) {
+        getBillMedia({ jobid: job.id, invoice_number });
+      } else {
+        getJobMedia(job.id);
+      }
     }
-  }, [job, getJobMedia]);
+  }, [job, invoice_number, getJobMedia, getBillMedia]);
 
   return (
     <div>
       <Space wrap>
+        {JSON.stringify({ jobid: job.id, invoice_number, vendorid }, null, 4) ||
+          "NO JOB ID"}
         <Button
           onClick={() => {
-            getJobMedia(job.id);
+            if (job) {
+              if (invoice_number) {
+                getBillMedia({ jobid: job.id, invoice_number });
+              } else {
+                getJobMedia(job.id);
+              }
+            }
           }}
         >
           <SyncOutlined />
@@ -50,15 +79,22 @@ export function JobsDocumentsLocalGallery({
         >
           <Button>{t("documents.labels.openinexplorer")}</Button>
         </a>
+        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
       </Space>
       <Card>
-        <DocumentsLocalUploadComponent job={job} />
+        <DocumentsLocalUploadComponent
+          job={job}
+          invoice_number={invoice_number}
+          vendorid={vendorid}
+        />
       </Card>
       <Card title={t("jobs.labels.documents-images")}>
         <Gallery
           images={(allMedia && allMedia[job.id]) || []}
-          enableImageSelection={false}
           backdropClosesModal={true}
+          onSelectImage={(index, image) => {
+            toggleMediaSelected({ jobid: job.id, filename: image.filename });
+          }}
           onClickImage={(props) => {
             window.open(
               props.target.src,