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,

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

@@ -0,0 +1,92 @@
+import { Button, Form, Popover, Space } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { getJobMedia } from "../../redux/media/media.actions";
+import { selectAllMedia } from "../../redux/media/media.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import cleanAxios from "../../utils/CleanAxios";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+
+const mapStateToProps = createStructuredSelector({
+  allMedia: selectAllMedia,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  getJobMedia: (id) => dispatch(getJobMedia(id)),
+
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsDocumentsLocalGalleryReassign);
+
+export function JobsDocumentsLocalGalleryReassign({
+  bodyshop,
+  jobid,
+  allMedia,
+  getJobMedia,
+}) {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleFinish = async ({ jobid: newJobid }) => {
+    setLoading(true);
+    const selectedDocuments = allMedia[jobid].filter((m) => m.isSelected);
+
+    await cleanAxios.post(`${bodyshop.localmediaserverhttp}/jobs/move`, {
+      from_jobid: jobid,
+      jobid: newJobid,
+      files: selectedDocuments.map((f) => f.filename),
+    });
+
+    getJobMedia(jobid);
+    setVisible(false);
+    setLoading(false);
+  };
+
+  const popContent = (
+    <div>
+      <Form onFinish={handleFinish} layout="vertical" form={form}>
+        <Form.Item
+          label={t("documents.labels.newjobid")}
+          style={{ width: "20rem" }}
+          rules={[
+            {
+              required: true,
+              //message: t("general.validation.required"),
+            },
+          ]}
+          name={"jobid"}
+        >
+          <JobSearchSelect />
+        </Form.Item>
+      </Form>
+      <Space>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("general.actions.submit")}
+        </Button>
+        <Button onClick={() => setVisible(false)}>
+          {t("general.actions.cancel")}
+        </Button>
+      </Space>
+    </div>
+  );
+
+  return (
+    <Popover content={popContent} visible={visible}>
+      <Button
+        //disabled={selectedImages.length < 1}
+        onClick={() => setVisible(true)}
+        loading={loading}
+      >
+        {t("documents.actions.reassign")}
+      </Button>
+    </Popover>
+  );
+}