Skip to content
GitLab
Commit c8a4107a authored by Amit Sharma's avatar Amit Sharma
Browse files

Initial App.js changes

parent c678e5f1
main dev feat/centro feature/formlistapi fix/remove-forms revert-67-contributeByGitpod
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 152 additions and 87 deletions
+152 -87
apps/wrapper/public/index.html
+ 1
− 1
View file @ c8a4107a
......@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Workflow Demo App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
apps/wrapper/src/App.css
+ 38
− 27
View file @ c8a4107a
.App {
text-align: center;
.container {
display: flex;
height: 100vh;
width: 100vw;
background: #2b2b2b;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem;
}
.App-logo {
height: 40vmin;
pointer-events: none;
.heading {
font-size: 5rem;
color: #ffc119;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
.subtitle {
font-size: 2rem;
color: #efefef;
margin-top: -2rem;
margin-bottom: 4rem;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
.btnContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
flex-direction: row;
gap: 2rem;
}
.App-link {
color: #61dafb;
.workflowBtns {
height: 8rem;
width: 8rem;
border: 1px solid #ffc119;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
color: #efefef;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease-in;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.workflowBtns:hover {
background: #ffc119;
color: #000;
transform: translateY(-5px);
box-shadow: #ffc119 0px 30px 60px -6px, #ffc119 0px 18px 36px -9px;
}
\ No newline at end of file
apps/wrapper/src/App.js
+ 36
− 55
View file @ c8a4107a
import logo from './logo.svg';
import './App.css';
import React, { useState, useEffect } from 'react';
import GenericForm from './components/GenericForm';
import formSpecJSON from "./formsNew.json";
function App() {
const formSpec = formSpecJSON;
const [isFirst, setIsFirst] = useState(true);
// Encode string method to URI
const encodeFunction = (func) => {
return encodeURIComponent(JSON.stringify(func));
}
const getFormURI = (form, ofsd, prefillSpec) => {
console.log(form, ofsd, prefillSpec);
return encodeURIComponent(`https://enketo-manager-ratings-tech.samagra.io/?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
}
const startingForm = formSpec.start;
const [formId, setFormId] = useState(startingForm);
const [encodedFormSpec, setEncodedFormSpec] = useState(encodeURI(JSON.stringify(formSpec.forms[formId])));
const [onFormSuccessData, setOnFormSuccessData] = useState(undefined);
const [onFormFailureData, setOnFormFailureData] = useState(undefined);
const [encodedFormURI, setEncodedFormURI] = useState(getFormURI(formId, formSpec.forms[formId].onSuccess, formSpec.forms[formId].prefill));
useEffect(() => {
// Manage onNext
window.addEventListener('message', function (e) {
const data = e.data;
try {
/* message = {
nextForm: "formID",
formData: {},
}
*/
const { nextForm, formData, onSuccessData, onFailureData } = JSON.parse(data);
console.log({ nextForm, formData, onSuccessData, onFailureData });
if (nextForm.type === 'form') {
setFormId(nextForm.id);
setOnFormSuccessData(onSuccessData);
setOnFormFailureData(onFailureData);
setEncodedFormSpec(encodeURI(JSON.stringify(formSpec.forms[formId])));
setEncodedFormURI(getFormURI(nextForm.id, onSuccessData, formSpec.forms[nextForm.id].prefill));
} else {
window.location.href = nextForm.url;
}
}
catch (e) {
// console.log(e)
}
});
}, []);
const [flows, setFlows] = useState([
{
name: 'Flow 1',
config: 'workflow_first.json'
},
{
name: 'Flow 2',
config: 'workflow_second.json'
},
{
name: 'Flow 3',
config: 'workflow_3_config.json'
},
{
name: 'Flow 4',
config: 'workflow_4_config.json'
},
{
name: 'Flow 5',
config: 'workflow_5_config.json'
}
])
const [selectedFlow, setSelectedFlow] = useState({});
return (
<div className="App">
<iframe title='current-form'
style={{ height: "100vh", width: "100vw" }}
src={
`http://localhost:8005/preview?formSpec=${encodedFormSpec}&xform=${encodedFormURI}`
<div className='container'>
{!Object.keys(selectedFlow).length ?
<>
<div className='heading'>Workflow Demo App</div>
<div className='subtitle'>Please select one of the flows</div>
<div className='btnContainer'>
{flows?.map(el => <div className='workflowBtns' onClick={() => setSelectedFlow(el)}>{el.name}</div>)}
</div>
</>
: <GenericForm {...{ selectedFlow }} />
}
/>
</div>
</div>
);
}
......
apps/wrapper/src/components/GenericForm/index.js 0 → 100644
+ 68
− 0
View file @ c8a4107a
import React, { useState, useEffect } from 'react';
import styles from './index.module.css';
const GenericForm = (props) => {
const { selectedFlow } = props;
const formSpec = require(`../../${selectedFlow.config}`);
const [isFirst, setIsFirst] = useState(true);
// Encode string method to URI
const encodeFunction = (func) => {
return encodeURIComponent(JSON.stringify(func));
}
const getFormURI = (form, ofsd, prefillSpec) => {
console.log(form, ofsd, prefillSpec);
return encodeURIComponent(`https://enketo-manager-ratings-tech.samagra.io/?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
}
const startingForm = formSpec.start;
const [formId, setFormId] = useState(startingForm);
const [encodedFormSpec, setEncodedFormSpec] = useState(encodeURI(JSON.stringify(formSpec.forms[formId])));
const [onFormSuccessData, setOnFormSuccessData] = useState(undefined);
const [onFormFailureData, setOnFormFailureData] = useState(undefined);
const [encodedFormURI, setEncodedFormURI] = useState(getFormURI(formId, formSpec.forms[formId].onSuccess, formSpec.forms[formId].prefill));
useEffect(() => {
// Manage onNext
window.addEventListener('message', function (e) {
const data = e.data;
try {
/* message = {
nextForm: "formID",
formData: {},
}
*/
const { nextForm, formData, onSuccessData, onFailureData } = JSON.parse(data);
console.log({ nextForm, formData, onSuccessData, onFailureData });
if (nextForm.type === 'form') {
setFormId(nextForm.id);
setOnFormSuccessData(onSuccessData);
setOnFormFailureData(onFailureData);
setEncodedFormSpec(encodeURI(JSON.stringify(formSpec.forms[formId])));
setEncodedFormURI(getFormURI(nextForm.id, onSuccessData, formSpec.forms[nextForm.id].prefill));
} else {
window.location.href = nextForm.url;
}
}
catch (e) {
// console.log(e)
}
});
}, []);
return (
<div className={styles.container}>
<div>ODK FORM</div>
<iframe title='current-form'
style={{ height: "100vh", width: "100vw" }}
src={
`http://localhost:8005/preview?formSpec=${encodedFormSpec}&xform=${encodedFormURI}`
}
/>
</div>
);
}
export default GenericForm;
apps/wrapper/src/components/GenericForm/index.module.css 0 → 100644
+ 3
− 0
View file @ c8a4107a
.container {
}
\ No newline at end of file
apps/wrapper/src/index.css
+ 3
− 1
View file @ c8a4107a
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
......
apps/wrapper/src/forms.json → apps/wrapper/src/workflow_first.json
+ 3
− 3
View file @ c8a4107a
{
"forms": {
"form1": {
"test": {
"skipOnSuccessMessage": true,
"submissionURL": "http://esamwad.samagra.io/api/v4/form/submit",
"name": "SampleForm",
"name": "Test Form",
"isSuccess": "async (formData) => { console.log('From isSuccess', formData.getElementsByTagName('reg_no')[0].textContent); return formData.getElementsByTagName('reg_no')[0].textContent === 'registration123'; }",
"messageOnFailure": "Form submission failed",
"messageOnSuccess": "Form submitted successfully or Maybe you are already registered",
......@@ -44,6 +44,6 @@
}
}
},
"startingForm": "form1",
"startingForm": "test",
"metaData": {}
}
\ No newline at end of file
apps/wrapper/src/formsNew.json → apps/wrapper/src/workflow_second.json
+ 0
− 0
View file @ c8a4107a
File moved
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment