File upload, Offline capability, new fe changes

apps/wrapper/src/App.js

@@ -16,11 +16,12 @@ function App() {
     },
     {
       name: 'Offline Capabilities',
-      config: 'workflow_4_config.json'
+      config: 'workflow_first.json',
+      offline: true
     },
     {
       name: 'File Upload',
-      config: 'workflow_5_config.json'
+      config: 'workflow_first.json'
     }
   ])
 

apps/wrapper/src/api/index.js

@@ -39,4 +39,20 @@ export const saveFormSubmission = (data) => {
         variables: { object: data },
     };
     return makeHasuraCalls(query);
+};
+
+export const getPrefillXML = async (form, onFormSuccessData, prefillXML, imageUrls) => {
+    try {
+        let res = await fetch(`${GITPOD_URL.slice(0, GITPOD_URL.indexOf('/') + 2) + "3006-" + GITPOD_URL.slice(GITPOD_URL.indexOf('/') + 2)}/prefillXML?form=${form}&onFormSuccessData=${encodeURI(
+            JSON.stringify(onFormSuccessData)
+        )}`, {
+            method: 'POST',
+            headers: {},
+            body: JSON.stringify({ prefillXML, imageUrls })
+        })
+        return await res.text();
+    } catch (err) {
+        console.log(err);
+        return null;
+    }
 };
\ No newline at end of file

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

 import React, { useState, useEffect, useRef } from 'react';
 import styles from './index.module.css';
 import beautify from "xml-beautifier";
-import { saveFormSubmission } from '../../api';
+import { getPrefillXML, saveFormSubmission } from '../../api';
 
 const GITPOD_URL = process.env.REACT_APP_GITPOD_WORKSPACE_URL
 
@@ -17,18 +17,13 @@ const GenericForm = (props) => {
     return encodeURIComponent(JSON.stringify(func));
   }
 
-  const getFormURI = (form, ofsd, prefillSpec) => {
-    // console.log(form, ofsd, prefillSpec);
-    // return encodeURIComponent(`https://3006-samagradevelop-workflow-gkbrz650idv.ws-us89b.gitpod.io/prefill?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
-    return encodeURIComponent(`${GITPOD_URL.slice(0, GITPOD_URL.indexOf('/') + 2) + "3006-" + GITPOD_URL.slice(GITPOD_URL.indexOf('/') + 2)}/prefill?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
-  }
-
   const startingForm = formSpec.startingForm;
+  const [fileUrls, setFileUrls] = useState({});
   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].onFormSuccess, formSpec.forms[formId].prefill));
+  const [encodedFormURI, setEncodedFormURI] = useState('');
   const formSubmitted = useRef(false);
 
   useEffect(() => {
@@ -37,7 +32,8 @@ const GenericForm = (props) => {
       const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
       try {
         const { nextForm, formData, onSuccessData, onFailureData } = data;
-        // console.log("data--->", data)
+        console.log("data--->", data)
+        if (data.fileURLs) setFileUrls(data.fileURLs)
 
         if (data?.state != "ON_FORM_SUCCESS_COMPLETED" && formData) {
           setFormData(beautify(formData))
@@ -53,13 +49,15 @@ const GenericForm = (props) => {
           });
           formSubmitted.current = false;
         }
-        if (nextForm.type === 'form') {
+        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 {
+          let newForm = await getPrefillXML(nextForm.id, formSpec.forms[nextForm.id].onFormSuccess);
+          console.log("new FORM", newForm)
+          setEncodedFormURI(newForm);
+        } else if (nextForm?.type == 'url') {
           window.location.href = nextForm.url;
         }
 
@@ -92,12 +90,32 @@ const GenericForm = (props) => {
     return jsonRes?.data;
   }
 
+  const getForm = async () => {
+    let prefilledForm = await getPrefillXML(startingForm, formSpec.forms[formId].onFormSuccess);
+    setEncodedFormURI(prefilledForm)
+  }
+
+  useEffect(() => {
+    getForm();
+  }, [])
+
   return (
     <div className={styles.container}>
-      <div className={styles.header}>
+      <div className={styles.header + ' animate__animated animate__slideInLeft animate__faster'}>
         <div onClick={() => setSelectedFlow({})}>Go Back</div>
         <div>Workflow /{selectedFlow.name}</div>
       </div>
+      {Object.keys(fileUrls)?.length > 0 && <div className={styles.imageLinks}>
+        <p>Uploaded Images</p>
+        {Object.keys(fileUrls)?.map(el => <a href={fileUrls[el].url} target="_blank">{fileUrls[el].url}</a>)}
+      </div>
+      }
+      {
+        selectedFlow.offline && <p className='animate__animated animate__fadeIn' style={{ color: '#fff', 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={`${GITPOD_URL.slice(0, GITPOD_URL.indexOf('/') + 2) + "8080-" + GITPOD_URL.slice(GITPOD_URL.indexOf('/') + 2)}`}>Hasura</a></p>
+      }
       <div className={styles.formContainer}>
         <iframe title='current-form'
           className={styles.odkForm}

apps/wrapper/src/components/GenericForm/index.module.css

@@ -120,4 +120,21 @@ input:checked+.slider:before {
     flex-direction: column;
     align-items: center;
     color: #fff;
+}
+
+.imageLinks {
+    width: 94%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: #fff;
+}
+
+.imageLinks>p:nth-child(1) {
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+
+.imageLinks a {
+    color:#fff;
 }
\ No newline at end of file

apps/wrapper/src/workflow_second.json

@@ -17,7 +17,7 @@
       "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",
-      "onFormSuccess": "async (formData) => { return JSON.parse(decodeURIComponent('%7B%0A%20%20%20%20%20%20%20%20%22name%22%3A%20%22DEVA%22%2C%0A%20%20%20%20%20%20%20%20%22batch%22%3A%20%222021-2023%22%2C%0A%20%20%20%20%20%20%20%20%22id%22%3A%208%2C%0A%20%20%20%20%20%20%20%20%22DOB%22%3A%20%222005-03-04%22%2C%0A%20%20%20%20%20%20%20%20%22affiliationType%22%3A%20%22NCVT%22%2C%0A%20%20%20%20%20%20%20%20%22registrationNumber%22%3A%20%22ICA211021569832%22%2C%0A%20%20%20%20%20%20%20%20%22tradeName%22%3A%20%22Electrician%22%2C%0A%20%20%20%20%20%20%20%20%22iti%22%3A%207%2C%0A%20%20%20%20%20%20%20%20%22industry%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%22itiByIti%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%207%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22GITI%20Nagina%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22industryByIndustry%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22id%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Kaushal%20Bhawan%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22latitude%22%3A%2030.695753%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22longitude%22%3A%2076.872025%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22schedules%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22is_industry%22%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D')); }",
+      "onFormSuccess": "async (formData) => {console.log('form Success', formData) }",
       "onFormFailure": "async (formData) => { console.log(formData); }",
       "onSuccess": {
         "notificationMessage": "Form submitted successfully",

packages/form-manager/src/app.controller.ts

@@ -45,7 +45,9 @@ export class AppController {
     @Inject(CACHE_MANAGER) private cacheManager: Cache,
     private readonly appService: AppService,
     private configService: ConfigService,
-  ) {}
+  ) { }
+
+  GITPOD_URL = this.configService.get('GITPOD_WORKSPACE_URL');
 
   getLoginToken = () => {
     try {
@@ -188,9 +190,7 @@ export class AppController {
         );
         const instanceId = uuidv4();
         await this.cacheManager.set(instanceId, prefilledForm, 86400 * 10);
-        return `${this.configService.get(
-          'SERVER_BASR_URL',
-        )}form/instance/${instanceId}`;
+        return `${this.GITPOD_URL.slice(0, this.GITPOD_URL.indexOf('/') + 2) + "3006-" + this.GITPOD_URL.slice(this.GITPOD_URL.indexOf('/') + 2)}/form/instance/${instanceId}`;
       } else {
         return 'OK';
       }
@@ -263,17 +263,16 @@ export class AppController {
     console.log(file);
     const extension = file.originalname.split('.').pop();
     const fileName = uuidv4() + `.${extension}`;
-    const tokenRes = await this.getLoginToken();
-    const sessionRes: any = await this.getSessionToken(tokenRes);
+    // const tokenRes = await this.getLoginToken();
+    // const sessionRes: any = await this.getSessionToken(tokenRes);
 
-    console.log('sessionRes', sessionRes);
+    // console.log('sessionRes', sessionRes);
 
     const minioClient: Client = new Minio.Client({
-      endPoint: 'cdn.samagra.io',
+      endPoint: this.GITPOD_URL.slice(8),
       useSSL: true,
-      accessKey: sessionRes?.accessKey,
-      secretKey: sessionRes?.secretKey,
-      sessionToken: sessionRes?.sessionToken,
+      accessKey: this.configService.get('MINIO_USERNAME'),
+      secretKey: this.configService.get('MINIO_PASSWORD')
     });
 
     const metaData: ItemBucketMetadata = {
@@ -281,13 +280,14 @@ export class AppController {
     };
 
     minioClient.putObject(
-      this.configService.get('MINIO_BUCKET_ID'),
+      this.configService.get('MINIO_BUCKETNAME'),
       fileName,
       file.buffer,
       file.size,
       metaData,
       function (err, res) {
         if (err) {
+          console.log(err)
           throw new HttpException(
             'Error uploading file',
             HttpStatus.BAD_REQUEST,
@@ -296,9 +296,7 @@ export class AppController {
       },
     );
 
-    const fileURL = `https://cdn.samagra.io/${this.configService.get(
-      'MINIO_BUCKET_ID',
-    )}/${fileName}`;
+    const fileURL = `${this.GITPOD_URL.slice(0, this.GITPOD_URL.indexOf('/') + 2) + "9000-" + this.GITPOD_URL.slice(this.GITPOD_URL.indexOf('/') + 2)}/${this.configService.get('MINIO_BUCKETNAME')}/${fileName}`;
 
     console.log('Uploaded File:', fileURL);