From 6cf58483785ab8cff40a32c411f73aa85005742c Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sat, 10 Jun 2023 19:11:47 +0200
Subject: [PATCH] show task files on step log instead of popover

---
 src/Pages/GroupTasks/GroupTasksViewModal.js | 202 ++++++++++++--------
 1 file changed, 124 insertions(+), 78 deletions(-)

diff --git a/src/Pages/GroupTasks/GroupTasksViewModal.js b/src/Pages/GroupTasks/GroupTasksViewModal.js
index f56fdaf..2b2438a 100644
--- a/src/Pages/GroupTasks/GroupTasksViewModal.js
+++ b/src/Pages/GroupTasks/GroupTasksViewModal.js
@@ -1,6 +1,7 @@
 import {
   Alert,
   Button,
+  Col,
   Form,
   Image,
   Input,
@@ -8,6 +9,7 @@ import {
   Modal,
   Popover,
   Result,
+  Row,
   Steps,
   Tag,
   notification,
@@ -25,10 +27,9 @@ import {
   GroupTasksStepsLockedAndUserUpdateInputValueRememberId,
 } from "../../utils";
 import {
-  DownloadOutlined,
+  FileImageOutlined,
   InfoCircleOutlined,
   LockOutlined,
-  PaperClipOutlined,
 } from "@ant-design/icons";
 import { StlViewer } from "react-stl-viewer";
 
@@ -207,79 +208,6 @@ export default function GroupTasksViewModal({ isOpen }) {
     }
   };
 
-  const getGroupTaskStepLog = (log, files) => {
-    const getPopoverContent = (file) => {
-      const fileExtension = file.SystemFileName.split(".")[1];
-      const fileUrl = `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTask.Id}/${file.SystemFileName}`;
-
-      switch (fileExtension) {
-        case "png":
-          return <Image width={200} src={fileUrl} />;
-        case "stl":
-          return (
-            <StlViewer
-              style={{ top: 0, left: 0, width: "30vw", height: "30vh" }}
-              orbitControls
-              url={fileUrl}
-              canvasId="test"
-              modelProps={{
-                color: Constants.COLORS.PRIMARY,
-              }}
-            />
-          );
-
-        default:
-          return (
-            <>
-              <span>Preview not supported</span>
-              <br />
-              <a
-                href={fileUrl}
-                download="test"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <Button
-                  type="primary"
-                  style={{ width: "100%", marginTop: 10 }}
-                  icon={<DownloadOutlined />}
-                >
-                  Download
-                </Button>
-              </a>
-            </>
-          );
-      }
-    };
-
-    return log.length === 0 ? (
-      ""
-    ) : (
-      <span style={{ whiteSpace: "pre-line" }}>
-        {log}
-
-        {files !== "" &&
-          JSON.parse(files).map((file) => {
-            return (
-              <Popover
-                key={file.SystemFileName}
-                content={getPopoverContent(file)}
-                placement="rightTop"
-              >
-                <Tag
-                  key={file.SystemFileName}
-                  icon={<PaperClipOutlined />}
-                  color="processing"
-                >
-                  {file.OriginalFileName}
-                </Tag>
-              </Popover>
-            );
-          })}
-      </span>
-    );
-  };
-
   const stepsItemHandler = () => {
     let groupTaskSteps = [];
     let groupTasks = [];
@@ -440,9 +368,12 @@ export default function GroupTasksViewModal({ isOpen }) {
                       taskLockedByUserId={groupTaskSteps[index].LockedByUserId}
                     />
                   ) : (
-                    getGroupTaskStepLog(
-                      groupTaskSteps[index].Log,
-                      groupTaskSteps[index].Files
+                    groupTaskSteps[index].Log.length > 0 && (
+                      <GroupTaskStepLogHandler
+                        currentGroupTaskId={currentGroupTask.Id}
+                        log={groupTaskSteps[index].Log}
+                        files={groupTaskSteps[index].Files}
+                      />
                     )
                   )
                 }
@@ -787,3 +718,118 @@ function InputRequiredHandler({
     </Form>
   );
 }
+
+function GroupTaskStepLogHandler({ currentGroupTaskId, log, files }) {
+  const getDownloadUrl = (file) => {
+    return `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTaskId}/${file.SystemFileName}`;
+  };
+
+  const getTag = (file) => {
+    return (
+      <a
+        key={"a" + file.SystemFileName}
+        href={getDownloadUrl(file)}
+        download="test"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Tag
+          icon={<FileImageOutlined />}
+          color="processing"
+          style={{ marginTop: 6 }}
+        >
+          {file.OriginalFileName}
+        </Tag>
+      </a>
+    );
+  };
+
+  const fileContent = (files) => {
+    const nonImageFiles = [];
+    const imageFiles = [];
+
+    for (const file of files) {
+      const fileExtension = file.SystemFileName.split(".")[1];
+
+      if (
+        fileExtension === "png" ||
+        fileExtension === "jpeg" ||
+        fileExtension === "jpg" ||
+        fileExtension === "webp"
+      ) {
+        imageFiles.push(file);
+      } else {
+        nonImageFiles.push(file);
+      }
+    }
+
+    const elements = [];
+
+    for (const nonImageFile of nonImageFiles) {
+      const fileExtension = nonImageFile.SystemFileName.split(".")[1];
+
+      if (fileExtension === "stl") {
+        elements.push(
+          <div key={"tag" + nonImageFile.SystemFileName}>
+            <div style={{ height: 300, backgroundColor: "#fff" }}>
+              <StlViewer
+                style={{ top: 0, left: 0, height: "100%" }}
+                orbitControls
+                modelProps={{
+                  color: Constants.COLORS.SECONDARY,
+                  scale: 1,
+                  positionX: 200,
+                  positionY: 200,
+                }}
+                shadows
+                floorProps={{ gridWidth: 400 }}
+                url={getDownloadUrl(nonImageFile)}
+                onFinishLoading={(ev) => {
+                  console.log("ev", ev);
+                }}
+              />
+            </div>
+            {getTag(nonImageFile)}
+          </div>
+        );
+        console.log("stl download", nonImageFile.SystemFileName);
+      } else {
+        elements.push(getTag(nonImageFile));
+      }
+    }
+
+    const imageFileElements = [];
+
+    for (const imageFile of imageFiles) {
+      imageFileElements.push(
+        <Col
+          key={imageFile.SystemFileName}
+          style={{ marginTop: 6 }}
+          className="gutter-row"
+          span={6}
+        >
+          <Image width={"100%"} src={getDownloadUrl(imageFile)} />
+          {getTag(imageFile)}
+        </Col>
+      );
+    }
+
+    if (imageFileElements.length > 0) {
+      elements.push(
+        <Row key={"imgrow"} gutter={16}>
+          {imageFileElements}
+        </Row>
+      );
+    }
+
+    return elements;
+  };
+
+  return (
+    <span style={{ whiteSpace: "pre-line" }}>
+      {log}
+
+      {files !== "" && fileContent(JSON.parse(files))}
+    </span>
+  );
+}