diff --git a/src/frontend/src/components/createproject/LoadingBar.tsx b/src/frontend/src/components/createnewproject/LoadingBar.tsx similarity index 100% rename from src/frontend/src/components/createproject/LoadingBar.tsx rename to src/frontend/src/components/createnewproject/LoadingBar.tsx diff --git a/src/frontend/src/components/createproject/BasemapSelection.tsx b/src/frontend/src/components/createproject/BasemapSelection.tsx deleted file mode 100644 index 571d58b205..0000000000 --- a/src/frontend/src/components/createproject/BasemapSelection.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import CoreModules from '@/shared/CoreModules.js'; -// import { SelectPicker } from 'rsuite'; -import { useNavigate } from 'react-router-dom'; - -const BasemapSelection: React.FC = () => { - const navigate = useNavigate(); - - const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); - - const imagerySource = ['OAM', 'Topo']; - const imagerySourceData = imagerySource.map((item) => ({ label: item, value: item })); - const mapTiles = ['mbtiles for ODK Collect', 'sqlitedb for Osmand']; - const mapTilesData = mapTiles.map((item) => ({ label: item, value: item })); - return ( - - - Imagery Source - {/* dispatch(CreateProjectActions.SetProjectDetails({ key: 'xform_title', value }))} - /> */} - Output Type - {/* dispatch(CreateProjectActions.SetProjectDetails({ key: 'splitting_algorithm', value }))} - /> */} - { - navigate('/'); - // onCreateProjectSubmission(); - }} - > - Submit - - - - ); -}; - -export default BasemapSelection; diff --git a/src/frontend/src/components/createproject/DataExtract.tsx b/src/frontend/src/components/createproject/DataExtract.tsx deleted file mode 100755 index 15dde7e1a1..0000000000 --- a/src/frontend/src/components/createproject/DataExtract.tsx +++ /dev/null @@ -1,326 +0,0 @@ -import React, { useEffect } from 'react'; -import enviroment from '@/environment'; -import CoreModules from '@/shared/CoreModules.js'; -import FormGroup from '@mui/material/FormGroup'; -import { FormCategoryService } from '@/api/CreateProjectService'; -import { useNavigate, Link } from 'react-router-dom'; -import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; -import { Grid, InputLabel, MenuItem, Select } from '@mui/material'; -import useForm from '@/hooks/useForm'; -//@ts-ignore -// import DefineAreaMap from '@/views/DefineAreaMap'; -import DefineAreaMap from '@/views//DefineAreaMap'; -import DataExtractValidation from '@/components/createproject/validation/DataExtractValidation'; - -// import { SelectPicker } from 'rsuite'; -let generateProjectLogIntervalCb: any = null; - -const DataExtract: React.FC = ({ - geojsonFile, - setGeojsonFile, - dataExtractFile, - setDataExtractFile, - setDataExtractFileValue, - lineExtractFile, - setLineExtractFile, - setLineExtractFileValue, -}) => { - const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); - const navigate = useNavigate(); - - const dispatch = CoreModules.useAppDispatch(); - // //dispatch function to perform redux state mutation - - const formCategoryList = CoreModules.useAppSelector((state) => state.createproject.formCategoryList); - // //we use use-selector from redux to get all state of formCategory from createProject slice - - const projectDetails = CoreModules.useAppSelector((state) => state.createproject.projectDetails); - // //we use use-selector from redux to get all state of projectDetails from createProject slice - - const selectExtractWaysList = ['Centroid', 'Polygon']; - const selectExtractWays = selectExtractWaysList.map((item) => ({ label: item, value: item })); - const dataExtractOptionsList = ['Data Extract Ways', 'Upload Custom Data Extract']; - const dataExtractOptions = dataExtractOptionsList.map((item) => ({ label: item, value: item })); - const formCategoryData = formCategoryList.map((item) => ({ label: item.title, value: item.title })); - // //we use use-selector from redux to get state of dividedTaskGeojson from createProject slice - - const submission = () => { - // const previousValues = location.state.values; - dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, ...values })); - navigate('/define-tasks'); - // navigate("/select-form", { replace: true, state: { values: values } }); - }; - - // Fetching form category list - useEffect(() => { - dispatch(FormCategoryService(`${import.meta.env.VITE_API_URL}/central/list-forms`)); - return () => { - clearInterval(generateProjectLogIntervalCb); - dispatch(CreateProjectActions.SetGenerateProjectLog(null)); - }; - }, []); - // END - - const { handleSubmit, handleCustomChange, values, errors }: any = useForm( - projectDetails, - submission, - DataExtractValidation, - ); - useEffect(() => { - if (values.data_extract_options === 'Data Extract Ways') { - setDataExtractFile(null); - setDataExtractFileValue(null); - setLineExtractFile(null); - setLineExtractFileValue(null); - } - }, [values.data_extract_options]); - - return ( - -
- - - - - - Form Category - - - {errors.xform_title && ( - - {errors.xform_title} - - )} - - - - Choose Data Extract - - - {errors.data_extract_options && ( - - {errors.data_extract_options} - - )} - - {/* Area Geojson File Upload For Create Project */} - {values.data_extract_options === `Upload Custom Data Extract` && ( - <> - - Upload {values.xform_title} - - { - setDataExtractFile(e.target.files[0]); - handleCustomChange('data_extractFile', e.target.files[0]); - }} - /> - {dataExtractFile?.name} - - {errors.data_extractFile && ( - - {errors.data_extractFile} - - )} - - - Upload Lines - - { - setLineExtractFile(e.target.files[0]); - handleCustomChange('line_extractFile', e.target.files[0]); - }} - /> - {lineExtractFile?.name} - - {errors.lineExtractFile && ( - - {errors.lineExtractFile} - - )} - - - )} - - {values.data_extract_options === 'Data Extract Ways' && ( - - - Data Extract Type - - - {errors.data_extractWays && ( - - {errors.data_extractWays} - - )} - - )} - - - - - - - - - {/* Previous Button */} - - - Previous - - - {/* END */} - - {/* Submit Button For Create Project on Area Upload */} - - } - variant="contained" - color="error" - > - Next - - - {/* END */} - - -
- - ); -}; -export default DataExtract; diff --git a/src/frontend/src/components/createproject/DefineTasks.tsx b/src/frontend/src/components/createproject/DefineTasks.tsx deleted file mode 100755 index 33644ac6a9..0000000000 --- a/src/frontend/src/components/createproject/DefineTasks.tsx +++ /dev/null @@ -1,340 +0,0 @@ -import React from 'react'; -import enviroment from '@/environment'; -import CoreModules from '@/shared/CoreModules'; -import AssetModules from '@/shared/AssetModules.js'; -import FormGroup from '@mui/material/FormGroup'; -import { GetDividedTaskFromGeojson, TaskSplittingPreviewService } from '@/api/CreateProjectService'; -import { useNavigate, Link } from 'react-router-dom'; -import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; -import { InputLabel, MenuItem, Select } from '@mui/material'; -//@ts-ignore -import DefineAreaMap from '@/views/DefineAreaMap'; -import useForm from '@/hooks/useForm'; -import DefineTaskValidation from '@/components/createproject/validation/DefineTaskValidation'; -import { useAppSelector } from '@/types/reduxTypes'; - -const alogrithmList = [ - { id: 1, value: 'Divide on Square', label: 'Divide on Square' }, - { id: 2, value: 'Choose Area as Tasks', label: 'Choose Area as Tasks' }, - { id: 3, value: 'Task Splitting Algorithm', label: 'Task Splitting Algorithm' }, -]; -const DefineTasks: React.FC = ({ geojsonFile, setGeojsonFile, dataExtractFile }) => { - const navigate = useNavigate(); - const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); - const drawnGeojson = CoreModules.useAppSelector((state) => state.createproject.drawnGeojson); - - // // const state:any = CoreModules.useAppSelector(state=>state.project.projectData) - // // console.log('state main :',state) - - // const { type } = windowDimention(); - // //get window dimension - - const dispatch = CoreModules.useAppDispatch(); - // //dispatch function to perform redux state mutation - - const projectDetails = useAppSelector((state) => state.createproject.projectDetails); - // //we use use-selector from redux to get all state of projectDetails from createProject slice - - const submission = () => { - // const previousValues = location.state.values; - if (formValues.splitting_algorithm === 'Divide on Square') { - generateTasksOnMap(); - } - dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, ...formValues })); - navigate('/select-form'); - }; - - const { - handleSubmit, - handleCustomChange, - values: formValues, - errors, - }: any = useForm(projectDetails, submission, DefineTaskValidation); - - const generateTasksOnMap = () => { - if (drawnGeojson) { - const drawnGeojsonString = JSON.stringify(drawnGeojson, null, 2); - const projectAreaBlob = new Blob([drawnGeojsonString], { type: 'application/json' }); - // Create a file object from the Blob - geojsonFile = new File([projectAreaBlob], 'data.json', { type: 'application/json' }); - } - dispatch( - GetDividedTaskFromGeojson(`${import.meta.env.VITE_API_URL}/projects/preview_split_by_square/`, { - geojson: geojsonFile, - dimension: formValues?.dimension, - }), - ); - }; - - const generateTaskWithSplittingAlgorithm = () => { - if (drawnGeojson) { - const drawnGeojsonString = JSON.stringify(drawnGeojson, null, 2); - const projectAreaBlob = new Blob([drawnGeojsonString], { type: 'application/json' }); - - // Create a file object from the Blob - const drawnGeojsonFile = new File([projectAreaBlob], 'data.json', { type: 'application/json' }); - dispatch( - TaskSplittingPreviewService( - `${import.meta.env.VITE_API_URL}/projects/task_split`, - drawnGeojsonFile, - dataExtractFile, - formValues?.no_of_buildings, - ), - ); - } else { - dispatch( - TaskSplittingPreviewService( - `${import.meta.env.VITE_API_URL}/projects/task_split`, - geojsonFile, - dataExtractFile, - formValues?.no_of_buildings, - ), - ); - } - }; - - // 'Use natural Boundary' - const inputFormStyles = () => { - return { - style: { - color: defaultTheme.palette.error.main, - fontFamily: defaultTheme.typography.fontFamily, - fontSize: defaultTheme.typography.fontSize, - }, // or className: 'your-class' - }; - }; - const dividedTaskGeojson = CoreModules.useAppSelector((state) => state.createproject.dividedTaskGeojson); - const parsedTaskGeojsonCount = dividedTaskGeojson?.features?.length || 1; - // // passing payloads for creating project from form whenever user clicks submit on upload area passing previous project details form aswell - const algorithmListData = alogrithmList; - const dividedTaskLoading = CoreModules.useAppSelector((state) => state.createproject.dividedTaskLoading); - const taskSplittingGeojsonLoading = CoreModules.useAppSelector( - (state) => state.createproject.taskSplittingGeojsonLoading, - ); - - return ( - -
- - - - Choose Splitting Algorithm - - - {errors.splitting_algorithm && ( - - {errors.splitting_algorithm} - - )} - - {formValues.splitting_algorithm === 'Divide on Square' && ( - - - Dimension (in metre) - - * - - - - - { - handleCustomChange('dimension', e.target.value); - }} - // onChange={(e) => dispatch(CreateProjectActions.SetProjectDetails({ key: 'dimension', value: e.target.value }))} - // helperText={errors.username} - InputProps={{ inputProps: { min: 9 } }} - FormHelperTextProps={inputFormStyles()} - /> - {errors.dimension && ( - - {errors.dimension} - - )} - - } - variant="contained" - color="error" - > - Generate Tasks - - - - )} - {formValues.splitting_algorithm === 'Task Splitting Algorithm' ? ( - <> - - Average No. of Building in Task - - * - - - - - { - handleCustomChange('no_of_buildings', e.target.value); - }} - // onChange={(e) => dispatch(CreateProjectActions.SetProjectDetails({ key: 'no_of_buildings', value: e.target.value }))} - // helperText={errors.username} - InputProps={{ inputProps: { min: 5 } }} - FormHelperTextProps={inputFormStyles()} - /> - {errors.no_of_buildings && ( - - {errors.no_of_buildings} - - )} - - } - variant="contained" - color="error" - > - Generate Tasks - - - - ) : null} - - {parsedTaskGeojsonCount ? ( - -

Total Tasks:

-

{parsedTaskGeojsonCount}

- - ) : null} - {/* END */} - - {/* Submit Button For Create Project on Area Upload */} - - {/* Previous Button */} - - - Previous - - - {/* END */} - - - - Next - - - - {/* END */} - -
- - - ); -}; -export default DefineTasks; diff --git a/src/frontend/src/components/createproject/DrawSvg.tsx b/src/frontend/src/components/createproject/DrawSvg.tsx deleted file mode 100644 index 04a647f4f9..0000000000 --- a/src/frontend/src/components/createproject/DrawSvg.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; - -const DrawSvg = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default DrawSvg; diff --git a/src/frontend/src/components/createproject/FormSelection.tsx b/src/frontend/src/components/createproject/FormSelection.tsx deleted file mode 100755 index c348b7782c..0000000000 --- a/src/frontend/src/components/createproject/FormSelection.tsx +++ /dev/null @@ -1,384 +0,0 @@ -import React, { useEffect, useRef } from 'react'; -import CoreModules from '@/shared/CoreModules'; -import FormGroup from '@mui/material/FormGroup'; -import { - CreateProjectService, - FormCategoryService, - GenerateProjectLog, - ValidateCustomForm, -} from '@/api/CreateProjectService'; -import { useNavigate, Link } from 'react-router-dom'; -import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; -import { Grid, InputLabel, MenuItem, Select } from '@mui/material'; -import AssetModules from '@/shared/AssetModules.js'; -import useForm from '@/hooks/useForm'; -import SelectFormValidation from '@/components/createproject/validation/SelectFormValidation'; -import { CommonActions } from '@/store/slices/CommonSlice'; -import LoadingBar from '@/components/createproject/LoadingBar'; -import environment from '@/environment'; -import { useAppSelector } from '@/types/reduxTypes'; - -// import { SelectPicker } from 'rsuite'; -let generateProjectLogIntervalCb: any = null; - -const FormSelection: React.FC = ({ - customFormFile, - setCustomFormFile, - customFormInputValue, - dataExtractFile, - lineExtractFile, - setLineExtractFile, -}) => { - const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); - const navigate = useNavigate(); - - const dispatch = CoreModules.useAppDispatch(); - // //dispatch function to perform redux state mutation - - const projectDetails = useAppSelector((state) => state.createproject.projectDetails); - // //we use use-selector from redux to get all state of projectDetails from createProject slice - - const selectFormWaysList = ['Use Existing Category', 'Upload a Custom Form']; - const selectFormWays = selectFormWaysList.map((item) => ({ label: item, value: item })); - const userDetails: any = CoreModules.useAppSelector((state) => state.login.loginToken); - // //we use use-selector from redux to get all state of loginToken from login slice - - const generateProjectLog: any = CoreModules.useAppSelector((state) => state.createproject.generateProjectLog); - // //we use use-selector from redux to get all state of loginToken from login slice - const generateQrSuccess: any = CoreModules.useAppSelector((state) => state.createproject.generateQrSuccess); - // //we use use-selector from redux to get all state of loginToken from login slice - const projectDetailsResponse = CoreModules.useAppSelector((state) => state.createproject.projectDetailsResponse); - // //we use use-selector from redux to get all state of projectDetails from createProject slice - - const dividedTaskGeojson = CoreModules.useAppSelector((state) => state.createproject.dividedTaskGeojson); - // //we use use-selector from redux to get state of dividedTaskGeojson from createProject slice - const projectDetailsLoading = CoreModules.useAppSelector((state) => state.createproject.projectDetailsLoading); - // //we use use-selector from redux to get state of dividedTaskGeojson from createProject slice - - // END - - const submission = () => { - const newDividedTaskGeojson = JSON.stringify(dividedTaskGeojson); - const parsedNewDividedTaskGeojson = JSON.parse(newDividedTaskGeojson); - const exparsedNewDividedTaskGeojson = JSON.stringify(parsedNewDividedTaskGeojson); - var newUpdatedTaskGeojsonFile = new File([exparsedNewDividedTaskGeojson], 'AOI.geojson', { - type: 'application/geo+json', - }); - const hashtags = projectDetails.hashtags; - const arrayHashtag = hashtags - .split('#') - .map((item) => item.trim()) - .filter(Boolean); - - // console.log(f,'file F'); - // setGeojsonFile(f); - dispatch( - CreateProjectService( - `${import.meta.env.VITE_API_URL}/projects/create_project`, - { - project_info: { - name: projectDetails.name, - short_description: projectDetails.short_description, - description: projectDetails.description, - }, - author: { - username: userDetails?.username || 'svcfmtm', - id: userDetails?.id || 20386219, - }, - odk_central: { - odk_central_url: projectDetails.odk_central_url, - odk_central_user: projectDetails.odk_central_user, - odk_central_password: projectDetails.odk_central_password, - }, - // dont send xform_title if upload custom form is selected - xform_title: projectDetails.form_ways === 'Upload a Form' ? null : projectDetails.xform_title, - dimension: projectDetails.dimension, - splitting_algorithm: projectDetails.splitting_algorithm, - form_ways: projectDetails.form_ways, - // "uploaded_form": projectDetails.uploaded_form, - data_extractWays: projectDetails.data_extractWays, - hashtags: arrayHashtag, - organisation_id: projectDetails.organisation_id, - }, - newUpdatedTaskGeojsonFile, - customFormFile, - dataExtractFile, - lineExtractFile, - ), - ); - // navigate("/select-form", { replace: true, state: { values: values } }); - }; - - // Fetching form category list - useEffect(() => { - dispatch(FormCategoryService(`${import.meta.env.VITE_API_URL}/central/list-forms`)); - return () => { - clearInterval(generateProjectLogIntervalCb); - generateProjectLogIntervalCb = null; - dispatch(CreateProjectActions.SetGenerateProjectLog(null)); - }; - }, []); - // END - - // Fetching form category list - useEffect(() => { - if (generateQrSuccess) { - if (generateProjectLogIntervalCb === null) { - dispatch( - GenerateProjectLog(`${import.meta.env.VITE_API_URL}/projects/generate-log/`, { - project_id: projectDetailsResponse?.id, - uuid: generateQrSuccess.task_id, - }), - ); - } - } - }, [generateQrSuccess]); - useEffect(() => { - if (generateQrSuccess && generateProjectLog?.status === 'FAILED') { - clearInterval(generateProjectLogIntervalCb); - dispatch( - CommonActions.SetSnackBar({ - open: true, - message: `QR Generation Failed. ${generateProjectLog?.message}`, - variant: 'error', - duration: 10000, - }), - ); - } else if (generateQrSuccess && generateProjectLog?.status === 'SUCCESS') { - clearInterval(generateProjectLogIntervalCb); - const encodedProjectId = environment.encode(projectDetailsResponse?.id); - navigate(`/project_details/${encodedProjectId}`); - dispatch( - CommonActions.SetSnackBar({ - open: true, - message: 'QR Generation Completed.', - variant: 'success', - duration: 2000, - }), - ); - dispatch(CreateProjectActions.SetGenerateProjectLog(null)); - } - if (generateQrSuccess && generateProjectLog?.status === 'PENDING') { - if (generateProjectLogIntervalCb === null) { - generateProjectLogIntervalCb = setInterval(() => { - dispatch( - GenerateProjectLog(`${import.meta.env.VITE_API_URL}/projects/generate-log/`, { - project_id: projectDetailsResponse?.id, - uuid: generateQrSuccess.task_id, - }), - ); - }, 2000); - } - } - }, [generateQrSuccess, generateProjectLog]); - // END - const renderTraceback = (errorText: string) => { - if (!errorText) { - return null; - } - - return errorText.split('\n').map((line, index) => ( -
- {index + 1}. - {line} -
- )); - }; - const divRef = useRef(null); - useEffect(() => { - if (!divRef?.current) return; - const myDiv: HTMLDivElement = divRef?.current; - myDiv.scrollTop = myDiv?.scrollHeight; - }); - - const { handleSubmit, handleCustomChange, values, errors }: any = useForm( - projectDetails, - submission, - SelectFormValidation, - ); - const parsedTaskGeojsonCount = - dividedTaskGeojson?.features?.length || - JSON?.parse(dividedTaskGeojson)?.features?.length || - projectDetails?.areaGeojson?.features?.length; - const totalSteps = dividedTaskGeojson?.features ? dividedTaskGeojson?.features?.length : parsedTaskGeojsonCount; - - useEffect(() => { - if (customFormFile) { - dispatch(ValidateCustomForm(`${import.meta.env.VITE_API_URL}/projects/validate_form`, customFormFile)); - } - }, [customFormFile]); - - return ( - -
- - - - - - Form Selection - - - {errors.form_ways && ( - - {errors.form_ways} - - )} - - - {values.form_ways === 'Upload a Custom Form' ? ( - <> - - Download Form Template{' '} - - - - - Upload .xls/.xlsx/.xml Form - - { - setCustomFormFile(e.target.files[0]); - }} - inputProps={{ accept: '.xml, .xls, .xlsx' }} - /> - {customFormFile?.name} - - {!values.uploaded_form && ( - - Form File is required. - - )} - - ) : null} - - - - {generateProjectLog ? ( - - - Status: - - {generateProjectLog.status} - - - - - ) : null} - {generateProjectLog ? ( - -
- {renderTraceback(generateProjectLog?.logs)} -
- - ) : null} - - - - - {/* Previous Button */} - - - Previous - - - {/* END */} - - {/* Submit Button For Create Project on Area Upload */} - - } - variant="contained" - color="error" - > - Submit - - - {/* END */} - - -
- - ); -}; -export default FormSelection; diff --git a/src/frontend/src/components/createproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createproject/ProjectDetailsForm.tsx deleted file mode 100755 index ae01c0296c..0000000000 --- a/src/frontend/src/components/createproject/ProjectDetailsForm.tsx +++ /dev/null @@ -1,435 +0,0 @@ -import React, { useEffect } from 'react'; -import CoreModules from '@/shared/CoreModules'; -import AssetModules from '@/shared/AssetModules'; -import { useNavigate } from 'react-router-dom'; -import useForm from '@/hooks/useForm'; -import CreateProjectValidation from '@/components/createproject/validation/CreateProjectValidation'; -import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; -import { OrganisationService } from '@/api/CreateProjectService'; -import { MenuItem, Select } from '@mui/material'; -import { createPopup } from '@/utilfunctions/createPopup'; -import { useAppSelector } from '@/types/reduxTypes'; - -const ProjectDetailsForm: React.FC = () => { - const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); - - const navigate = useNavigate(); - - const dispatch = CoreModules.useAppDispatch(); - //dispatch function to perform redux state mutation - - const projectDetails: any = useAppSelector((state) => state.createproject.projectDetails); - //we use use selector from redux to get all state of projectDetails from createProject slice - - const organisationListData: any = useAppSelector((state) => state.createproject.organisationList); - //we use use selector from redux to get all state of projectDetails from createProject slice - - const submission = () => { - // submitForm(); - dispatch(CreateProjectActions.SetIndividualProjectDetailsData(values)); - dispatch(CreateProjectActions.SetCreateProjectFormStep('upload-area')); - navigate('/upload-area', { replace: true, state: { values: values } }); - }; - - const { handleSubmit, handleCustomChange, values, errors }: any = useForm( - projectDetails, - submission, - CreateProjectValidation, - ); - - // Inject ODK vars if NODE_ENV=development (local dev) - useEffect(() => { - if (import.meta.env.MODE === 'development') { - handleCustomChange('odk_central_url', import.meta.env.VITE_ODK_CENTRAL_URL); - handleCustomChange('odk_central_user', import.meta.env.VITE_ODK_CENTRAL_USER); - handleCustomChange('odk_central_password', import.meta.env.VITE_ODK_CENTRAL_PASSWD); - } - }, []); - - const inputFormStyles = () => { - return { - style: { - color: defaultTheme.palette.error.main, - fontFamily: defaultTheme.typography.fontFamily, - fontSize: defaultTheme.typography.fontSize, - }, // or className: 'your-class' - }; - }; - // Changed OrganisationList Data into the Picker Component Format i.e label and value - const organisationList = organisationListData.map((item) => ({ label: item.name, value: item.id })); - - // User has switched back to the tab - const onFocus = () => { - dispatch(OrganisationService(`${import.meta.env.VITE_API_URL}/organisation/`)); - }; - useEffect(() => { - window.addEventListener('focus', onFocus); - onFocus(); - // Calls onFocus when the window first loads - return () => { - window.removeEventListener('focus', onFocus); - // window.removeEventListener("blur", onBlur); - }; - }, []); - - const hashtagPrefix = 'hotosm-fmtm '; - - // Checks if hashtag value starts with hotosm-fmtm' - const handleHashtagOnChange = (e) => { - let enteredText = e.target.value; - if (!enteredText.startsWith(hashtagPrefix)) { - handleCustomChange('hashtags', hashtagPrefix); - return; - } - handleCustomChange('hashtags', enteredText); - }; - - // Doesn't let the user to press 'Backspace' or 'Delete' if input value is 'hotosm-fmtm ' - const handleHashtagKeyPress = (e) => { - if ( - ((e.key === 'Backspace' || e.key === 'Delete') && values.hashtags === hashtagPrefix) || - (e.ctrlKey && e.key === 'Backspace') - ) { - e.preventDefault(); - } - }; - return ( - -
- - {/* Organization Dropdown For Create Project */} - - - - - Organization - - {/* */} - - * - - - {/* Organization */} - - - createPopup('Create Organization', 'createOrganisation?popup=true')} - sx={{ width: 'auto' }} - // disabled={qrcode == "" ? true : false} - color="info" - aria-label="download qrcode" - > - - - - {errors.organisation_id && ( - - {errors.organisation_id} - - )} - - - {/* END */} - - {/* Project Name Form Input For Create Project */} - - - Central ODK Url - - * - - - { - handleCustomChange('odk_central_url', e.target.value); - }} - helperText={errors.odk_central_url} - FormHelperTextProps={inputFormStyles()} - /> - {/* {errors.name} * */} - - {/* END */} - - {/* Project Name Form Input For Create Project */} - - - - Central ODK Email/Username - - - * - - - { - handleCustomChange('odk_central_user', e.target.value); - }} - autoComplete="on" - helperText={errors.odk_central_user} - FormHelperTextProps={inputFormStyles()} - /> - {/* {errors.name} * */} - - {/* END */} - - {/* Project Name Form Input For Create Project */} - - - Central ODK Password - - * - - - { - handleCustomChange('odk_central_password', e.target.value); - }} - helperText={errors.odk_central_password} - FormHelperTextProps={inputFormStyles()} - /> - {/* {errors.name} * */} - - {/* END */} - {/* Project Name Form Input For Create Project */} - - - Project Name - - * - - - { - handleCustomChange('name', e.target.value); - }} - helperText={errors.name} - FormHelperTextProps={inputFormStyles()} - /> - {/* {errors.name} * */} - - {/* END */} - - {/* Project Name Form Input For Create Project */} - - - Tags - - * - - - { - handleHashtagOnChange(e); - }} - onKeyDown={(e) => { - handleHashtagKeyPress(e); - }} - helperText={errors.hashtags} - FormHelperTextProps={inputFormStyles()} - /> - {/* {errors.name} * */} - - {/* END */} - - {/* Short Description Form Input For Create Project */} - - - Short Description - - * - - - { - handleCustomChange('short_description', e.target.value); - }} - multiline - rows={4} - sx={{ - '& .MuiOutlinedInput-root': { - '&.Mui-focused fieldset': { - borderColor: 'black', - }, - }, - }} - helperText={errors.short_description} - FormHelperTextProps={inputFormStyles()} - /> - - {/* END */} - - {/* Description Form Input For Create Project */} - - - Description - - * - - - { - handleCustomChange('description', e.target.value); - }} - multiline - rows={4} - sx={{ - '& .MuiOutlinedInput-root': { - '&.Mui-focused fieldset': { - borderColor: 'black', - }, - }, - }} - helperText={errors.description} - FormHelperTextProps={inputFormStyles()} - /> - - {/* END */} - - - {/* Form Submission Button For Create Project */} - - Next - - {/* END */} - - -
- - ); -}; -export default ProjectDetailsForm; diff --git a/src/frontend/src/components/createproject/UploadArea.tsx b/src/frontend/src/components/createproject/UploadArea.tsx deleted file mode 100755 index 6f51239c5f..0000000000 --- a/src/frontend/src/components/createproject/UploadArea.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import React, { useEffect } from 'react'; -import CoreModules from '@/shared/CoreModules'; -import FormControl from '@mui/material/FormControl'; -import FormGroup from '@mui/material/FormGroup'; -import { useNavigate, Link } from 'react-router-dom'; -import { CreateProjectActions } from '@/store/slices/CreateProjectSlice'; -import DrawSvg from '@/components/createproject/DrawSvg'; -// @ts-ignore -const DefineAreaMap = React.lazy(() => import('../../views/DefineAreaMap')); - -const UploadArea: React.FC = ({ geojsonFile, setGeojsonFile, setInputValue, inputValue }: any) => { - const navigate = useNavigate(); - const defaultTheme: any = CoreModules.useAppSelector((state) => state.theme.hotTheme); - const drawToggle = CoreModules.useAppSelector((state) => state.createproject.drawToggle); - const drawnGeojson = CoreModules.useAppSelector((state) => state.createproject.drawnGeojson); - const dispatch = CoreModules.useAppDispatch(); - //dispatch function to perform redux state mutation - - useEffect(() => { - dispatch(CreateProjectActions.SetDrawToggle(false)); - }, []); - - // passing payloads for creating project from form whenever user clicks submit on upload area passing previous project details form aswell - const onCreateProjectSubmission = () => { - console.log(drawnGeojson, 'drawnGeojson'); - console.log(geojsonFile, 'geojsonFile'); - - if (drawnGeojson) { - dispatch(CreateProjectActions.SetCreateProjectFormStep('select-form')); - navigate('/data-extract'); - } else if (!drawnGeojson && !geojsonFile) { - return; - } else { - dispatch(CreateProjectActions.SetCreateProjectFormStep('select-form')); - navigate('/data-extract'); - } - // dispatch(CreateProjectActions.SetIndividualProjectDetailsData({ ...projectDetails, areaGeojson: fileUpload?.[0], areaGeojsonfileName: fileUpload?.name })); - }; - - return ( - - {/* */} -
- - {/* Area Geojson File Upload For Create Project */} - - { - dispatch(CreateProjectActions.SetDrawToggle(!drawToggle)); - }} - > - - Draw - - - OR - - - Upload GEOJSON - - { - dispatch(CreateProjectActions.SetDividedTaskGeojson(null)); - setGeojsonFile(e.target.files[0]); - }} - inputProps={{ accept: '.geojson, .json' }} - /> - {geojsonFile?.name} - - {!drawnGeojson && !geojsonFile && ( - - Draw an AOI Or Upload a Geojson file. - - )} - - {/* END */} - - {/* Submit Button For Create Project on Area Upload */} - - {/* Previous Button */} - - - Previous - - - {/* END */} - - - { - onCreateProjectSubmission(); - }} - > - Next - - - - {/* END */} - -
- { - // dispatch(CreateProjectActions.SetDividedTaskGeojson(JSON.parse(geojson))); - dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson))); - // setGeojsonFile(JSON.parse(geojson)); - }} - /> - - ); -}; -export default UploadArea; diff --git a/src/frontend/src/components/createproject/validation/CreateProjectValidation.tsx b/src/frontend/src/components/createproject/validation/CreateProjectValidation.tsx deleted file mode 100755 index f1f8e3ebad..0000000000 --- a/src/frontend/src/components/createproject/validation/CreateProjectValidation.tsx +++ /dev/null @@ -1,63 +0,0 @@ -interface ProjectValues { - organisation_id: string; - name: string; - username: string; - id: string; - short_description: string; - description: string; - hashtags: string; - odk_central_url: string; - odk_central_user: string; - odk_central_password: string; -} -interface ValidationErrors { - organisation_id?: string; - name?: string; - username?: string; - id?: string; - short_description?: string; - description?: string; - hashtags?: string; - odk_central_url?: string; - odk_central_user?: string; - odk_central_password?: string; -} - -const regexForSymbol = /_/g; - -function CreateProjectValidation(values: ProjectValues) { - const errors: ValidationErrors = {}; - - if (!values?.organisation_id) { - errors.organisation_id = 'Organization is Required.'; - } - if (!values?.odk_central_url) { - errors.odk_central_url = 'ODK Central Url is Required.'; - } - if (!values?.odk_central_user) { - errors.odk_central_user = 'ODK Central User is Required.'; - } - if (!values?.odk_central_password) { - errors.odk_central_password = 'ODK Central Password is Required.'; - } - if (!values?.name) { - errors.name = 'Project Name is Required.'; - } - if (values?.name && regexForSymbol.test(values.name)) { - errors.name = 'Project Name should not contain _ .'; - } - if (!values?.short_description) { - errors.short_description = 'Short Description is Required.'; - } - if (!values?.hashtags) { - errors.hashtags = 'Tags is Required.'; - } - if (!values?.description) { - errors.description = 'Description is Required.'; - } - - console.log(errors); - return errors; -} - -export default CreateProjectValidation; diff --git a/src/frontend/src/components/createproject/validation/DataExtractValidation.tsx b/src/frontend/src/components/createproject/validation/DataExtractValidation.tsx deleted file mode 100644 index 6483130cd1..0000000000 --- a/src/frontend/src/components/createproject/validation/DataExtractValidation.tsx +++ /dev/null @@ -1,40 +0,0 @@ -interface ProjectValues { - xform_title: string; - form_ways: string; - data_extractWays: string; - data_extractFile: object; - data_extract_options: string; -} -interface ValidationErrors { - xform_title?: string; - form_ways?: string; - data_extractWays?: string; - data_extractFile?: string; - data_extract_options?: string; -} - -function DataExtractValidation(values: ProjectValues) { - const errors: ValidationErrors = {}; - - if (!values?.xform_title) { - errors.xform_title = 'Form Category is Required.'; - } - if (!values.data_extract_options) { - errors.data_extract_options = 'Select Data Extract Options.'; - } - if ( - values.data_extract_options && - values.data_extract_options === 'Upload Custom Data Extract' && - !values.data_extractFile - ) { - errors.data_extractFile = 'Data Extract File is Required.'; - } - if (values.data_extract_options && values.data_extract_options === 'Data Extract Ways' && !values.data_extractWays) { - errors.data_extractWays = 'Data Extract Ways is Required.'; - } - - console.log(errors); - return errors; -} - -export default DataExtractValidation; diff --git a/src/frontend/src/components/createproject/validation/DefineTaskValidation.tsx b/src/frontend/src/components/createproject/validation/DefineTaskValidation.tsx deleted file mode 100644 index 924f86e9c9..0000000000 --- a/src/frontend/src/components/createproject/validation/DefineTaskValidation.tsx +++ /dev/null @@ -1,35 +0,0 @@ -interface ProjectValues { - splitTaskOption: string; - dimension: number; - average_buildings_per_task: number; -} -interface ValidationErrors { - splitTaskOption?: string; - dimension?: string; - average_buildings_per_task?: string; -} - -function DefineTaskValidation(values: ProjectValues) { - const errors: ValidationErrors = {}; - - if (!values?.splitTaskOption) { - errors.splitTaskOption = 'Splitting Task Option is required.'; - } - if (values?.splitTaskOption === 'divide_on_square' && !values?.dimension) { - errors.dimension = 'Dimension is Required.'; - } - if (values?.splitTaskOption === 'divide_on_square' && values?.dimension && values.dimension < 9) { - errors.dimension = 'Dimension should be greater than 10 or equal to 10.'; - } - if (values?.splitTaskOption === 'task_splitting_algorithm' && !values?.average_buildings_per_task) { - errors.average_buildings_per_task = 'Average number of buildings per task is required.'; - } - if (values?.splitTaskOption === 'task_splitting_algorithm' && !values?.average_buildings_per_task) { - errors.average_buildings_per_task = 'Average number of buildings per task is required.'; - } - - console.log(errors); - return errors; -} - -export default DefineTaskValidation; diff --git a/src/frontend/src/components/createproject/validation/SelectFormValidation.tsx b/src/frontend/src/components/createproject/validation/SelectFormValidation.tsx deleted file mode 100644 index af4b0b2b97..0000000000 --- a/src/frontend/src/components/createproject/validation/SelectFormValidation.tsx +++ /dev/null @@ -1,24 +0,0 @@ -interface ProjectValues { - xform_title: string; - form_ways: string; -} -interface ValidationErrors { - xform_title?: string; - form_ways?: string; -} - -function SelectFormValidation(values: ProjectValues) { - const errors: ValidationErrors = {}; - - if (!values?.xform_title) { - errors.xform_title = 'Form Category is Required.'; - } - if (!values?.form_ways) { - errors.form_ways = 'Form Selection is Required.'; - } - - console.log(errors); - return errors; -} - -export default SelectFormValidation; diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx index 862be1588f..47ffe0e11d 100755 --- a/src/frontend/src/routes.jsx +++ b/src/frontend/src/routes.jsx @@ -6,7 +6,6 @@ import { import Home from '@/views/Home'; import Tabbed from '@/views/Tabbed'; import MainView from '@/views/MainView'; -import CreateProject from '@/views/CreateProject'; import EditProject from '@/views/EditProject'; import ProtectedRoute from '@/utilities/ProtectedRoute'; import NotFoundPage from '@/views/NotFound404'; @@ -172,78 +171,6 @@ const routes = createBrowserRouter([ ), }, - // { - // path: '/create-project', - // element: ( - // - // Loading...}> - // - // - // - // - // - // ), - // }, - // { - // path: '/upload-area', - // element: ( - // - // Loading...}> - // - // - // - // - // - // ), - // }, - // { - // path: '/data-extract', - // element: ( - // - // Loading...}> - // - // - // - // - // - // ), - // }, - // { - // path: '/define-tasks', - // element: ( - // - // Loading...}> - // - // - // - // - // - // ), - // }, - // { - // path: '/select-form', - // element: ( - // - // Loading...}> - // - // - // - // - // - // ), - // }, - { - path: '/basemap-selection', - element: ( - - Loading...}> - - - - - - ), - }, { path: '/create-project', element: ( diff --git a/src/frontend/src/shared/CoreModules.js b/src/frontend/src/shared/CoreModules.js index 51dc4b797c..59d0bcc877 100755 --- a/src/frontend/src/shared/CoreModules.js +++ b/src/frontend/src/shared/CoreModules.js @@ -69,7 +69,7 @@ import { import { Provider } from 'react-redux'; import { createSlice, configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; import { combineReducers } from 'redux'; -import LoadingBar from '@/components/createproject/LoadingBar'; +import LoadingBar from '@/components/createnewproject/LoadingBar'; import { TaskActions } from '@/store/slices/TaskSlice'; import { useAppDispatch, useAppSelector } from '@/types/reduxTypes'; import CustomizedModal from '@/utilities/CustomizedModal';