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

import { SyncOutlined, FileExcelFilled } from "@ant-design/icons";
import { Alert, 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 {
  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";
import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";

const mapStateToProps = createStructuredSelector({
  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 })),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobsDocumentsLocalGallery);

export function JobsDocumentsLocalGallery({
  bodyshop,
  toggleMediaSelected,
  getJobMedia,
  getBillMedia,
  allMedia,
  job,
  invoice_number,
  vendorid,
}) {
  const { t } = useTranslation();
  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,
                ...(val.optimized && { src: val.optimized, fullsize: val.src }),
              });
              if (val.optimized) optimized = true;
            } else {
              acc.other.push({
                ...val,
                tags: [{ value: val.filename, title: val.filename }],
              });
            }
            return acc;
          },
          { images: [], other: [] }
        )
      : { images: [], other: [] };
  console.log(
    "🚀  ~ file: jobs-documents-local-gallery.container.jsx  ~ line 63  ~ jobMedia",
    jobMedia
  );

  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}
          backdropClosesModal={true}
          onSelectImage={(index, image) => {
            toggleMediaSelected({ jobid: job.id, filename: image.filename });
          }}
          {...(optimized && {
            customControls: [
              <Alert
                style={{ margin: "4px" }}
                message={t("documents.labels.optimizedimage")}
                type="success"
              />,
            ],
          })}
          onClickImage={(props) => {
            const media = allMedia[job.id].find(
              (m) => m.optimized === props.target.src
            );

            window.open(
              media ? media.src : props.target.src,
              "_blank",
              "toolbar=0,location=0,menubar=0"
            );
          }}
        />
      </Card>
      <Card title={t("jobs.labels.documents-other")}>
        <Gallery
          images={jobMedia.other}
          backdropClosesModal={true}
          enableLightbox={false}
          thumbnailStyle={() => {
            return {
              backgroundImage: <FileExcelFilled />,
              height: "100%",
              width: "100%",
              cursor: "pointer",
            };
          }}
          onClickThumbnail={(index) => {
            window.open(
              jobMedia.other[index].src,
              "_blank",
              "toolbar=0,location=0,menubar=0"
            );
          }}
          onSelectImage={(index, image) => {
            toggleMediaSelected({ jobid: job.id, filename: image.filename });
          }}
        />
      </Card>
    </div>
  );
}