From ee6e452c8cae4b7b499b541f524db0024f7c0fdc Mon Sep 17 00:00:00 2001
From: Serge <sergesoroka@gmail.com>
Date: Wed, 31 Jan 2024 10:42:15 +0200
Subject: [PATCH] Edit the Template

---
 src/App.jsx                             |  8 ++++-
 src/MenuBar/Header.css                  |  1 +
 src/MenuBar/LogoBar.tsx                 |  7 +++--
 src/StartScreenComp/BluePrintsTable.tsx | 42 ++++++++++++++++++-------
 src/StartScreenComp/StartScreenComp.css |  7 ++++-
 src/StartScreenComp/StartScreenComp.tsx | 27 ++++++++++++----
 6 files changed, 70 insertions(+), 22 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index a1b2fa1..5fc23f6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,6 +24,8 @@ function App() {
   const [surveyReset, setSurveyReset] = useState(false);
   const [templateURL, setTemplateURL] = useState("");
 
+  console.log("URL", templateURL);
+
   setTimeout(() => {
     setSurveyReset(false);
   }, 0);
@@ -35,11 +37,15 @@ function App() {
           setShowStartScreen={setShowStartScreen}
           setSurveyReset={setSurveyReset}
           surveyReset={surveyReset}
+          setTemplateURL={setTemplateURL}
         />
       ) : (
         <div className="wrapper">
           <div className="headerWrap">
-            <LogoBar startScreen={false} />
+            <LogoBar
+              startScreen={false}
+              setShowStartScreen={setShowStartScreen}
+            />
             <TopMenuBar
               setSurveyReset={setSurveyReset}
               setTemplateURL={setTemplateURL}
diff --git a/src/MenuBar/Header.css b/src/MenuBar/Header.css
index 7aa11fa..e9223ab 100644
--- a/src/MenuBar/Header.css
+++ b/src/MenuBar/Header.css
@@ -19,6 +19,7 @@
   color: rgb(32, 0, 63);
   padding: 0.8rem 2rem;
   margin-right: 2rem;
+  cursor: pointer;
 }
 
 .logoWrapStartScreen {
diff --git a/src/MenuBar/LogoBar.tsx b/src/MenuBar/LogoBar.tsx
index 49fa3be..f7cb0cf 100644
--- a/src/MenuBar/LogoBar.tsx
+++ b/src/MenuBar/LogoBar.tsx
@@ -1,10 +1,13 @@
 import React from "react";
 import "./Header.css";
 
-export default function LogoBar({ startScreen }) {
+export default function LogoBar({ startScreen, setShowStartScreen }) {
   return (
     <div className={startScreen ? "headerStartScreen" : "header"}>
-      <h1 className={startScreen ? "logoWrapStartScreen" : "logoWrap"}>
+      <h1
+        className={startScreen ? "logoWrapStartScreen" : "logoWrap"}
+        onClick={() => setShowStartScreen(true)}
+      >
         Template Designer{" "}
         <span className="slogan">
           Designing data entry templates for eNanoMapper
diff --git a/src/StartScreenComp/BluePrintsTable.tsx b/src/StartScreenComp/BluePrintsTable.tsx
index 09d0cdd..bc7adb1 100644
--- a/src/StartScreenComp/BluePrintsTable.tsx
+++ b/src/StartScreenComp/BluePrintsTable.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import "./StartScreenComp.css";
 
-export default function BluePrintsTable({ data, setUUID, UUID, value }) {
+export default function BluePrintsTable({ data, setUUID, UUID, value, mode }) {
   return (
     <div className="tableFixHead">
       <table>
@@ -31,17 +31,35 @@ export default function BluePrintsTable({ data, setUUID, UUID, value }) {
                 }
               })
               .map((item) => {
-                return (
-                  <tr
-                    key={item.uuid}
-                    onClick={() => setUUID(item.uuid)}
-                    className={item.uuid == UUID && "choosen"}
-                  >
-                    <td>{item.EXPERIMENT}</td>
-                    <td>{item.template_author}</td>
-                    <td>{item.timestamp}</td>
-                  </tr>
-                );
+                if (mode == "Draft" && item.template_status == "DRAFT") {
+                  return (
+                    <tr
+                      key={item.uuid}
+                      onClick={() => setUUID(item.uuid)}
+                      className={item.uuid == UUID && "choosen"}
+                    >
+                      <td>{item.EXPERIMENT}</td>
+                      <td>{item.template_author}</td>
+                      <td>{item.timestamp}</td>
+                    </tr>
+                  );
+                }
+                if (
+                  mode == "Finalized" &&
+                  item.template_status == "FINALIZED"
+                ) {
+                  return (
+                    <tr
+                      key={item.uuid}
+                      onClick={() => setUUID(item.uuid)}
+                      className={item.uuid == UUID && "choosen"}
+                    >
+                      <td>{item.EXPERIMENT}</td>
+                      <td>{item.template_author}</td>
+                      <td>{item.timestamp}</td>
+                    </tr>
+                  );
+                }
               })}
         </tbody>
       </table>
diff --git a/src/StartScreenComp/StartScreenComp.css b/src/StartScreenComp/StartScreenComp.css
index 69e6784..af23386 100644
--- a/src/StartScreenComp/StartScreenComp.css
+++ b/src/StartScreenComp/StartScreenComp.css
@@ -85,7 +85,9 @@
 .view {
   width: 100%;
   height: 400px;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background-color: aliceblue;
 }
 
@@ -138,3 +140,6 @@ tr.choosen {
 iframe {
   border: none;
 }
+
+/* .previewPlaceholder {
+} */
diff --git a/src/StartScreenComp/StartScreenComp.tsx b/src/StartScreenComp/StartScreenComp.tsx
index 1fa9d0c..f22fe7d 100644
--- a/src/StartScreenComp/StartScreenComp.tsx
+++ b/src/StartScreenComp/StartScreenComp.tsx
@@ -13,6 +13,7 @@ export default function StartScreenComp({
   setShowStartScreen,
   setSurveyReset,
   surveyReset,
+  setTemplateURL,
 }) {
   const [value, setValue] = useState("");
   const [mode, setMode] = useState("Finalized");
@@ -50,6 +51,13 @@ export default function StartScreenComp({
     setCopied(false);
   }, 3000);
 
+  const editORView = () => {
+    if (mode == "Draft" && UUID) {
+      setTemplateURL(`https://api.ramanchada.ideaconsult.net/template/${UUID}`);
+      setShowStartScreen(false);
+    }
+  };
+
   const onChange = (e) => {
     setValue(e.target.value);
   };
@@ -103,9 +111,12 @@ export default function StartScreenComp({
             setUUID={setUUID}
             UUID={UUID}
             value={value}
+            mode={mode}
           />
           <div className="buttonsWrap">
-            <Button label={mode == "Finalized" ? "View" : "Edit"} />
+            <div onClick={editORView}>
+              <Button label={mode == "Finalized" ? "View" : "Edit"} />
+            </div>
             <Button label="Make a copy" />
             <div
               onClick={() => {
@@ -123,11 +134,15 @@ export default function StartScreenComp({
           </div>
         </div>
         <div className="view">
-          <iframe
-            width="100%"
-            height="400"
-            src={`https://api.ramanchada.ideaconsult.net/template/${UUID}`}
-          ></iframe>
+          {UUID ? (
+            <iframe
+              width="100%"
+              height="400"
+              src={`https://api.ramanchada.ideaconsult.net/template/${UUID}`}
+            ></iframe>
+          ) : (
+            <p className="previewPlaceholder">No preview yet</p>
+          )}
         </div>
       </div>
     </div>