Edit the Template

ideaconsult · Jan 31, 2024 · ee6e452 · ee6e452
1 parent cc0fc33
commit ee6e452
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>