feat: update form by injecting mandatory fields and validate it (#1763)

* feat: update form and validate it

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* feat: return file instead of bytes in response

* feat: return file instead of bytes in response

* fix(createProjectService): convert response file to blob then save in file format

* fix(createNewProject): update splittasks props, use validated custom file instead

* fix(selectForm): use of custom validated form instead of custom form

* fix(selectForm): on formValidation loading show loading status and disable next btn

* fix(selectForm): note add to left select category container

* build: update osm-fieldwork --> 0.16.0 for update_form capability

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: NSUWAL123 <suwalnishit@gmail.com>
Co-authored-by: spwoodcock <sam.woodcock@protonmail.com>

src/backend/app/projects/project_routes.py

@@ -40,6 +40,7 @@
 from loguru import logger as log
 from osm_fieldwork.data_models import data_models_path
 from osm_fieldwork.make_data_extract import getChoices
+from osm_fieldwork.update_form import update_xls_form
 from osm_fieldwork.xlsforms import xlsforms_path
 from sqlalchemy.orm import Session
 from sqlalchemy.sql import text
@@ -676,7 +677,19 @@ async def validate_form(form: UploadFile):
         )
 
     contents = await form.read()
-    return await central_crud.read_and_test_xform(BytesIO(contents), file_ext)
+    updated_file_bytes = update_xls_form(BytesIO(contents))
+
+    # open bytes again to avoid I/O error on closed bytes
+    form_data = BytesIO(updated_file_bytes.getvalue())
+
+    await central_crud.read_and_test_xform(updated_file_bytes, file_ext)
+
+    # Return the updated form as a StreamingResponse
+    return StreamingResponse(
+        form_data,
+        media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        headers={"Content-Disposition": f"attachment; filename={form.filename}"},
+    )
 
 
 @router.post("/{project_id}/generate-project-data")

src/backend/pyproject.toml

@@ -46,7 +46,7 @@ dependencies = [
     "pyjwt>=2.8.0",
     "async-lru>=2.0.4",
     "osm-login-python==2.0.0",
-    "osm-fieldwork==0.15.0",
+    "osm-fieldwork==0.16.0",
     "osm-rawdata==0.3.2",
     "fmtm-splitter==1.3.0",
 ]

src/frontend/src/api/CreateProjectService.ts

@@ -462,14 +462,17 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
         const formUploadFormData = new FormData();
         formUploadFormData.append('form', formUpload);
 
-        const getTaskSplittingResponse = await axios.post(url, formUploadFormData);
-        const resp: ValidateCustomFormResponse = getTaskSplittingResponse.data;
-        dispatch(CreateProjectActions.ValidateCustomForm(resp));
+        // response is in file format so we need to convert it to blob
+        const getTaskSplittingResponse = await axios.post(url, formUploadFormData, {
+          responseType: 'blob',
+        });
+        const resp = getTaskSplittingResponse.data;
+        dispatch(CreateProjectActions.SetValidatedCustomFile(new File([resp], 'form.xlsx', { type: resp.type })));
         dispatch(CreateProjectActions.ValidateCustomFormLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: JSON.stringify(resp.message),
+            message: 'Your Form is Valid',
             variant: 'success',
             duration: 2000,
           }),
@@ -479,7 +482,7 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: error?.response?.data?.detail || 'Something Went Wrong',
+            message: JSON.parse(await error?.response?.data.text())?.detail || 'Something Went Wrong',
             variant: 'error',
             duration: 5000,
           }),