IO-1144 Image Editor Changes.

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

@@ -1,5 +1,5 @@
-import { FileExcelFilled } from "@ant-design/icons";
-import { Card, Col, Row, Space } from "antd";
+import { FileExcelFilled, EditFilled, SyncOutlined } from "@ant-design/icons";
+import { Card, Col, Row, Space, Button } from "antd";
 import React, { useEffect, useState } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
@@ -23,6 +23,25 @@ function JobsDocumentsComponent({
 }) {
   const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
   const { t } = useTranslation();
+  const [index, setIndex] = useState(0);
+
+  const onCurrentImageChange = (index) => {
+    setIndex(index);
+  };
+
+  useEffect(() => {
+    console.log("Added event listening for reteching.");
+    window.addEventListener("storage", (ev) => {
+      if (ev.key === "refetch" && ev.newValue === true) {
+        refetch && refetch();
+        localStorage.setItem("refetch", false);
+      }
+    });
+
+    return () => {
+      window.removeEventListener("storage");
+    };
+  }, [refetch]);
 
   useEffect(() => {
     let documents = data.reduce(
@@ -101,6 +120,9 @@ function JobsDocumentsComponent({
       <Row gutter={[16, 16]}>
         <Col span={24}>
           <Space wrap>
+            <Button onClick={() => refetch && refetch()}>
+              <SyncOutlined />
+            </Button>
             <JobsDocumentsGallerySelectAllComponent
               galleryImages={galleryImages}
               setGalleryImages={setgalleryImages}
@@ -135,6 +157,27 @@ function JobsDocumentsComponent({
             <Gallery
               images={galleryImages.images}
               backdropClosesModal={true}
+              currentImageWillChange={onCurrentImageChange}
+              customControls={[
+                <Button
+                  style={{
+                    float: "right",
+
+                    zIndex: "5",
+                  }}
+                  onClick={() => {
+                    console.log(`Clicked`);
+                    const newWindow = window.open(
+                      `${window.location.protocol}//${window.location.host}/edit?documentId=${galleryImages.images[index].id}`,
+                      "_blank",
+                      "noopener,noreferrer"
+                    );
+                    if (newWindow) newWindow.opener = null;
+                  }}
+                >
+                  <EditFilled style={{}} />
+                </Button>,
+              ]}
               onClickImage={(props) => {
                 window.open(
                   props.target.src,