Frontend XLSForm, Editor, ProjectSubmissions table Fix

src/frontend/src/api/CreateProjectService.ts

@@ -199,7 +199,7 @@ const GenerateProjectFilesService = (url: string, projectData: any, formUpload:
         if (projectData.form_ways === 'custom_form') {
           // TODO move form upload to a separate service / endpoint?
           const generateApiFormData = new FormData();
-          generateApiFormData.append('xls_form_upload', formUpload);
+          generateApiFormData.append('xlsform', formUpload);
           response = await axios.post(url, generateApiFormData, {
             headers: {
               'Content-Type': 'multipart/form-data',
@@ -512,17 +512,13 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
         const formUploadFormData = new FormData();
         formUploadFormData.append('xlsform', formUpload);
 
-        // response is in file format so we need to convert it to blob
-        const getTaskSplittingResponse = await axios.post(url, formUploadFormData, {
-          responseType: 'blob',
-        });
+        const getTaskSplittingResponse = await axios.post(url, formUploadFormData);
         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: 'Your Form is Valid',
+            message: JSON.stringify(resp.message),
             variant: 'success',
             duration: 2000,
           }),
@@ -532,7 +528,7 @@ const ValidateCustomForm = (url: string, formUpload: any) => {
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
-            message: JSON.parse(await error?.response?.data.text())?.detail || 'Something Went Wrong',
+            message: error?.response?.data?.detail || 'Something Went Wrong',
             variant: 'error',
             duration: 5000,
           }),

src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx

@@ -59,7 +59,7 @@ const SubmissionsTable = ({ toggleView }) => {
   const taskBoundaryData = useAppSelector((state) => state.project.projectTaskBoundries);
   const currentStatus = {
     ...taskBoundaryData?.[projectIndex]?.taskBoundries?.filter((task) => {
-      return task?.index === +filter.task_id;
+      return filter.task_id && task?.index === +filter.task_id;
     })?.[0],
   };
   const taskList = projectData[projectIndex]?.taskBoundries;
@@ -160,7 +160,7 @@ const SubmissionsTable = ({ toggleView }) => {
 
   const clearFilters = () => {
     setSearchParams({ tab: 'table' });
-    setFilter({ task_id: '', submitted_by: null, review_state: null, submitted_date: null });
+    setFilter({ task_id: null, submitted_by: null, review_state: null, submitted_date: null });
   };
 
   function getValueByPath(obj: any, path: string) {

src/frontend/src/components/common/Editor/Editor.tsx

@@ -57,8 +57,16 @@ const RichTextEditor = ({
     },
     editable,
   });
+
   const clearEditorContent = useAppSelector((state) => state?.project?.clearEditorContent);
 
+  // on first render set content to editor if initial content present
+  useEffect(() => {
+    if (editor && editorHtmlContent && editor.isEmpty) {
+      editor.commands.setContent(editorHtmlContent);
+    }
+  }, [editorHtmlContent, editor]);
+
   useEffect(() => {
     if (editable && clearEditorContent) {
       editor?.commands.clearContent(true);

src/frontend/src/components/createnewproject/SelectForm.tsx

@@ -23,7 +23,6 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
   const projectDetails = useAppSelector((state) => state.createproject.projectDetails);
   const drawnGeojson = useAppSelector((state) => state.createproject.drawnGeojson);
   const customFileValidity = useAppSelector((state) => state.createproject.customFileValidity);
-  const validatedCustomForm = useAppSelector((state) => state.createproject.validatedCustomForm);
   const validateCustomFormLoading = useAppSelector((state) => state.createproject.validateCustomFormLoading);
 
   const submission = () => {
@@ -62,12 +61,12 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
     const { files } = event.target;
     // Set the selected file as the customFormFile state
     setCustomFormFile(files[0]);
+    handleCustomChange('customFormUpload', files[0]);
   };
   const resetFile = (): void => {
     handleCustomChange('customFormUpload', null);
     dispatch(CreateProjectActions.SetCustomFileValidity(false));
     setCustomFormFile(null);
-    dispatch(CreateProjectActions.SetValidatedCustomFile(null));
   };
 
   useEffect(() => {
@@ -84,16 +83,10 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
     }
   }, [customFormFile]);
 
-  //add validated form to state
-  useEffect(() => {
-    if (!validatedCustomForm) return;
-    handleCustomChange('customFormUpload', validatedCustomForm);
-  }, [validatedCustomForm]);
-
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
-        <h6 className="fmtm-text-xl fm  tm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Category</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Category</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
             You may choose a pre-configured form, or upload a custom XLS form. Click{' '}

src/frontend/src/components/createnewproject/SplitTasks.tsx

@@ -19,7 +19,7 @@ import { task_split_type } from '@/types/enums';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
 import { taskSplitOptionsType } from '@/store/types/ICreateProject';
 
-const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalFeature }) => {
+const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalFeature, customFormFile }) => {
   useDocumentTitle('Create Project: Split Tasks');
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -131,7 +131,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF
         `${import.meta.env.VITE_API_URL}/projects/create-project?org_id=${projectDetails.organisation_id}`,
         projectData,
         taskAreaGeojsonFile,
-        projectDetails.customFormUpload,
+        customFormFile,
         customDataExtractUpload,
         projectDetails.dataExtractWays === 'osm_data_extract',
         additionalFeature,

src/frontend/src/store/slices/CreateProjectSlice.ts

@@ -53,7 +53,6 @@ export const initialState: CreateProjectStateTypes = {
   isFgbFetching: false,
   toggleSplittedGeojsonEdit: false,
   customFileValidity: false,
-  validatedCustomForm: null,
   additionalFeatureGeojson: null,
 };
 
@@ -223,9 +222,6 @@ const CreateProject = createSlice({
     SetCustomFileValidity(state, action) {
       state.customFileValidity = action.payload;
     },
-    SetValidatedCustomFile(state, action) {
-      state.validatedCustomForm = action.payload;
-    },
     SetAdditionalFeatureGeojson(state, action) {
       state.additionalFeatureGeojson = action.payload;
     },

src/frontend/src/store/types/ICreateProject.ts

@@ -37,7 +37,6 @@ export type CreateProjectStateTypes = {
   isFgbFetching: boolean;
   toggleSplittedGeojsonEdit: boolean;
   customFileValidity: boolean;
-  validatedCustomForm: any;
   additionalFeatureGeojson: GeoJSONFeatureTypes | null;
 };
 export type ValidateCustomFormResponse = {

src/frontend/src/views/CreateNewProject.tsx

@@ -95,6 +95,7 @@ const CreateNewProject = () => {
             setGeojsonFile={setGeojsonFile}
             customDataExtractUpload={customDataExtractUpload}
             additionalFeature={additionalFeature}
+            customFormFile={customFormFile}
           />
         );
       default: