From 4b39f2686f18083724cba55b4fcf39b2dcd28dfd Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sat, 6 May 2023 23:37:46 +0200
Subject: [PATCH] added popover for details and global inputs

---
 src/Pages/GroupTasks/GroupTasksTableList.js |  2 +-
 src/Pages/GroupTasks/GroupTasksViewModal.js | 97 +++++++++++++++++----
 src/utils.js                                |  5 ++
 3 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/src/Pages/GroupTasks/GroupTasksTableList.js b/src/Pages/GroupTasks/GroupTasksTableList.js
index cfccc6f..be4eb4b 100644
--- a/src/Pages/GroupTasks/GroupTasksTableList.js
+++ b/src/Pages/GroupTasks/GroupTasksTableList.js
@@ -87,7 +87,7 @@ export default function GroupTaskTableList({
           endedAt:
             groupTask.EndedAt !== "0001-01-01T00:00:00Z"
               ? FormatDatetime(groupTask.EndedAt)
-              : "-/-",
+              : Constants.TEXT_EMPTY_PLACEHOLDER,
         });
       }
     });
diff --git a/src/Pages/GroupTasks/GroupTasksViewModal.js b/src/Pages/GroupTasks/GroupTasksViewModal.js
index bc31ad0..741da09 100644
--- a/src/Pages/GroupTasks/GroupTasksViewModal.js
+++ b/src/Pages/GroupTasks/GroupTasksViewModal.js
@@ -1,4 +1,4 @@
-import { Alert, Button, Input, Modal, Result, Steps } from "antd";
+import { Alert, Button, Modal, Popover, Result, Steps } from "antd";
 import { useContext } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
@@ -145,11 +145,9 @@ export default function GroupTasksViewModal({ isOpen }) {
                 <b>Ended at:</b>{" "}
                 {groupTaskSteps[index].EndedAt !== "0001-01-01T00:00:00Z"
                   ? FormatDatetime(groupTaskSteps[index].EndedAt)
-                  : "-/-"}
+                  : Constants.TEXT_EMPTY_PLACEHOLDER}
               </p>
 
-              <Input placeholder="hello" />
-
               <Alert
                 message={<b>{getAlertMessage(groupTaskSteps[index].Status)}</b>}
                 description={groupTaskSteps[index].Log}
@@ -196,20 +194,87 @@ export default function GroupTasksViewModal({ isOpen }) {
         if (groupTask.Id === paramGroupTaskId) {
           let currentGroupTask = groupTask;
 
+          console.log(currentGroupTask);
+
           return (
             <div key={paramGroupTaskId}>
-              <h1 style={{ color: "#e67e22", fontWeight: "bold" }}>
-                {currentGroupTask.GroupName}
-              </h1>
-              <p>
-                <span style={{ fontWeight: "bold" }}>ID:</span>{" "}
-                {paramGroupTaskId} <br />
-                <span style={{ fontWeight: "bold" }}>Category:</span>{" "}
-                {currentGroupTask.Category}
-                <br />
-                <span style={{ fontWeight: "bold" }}>Started at:</span>{" "}
-                {FormatDatetime(currentGroupTask.StartedAt)}
-              </p>
+              <Popover
+                key={"test1"}
+                placement="bottomLeft"
+                title={
+                  <h2
+                    key={"test"}
+                    style={{
+                      fontWeight: "bold",
+                      color: Constants.COLORS.SECONDARY,
+                    }}
+                  >
+                    Details
+                  </h2>
+                }
+                content={
+                  <>
+                    <p>
+                      <span style={{ fontWeight: "bold" }}>ID:</span>{" "}
+                      {paramGroupTaskId} <br />
+                      <span style={{ fontWeight: "bold" }}>Category:</span>{" "}
+                      {currentGroupTask.Category}
+                      <br />
+                      <span style={{ fontWeight: "bold" }}>
+                        Started at:
+                      </span>{" "}
+                      {FormatDatetime(currentGroupTask.StartedAt)}
+                    </p>
+                    {currentGroupTask.GlobalInputs !== "[]" ? (
+                      <>
+                        <h2
+                          style={{
+                            fontWeight: "bold",
+                            color: Constants.COLORS.SECONDARY,
+                          }}
+                        >
+                          Specified Global Inputs
+                        </h2>
+
+                        <p>
+                          {JSON.parse(currentGroupTask.GlobalInputs).map(
+                            (globalInput) => {
+                              return (
+                                <span
+                                  key={
+                                    globalInput.parameterName +
+                                    globalInput.value
+                                  }
+                                >
+                                  <span style={{ fontWeight: "bold" }}>
+                                    {globalInput.parameterName}:{" "}
+                                  </span>
+                                  <span>
+                                    {globalInput.value !== ""
+                                      ? globalInput.value
+                                      : Constants.TEXT_EMPTY_PLACEHOLDER}
+                                  </span>
+                                  <br />
+                                </span>
+                              );
+                            }
+                          )}
+                        </p>
+                      </>
+                    ) : null}
+                  </>
+                }
+                trigger="click"
+              >
+                <h1
+                  style={{
+                    color: Constants.COLORS.PRIMARY,
+                    fontWeight: "bold",
+                  }}
+                >
+                  {currentGroupTask.GroupName}
+                </h1>
+              </Popover>
 
               <Steps direction="vertical" items={stepsItemHandler()} />
             </div>
diff --git a/src/utils.js b/src/utils.js
index c8e9105..81d870c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -5,6 +5,11 @@ import { useNavigate } from "react-router-dom";
  * constants
  */
 export const Constants = {
+  COLORS: {
+    PRIMARY: "#e67e22",
+    SECONDARY: "#9b59b6",
+  },
+  TEXT_EMPTY_PLACEHOLDER: "-/-",
   API_ADDRESS: "http://localhost:8080/v1",
   WS_ADDRESS: "ws://localhost:8080/ws",
   ROUTE_PATHS: {