Base changes to job upload screen.

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

@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { SyncOutlined } from "@ant-design/icons";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+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 DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
+import { Link } from "react-router-dom";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  allMedia: selectAllMedia,
+});
+const mapDispatchToProps = (dispatch) => ({
+  getJobMedia: (id) => dispatch(getJobMedia(id)),
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsDocumentsLocalGallery);
+
+export function JobsDocumentsLocalGallery({
+  bodyshop,
+  getJobMedia,
+  allMedia,
+  job,
+}) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    if (job) {
+      getJobMedia(job.id);
+    }
+  }, [job, getJobMedia]);
+
+  return (
+    <div>
+      <Space wrap>
+        <Button
+          onClick={() => {
+            getJobMedia(job.id);
+          }}
+        >
+          <SyncOutlined />
+        </Button>
+        <a
+          href={`imexmedia://${bodyshop.localmediaservernetwork}/Jobs/${job.id}`}
+        >
+          <Button>{t("documents.labels.openinexplorer")}</Button>
+        </a>
+      </Space>
+      <Card>
+        <DocumentsLocalUploadComponent job={job} />
+      </Card>
+      <Card title={t("jobs.labels.documents-images")}>
+        <Gallery
+          images={(allMedia && allMedia[job.id]) || []}
+          enableImageSelection={false}
+          backdropClosesModal={true}
+          onClickImage={(props) => {
+            window.open(
+              props.target.src,
+              "_blank",
+              "toolbar=0,location=0,menubar=0"
+            );
+          }}
+        />
+      </Card>
+    </div>
+  );
+}