Merge pull request #79 from Samagra-Development/dev

Dev

.gitpod.yml

@@ -75,3 +75,8 @@ ports:
     onOpen: ignore
     visibility: public
     description: Minio API
+
+  - port: 3560 
+    onOpen: ignore
+    visibility: public
+    description: Centro API

apps/wrapper/package.json

@@ -3,15 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
-    "xml-beautifier": "0.5.0",
-    "animate.css": "^4.1.1"
+    "xml-beautifier": "0.5.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,4 +38,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

apps/wrapper/src/App.css

@@ -2,7 +2,7 @@
   display: flex;
   height: 100vh;
   width: 100vw;
-  background: #2b2b2b;
+  background: var(--background);
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -12,12 +12,12 @@
 
 .heading {
   font-size: 5rem;
-  color: #ffc119;
+  color: var(--text);
 }
 
 .subtitle {
   font-size: 2rem;
-  color: #efefef;
+  color: var(--text-secondary);
   margin-top: -2rem;
   margin-bottom: 4rem;
 }
@@ -31,21 +31,80 @@
 .workflowBtns {
   height: 11rem;
   width: 11rem;
-  border: 1px solid #ffc119;
+  border: 1px solid var(--button-border);
   border-radius: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #efefef;
+  color: var(--text);
   font-size: 1.5rem;
   cursor: pointer;
   transition: all 0.3s ease-in;
   text-align: center;
 }
 
 .workflowBtns:hover {
-  background: #ffc119;
-  color: #000;
+  background: var(--button-hover-background);
+  color: var(--button-hover-text);
   transform: translateY(-5px);
-  box-shadow: #ffc119 0px 30px 60px -6px, #ffc119 0px 18px 36px -9px;
-}
+  box-shadow: var(--button-shadow);
+}
+
+.toggleButtonContainer {
+  position: fixed;
+  bottom: 0;
+  right: 12px;
+  color: var(--toggle-button-color);
+}
+.toggle-btn{
+  font-size: 35px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+}
+@media screen and (max-width: 600px) {
+  .btnContainer {
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    width: 98%;
+  }
+
+  .container {
+    min-height: 100vh;
+    height: 100%;
+  }
+
+  .heading {
+    font-size: 3rem;
+    width: 80%;
+    text-align: center;
+  }
+
+  .subtitle {
+    font-size: 1.5rem;
+    margin-bottom: 0;
+  }
+}
+
+.dark {
+  --background: #2b2b2b;
+  --text: #ffc119;
+  --text-secondary: #efefef;
+  --button-border: #ffc119;
+  --button-hover-background: #ffc119;
+  --button-hover-text: #000;
+  --button-shadow: 0px 30px 60px -6px, 0px 18px 36px -9px;
+  --toggle-button-color: #efefef;
+}
+
+.light {
+  --background: #f5f5f5;
+  --text: #2b2b2b;
+  --text-secondary: #777777;
+  --button-border: #2b2b2b;
+  --button-hover-background: #2b2b2b;
+  --button-hover-text: #fff;
+  --button-shadow: 0px 30px 60px -6px, 0px 18px 36px -9px;
+  --toggle-button-color: #2b2b2b;
+}

apps/wrapper/src/App.js

@@ -1,8 +1,18 @@
-import './App.css';
 import React, { useState, useEffect } from 'react';
+import "@fortawesome/fontawesome-free/css/all.min.css";
+
 import GenericForm from './components/GenericForm';
 
 function App() {
+  const [isDarkMode, setIsDarkMode] = useState(
+    () => JSON.parse(sessionStorage.getItem('theme')) ?? true
+  );
+
+  useEffect(() => {
+    sessionStorage.setItem('theme', JSON.stringify(isDarkMode));
+    console.log(isDarkMode)
+  }, [isDarkMode]);
+
   const [flows, setFlows] = useState([
     {
       name: 'Jumping Forms',
@@ -23,24 +33,41 @@ function App() {
       name: 'File Upload',
       config: 'workflow_first.json'
     }
-  ])
+  ]);
 
   const [selectedFlow, setSelectedFlow] = useState({});
 
   return (
-    <div className="App">
+    <div className={`App ${isDarkMode ? 'dark' : 'light'}`}>
+      <div className="toggleButtonContainer">
+        <span className='toggle-btn' onClick={() => setIsDarkMode(!isDarkMode)}>
+          {isDarkMode ? (
+            <i class="fa-solid fa-sun"></i>
+          ) : (
+            <i class="fa-solid fa-moon"></i>
+          )}
+        </span>
+      </div>
       <div className='container'>
-        {!Object.keys(selectedFlow).length ?
+        {!Object.keys(selectedFlow).length ? (
           <>
             <div className='heading animate__animated animate__fadeInDown'>Workflow Demo App</div>
             <div className='subtitle animate__animated animate__fadeInDown'>Please select one of the flows</div>
             <div className='btnContainer'>
-              {flows?.map(el => <div className='workflowBtns animate__animated animate__fadeIn' onClick={() => setSelectedFlow(el)}>{el.name}</div>)}
+              {flows?.map(el => (
+                <div
+                  className='workflowBtns animate__animated animate__fadeIn'
+                  onClick={() => setSelectedFlow(el)}
+                  key={el.name}
+                >
+                  {el.name}
+                </div>
+              ))}
             </div>
           </>
-          : <GenericForm {...{ selectedFlow, setSelectedFlow }} />
-        }
-
+        ) : (
+          <GenericForm {...{ selectedFlow, setSelectedFlow}} />
+        )}
       </div>
     </div>
   );

apps/wrapper/src/components/GenericForm/index.js

@@ -2,22 +2,29 @@ import React, { useState, useEffect, useRef } from 'react';
 import styles from './index.module.css';
 import beautify from "xml-beautifier";
 import { getPrefillXML, saveFormSubmission } from '../../api';
-
-const ENKETO_URL = process.env.REACT_APP_ENKETO_URL
-const FORM_MANAGER_URL = process.env.REACT_APP_FORM_MANAGER_URL
-const HASURA_URL = process.env.REACT_APP_HASURA_URL
+import "@fortawesome/fontawesome-free/css/all.min.css";
+const ENKETO_URL = process.env.REACT_APP_ENKETO_URL;
+const FORM_MANAGER_URL = process.env.REACT_APP_FORM_MANAGER_URL;
+const HASURA_URL = process.env.REACT_APP_HASURA_URL;
 
 const GenericForm = (props) => {
   const { selectedFlow, setSelectedFlow } = props;
   const formSpec = require(`../../${selectedFlow.config}`);
   const [formData, setFormData] = useState("");
   const [formDataJson, setFormDataJSON] = useState("");
   const [isXml, setIsXml] = useState(false);
+  const [isCopied, setIsCopied] = useState(false); // State to track if data is copied
+
+  const textAreaRef = useRef(null); // Ref for textarea element
 
   // Encode string method to URI
   const encodeFunction = (func) => {
     return encodeURIComponent(JSON.stringify(func));
   }
+  const [isDarkMode, setIsDarkMode] = useState(
+    () => JSON.parse(sessionStorage.getItem('theme')) ?? true
+  );
+
 
   const startingForm = formSpec.startingForm;
   const [fileUrls, setFileUrls] = useState({});
@@ -101,10 +108,19 @@ const GenericForm = (props) => {
     getForm();
   }, [])
 
+  const handleCopyToClipboard = () => {
+    textAreaRef.current.select();
+    document.execCommand("copy");
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
+  };
+
   return (
-    <div className={styles.container}>
-      <div className={styles.header + ' animate__animated animate__slideInLeft animate__faster'}>
-        <div onClick={() => setSelectedFlow({})}>Go Back</div>
+    <div className={`${styles.container} ${isDarkMode ? styles.dark : styles.light}`}>
+      <div className={`${styles.header} animate__animated animate__slideInLeft animate__faster`}>
+        <div onClick={() => setSelectedFlow({})} className={styles.back} >Go Back</div>
         <div>Workflow /{selectedFlow.name}</div>
       </div>
       {Object.keys(fileUrls)?.length > 0 && <div className={styles.imageLinks}>
@@ -113,10 +129,10 @@ const GenericForm = (props) => {
       </div>
       }
       {
-        selectedFlow.offline && <p className='animate__animated animate__fadeIn' style={{ color: '#fff', fontSize: '1.5rem' }}>Disable internet and try submitting the form</p>
+        selectedFlow.offline && <p className={`${styles.subDetails} animate__animated animate__fadeIn`}  style={{  fontSize: '1.5rem' }}>Disable internet and try submitting the form</p>
       }
       {
-        selectedFlow.submitToHasura && <p className='animate__animated animate__fadeIn' style={{ color: '#fff', fontSize: '1.5rem' }}>Submit the form and check <a style={{ color: '#ffc119' }} target="_blank" href={`${HASURA_URL}`}>Hasura</a></p>
+        selectedFlow.submitToHasura && <p className={`${styles.subDetails} animate__animated animate__fadeIn`}  style={{  fontSize: '1.5rem' }}>Submit the form and check <a style={{ color: '#ffc119' }} target="_blank" href={`${HASURA_URL}`}>Hasura</a></p>
       }
       <div className={styles.formContainer}>
         <iframe title='current-form'
@@ -126,15 +142,24 @@ const GenericForm = (props) => {
           }
         />
         <div className={styles.jsonResponse}>
+          <div className={styles.copyButtonContainer}>
+            <button className={`${styles.copyButton} ${isCopied ? styles.copied : ""}`} onClick={handleCopyToClipboard}>
+              <i className="fas fa-copy"></i>Copy
+            </button>
+            {isCopied && <span className={styles.copyButton}><i className="fas fa-check"></i>Copied</span>}
+          </div>
           <div className={styles.toggleBtn}>
-            <label class={styles.switch}>
+            <label className={styles.switch}>
               <input type="checkbox" value={isXml} onChange={e => handleFormView(e.target.checked)} />
-              <span class={styles.slider}></span>
+              <span className={styles.slider}></span>
             </label>
             {isXml ? <span className='animate__animated animate__fadeIn'>XML</span> : <span className='animate__animated animate__fadeIn'>JSON</span>}
           </div>
-          <textarea value={!isXml ? formData : formDataJson} className={styles.formText}>
-          </textarea>
+          <textarea
+            ref={textAreaRef}
+            value={!isXml ? formData : formDataJson}
+            className={styles.formText}
+          />
         </div>
       </div>
     </div>