- the great reformat

Signed-off-by: Dave Richer <dave@imexsystems.ca>

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

@@ -1,18 +1,14 @@
-import { SyncOutlined, FileExcelFilled } from "@ant-design/icons";
-import { Alert, Button, Card, Space } from "antd";
-import React, { useEffect, useState } from "react";
-import { Gallery } from "react-grid-gallery";
-import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import {
-  getBillMedia,
-  getJobMedia,
-  toggleMediaSelected,
-} from "../../redux/media/media.actions";
-import { selectAllMedia } from "../../redux/media/media.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { CreateExplorerLinkForJob } from "../../utils/localmedia";
+import {FileExcelFilled, SyncOutlined} from "@ant-design/icons";
+import {Alert, Button, Card, Space} from "antd";
+import React, {useEffect, useState} from "react";
+import {Gallery} from "react-grid-gallery";
+import {useTranslation} from "react-i18next";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {getBillMedia, getJobMedia, toggleMediaSelected,} from "../../redux/media/media.actions";
+import {selectAllMedia} from "../../redux/media/media.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+import {CreateExplorerLinkForJob} from "../../utils/localmedia";
 import DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
 import JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delete.component";
 import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
@@ -23,194 +19,194 @@ import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  allMedia: selectAllMedia,
+    bodyshop: selectBodyshop,
+    allMedia: selectAllMedia,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  getJobMedia: (id) => dispatch(getJobMedia(id)),
-  getBillMedia: ({ jobid, invoice_number }) => {
-    dispatch(getBillMedia({ jobid, invoice_number }));
-  },
-  toggleMediaSelected: ({ jobid, filename }) =>
-    dispatch(toggleMediaSelected({ jobid, filename })),
+    getJobMedia: (id) => dispatch(getJobMedia(id)),
+    getBillMedia: ({jobid, invoice_number}) => {
+        dispatch(getBillMedia({jobid, invoice_number}));
+    },
+    toggleMediaSelected: ({jobid, filename}) =>
+        dispatch(toggleMediaSelected({jobid, filename})),
 });
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobsDocumentsLocalGallery);
 
 export function JobsDocumentsLocalGallery({
-  bodyshop,
-  toggleMediaSelected,
-  getJobMedia,
-  getBillMedia,
-  allMedia,
-  job,
-  invoice_number,
-  vendorid,
-}) {
-  const { t } = useTranslation();
-  const [modalState, setModalState] = useState({ open: false, index: 0 });
-  useEffect(() => {
-    if (job) {
-      if (invoice_number) {
-        getBillMedia({ jobid: job.id, invoice_number });
-      } else {
-        getJobMedia(job.id);
-      }
-    }
-  }, [job, invoice_number, getJobMedia, getBillMedia]);
-  let optimized;
-  const jobMedia =
-    allMedia && allMedia[job.id]
-      ? allMedia[job.id].reduce(
-          (acc, val) => {
-            if (
-              val.type &&
-              val.type.mime &&
-              val.type.mime.startsWith("image")
-            ) {
-              acc.images.push({
-                ...val,
-                fullsize: val.src,
-                src: val.thumbnail,
-                height: val.thumbnailHeight,
-                width: val.thumbnailWidth,
-                ...(val.optimized && { src: val.optimized, fullsize: val.src }),
-              });
-              if (val.optimized) optimized = true;
+                                              bodyshop,
+                                              toggleMediaSelected,
+                                              getJobMedia,
+                                              getBillMedia,
+                                              allMedia,
+                                              job,
+                                              invoice_number,
+                                              vendorid,
+                                          }) {
+    const {t} = useTranslation();
+    const [modalState, setModalState] = useState({open: false, index: 0});
+    useEffect(() => {
+        if (job) {
+            if (invoice_number) {
+                getBillMedia({jobid: job.id, invoice_number});
             } else {
-              acc.other.push({
-                ...val,
-                fullsize: val.src,
-                src: val.thumbnail,
-                height: val.thumbnailHeight,
-                width: val.thumbnailWidth,
-                tags: [{ value: val.filename, title: val.filename }],
-              });
-            }
-            return acc;
-          },
-          { images: [], other: [] }
-        )
-      : { images: [], other: [] };
-
-  return (
-    <div>
-      <Space wrap>
-        <Button
-          onClick={() => {
-            if (job) {
-              if (invoice_number) {
-                getBillMedia({ jobid: job.id, invoice_number });
-              } else {
                 getJobMedia(job.id);
-              }
             }
-          }}
-        >
-          <SyncOutlined />
-        </Button>
-        <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
-          <Button>{t("documents.labels.openinexplorer")}</Button>
-        </a>
-        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
-        <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
-        <JobsLocalGalleryDownloadButton job={job} />
-        <JobsDocumentsLocalDeleteButton jobid={job.id} />
-      </Space>
-      <Card>
-        <DocumentsLocalUploadComponent
-          job={job}
-          invoice_number={invoice_number}
-          vendorid={vendorid}
-          allowAllTypes
-        />
-      </Card>
-      <Card title={t("jobs.labels.documents-images")}>
-        <Gallery
-          images={jobMedia.images}
-          onSelect={(index, image) => {
-            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          }}
-          {...(optimized && {
-            customControls: [
-              <Alert
-                style={{ margin: "4px" }}
-                message={t("documents.labels.optimizedimage")}
-                type="success"
-              />,
-            ],
-          })}
-          onClick={(index) => {
-            setModalState({ open: true, index: index });
-            // const media = allMedia[job.id].find(
-            //   (m) => m.optimized === item.src
-            // );
+        }
+    }, [job, invoice_number, getJobMedia, getBillMedia]);
+    let optimized;
+    const jobMedia =
+        allMedia && allMedia[job.id]
+            ? allMedia[job.id].reduce(
+                (acc, val) => {
+                    if (
+                        val.type &&
+                        val.type.mime &&
+                        val.type.mime.startsWith("image")
+                    ) {
+                        acc.images.push({
+                            ...val,
+                            fullsize: val.src,
+                            src: val.thumbnail,
+                            height: val.thumbnailHeight,
+                            width: val.thumbnailWidth,
+                            ...(val.optimized && {src: val.optimized, fullsize: val.src}),
+                        });
+                        if (val.optimized) optimized = true;
+                    } else {
+                        acc.other.push({
+                            ...val,
+                            fullsize: val.src,
+                            src: val.thumbnail,
+                            height: val.thumbnailHeight,
+                            width: val.thumbnailWidth,
+                            tags: [{value: val.filename, title: val.filename}],
+                        });
+                    }
+                    return acc;
+                },
+                {images: [], other: []}
+            )
+            : {images: [], other: []};
 
-            // window.open(
-            //   media ? media.fullsize : item.fullsize,
-            //   "_blank",
-            //   "toolbar=0,location=0,menubar=0"
-            // );
-          }}
-        />
-      </Card>
-      <Card title={t("jobs.labels.documents-other")}>
-        <Gallery
-          images={jobMedia.other}
-          thumbnailStyle={() => {
-            return {
-              backgroundImage: <FileExcelFilled />,
-              height: "100%",
-              width: "100%",
-              cursor: "pointer",
-            };
-          }}
-          onClick={(index) => {
-            window.open(
-              jobMedia.other[index].fullsize,
-              "_blank",
-              "toolbar=0,location=0,menubar=0"
-            );
-          }}
-          onSelect={(index, image) => {
-            toggleMediaSelected({ jobid: job.id, filename: image.filename });
-          }}
-        />
-      </Card>
-      {modalState.open && (
-        <Lightbox
-          mainSrc={jobMedia.images[modalState.index].fullsize}
-          nextSrc={
-            jobMedia.images[(modalState.index + 1) % jobMedia.images.length]
-              .fullsize
-          }
-          prevSrc={
-            jobMedia.images[
-              (modalState.index + jobMedia.images.length - 1) %
-                jobMedia.images.length
-            ].fullsize
-          }
-          onCloseRequest={() => setModalState({ open: false, index: 0 })}
-          onMovePrevRequest={() =>
-            setModalState({
-              ...modalState,
-              index:
-                (modalState.index + jobMedia.images.length - 1) %
-                jobMedia.images.length,
-            })
-          }
-          onMoveNextRequest={() =>
-            setModalState({
-              ...modalState,
-              index: (modalState.index + 1) % jobMedia.images.length,
-            })
-          }
-        />
-      )}
-    </div>
-  );
+    return (
+        <div>
+            <Space wrap>
+                <Button
+                    onClick={() => {
+                        if (job) {
+                            if (invoice_number) {
+                                getBillMedia({jobid: job.id, invoice_number});
+                            } else {
+                                getJobMedia(job.id);
+                            }
+                        }
+                    }}
+                >
+                    <SyncOutlined/>
+                </Button>
+                <a href={CreateExplorerLinkForJob({jobid: job.id})}>
+                    <Button>{t("documents.labels.openinexplorer")}</Button>
+                </a>
+                <JobsDocumentsLocalGalleryReassign jobid={job.id}/>
+                <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id}/>
+                <JobsLocalGalleryDownloadButton job={job}/>
+                <JobsDocumentsLocalDeleteButton jobid={job.id}/>
+            </Space>
+            <Card>
+                <DocumentsLocalUploadComponent
+                    job={job}
+                    invoice_number={invoice_number}
+                    vendorid={vendorid}
+                    allowAllTypes
+                />
+            </Card>
+            <Card title={t("jobs.labels.documents-images")}>
+                <Gallery
+                    images={jobMedia.images}
+                    onSelect={(index, image) => {
+                        toggleMediaSelected({jobid: job.id, filename: image.filename});
+                    }}
+                    {...(optimized && {
+                        customControls: [
+                            <Alert
+                                style={{margin: "4px"}}
+                                message={t("documents.labels.optimizedimage")}
+                                type="success"
+                            />,
+                        ],
+                    })}
+                    onClick={(index) => {
+                        setModalState({open: true, index: index});
+                        // const media = allMedia[job.id].find(
+                        //   (m) => m.optimized === item.src
+                        // );
+
+                        // window.open(
+                        //   media ? media.fullsize : item.fullsize,
+                        //   "_blank",
+                        //   "toolbar=0,location=0,menubar=0"
+                        // );
+                    }}
+                />
+            </Card>
+            <Card title={t("jobs.labels.documents-other")}>
+                <Gallery
+                    images={jobMedia.other}
+                    thumbnailStyle={() => {
+                        return {
+                            backgroundImage: <FileExcelFilled/>,
+                            height: "100%",
+                            width: "100%",
+                            cursor: "pointer",
+                        };
+                    }}
+                    onClick={(index) => {
+                        window.open(
+                            jobMedia.other[index].fullsize,
+                            "_blank",
+                            "toolbar=0,location=0,menubar=0"
+                        );
+                    }}
+                    onSelect={(index, image) => {
+                        toggleMediaSelected({jobid: job.id, filename: image.filename});
+                    }}
+                />
+            </Card>
+            {modalState.open && (
+                <Lightbox
+                    mainSrc={jobMedia.images[modalState.index].fullsize}
+                    nextSrc={
+                        jobMedia.images[(modalState.index + 1) % jobMedia.images.length]
+                            .fullsize
+                    }
+                    prevSrc={
+                        jobMedia.images[
+                        (modalState.index + jobMedia.images.length - 1) %
+                        jobMedia.images.length
+                            ].fullsize
+                    }
+                    onCloseRequest={() => setModalState({open: false, index: 0})}
+                    onMovePrevRequest={() =>
+                        setModalState({
+                            ...modalState,
+                            index:
+                                (modalState.index + jobMedia.images.length - 1) %
+                                jobMedia.images.length,
+                        })
+                    }
+                    onMoveNextRequest={() =>
+                        setModalState({
+                            ...modalState,
+                            index: (modalState.index + 1) % jobMedia.images.length,
+                        })
+                    }
+                />
+            )}
+        </div>
+    );
 }

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

@@ -1,81 +1,81 @@
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Button, notification, Popconfirm } from "antd";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { logImEXEvent } from "../../firebase/firebase.utils";
+import {QuestionCircleOutlined} from "@ant-design/icons";
+import {Button, notification, Popconfirm} from "antd";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {logImEXEvent} from "../../firebase/firebase.utils";
 import cleanAxios from "../../utils/CleanAxios";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
+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 { 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";
 const mapStateToProps = createStructuredSelector({
-  allMedia: selectAllMedia,
+    allMedia: selectAllMedia,
 
-  bodyshop: selectBodyshop,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  getJobMedia: (id) => dispatch(getJobMedia(id)),
+    getJobMedia: (id) => dispatch(getJobMedia(id)),
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobsDocumentsLocalDeleteButton);
 
 export function JobsDocumentsLocalDeleteButton({
-  bodyshop,
-  getJobMedia,
-  allMedia,
-  jobid,
-}) {
-  const { t } = useTranslation();
+                                                   bodyshop,
+                                                   getJobMedia,
+                                                   allMedia,
+                                                   jobid,
+                                               }) {
+    const {t} = useTranslation();
 
-  const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
 
-  const handleDelete = async () => {
-    logImEXEvent("job_documents_delete");
-    setLoading(true);
+    const handleDelete = async () => {
+        logImEXEvent("job_documents_delete");
+        setLoading(true);
 
-    const delres = await cleanAxios.post(
-      `${bodyshop.localmediaserverhttp}/jobs/delete`,
-      {
-        jobid: jobid,
-        files: ((allMedia && allMedia[jobid]) || [])
-          .filter((i) => i.isSelected)
-          .map((i) => i.filename),
-      },
-      { headers: { ims_token: bodyshop.localmediatoken } }
+        const delres = await cleanAxios.post(
+            `${bodyshop.localmediaserverhttp}/jobs/delete`,
+            {
+                jobid: jobid,
+                files: ((allMedia && allMedia[jobid]) || [])
+                    .filter((i) => i.isSelected)
+                    .map((i) => i.filename),
+            },
+            {headers: {ims_token: bodyshop.localmediatoken}}
+        );
+
+        if (delres.errors) {
+            notification["error"]({
+                message: t("documents.errors.deleting", {
+                    message: JSON.stringify(delres.errors),
+                }),
+            });
+        } else {
+            notification.open({
+                key: "docdeletedsuccesfully",
+                type: "success",
+                message: t("documents.successes.delete"),
+            });
+        }
+        getJobMedia(jobid);
+        setLoading(false);
+    };
+
+    return (
+        <Popconfirm
+            icon={<QuestionCircleOutlined style={{color: "red"}}/>}
+            onConfirm={handleDelete}
+            title={t("documents.labels.confirmdelete")}
+            okText={t("general.actions.delete")}
+            okButtonProps={{type: "danger"}}
+            cancelText={t("general.actions.cancel")}
+        >
+            <Button loading={loading}>{t("documents.actions.delete")}</Button>
+        </Popconfirm>
     );
-
-    if (delres.errors) {
-      notification["error"]({
-        message: t("documents.errors.deleting", {
-          message: JSON.stringify(delres.errors),
-        }),
-      });
-    } else {
-      notification.open({
-        key: "docdeletedsuccesfully",
-        type: "success",
-        message: t("documents.successes.delete"),
-      });
-    }
-    getJobMedia(jobid);
-    setLoading(false);
-  };
-
-  return (
-    <Popconfirm
-      icon={<QuestionCircleOutlined style={{ color: "red" }} />}
-      onConfirm={handleDelete}
-      title={t("documents.labels.confirmdelete")}
-      okText={t("general.actions.delete")}
-      okButtonProps={{ type: "danger" }}
-      cancelText={t("general.actions.cancel")}
-    >
-      <Button loading={loading}>{t("documents.actions.delete")}</Button>
-    </Popconfirm>
-  );
 }

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

@@ -1,74 +1,75 @@
-import { Button } from "antd";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
+import {Button} from "antd";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
 import cleanAxios from "../../utils/CleanAxios";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectAllMedia } from "../../redux/media/media.selectors";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {selectAllMedia} from "../../redux/media/media.selectors";
+import {selectBodyshop} from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop,
-  allMedia: selectAllMedia,
+    bodyshop: selectBodyshop,
+    allMedia: selectAllMedia,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobsLocalGalleryDownloadButton);
 
 export function JobsLocalGalleryDownloadButton({
-  bodyshop,
-  galleryImages,
-  allMedia,
-  job,
-}) {
-  const { t } = useTranslation();
-  const [download, setDownload] = useState(null);
+                                                   bodyshop,
+                                                   galleryImages,
+                                                   allMedia,
+                                                   job,
+                                               }) {
+    const {t} = useTranslation();
+    const [download, setDownload] = useState(null);
 
-  function downloadProgress(progressEvent) {
-    setDownload((currentDownloadState) => {
-      return {
-        downloaded: progressEvent.loaded || 0,
-        speed:
-          (progressEvent.loaded || 0) -
-          ((currentDownloadState && currentDownloadState.downloaded) || 0),
-      };
-    });
-  }
+    function downloadProgress(progressEvent) {
+        setDownload((currentDownloadState) => {
+            return {
+                downloaded: progressEvent.loaded || 0,
+                speed:
+                    (progressEvent.loaded || 0) -
+                    ((currentDownloadState && currentDownloadState.downloaded) || 0),
+            };
+        });
+    }
 
-  const handleDownload = async () => {
-    const theDownloadedZip = await cleanAxios.post(
-      `${bodyshop.localmediaserverhttp}/jobs/download`,
-      {
-        jobid: job.id,
-        files: ((allMedia && allMedia[job.id]) || [])
-          .filter((i) => i.isSelected)
-          .map((i) => i.filename),
-      },
-      {
-        headers: { ims_token: bodyshop.localmediatoken },
-        responseType: "arraybuffer",
-        onDownloadProgress: downloadProgress,
-      }
+    const handleDownload = async () => {
+        const theDownloadedZip = await cleanAxios.post(
+            `${bodyshop.localmediaserverhttp}/jobs/download`,
+            {
+                jobid: job.id,
+                files: ((allMedia && allMedia[job.id]) || [])
+                    .filter((i) => i.isSelected)
+                    .map((i) => i.filename),
+            },
+            {
+                headers: {ims_token: bodyshop.localmediatoken},
+                responseType: "arraybuffer",
+                onDownloadProgress: downloadProgress,
+            }
+        );
+        setDownload(null);
+        standardMediaDownload(theDownloadedZip.data, job.ro_number);
+    };
+
+    return (
+        <Button loading={!!download} onClick={handleDownload}>
+            {t("documents.actions.download")}
+        </Button>
     );
-    setDownload(null);
-    standardMediaDownload(theDownloadedZip.data, job.ro_number);
-  };
-
-  return (
-    <Button loading={!!download} onClick={handleDownload}>
-      {t("documents.actions.download")}
-    </Button>
-  );
 }
 
 function standardMediaDownload(bufferData, filename) {
-  const a = document.createElement("a");
-  const url = window.URL.createObjectURL(new Blob([bufferData]));
-  a.href = url;
-  a.download = `${filename}.zip`;
-  a.click();
+    const a = document.createElement("a");
+    const url = window.URL.createObjectURL(new Blob([bufferData]));
+    a.href = url;
+    a.download = `${filename}.zip`;
+    a.click();
 }

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

@@ -1,82 +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";
+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,
+    bodyshop: selectBodyshop,
+    allMedia: selectAllMedia,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  getJobMedia: (id) => dispatch(getJobMedia(id)),
+    getJobMedia: (id) => dispatch(getJobMedia(id)),
 
-  toggleMediaSelected: ({ jobid, filename }) =>
-    dispatch(toggleMediaSelected({ jobid, filename })),
+    toggleMediaSelected: ({jobid, filename}) =>
+        dispatch(toggleMediaSelected({jobid, filename})),
 });
 
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobDocumentsLocalGalleryExternal);
 
 function JobDocumentsLocalGalleryExternal({
-  jobId,
-  externalMediaState,
-  getJobMedia,
-  toggleMediaSelected,
-  allMedia,
-}) {
-  const [galleryImages, setgalleryImages] = externalMediaState;
-  const { t } = useTranslation();
+                                              jobId,
+                                              externalMediaState,
+                                              getJobMedia,
+                                              toggleMediaSelected,
+                                              allMedia,
+                                          }) {
+    const [galleryImages, setgalleryImages] = externalMediaState;
+    const {t} = useTranslation();
 
-  useEffect(() => {
-    if (jobId) {
-      getJobMedia(jobId);
-    }
-  }, [jobId, getJobMedia]);
+    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, src: val.thumbnail, fullsize: val.src });
-            }
-            return acc;
-          }, [])
-        : [];
-    console.log(
-      "🚀 ~ file: jobs-documents-local-gallery.external.component.jsx:48 ~ useEffect ~ documents:",
-      documents
+    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, src: val.thumbnail, fullsize: val.src});
+                    }
+                    return acc;
+                }, [])
+                : [];
+        console.log(
+            "🚀 ~ file: jobs-documents-local-gallery.external.component.jsx:48 ~ useEffect ~ documents:",
+            documents
+        );
+
+        setgalleryImages(documents);
+    }, [allMedia, jobId, setgalleryImages, t]);
+
+    return (
+        <div className="clearfix">
+            <Gallery
+                images={galleryImages}
+                onSelect={(index, image) => {
+                    setgalleryImages(
+                        galleryImages.map((g, idx) =>
+                            index === idx ? {...g, isSelected: !g.isSelected} : g
+                        )
+                    );
+                }}
+            />
+        </div>
     );
-
-    setgalleryImages(documents);
-  }, [allMedia, jobId, setgalleryImages, t]);
-
-  return (
-    <div className="clearfix">
-      <Gallery
-        images={galleryImages}
-        onSelect={(index, image) => {
-          setgalleryImages(
-            galleryImages.map((g, idx) =>
-              index === idx ? { ...g, isSelected: !g.isSelected } : g
-            )
-          );
-        }}
-      />
-    </div>
-  );
 }

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

@@ -1,96 +1,96 @@
-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 {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,
+    allMedia: selectAllMedia,
+    bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
-  getJobMedia: (id) => dispatch(getJobMedia(id)),
+    getJobMedia: (id) => dispatch(getJobMedia(id)),
 
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+    //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobsDocumentsLocalGalleryReassign);
 
 export function JobsDocumentsLocalGalleryReassign({
-  bodyshop,
-  jobid,
-  allMedia,
-  getJobMedia,
-}) {
-  const { t } = useTranslation();
-  const [form] = Form.useForm();
+                                                      bodyshop,
+                                                      jobid,
+                                                      allMedia,
+                                                      getJobMedia,
+                                                  }) {
+    const {t} = useTranslation();
+    const [form] = Form.useForm();
 
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
 
-  const handleFinish = async ({ jobid: newJobid }) => {
-    setLoading(true);
-    const selectedDocuments = allMedia[jobid].filter((m) => m.isSelected);
+    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),
-      },
-      { headers: { ims_token: bodyshop.localmediatoken } }
+        await cleanAxios.post(
+            `${bodyshop.localmediaserverhttp}/jobs/move`,
+            {
+                from_jobid: jobid,
+                jobid: newJobid,
+                files: selectedDocuments.map((f) => f.filename),
+            },
+            {headers: {ims_token: bodyshop.localmediatoken}}
+        );
+
+        getJobMedia(jobid);
+        setOpen(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={() => setOpen(false)}>
+                    {t("general.actions.cancel")}
+                </Button>
+            </Space>
+        </div>
     );
 
-    getJobMedia(jobid);
-    setOpen(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={() => setOpen(false)}>
-          {t("general.actions.cancel")}
-        </Button>
-      </Space>
-    </div>
-  );
-
-  return (
-    <Popover content={popContent} open={open}>
-      <Button
-        //disabled={selectedImages.length < 1}
-        onClick={() => setOpen(true)}
-        loading={loading}
-      >
-        {t("documents.actions.reassign")}
-      </Button>
-    </Popover>
-  );
+    return (
+        <Popover content={popContent} open={open}>
+            <Button
+                //disabled={selectedImages.length < 1}
+                onClick={() => setOpen(true)}
+                loading={loading}
+            >
+                {t("documents.actions.reassign")}
+            </Button>
+        </Popover>
+    );
 }

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

@@ -1,53 +1,51 @@
-import { Button, Space } from "antd";
+import {Button, Space} from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import {useTranslation} from "react-i18next";
+
+import {connect} from "react-redux";
+import {createStructuredSelector} from "reselect";
+import {deselectAllMediaForJob, selectAllmediaForJob,} from "../../redux/media/media.actions";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import {
-  selectAllmediaForJob,
-  deselectAllMediaForJob,
-} from "../../redux/media/media.actions";
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
+    //currentUser: selectCurrentUser
 });
 const mapDispatchToProps = (dispatch) => ({
-  selectAllmediaForJob: (jobid) => dispatch(selectAllmediaForJob(jobid)),
-  deselectAllmediaForJob: (jobid) => dispatch(deselectAllMediaForJob(jobid)),
+    selectAllmediaForJob: (jobid) => dispatch(selectAllmediaForJob(jobid)),
+    deselectAllmediaForJob: (jobid) => dispatch(deselectAllMediaForJob(jobid)),
 });
 export default connect(
-  mapStateToProps,
-  mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(JobsDocumentsLocalGallerySelectAllComponent);
 
 export function JobsDocumentsLocalGallerySelectAllComponent({
-  jobid,
-  selectAllmediaForJob,
-  deselectAllmediaForJob,
-}) {
-  const { t } = useTranslation();
+                                                                jobid,
+                                                                selectAllmediaForJob,
+                                                                deselectAllmediaForJob,
+                                                            }) {
+    const {t} = useTranslation();
 
-  // onSelectImage={(index, image) => {
-  //     toggleMediaSelected({ jobid: job.id, filename: image.filename });
-  //   }}
+    // onSelectImage={(index, image) => {
+    //     toggleMediaSelected({ jobid: job.id, filename: image.filename });
+    //   }}
 
-  const handleSelectAll = () => {
-    selectAllmediaForJob({ jobid });
-  };
+    const handleSelectAll = () => {
+        selectAllmediaForJob({jobid});
+    };
 
-  const handleDeselectAll = () => {
-    deselectAllmediaForJob({ jobid });
-  };
+    const handleDeselectAll = () => {
+        deselectAllmediaForJob({jobid});
+    };
 
-  return (
-    <Space wrap>
-      <Button onClick={handleSelectAll}>
-        {t("general.actions.selectall")}
-      </Button>
+    return (
+        <Space wrap>
+            <Button onClick={handleSelectAll}>
+                {t("general.actions.selectall")}
+            </Button>
 
-      <Button onClick={handleDeselectAll}>
-        {t("general.actions.deselectall")}
-      </Button>
-    </Space>
-  );
+            <Button onClick={handleDeselectAll}>
+                {t("general.actions.deselectall")}
+            </Button>
+        </Space>
+    );
 }