diff --git a/src/frontend/e2e/01-create-new-project.spec.ts b/src/frontend/e2e/01-create-new-project.spec.ts index 184875f308..d3720df6da 100644 --- a/src/frontend/e2e/01-create-new-project.spec.ts +++ b/src/frontend/e2e/01-create-new-project.spec.ts @@ -8,10 +8,11 @@ test('create new project', async ({ browserName, page }) => { // (playwright.config.ts is configured to run all browsers by default) test.skip(browserName !== 'chromium', 'Test only for chromium!'); - // 1. Project Details Step await page.goto('/'); await page.getByRole('button', { name: '+ Create New Project' }).click(); await page.getByRole('button', { name: 'NEXT' }).click(); + + // 1. Project Details Step await expect(page.getByText('Project Name is Required.')).toBeVisible(); await expect(page.getByText('Short Description is Required.', { exact: true })).toBeVisible(); await expect(page.getByText('Description is Required.', { exact: true })).toBeVisible(); @@ -67,10 +68,10 @@ test('create new project', async ({ browserName, page }) => { await page.getByRole('button', { name: 'NEXT' }).click(); // 4. Map Features Step - const dataExtractRadio = await page.getByText('Use OSM map features'); + const dataExtractRadio = await page.getByText('Fetch data from OSM'); await dataExtractRadio.click(); await expect(dataExtractRadio).toBeChecked(); - await page.getByRole('button', { name: 'Generate Map Features' }).click(); + await page.getByRole('button', { name: 'Generate Map Data' }).click(); await page.getByRole('button', { name: 'NEXT' }).click(); // 5. Split Tasks Step diff --git a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx index f60ce8a627..cf1bb79a67 100644 --- a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx +++ b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx @@ -47,8 +47,8 @@ const FormUpdateTab = ({ projectId }) => {
{ - useDocumentTitle('Create Project: Map Features'); + useDocumentTitle('Create Project: Map Data'); const dispatch = useDispatch(); const navigate = useNavigate(); const [extractWays, setExtractWays] = useState(''); @@ -123,7 +123,7 @@ const DataExtract = ({ dispatch( CommonActions.SetSnackBar({ open: true, - message: 'Error generating map features.', + message: 'Error generating map data.', variant: 'error', duration: 2000, }), @@ -218,13 +218,13 @@ const DataExtract = ({ return (
-
Map Features
+
Map Data

You may either choose to use OSM data, or upload your own data for the mapping project. - The relevant map features that exist on OSM are imported based on the select map area.{' '} + The relevant map data that exist on OSM are imported based on the select map area.{' '} - You can use these map features to use the 'select from map' functionality from ODK that allows you to select - the feature to collect data for. + You can use these map data to use the 'select from map' functionality from ODK that allows you to + select the feature to collect data for. {' '} Additional datasets might be important if your survey consists of more than one feature to select. For @@ -242,7 +242,7 @@ const DataExtract = ({ >

{extractWays === 'osm_data_extract' && (
@@ -266,7 +266,7 @@ const ProjectDetailsForm = ({ flag }) => {
{ handleCustomChange('hasCustomTMS', !values.hasCustomTMS); @@ -277,7 +277,7 @@ const ProjectDetailsForm = ({ flag }) => { return; } dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 4 })); - navigate('/map-features'); + navigate('/map-data'); }; const { handleSubmit, @@ -116,8 +116,8 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
type="button" onClick={() => { dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues)); - toggleStep(2, '/upload-area'); + toggleStep(2, '/project-area'); }} className="fmtm-font-bold" /> diff --git a/src/frontend/src/components/createnewproject/SplitTasks.tsx b/src/frontend/src/components/createnewproject/SplitTasks.tsx index ff18d20019..85099e06d0 100644 --- a/src/frontend/src/components/createnewproject/SplitTasks.tsx +++ b/src/frontend/src/components/createnewproject/SplitTasks.tsx @@ -47,7 +47,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF { name: 'define_tasks', value: task_split_type.DIVIDE_ON_SQUARE, - label: 'Divide on square', + label: 'Divide into square tasks', disabled: false, }, { @@ -355,7 +355,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF type="button" onClick={() => { dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues)); - toggleStep(3, '/map-features'); + toggleStep(3, '/map-data'); }} className="fmtm-font-bold" /> diff --git a/src/frontend/src/components/createnewproject/UploadArea.tsx b/src/frontend/src/components/createnewproject/UploadArea.tsx index 549d2ce263..50913185eb 100644 --- a/src/frontend/src/components/createnewproject/UploadArea.tsx +++ b/src/frontend/src/components/createnewproject/UploadArea.tsx @@ -32,7 +32,7 @@ const uploadAreaOptions = [ ]; const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpload, setAdditionalFeature }) => { - useDocumentTitle('Create Project: Upload Area'); + useDocumentTitle('Create Project: Project Area'); const dispatch = useDispatch(); const navigate = useNavigate(); @@ -210,7 +210,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl return (
-
Upload Area
+
Project Area
You can choose to upload the AOI. Note: The file upload only supports .geojson format.
@@ -257,8 +257,8 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl

Draw a polygon on the map to plot the area

)} {uploadAreaSelection === 'upload_file' && ( - + <> + +

+ Total Area: {totalAreaSelection} +

+ )}
diff --git a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx index d35afb6736..aae5bb0e80 100644 --- a/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx +++ b/src/frontend/src/components/createnewproject/validation/DataExtractValidation.tsx @@ -28,7 +28,7 @@ function DataExtractValidation(values: ProjectValues) { } if (values.hasAdditionalFeature && !values.additionalFeature) { - errors.additionalFeature = 'Additional Feature is Required.'; + errors.additionalFeature = 'Supporting Dataset is Required.'; } return errors; diff --git a/src/frontend/src/components/createnewproject/validation/UploadAreaValidation.tsx b/src/frontend/src/components/createnewproject/validation/UploadAreaValidation.tsx index 9c07304173..0621cc0558 100644 --- a/src/frontend/src/components/createnewproject/validation/UploadAreaValidation.tsx +++ b/src/frontend/src/components/createnewproject/validation/UploadAreaValidation.tsx @@ -19,13 +19,13 @@ function UploadAreaValidation(values: ProjectValues) { const errors: ValidationErrors = {}; if (!values.uploadAreaSelection) { - errors.uploadAreaSelection = 'Select Upload Area Options.'; + errors.uploadAreaSelection = 'Select Upload Project Area Options'; } if (values.uploadAreaSelection === 'draw' && !values.drawnGeojson) { - errors.drawnGeojson = 'Drawing Area is Required.'; + errors.drawnGeojson = 'Drawing Area is Required'; } if (values.uploadAreaSelection === 'upload_file' && !values.uploadedAreaFile) { - errors.uploadedAreaFile = 'Uploaded Area File is Required.'; + errors.uploadedAreaFile = 'Uploaded Area File is Required'; } return errors; diff --git a/src/frontend/src/components/home/ExploreProjectCard.tsx b/src/frontend/src/components/home/ExploreProjectCard.tsx index cb5ff550c8..61335ea566 100755 --- a/src/frontend/src/components/home/ExploreProjectCard.tsx +++ b/src/frontend/src/components/home/ExploreProjectCard.tsx @@ -6,158 +6,98 @@ import { projectType } from '@/models/home/homeModel'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import { useAppSelector } from '@/types/reduxTypes'; +import Button from '@/components/common/Button'; //Explore Project Card Model to be rendered in home view export default function ExploreProjectCard({ data }: { data: projectType }) { const navigate = CoreModules.useNavigate(); const dispatch = CoreModules.useAppDispatch(); - const [shadowBox, setShadowBox] = React.useState(0); const defaultTheme = useAppSelector((state) => state.theme.hotTheme); - //on mounse enter an Element set shadow to 3 - const onHoverIn = () => { - setShadowBox(3); - }; - //on mounse enter an Element set shadow to default - const onHoverOut = () => { - setShadowBox(0); - }; - - //Inline styles mainly for overidding css - const cardInnerStyles: any = { - outlinedButton: { - width: 70, - height: 22, - marginTop: '5%', - position: 'absolute', - fontFamily: defaultTheme.typography.h3.fontFamily, - right: 6, - borderRadius: '0px', - }, - card: { - marginLeft: '0.1%', - marginRight: '0.1%', - marginTop: '0.7%', - width: `${100}%`, - cursor: 'pointer', - opacity: 0.9, - position: 'relative', - }, - location: { - icon: { - fontSize: 22, - }, - }, - button: { - marginTop: '1rem', - marginLeft: '2%', - padding: '0.5rem 1rem', - fontSize: defaultTheme.typography.h5.fontSize, - fontWeight: 'bold', - }, - }; - return ( - { const project: projectType = data; dispatch(HomeActions.SetSelectedProject(project)); navigate(`/project/${data.id}`); }} - style={cardInnerStyles.card} - sx={{ boxShadow: 0 }} - onMouseEnter={onHoverIn} - onMouseLeave={onHoverOut} - className="hover:fmtm-bg-red-50 hover:fmtm-shadow-xl fmtm-duration-500 fmtm-rounded-lg fmtm-border-[1px] fmtm-border-solid fmtm-border-[#706E6E] fmtm-bg-white fmtm-min-h-[22.5rem]" + className="hover:fmtm-bg-red-50 hover:fmtm-shadow-xl fmtm-duration-500 fmtm-rounded-lg fmtm-border-[1px] fmtm-border-solid fmtm-border-[#706E6E] fmtm-bg-white fmtm-p-4 fmtm-max-h-fit" > - -
-
-
- {data.organisation_logo ? ( -
- -
- ) : ( - - )} - - #{data.id} - -
- - {/*Project Info and description*/} - -

- {data.name} -

- -

- {data.description} -

-
- -

- {data?.location_str} -

+
+
+
+ {data.organisation_logo ? ( +
+
- + ) : ( + + )} + + #{data.id} +
-
- {/* Number of Contributors */} - - - {data.num_contributors} - - - - contributor{data.num_contributors === 1 ? '' : 's'} - - + {/*Project Info and description*/} + +

+ {data.name} +

- {/* Contribution Progress Bar */} - -
+

+ {data.description} +

+
+ +

+ {data?.location_str || '-'} +

+
+ +
+
+ {/* Number of Contributors */} + + + {data.num_contributors} + - {/* Start Mapping Button */} -
- { - // Prevent card click - e.stopPropagation(); - // Redirect without opening new tab - window.location.href = `/mapnow/${data.id}`; - }} + - Start Mapping - -
+ contributor{data.num_contributors === 1 ? '' : 's'} + + + + {/* Contribution Progress Bar */} +
- - + {/* Start Mapping Button */} +
+
); } diff --git a/src/frontend/src/components/home/HomePageFilters.tsx b/src/frontend/src/components/home/HomePageFilters.tsx index f26e435cfd..eea5b1064b 100755 --- a/src/frontend/src/components/home/HomePageFilters.tsx +++ b/src/frontend/src/components/home/HomePageFilters.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import windowDimention from '@/hooks/WindowDimension'; import CoreModules from '@/shared/CoreModules'; import AssetModules from '@/shared/AssetModules'; import Switch from '@/components/common/Switch'; @@ -18,19 +17,8 @@ const HomePageFilters = ({ onSearch, filteredProjectCount }: homePageFiltersProp const showMapStatus = useAppSelector((state) => state.home.showMapStatus); const homeProjectPagination = useAppSelector((state) => state.home.homeProjectPagination); - const { windowSize } = windowDimention(); - return ( - {/* Explore project typography in mobile size */} - - - EXPLORE PROJECTS - - - {/* Create New Project Button */}
@@ -61,6 +49,8 @@ const HomePageFilters = ({ onSearch, filteredProjectCount }: homePageFiltersProp

Show Map

dispatch(HomeActions.SetShowMapStatus(!showMapStatus))} /> diff --git a/src/frontend/src/components/home/ProjectListMap.tsx b/src/frontend/src/components/home/ProjectListMap.tsx index 270eeb22e0..496dcbe3ad 100644 --- a/src/frontend/src/components/home/ProjectListMap.tsx +++ b/src/frontend/src/components/home/ProjectListMap.tsx @@ -65,7 +65,7 @@ const ProjectListMap = () => { }; return ( -
+
Loading...
}> @@ -131,7 +131,7 @@ const routes = createBrowserRouter([ ), }, { - path: '/map-features', + path: '/map-data', element: ( Loading...
}> diff --git a/src/frontend/src/views/CreateNewProject.tsx b/src/frontend/src/views/CreateNewProject.tsx index 90fa1ecb93..a7381d00ff 100644 --- a/src/frontend/src/views/CreateNewProject.tsx +++ b/src/frontend/src/views/CreateNewProject.tsx @@ -38,13 +38,13 @@ const CreateNewProject = () => { case '/create-project': dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 1 })); break; - case '/upload-area': + case '/project-area': dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 2 })); break; case '/upload-survey': dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 3 })); break; - case '/map-features': + case '/map-data': dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 4 })); break; case '/split-tasks': @@ -60,7 +60,7 @@ const CreateNewProject = () => { switch (location.pathname) { case '/create-project': return ; - case '/upload-area': + case '/project-area': return ( { setCustomFormFile={setCustomFormFile} /> ); - case '/map-features': + case '/map-data': return ( { }, [paginationPage, debouncedSearch]); return ( -
+
{stateHome.homeProjectLoading == false ? ( -
-
+
+
{filteredProjectCards.length > 0 ? ( -
-
-
- {filteredProjectCards.map((value: projectType, index: number) => ( - - ))} -
+ <> +
+ {filteredProjectCards.map((value: projectType, index: number) => ( + + ))}
-
+
{ }} />
-
+ ) : ( { )} - {/*pagingation*/} - {/* - - */}
- - {/*
-
1-5 of 10
- - -
Jump to
- -
*/}
); };