Skip to content

Commit

Permalink
fix: create new project ui/ux improvements (#955)
Browse files Browse the repository at this point in the history 
* fix (fileInputComponent): replayIcon - dont show reset icon untile a file is uploaded

* fix (createNewProject) - uploadArea - accept geojson & json files only

* fix (Button) - added disabled for btnStyle condition

* fix (createNewProject): uploadArea - reset button disabled until AOI is not drawn

* fix (createNewProject): uploadArea - retained AOI and geojsonFile when user toggles stepform and switches radioButton, validation bug solved

* fix (createNewProject): selectForm - gap between customSelect and radioButton decreased

* fix (radioButton): text - fontSize reduced

* fix (createNewProject): uploadArea - fileInput file description changed

* fix (layerSwitcher): layerSwitcher button - button icon alignment to center
  • Loading branch information
@NSUWAL123
NSUWAL123 authored Nov 2, 2023
1 parent ebf2536 commit 0acbf1f
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 73 deletions.
30 changes: 15 additions & 15 deletions src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,31 +148,31 @@ const LayerSwitcherControl = ({ map, visible = 'osm' }) => {
}, [map, visible]);

const location = useLocation();
if (location.pathname.includes('project_details')) {
const olZoom = document.querySelector('.ol-zoom');
useEffect(() => {
const layerSwitcher = document.querySelector('.layer-switcher');

if (olZoom) {
olZoom.style.display = 'none';
}

if (layerSwitcher) {
layerSwitcher.style.right = '19px';
layerSwitcher.style.top = '250px';
layerSwitcher.style.zIndex = '1000';

const layerSwitcherButton = layerSwitcher.querySelector('button');
if (layerSwitcherButton) {
layerSwitcherButton.style.width = '40px';
layerSwitcherButton.style.height = '40px';
layerSwitcherButton.style.width = '38px';
layerSwitcherButton.style.height = '38px';
}

layerSwitcher.style.backgroundColor = 'white';
layerSwitcher.style.display = 'flex';
layerSwitcher.style.justifyContent = 'center';
layerSwitcher.style.alignItems = 'center';
}
}
if (location.pathname.includes('project_details')) {
const olZoom = document.querySelector('.ol-zoom');
if (olZoom) {
olZoom.style.display = 'none';
}
if (layerSwitcher) {
layerSwitcher.style.right = '19px';
layerSwitcher.style.top = '250px';
layerSwitcher.style.zIndex = '1000';
}
}
}, [map]);

return null;
};
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/components/common/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const Button = ({ btnText, btnType, type, onClick, disabled, className, count, d
type={type === 'submit' ? 'submit' : 'button'}
onClick={onClick}
className={`fmtm-text-lg fmtm-group fmtm-flex fmtm-items-center fmtm-gap-2 ${btnStyle(
isLoading ? 'disabled' : btnType,
isLoading || disabled ? 'disabled' : btnType,
className,
)}`}
disabled={disabled || isLoading}
Expand Down
20 changes: 11 additions & 9 deletions src/frontend/src/components/common/FileInputComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,17 @@ const FileInputComponent = ({
accept={accept}
/>
</label>
<div className="fmtm-rounded-full fmtm-p-1 hover:fmtm-bg-slate-100 fmtm-duration-300 fmtm-cursor-pointer">
<AssetModules.ReplayIcon
className="fmtm-text-gray-600"
onClick={() => {
onResetFile();
customFileRef.current.value = '';
}}
/>
</div>
{customFile && (
<div className="fmtm-rounded-full fmtm-p-1 hover:fmtm-bg-slate-100 fmtm-duration-300 fmtm-cursor-pointer">
<AssetModules.ReplayIcon
className="fmtm-text-gray-600"
onClick={() => {
onResetFile();
customFileRef.current.value = '';
}}
/>
</div>
)}
</div>
{errorMsg && <p className="fmtm-form-error fmtm-text-red-600 fmtm-text-sm fmtm-py-1">{errorMsg}</p>}

Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/components/common/RadioButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ interface RadioButtonProps {
const RadioButton: React.FC<RadioButtonProps> = ({ topic, options, direction, onChangeData, value, errorMsg }) => (
<div>
<div>
<p className="fmtm-text-xl fmtm-font-[600] fmtm-mb-3">{topic}</p>
<p className="fmtm-text-base fmtm-font-[600] fmtm-mb-2">{topic}</p>
</div>
<div className={`fmtm-flex ${direction === 'column' ? 'fmtm-flex-col' : 'fmtm-flex-wrap fmtm-gap-x-16'}`}>
{options.map((option) => {
Expand All @@ -38,7 +38,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({ topic, options, direction, on
/>
<label
htmlFor={option.value}
className="fmtm-text-lg fmtm-bg-white fmtm-text-gray-500 fmtm-mb-1 fmtm-cursor-pointer fmtm-flex fmtm-items-center fmtm-gap-2"
className="fmtm-text-base fmtm-bg-white fmtm-text-gray-500 fmtm-mb-[2px] fmtm-cursor-pointer fmtm-flex fmtm-items-center fmtm-gap-2"
>
<p>{option.label}</p>
<div>{option.icon && option.icon}</div>
Expand Down
73 changes: 36 additions & 37 deletions src/frontend/src/components/createnewproject/SelectForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,46 +81,45 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
</div>
<div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] lg:fmtm-h-[60vh] xl:fmtm-h-[58vh] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 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 fmtm-gap-6 lg:fmtm-w-[40%] fmtm-justify-between"
>
<div className="fmtm-w-[13.35rem]">
<CustomSelect
title="Select form category"
placeholder="Select form category"
data={formCategoryList}
dataKey="id"
valueKey="title"
label="title"
value={formValues.formCategorySelection}
onValueChange={(value) => {
handleCustomChange('formCategorySelection', value);
<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-w-[13.35rem]">
<CustomSelect
title="Select form category"
placeholder="Select form category"
data={formCategoryList}
dataKey="id"
valueKey="title"
label="title"
value={formValues.formCategorySelection}
onValueChange={(value) => {
handleCustomChange('formCategorySelection', value);
}}
errorMsg={errors.formCategorySelection}
/>
</div>
<RadioButton
topic="You may choose to use Existing form or upload your own xlsx form"
options={osmFeatureTypeOptions}
direction="column"
value={formValues.formWays}
onChangeData={(value) => {
handleCustomChange('formWays', value);
}}
errorMsg={errors.formCategorySelection}
errorMsg={errors.formWays}
/>
{formValues.formWays === 'custom_form' ? (
<FileInputComponent
onChange={changeFileHandler}
onResetFile={resetFile}
customFile={customFormFile}
btnText="Select a Form"
accept=".xlsx"
fileDescription="*The supported file formats are .xlsx, .xls"
errorMsg={errors.customFormUpload}
/>
) : null}
</div>
<RadioButton
topic="You may choose to use Existing form or upload your own xlsx form"
options={osmFeatureTypeOptions}
direction="column"
value={formValues.formWays}
onChangeData={(value) => {
handleCustomChange('formWays', value);
}}
errorMsg={errors.formWays}
/>
{formValues.formWays === 'custom_form' ? (
<FileInputComponent
onChange={changeFileHandler}
onResetFile={resetFile}
customFile={customFormFile}
btnText="Select a Form"
accept=".xlsx"
fileDescription="*The supported file formats are .xlsx, .xls"
errorMsg={errors.customFormUpload}
/>
) : null}
<div className="fmtm-flex fmtm-gap-5 fmtm-mx-auto fmtm-mt-10 fmtm-my-5">
<Button
btnText="PREVIOUS"
Expand Down
24 changes: 15 additions & 9 deletions src/frontend/src/components/createnewproject/UploadArea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
// }
// };

useEffect(() => {
setGeojsonFile(null);
dispatch(CreateProjectActions.SetDrawnGeojson(null));
dispatch(CreateProjectActions.SetTotalAreaSelection(null));
}, [uploadAreaSelection]);
// useEffect(() => {
// setGeojsonFile(null);
// dispatch(CreateProjectActions.SetDrawnGeojson(null));
// dispatch(CreateProjectActions.SetTotalAreaSelection(null));
// }, [uploadAreaSelection]);
const convertFileToGeojson = async (file) => {
if (!file) return;
const fileReader = new FileReader();
Expand Down Expand Up @@ -97,10 +97,14 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
handleCustomChange('uploadedAreaFile', files[0].name);
setGeojsonFile(files[0]);
convertFileToGeojson(files[0]);
handleCustomChange('drawnGeojson', null);
dispatch(CreateProjectActions.SetTotalAreaSelection(null));
};

const resetFile = () => {
setGeojsonFile(null);
handleCustomChange('uploadedAreaFile', null);
handleCustomChange('drawnGeojson', null);
dispatch(CreateProjectActions.SetDrawnGeojson(null));
dispatch(CreateProjectActions.SetTotalAreaSelection(null));
};
Expand Down Expand Up @@ -140,15 +144,16 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
/>
{uploadAreaSelection === 'draw' && (
<div>
<p className="fmtm-text-gray-700 fmtm-pt-5 fmtm-pb-3">Draw a polygon on the map to plot the area</p>
<p className="fmtm-text-gray-700 fmtm-pt-5 fmtm-pb-5">Draw a polygon on the map to plot the area</p>
<Button
btnText="Click to Reset"
btnType="primary"
type="button"
onClick={() => resetFile()}
className=""
disabled={drawnGeojson && !geojsonFile ? false : true}
/>
<p className="fmtm-text-gray-700 fmtm-pt-8">
<p className="fmtm-text-gray-700 fmtm-mt-5">
Total Area: <span className="fmtm-font-bold">{totalAreaSelection}</span>
</p>
{errors.drawnGeojson && (
Expand All @@ -161,8 +166,8 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
customFile={geojsonFile}
onChange={changeFileHandler}
onResetFile={resetFile}
accept="*.geojson, *.json"
fileDescription="*The supported file formats are zipped shapefile, geojson or kml files."
accept=".geojson, .json"
fileDescription="*The supported file format is geojson file."
btnText="Upload a Geojson"
errorMsg={errors.uploadedAreaFile}
/>
Expand Down Expand Up @@ -219,6 +224,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile }) => {
handleCustomChange('drawnGeojson', geojson);
dispatch(CreateProjectActions.SetDrawnGeojson(JSON.parse(geojson)));
dispatch(CreateProjectActions.SetTotalAreaSelection(area));
setGeojsonFile(null);
}}
/>
</div>
Expand Down

0 comments on commit 0acbf1f

Please sign in to comment.