Skip to content

Commit 51ace6e

Browse files
amit-s19amit-s19
committed
File upload, Offline capability, new fe changes
1 parent e525203 commit 51ace6e

File tree

6 files changed

+81
-31
lines changed

6 files changed

+81
-31
lines changed

‎apps/wrapper/src/App.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,12 @@ function App() {
1616
},
1717
{
1818
name: 'Offline Capabilities',
19-
config: 'workflow_4_config.json'
19+
config: 'workflow_first.json',
20+
offline: true
2021
},
2122
{
2223
name: 'File Upload',
23-
config: 'workflow_5_config.json'
24+
config: 'workflow_first.json'
2425
}
2526
])
2627

‎apps/wrapper/src/api/index.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,20 @@ export const saveFormSubmission = (data) => {
3939
variables: { object: data },
4040
};
4141
return makeHasuraCalls(query);
42+
};
43+
44+
export const getPrefillXML = async (form, onFormSuccessData, prefillXML, imageUrls) => {
45+
try {
46+
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(
47+
JSON.stringify(onFormSuccessData)
48+
)}`, {
49+
method: 'POST',
50+
headers: {},
51+
body: JSON.stringify({ prefillXML, imageUrls })
52+
})
53+
return await res.text();
54+
} catch (err) {
55+
console.log(err);
56+
return null;
57+
}
4258
};

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

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect, useRef } from 'react';
22
import styles from './index.module.css';
33
import beautify from "xml-beautifier";
4-
import { saveFormSubmission } from '../../api';
4+
import { getPrefillXML, saveFormSubmission } from '../../api';
55

66
const GITPOD_URL = process.env.REACT_APP_GITPOD_WORKSPACE_URL
77

@@ -17,18 +17,13 @@ const GenericForm = (props) => {
1717
return encodeURIComponent(JSON.stringify(func));
1818
}
1919

20-
const getFormURI = (form, ofsd, prefillSpec) => {
21-
// console.log(form, ofsd, prefillSpec);
22-
// return encodeURIComponent(`https://3006-samagradevelop-workflow-gkbrz650idv.ws-us89b.gitpod.io/prefill?form=${form}&onFormSuccessData=${encodeFunction(ofsd)}&prefillSpec=${encodeFunction(prefillSpec)}`);
23-
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)}`);
24-
}
25-
2620
const startingForm = formSpec.startingForm;
21+
const [fileUrls, setFileUrls] = useState({});
2722
const [formId, setFormId] = useState(startingForm);
2823
const [encodedFormSpec, setEncodedFormSpec] = useState(encodeURI(JSON.stringify(formSpec.forms[formId])));
2924
const [onFormSuccessData, setOnFormSuccessData] = useState(undefined);
3025
const [onFormFailureData, setOnFormFailureData] = useState(undefined);
31-
const [encodedFormURI, setEncodedFormURI] = useState(getFormURI(formId, formSpec.forms[formId].onFormSuccess, formSpec.forms[formId].prefill));
26+
const [encodedFormURI, setEncodedFormURI] = useState('');
3227
const formSubmitted = useRef(false);
3328

3429
useEffect(() => {
@@ -37,7 +32,8 @@ const GenericForm = (props) => {
3732
const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
3833
try {
3934
const { nextForm, formData, onSuccessData, onFailureData } = data;
40-
// console.log("data--->", data)
35+
console.log("data--->", data)
36+
if (data.fileURLs) setFileUrls(data.fileURLs)
4137

4238
if (data?.state != "ON_FORM_SUCCESS_COMPLETED" && formData) {
4339
setFormData(beautify(formData))
@@ -53,13 +49,15 @@ const GenericForm = (props) => {
5349
});
5450
formSubmitted.current = false;
5551
}
56-
if (nextForm.type === 'form') {
52+
if (nextForm?.type === 'form') {
5753
setFormId(nextForm.id);
5854
setOnFormSuccessData(onSuccessData);
5955
setOnFormFailureData(onFailureData);
6056
setEncodedFormSpec(encodeURI(JSON.stringify(formSpec.forms[formId])));
61-
setEncodedFormURI(getFormURI(nextForm.id, onSuccessData, formSpec.forms[nextForm.id].prefill));
62-
} else {
57+
let newForm = await getPrefillXML(nextForm.id, formSpec.forms[nextForm.id].onFormSuccess);
58+
console.log("new FORM", newForm)
59+
setEncodedFormURI(newForm);
60+
} else if (nextForm?.type == 'url') {
6361
window.location.href = nextForm.url;
6462
}
6563

@@ -92,12 +90,32 @@ const GenericForm = (props) => {
9290
return jsonRes?.data;
9391
}
9492

93+
const getForm = async () => {
94+
let prefilledForm = await getPrefillXML(startingForm, formSpec.forms[formId].onFormSuccess);
95+
setEncodedFormURI(prefilledForm)
96+
}
97+
98+
useEffect(() => {
99+
getForm();
100+
}, [])
101+
95102
return (
96103
<div className={styles.container}>
97-
<div className={styles.header}>
104+
<div className={styles.header + ' animate__animated animate__slideInLeft animate__faster'}>
98105
<div onClick={() => setSelectedFlow({})}>Go Back</div>
99106
<div>Workflow /{selectedFlow.name}</div>
100107
</div>
108+
{Object.keys(fileUrls)?.length > 0 && <div className={styles.imageLinks}>
109+
<p>Uploaded Images</p>
110+
{Object.keys(fileUrls)?.map(el => <a href={fileUrls[el].url} target="_blank">{fileUrls[el].url}</a>)}
111+
</div>
112+
}
113+
{
114+
selectedFlow.offline && <p className='animate__animated animate__fadeIn' style={{ color: '#fff', fontSize: '1.5rem' }}>Disable internet and try submitting the form</p>
115+
}
116+
{
117+
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>
118+
}
101119
<div className={styles.formContainer}>
102120
<iframe title='current-form'
103121
className={styles.odkForm}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,4 +120,21 @@ input:checked+.slider:before {
120120
flex-direction: column;
121121
align-items: center;
122122
color: #fff;
123+
}
124+
125+
.imageLinks {
126+
width: 94%;
127+
display: flex;
128+
flex-direction: column;
129+
align-items: flex-start;
130+
color: #fff;
131+
}
132+
133+
.imageLinks>p:nth-child(1) {
134+
font-size: 1.8rem;
135+
font-weight: 600;
136+
}
137+
138+
.imageLinks a {
139+
color:#fff;
123140
}

‎apps/wrapper/src/workflow_second.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"isSuccess": "async (formData) => { console.log('From isSuccess', formData.getElementsByTagName('reg_no')[0].textContent); return formData.getElementsByTagName('reg_no')[0].textContent === 'registration123'; }",
1818
"messageOnFailure": "Form submission failed",
1919
"messageOnSuccess": "Form submitted successfully or Maybe you are already registered",
20-
"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')); }",
20+
"onFormSuccess": "async (formData) => {console.log('form Success', formData) }",
2121
"onFormFailure": "async (formData) => { console.log(formData); }",
2222
"onSuccess": {
2323
"notificationMessage": "Form submitted successfully",

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,9 @@ export class AppController {
4545
@Inject(CACHE_MANAGER) private cacheManager: Cache,
4646
private readonly appService: AppService,
4747
private configService: ConfigService,
48-
) {}
48+
) { }
49+
50+
GITPOD_URL = this.configService.get('GITPOD_WORKSPACE_URL');
4951

5052
getLoginToken = () => {
5153
try {
@@ -188,9 +190,7 @@ export class AppController {
188190
);
189191
const instanceId = uuidv4();
190192
await this.cacheManager.set(instanceId, prefilledForm, 86400 * 10);
191-
return `${this.configService.get(
192-
'SERVER_BASR_URL',
193-
)}form/instance/${instanceId}`;
193+
return `${this.GITPOD_URL.slice(0, this.GITPOD_URL.indexOf('/') + 2) + "3006-" + this.GITPOD_URL.slice(this.GITPOD_URL.indexOf('/') + 2)}/form/instance/${instanceId}`;
194194
} else {
195195
return 'OK';
196196
}
@@ -263,31 +263,31 @@ export class AppController {
263263
console.log(file);
264264
const extension = file.originalname.split('.').pop();
265265
const fileName = uuidv4() + `.${extension}`;
266-
const tokenRes = await this.getLoginToken();
267-
const sessionRes: any = await this.getSessionToken(tokenRes);
266+
// const tokenRes = await this.getLoginToken();
267+
// const sessionRes: any = await this.getSessionToken(tokenRes);
268268

269-
console.log('sessionRes', sessionRes);
269+
// console.log('sessionRes', sessionRes);
270270

271271
const minioClient: Client = new Minio.Client({
272-
endPoint: 'cdn.samagra.io',
272+
endPoint: this.GITPOD_URL.slice(8),
273273
useSSL: true,
274-
accessKey: sessionRes?.accessKey,
275-
secretKey: sessionRes?.secretKey,
276-
sessionToken: sessionRes?.sessionToken,
274+
accessKey: this.configService.get('MINIO_USERNAME'),
275+
secretKey: this.configService.get('MINIO_PASSWORD')
277276
});
278277

279278
const metaData: ItemBucketMetadata = {
280279
'Content-Type': file.mimetype,
281280
};
282281

283282
minioClient.putObject(
284-
this.configService.get('MINIO_BUCKET_ID'),
283+
this.configService.get('MINIO_BUCKETNAME'),
285284
fileName,
286285
file.buffer,
287286
file.size,
288287
metaData,
289288
function (err, res) {
290289
if (err) {
290+
console.log(err)
291291
throw new HttpException(
292292
'Error uploading file',
293293
HttpStatus.BAD_REQUEST,
@@ -296,9 +296,7 @@ export class AppController {
296296
},
297297
);
298298

299-
const fileURL = `https://cdn.samagra.io/${this.configService.get(
300-
'MINIO_BUCKET_ID',
301-
)}/${fileName}`;
299+
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}`;
302300

303301
console.log('Uploaded File:', fileURL);
304302

0 commit comments

Comments
 (0)