Skip to content

Commit

Permalink
feat(createproject): dispatch action to set description that needs to…
Browse files Browse the repository at this point in the history 
… be focused when it's corresponding element is hovered
  • Loading branch information
@NSUWAL123
NSUWAL123 committed Dec 17, 2024
1 parent 399bc34 commit 80448cc
Show file tree
Hide file tree
Showing 5 changed files with 191 additions and 124 deletions.
38 changes: 26 additions & 12 deletions src/frontend/src/components/createnewproject/DataExtract.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,13 @@ const DataExtract = ({
setExtractWays(value);
}}
errorMsg={errors.dataExtractWays}
hoveredOption={(hoveredOption) =>
dispatch(
CreateProjectActions.SetDescriptionToFocus(
hoveredOption && hoveredOption === 'osm_data_extract' ? 'mapfeatures-osm' : null,
),
)
}
/>
{extractWays === 'osm_data_extract' && (
<Button
Expand Down Expand Up @@ -272,19 +279,26 @@ const DataExtract = ({
)}
{extractWays && (
<div className="fmtm-mt-4">
<CustomCheckbox
key="uploadAdditionalFeature"
label="Upload Additional Features"
checked={formValues?.hasAdditionalFeature}
onCheckedChange={(status) => {
handleCustomChange('hasAdditionalFeature', status);
handleCustomChange('additionalFeature', null);
dispatch(CreateProjectActions.SetAdditionalFeatureGeojson(null));
setAdditionalFeature(null);
<div
onMouseOver={() => {
dispatch(CreateProjectActions.SetDescriptionToFocus('mapfeatures-additional'));
}}
className="fmtm-text-black"
labelClickable
/>
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
<CustomCheckbox
key="uploadAdditionalFeature"
label="Upload Additional Features"
checked={formValues?.hasAdditionalFeature}
onCheckedChange={(status) => {
handleCustomChange('hasAdditionalFeature', status);
handleCustomChange('additionalFeature', null);
dispatch(CreateProjectActions.SetAdditionalFeatureGeojson(null));
setAdditionalFeature(null);
}}
className="fmtm-text-black"
labelClickable
/>
</div>
{formValues?.hasAdditionalFeature && (
<>
<FileInputComponent
Expand Down
121 changes: 68 additions & 53 deletions src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,52 +162,60 @@ const ProjectDetailsForm = ({ flag }) => {
<p className="fmtm-form-error fmtm-text-red-600 fmtm-text-sm fmtm-py-1">{errors.organisation_id}</p>
)}
</div>
{hasODKCredentials && (
<CustomCheckbox
key="defaultODKCredentials"
label="Use default ODK credentials"
checked={values.defaultODKCredentials}
onCheckedChange={() => {
handleCustomChange('defaultODKCredentials', !values.defaultODKCredentials);
}}
className="fmtm-text-black"
labelClickable={true}
/>
)}
{((!values.defaultODKCredentials && hasODKCredentials) || !hasODKCredentials) && (
<div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
<InputTextField
id="odk_central_url"
name="odk_central_url"
label="ODK Central URL"
value={values?.odk_central_url}
onChange={handleChange}
fieldType="text"
errorMsg={errors.odk_central_url}
required
/>
<InputTextField
id="odk_central_user"
name="odk_central_user"
label="ODK Central Email"
value={values?.odk_central_user}
onChange={handleChange}
fieldType="text"
errorMsg={errors.odk_central_user}
required
/>
<InputTextField
id="odk_central_password"
name="odk_central_password"
label="ODK Central Password"
value={values?.odk_central_password}
onChange={handleChange}
fieldType="password"
errorMsg={errors.odk_central_password}
required
<div
className="fmtm-flex fmtm-flex-col fmtm-gap-6"
onMouseOver={() => {
dispatch(CreateProjectActions.SetDescriptionToFocus('projectdetails-odk'));
}}
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
{hasODKCredentials && (
<CustomCheckbox
key="defaultODKCredentials"
label="Use default ODK credentials"
checked={values.defaultODKCredentials}
onCheckedChange={() => {
handleCustomChange('defaultODKCredentials', !values.defaultODKCredentials);
}}
className="fmtm-text-black"
labelClickable={true}
/>
</div>
)}
)}
{((!values.defaultODKCredentials && hasODKCredentials) || !hasODKCredentials) && (
<>
<InputTextField
id="odk_central_url"
name="odk_central_url"
label="ODK Central URL"
value={values?.odk_central_url}
onChange={handleChange}
fieldType="text"
errorMsg={errors.odk_central_url}
required
/>
<InputTextField
id="odk_central_user"
name="odk_central_user"
label="ODK Central Email"
value={values?.odk_central_user}
onChange={handleChange}
fieldType="text"
errorMsg={errors.odk_central_user}
required
/>
<InputTextField
id="odk_central_password"
name="odk_central_password"
label="ODK Central Password"
value={values?.odk_central_password}
onChange={handleChange}
fieldType="password"
errorMsg={errors.odk_central_password}
required
/>
</>
)}
</div>
<div>
<InputTextField
id="hashtags"
Expand All @@ -225,15 +233,22 @@ const ProjectDetailsForm = ({ flag }) => {
</p>
</div>
<div className="fmtm-flex fmtm-flex-col fmtm-gap-5">
<CustomCheckbox
key="hasCustomTMS"
label="Will you use a custom TMS basemap"
checked={values.hasCustomTMS}
onCheckedChange={() => {
handleCustomChange('hasCustomTMS', !values.hasCustomTMS);
<div
onMouseOver={() => {
dispatch(CreateProjectActions.SetDescriptionToFocus('projectdetails-tms'));
}}
className="fmtm-text-black"
/>
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
<CustomCheckbox
key="hasCustomTMS"
label="Will you use a custom TMS basemap"
checked={values.hasCustomTMS}
onCheckedChange={() => {
handleCustomChange('hasCustomTMS', !values.hasCustomTMS);
}}
className="fmtm-text-black"
/>
</div>
{values.hasCustomTMS && (
<InputTextField
id="custom_tms_url"
Expand Down
119 changes: 70 additions & 49 deletions src/frontend/src/components/createnewproject/SelectForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
<div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
<div className="fmtm-w-full fmtm-flex fmtm-gap-6 md:fmtm-gap-14 fmtm-flex-col md:fmtm-flex-row fmtm-h-full">
<form onSubmit={handleSubmit} className="fmtm-flex fmtm-flex-col lg:fmtm-w-[40%] fmtm-justify-between">
<div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
<div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
<div className="">
<CustomSelect
title="Select Survey Type"
Expand Down Expand Up @@ -119,57 +119,78 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
{`if uploading the final submissions to OSM.`}
</p>
</div>
<CustomCheckbox
key="uploadCustomXForm"
label="Upload a custom XLSForm instead"
checked={formValues.formWays === 'custom_form'}
onCheckedChange={(status) => {
if (status) {
handleCustomChange('formWays', 'custom_form');
} else {
handleCustomChange('formWays', 'existing_form');
}
<div
onMouseOver={() => {
dispatch(CreateProjectActions.SetDescriptionToFocus('selectform-customform'));
}}
className="fmtm-text-black"
labelClickable
disabled={!formValues.formCategorySelection}
/>
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
<CustomCheckbox
key="uploadCustomXForm"
label="Upload a custom XLSForm instead"
checked={formValues.formWays === 'custom_form'}
onCheckedChange={(status) => {
if (status) {
handleCustomChange('formWays', 'custom_form');
} else {
handleCustomChange('formWays', 'existing_form');
}
}}
className="fmtm-text-black"
labelClickable
disabled={!formValues.formCategorySelection}
/>
</div>
{formValues.formWays === 'custom_form' ? (
<div>
<p className="fmtm-text-base fmtm-mt-2">
Please extend upon the existing XLSForm for the selected category:
</p>
<p className="fmtm-text-base fmtm-mt-2">
<a
href={`${import.meta.env.VITE_API_URL}/helper/download-template-xlsform?category=${
formValues.formCategorySelection
}`}
target="_"
className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
>
Download Form
</a>
</p>
<p className="fmtm-text-base fmtm-mt-2">
<a
href={`https://xlsforms.fmtm.dev?url=${
import.meta.env.VITE_API_URL
}/helper/download-template-xlsform?category=${formValues.formCategorySelection}`}
target="_"
className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
>
Edit Interactively
</a>
</p>
<FileInputComponent
onChange={changeFileHandler}
onResetFile={resetFile}
customFile={customFormFile}
btnText="Select a Form"
accept=".xls,.xlsx,.xml"
fileDescription="*The supported file formats are .xlsx, .xls, .xml"
errorMsg={errors.customFormUpload}
/>
<div
onMouseOver={() => {
dispatch(CreateProjectActions.SetDescriptionToFocus('selectform-customform'));
}}
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
<p className="fmtm-text-base fmtm-mt-2">
Please extend upon the existing XLSForm for the selected category:
</p>
<p className="fmtm-text-base fmtm-mt-2">
<a
href={`${import.meta.env.VITE_API_URL}/helper/download-template-xlsform?category=${
formValues.formCategorySelection
}`}
target="_"
className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
>
Download Form
</a>
</p>
<p className="fmtm-text-base fmtm-mt-2">
<a
href={`https://xlsforms.fmtm.dev?url=${
import.meta.env.VITE_API_URL
}/helper/download-template-xlsform?category=${formValues.formCategorySelection}`}
target="_"
className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
>
Edit Interactively
</a>
</p>
</div>
<div
onMouseOver={() => {
dispatch(CreateProjectActions.SetDescriptionToFocus('selectform-selectform'));
}}
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
<FileInputComponent
onChange={changeFileHandler}
onResetFile={resetFile}
customFile={customFormFile}
btnText="Select a Form"
accept=".xls,.xlsx,.xml"
fileDescription="*The supported file formats are .xlsx, .xls, .xml"
errorMsg={errors.customFormUpload}
/>
</div>
{validateCustomFormLoading && (
<div className="fmtm-flex fmtm-items-center fmtm-gap-2 fmtm-mt-2">
<Loader2 className="fmtm-h-4 fmtm-w-4 fmtm-animate-spin fmtm-text-primaryRed" />
Expand Down
9 changes: 8 additions & 1 deletion src/frontend/src/components/createnewproject/SplitTasks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF
<div className="fmtm-flex fmtm-flex-col fmtm-gap-6 lg:fmtm-w-[40%] fmtm-justify-between">
<div>
<RadioButton
value={splitTasksSelection || null}
value={splitTasksSelection || ''}
topic="Select an option to split the task"
options={taskSplitOptions}
direction="column"
Expand All @@ -254,6 +254,13 @@ const SplitTasks = ({ flag, setGeojsonFile, customDataExtractUpload, additionalF
}
}}
errorMsg={errors.task_split_type}
hoveredOption={(hoveredOption) =>
dispatch(
CreateProjectActions.SetDescriptionToFocus(
hoveredOption ? `splittasks-${hoveredOption}` : null,
),
)
}
/>
<div className="fmtm-mt-5">
<p className="fmtm-text-gray-500">
Expand Down
28 changes: 19 additions & 9 deletions src/frontend/src/components/createnewproject/UploadArea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,11 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
}}
value={uploadAreaSelection}
errorMsg={errors.uploadAreaSelection}
hoveredOption={(hoveredOption) => {
dispatch(
CreateProjectActions.SetDescriptionToFocus(hoveredOption ? `uploadarea-${hoveredOption}` : null),
);
}}
/>
{uploadAreaSelection === 'draw' && (
<div>
Expand All @@ -263,15 +268,20 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
</div>
)}
{uploadAreaSelection === 'upload_file' && (
<FileInputComponent
customFile={geojsonFile}
onChange={changeFileHandler}
onResetFile={resetFile}
accept=".geojson, .json"
fileDescription="*The supported file format is geojson file."
btnText="Upload a Geojson"
errorMsg={errors.uploadedAreaFile}
/>
<div
onMouseOver={() => dispatch(CreateProjectActions.SetDescriptionToFocus('uploadarea-uploadgeojson'))}
onMouseLeave={() => dispatch(CreateProjectActions.SetDescriptionToFocus(null))}
>
<FileInputComponent
customFile={geojsonFile}
onChange={changeFileHandler}
onResetFile={resetFile}
accept=".geojson, .json"
fileDescription="*The supported file format is geojson file."
btnText="Upload a Geojson"
errorMsg={errors.uploadedAreaFile}
/>
</div>
)}
</div>
<div className="fmtm-flex fmtm-gap-5 fmtm-mx-auto fmtm-mt-10 fmtm-my-5">
Expand Down

0 comments on commit 80448cc

Please sign in to comment.