From 5ac3719dcf487b25f488e1e5d24202918e66edd2 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Tue, 13 Jul 2021 13:22:20 +0200 Subject: [PATCH 01/22] planning area settings options --- app/layout/projects/new/form/component.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 2e75f134a5..d1bec246ef 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -31,7 +31,9 @@ import ProjectFormProps from './types'; import { DEFAULT_AREA } from './constants'; const ProjectForm: React.FC = () => { - const [hasPlanningArea, setHasPlanningArea] = useState(false); + const [hasPlanningArea, setHasPlanningArea] = useState(null); + + console.log({ hasPlanningArea }); const { addToast } = useToasts(); const { push } = useRouter(); const { data: organizationsData } = useOrganizations(); @@ -148,11 +150,11 @@ const ProjectForm: React.FC = () => { {/* TEMPORARILY HIDDEN, it will be implemented in the future */} -
+
- {!hasPlanningArea && ( + {hasPlanningArea !== null && !hasPlanningArea && ( From 93aa78e31cbd00719a7ac3b166649cfb419e8db4 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Tue, 13 Jul 2021 16:54:04 +0200 Subject: [PATCH 02/22] add uploading btn to new project form --- .../new/form/buttons/uploading/component.tsx | 280 ++++++++++++++++++ .../new/form/buttons/uploading/index.ts | 1 + app/layout/projects/new/form/component.tsx | 85 +++--- 3 files changed, 321 insertions(+), 45 deletions(-) create mode 100644 app/layout/projects/new/form/buttons/uploading/component.tsx create mode 100644 app/layout/projects/new/form/buttons/uploading/index.ts diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx new file mode 100644 index 0000000000..14b02c6822 --- /dev/null +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -0,0 +1,280 @@ +import React, { + useCallback, useEffect, useMemo, useState, +} from 'react'; + +import cx from 'classnames'; + +import Button from 'components/button'; +import InfoButton from 'components/info-button'; +import Icon from 'components/icon'; + +import { Form as FormRFF } from 'react-final-form'; + +import { useRouter } from 'next/router'; +import { useSelector, useDispatch } from 'react-redux'; +import { getScenarioSlice } from 'store/slices/scenarios/edit'; + +import { useDropzone } from 'react-dropzone'; +import { useToasts } from 'hooks/toast'; +import { useUploadScenarioPU } from 'hooks/scenarios'; + +import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite'; +import Loading from 'components/loading'; + +export interface AnalysisAdjustUploadingProps { + type: string; + selected: boolean; + onSelected: (s: string) => void; +} + +export const AnalysisAdjustUploading: React.FC = ({ + type, + selected, + onSelected, +}: AnalysisAdjustUploadingProps) => { + const [loading, setLoading] = useState(false); + const { addToast } = useToasts(); + const { query } = useRouter(); + const { sid } = query; + + const scenarioSlice = getScenarioSlice(sid); + const { setUploading, setUploadingValue } = scenarioSlice.actions; + + const dispatch = useDispatch(); + const { uploadingValue } = useSelector((state) => state[`/scenarios/${sid}/edit`]); + + const INITIAL_VALUES = useMemo(() => { + return { + type, + uploadingValue, + }; + }, [type, uploadingValue]); + + const uploadScenarioPUMutation = useUploadScenarioPU({ + requestConfig: { + method: 'POST', + }, + }); + + // Effects + useEffect(() => { + if (selected) { + dispatch(setUploading(true)); + } + + if (!selected) { + dispatch(setUploading(false)); + dispatch(setUploadingValue(null)); + } + + // Unmount + return () => { + dispatch(setUploading(false)); + dispatch(setUploadingValue(null)); + }; + }, [selected]); // eslint-disable-line + + const onDropAccepted = async (acceptedFiles) => { + setLoading(true); + const f = acceptedFiles[0]; + + const data = new FormData(); + data.append('file', f); + + uploadScenarioPUMutation.mutate({ id: `${sid}`, data }, { + onSuccess: ({ data: { data: g } }) => { + setLoading(false); + + addToast('success-upload-shapefile', ( + <> +

Success!

+

Shapefile uploaded

+ + ), { + level: 'success', + }); + + dispatch(setUploadingValue(g)); + console.info('Shapefile uploaded', g); + }, + onError: () => { + setLoading(false); + addToast('error-upload-shapefile', ( + <> +

Error!

+

Shapefile could not be uploaded

+ + ), { + level: 'error', + }); + }, + }); + }; + + const onDropRejected = (rejectedFiles) => { + const r = rejectedFiles[0]; + const { errors } = r; + + addToast('drop-error', ( + <> +

Error!

+
    + {errors.map((e) => ( +
  • {e.message}
    • + ))} +
+ + ), { + level: 'error', + }); + }; + + const { + getRootProps, + getInputProps, + isDragActive, + isDragAccept, + isDragReject, + } = useDropzone({ + // accept: 'image/*', + multiple: false, + maxSize: 3000000, + onDropAccepted, + onDropRejected, + }); + // Callbacks + const onSubmit = useCallback((values) => { + // Save current drawn shape + console.info(values); + }, []); + + return ( + + {({ handleSubmit }) => ( +
+
onSelected('uploading')} + > +
+
+ Upload shapefile +
+ + {!selected && ( + + )} + + {selected && ( +
+ + + + {/* */} +
+ )} +
+ + {selected && ( +
+
+ + +

+ Drag and drop your + {' '} + polygon data file + {' '} + or click here to upload +

+ +

{'Recommended file size < 1 MB'}

+ + +
+ +

+ Learn more about supported file formats + + +

+

List of supported file formats:

+ + {/* eslint-disable max-len */} +
    + {/*
  • + Unzipped: .csv, .json, .geojson, .kml, .kmz (.csv files must contain a geom column of shape data converted to well known text (WKT) format). +
    • */} +
  • Zipped: .shp (zipped shapefiles must include .shp, .shx, .dbf, and .prj files)
    • +
+
+ +

+ +
+ )} +
+
+ )} + + ); +}; + +export default AnalysisAdjustUploading; diff --git a/app/layout/projects/new/form/buttons/uploading/index.ts b/app/layout/projects/new/form/buttons/uploading/index.ts new file mode 100644 index 0000000000..b404d7fd44 --- /dev/null +++ b/app/layout/projects/new/form/buttons/uploading/index.ts @@ -0,0 +1 @@ +export { default } from './component'; diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index d1bec246ef..b74423464e 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -4,7 +4,6 @@ import Link from 'next/link'; import ProjectNewMap from 'layout/projects/new/map'; -import Icon from 'components/icon'; import Field from 'components/forms/field'; import Label from 'components/forms/label'; import Input from 'components/forms/input'; @@ -12,7 +11,7 @@ import Textarea from 'components/forms/textarea'; import Button from 'components/button'; import InfoButton from 'components/info-button'; -import UPLOAD_SHAPEFILE_SVG from 'svgs/ui/upload.svg?sprite'; +import Uploading from 'layout/projects/new/form/buttons/uploading'; import { composeValidators, @@ -32,8 +31,7 @@ import { DEFAULT_AREA } from './constants'; const ProjectForm: React.FC = () => { const [hasPlanningArea, setHasPlanningArea] = useState(null); - - console.log({ hasPlanningArea }); + const [selected, setSelected] = useState(null); const { addToast } = useToasts(); const { push } = useRouter(); const { data: organizationsData } = useOrganizations(); @@ -142,55 +140,52 @@ const ProjectForm: React.FC = () => { {/* PLANNING AREA */} -
-
- - - Planning area info button. - -
- {/* TEMPORARILY HIDDEN, it will be implemented in the future */} -
- - +
+

Do you have a planning region shapefile of your own?

+
+
+ + + Planning area info button. + +
+
+ + +
{hasPlanningArea !== null && !hasPlanningArea && ( - + )} {hasPlanningArea && ( - +
+ setSelected(s)} + /> +
)} +
From 814bfd7a9d200d7e66c323eaae7ae6be92483520 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 09:07:18 +0200 Subject: [PATCH 03/22] use upload project pu hook --- app/hooks/projects/index.ts | 32 ++++++ app/hooks/projects/types.ts | 9 ++ .../new/form/buttons/uploading/component.tsx | 107 ++++++++---------- 3 files changed, 87 insertions(+), 61 deletions(-) diff --git a/app/hooks/projects/index.ts b/app/hooks/projects/index.ts index 1999729db1..f62c8e881e 100644 --- a/app/hooks/projects/index.ts +++ b/app/hooks/projects/index.ts @@ -11,6 +11,7 @@ import { formatDistance } from 'date-fns'; import { ItemProps } from 'components/projects/item/component'; import PROJECTS from 'services/projects'; +import UPLOADS from 'services/uploads'; import { UseProjectsOptionsProps, UseProjectsResponse, @@ -18,6 +19,8 @@ import { SaveProjectProps, UseDeleteProjectProps, DeleteProjectProps, + UseUploadProjectPUProps, + UploadProjectPUProps, } from './types'; export function useProjects(options: UseProjectsOptionsProps): UseProjectsResponse { @@ -218,3 +221,32 @@ export function useDeleteProject({ }, }); } + +export function useUploadProjectPU({ + requestConfig = { + method: 'POST', + }, +}: UseUploadProjectPUProps) { + const [session] = useSession(); + + const uploadProjectPUShapefile = ({ data }: UploadProjectPUProps) => { + return UPLOADS.request({ + url: '/projects/planning-area/shapefile', + data, + headers: { + Authorization: `Bearer ${session.accessToken}`, + 'Content-Type': 'multipart/form-data', + }, + ...requestConfig, + }); + }; + + return useMutation(uploadProjectPUShapefile, { + onSuccess: (data: any, variables, context) => { + console.info('Succces', data, variables, context); + }, + onError: (error, variables, context) => { + console.info('Error', error, variables, context); + }, + }); +} diff --git a/app/hooks/projects/types.ts b/app/hooks/projects/types.ts index 95b4359bc0..79946e17c9 100644 --- a/app/hooks/projects/types.ts +++ b/app/hooks/projects/types.ts @@ -28,3 +28,12 @@ export interface UseDeleteProjectProps { export interface DeleteProjectProps { id: string } + +// useUploadProjectPU +export interface UseUploadProjectPUProps { + requestConfig?: AxiosRequestConfig +} +export interface UploadProjectPUProps { + id?: string, + data: any, +} diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index 14b02c6822..dc88349318 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -1,5 +1,5 @@ import React, { - useCallback, useEffect, useMemo, useState, + useCallback, /* useEffect, useMemo, */ useState, } from 'react'; import cx from 'classnames'; @@ -10,69 +10,69 @@ import Icon from 'components/icon'; import { Form as FormRFF } from 'react-final-form'; -import { useRouter } from 'next/router'; -import { useSelector, useDispatch } from 'react-redux'; -import { getScenarioSlice } from 'store/slices/scenarios/edit'; +// import { useRouter } from 'next/router'; +// import { useSelector, useDispatch } from 'react-redux'; +// import { getScenarioSlice } from 'store/slices/scenarios/edit'; import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; -import { useUploadScenarioPU } from 'hooks/scenarios'; +import { useUploadProjectPU } from 'hooks/projects'; import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite'; import Loading from 'components/loading'; -export interface AnalysisAdjustUploadingProps { +export interface NewProjectUploadingProps { type: string; selected: boolean; onSelected: (s: string) => void; } -export const AnalysisAdjustUploading: React.FC = ({ - type, +export const NewProjectUploading: React.FC = ({ + // type, selected, onSelected, -}: AnalysisAdjustUploadingProps) => { +}: NewProjectUploadingProps) => { const [loading, setLoading] = useState(false); const { addToast } = useToasts(); - const { query } = useRouter(); - const { sid } = query; + // const { query } = useRouter(); + // const { pid } = query; - const scenarioSlice = getScenarioSlice(sid); - const { setUploading, setUploadingValue } = scenarioSlice.actions; + // const scenarioSlice = getScenarioSlice(sid); + // const { setUploading, setUploadingValue } = scenarioSlice.actions; - const dispatch = useDispatch(); - const { uploadingValue } = useSelector((state) => state[`/scenarios/${sid}/edit`]); + // const dispatch = useDispatch(); + // const { uploadingValue } = useSelector((state) => state[`/scenarios/${sid}/edit`]); - const INITIAL_VALUES = useMemo(() => { - return { - type, - uploadingValue, - }; - }, [type, uploadingValue]); + // const INITIAL_VALUES = useMemo(() => { + // return { + // type, + // uploadingValue, + // }; + // }, [type, uploadingValue]); - const uploadScenarioPUMutation = useUploadScenarioPU({ + const uploadProjectPUMutation = useUploadProjectPU({ requestConfig: { method: 'POST', }, }); // Effects - useEffect(() => { - if (selected) { - dispatch(setUploading(true)); - } - - if (!selected) { - dispatch(setUploading(false)); - dispatch(setUploadingValue(null)); - } - - // Unmount - return () => { - dispatch(setUploading(false)); - dispatch(setUploadingValue(null)); - }; - }, [selected]); // eslint-disable-line + // useEffect(() => { + // if (selected) { + // dispatch(setUploading(true)); + // } + + // if (!selected) { + // dispatch(setUploading(false)); + // dispatch(setUploadingValue(null)); + // } + + // // Unmount + // return () => { + // dispatch(setUploading(false)); + // dispatch(setUploadingValue(null)); + // }; + // }, [selected]); // eslint-disable-line const onDropAccepted = async (acceptedFiles) => { setLoading(true); @@ -81,7 +81,7 @@ export const AnalysisAdjustUploading: React.FC = ( const data = new FormData(); data.append('file', f); - uploadScenarioPUMutation.mutate({ id: `${sid}`, data }, { + uploadProjectPUMutation.mutate({ /* id: `${pid}`, */ data }, { onSuccess: ({ data: { data: g } }) => { setLoading(false); @@ -94,7 +94,7 @@ export const AnalysisAdjustUploading: React.FC = ( level: 'success', }); - dispatch(setUploadingValue(g)); + // dispatch(setUploadingValue(g)); console.info('Shapefile uploaded', g); }, onError: () => { @@ -136,7 +136,6 @@ export const AnalysisAdjustUploading: React.FC = ( isDragAccept, isDragReject, } = useDropzone({ - // accept: 'image/*', multiple: false, maxSize: 3000000, onDropAccepted, @@ -152,7 +151,7 @@ export const AnalysisAdjustUploading: React.FC = ( {({ handleSubmit }) => (
@@ -202,18 +201,6 @@ export const AnalysisAdjustUploading: React.FC = ( > Save - {/* */}
)} @@ -256,13 +243,11 @@ export const AnalysisAdjustUploading: React.FC = ( >

List of supported file formats:

- - {/* eslint-disable max-len */}
    - {/*
  • - Unzipped: .csv, .json, .geojson, .kml, .kmz (.csv files must contain a geom column of shape data converted to well known text (WKT) format). -
    • */} -
  • Zipped: .shp (zipped shapefiles must include .shp, .shx, .dbf, and .prj files)
    • +
  • + Zipped: .shp + (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) +
@@ -277,4 +262,4 @@ export const AnalysisAdjustUploading: React.FC = ( ); }; -export default AnalysisAdjustUploading; +export default NewProjectUploading; From c247dc38054054fe4c178e30b7709e5c19ea34af Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 15:48:39 +0200 Subject: [PATCH 04/22] add file selected case on uploading button --- .../new/form/buttons/uploading/component.tsx | 151 ++++++++---------- app/layout/projects/new/form/component.tsx | 6 +- 2 files changed, 71 insertions(+), 86 deletions(-) diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index dc88349318..ebcb82bfc0 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -1,16 +1,14 @@ import React, { - useCallback, /* useEffect, useMemo, */ useState, + useCallback, /* useEffect, useMemo, */ useState, } from 'react'; import cx from 'classnames'; -import Button from 'components/button'; import InfoButton from 'components/info-button'; import Icon from 'components/icon'; import { Form as FormRFF } from 'react-final-form'; -// import { useRouter } from 'next/router'; // import { useSelector, useDispatch } from 'react-redux'; // import { getScenarioSlice } from 'store/slices/scenarios/edit'; @@ -22,34 +20,25 @@ import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite'; import Loading from 'components/loading'; export interface NewProjectUploadingProps { - type: string; selected: boolean; onSelected: (s: string) => void; } export const NewProjectUploading: React.FC = ({ - // type, selected, onSelected, }: NewProjectUploadingProps) => { const [loading, setLoading] = useState(false); + const [successFileName, setSuccessFileName] = useState(null); const { addToast } = useToasts(); - // const { query } = useRouter(); - // const { pid } = query; + console.log('success file name', successFileName); // const scenarioSlice = getScenarioSlice(sid); // const { setUploading, setUploadingValue } = scenarioSlice.actions; // const dispatch = useDispatch(); // const { uploadingValue } = useSelector((state) => state[`/scenarios/${sid}/edit`]); - // const INITIAL_VALUES = useMemo(() => { - // return { - // type, - // uploadingValue, - // }; - // }, [type, uploadingValue]); - const uploadProjectPUMutation = useUploadProjectPU({ requestConfig: { method: 'POST', @@ -84,6 +73,7 @@ export const NewProjectUploading: React.FC = ({ uploadProjectPUMutation.mutate({ /* id: `${pid}`, */ data }, { onSuccess: ({ data: { data: g } }) => { setLoading(false); + setSuccessFileName(f.name); addToast('success-upload-shapefile', ( <> @@ -96,9 +86,12 @@ export const NewProjectUploading: React.FC = ({ // dispatch(setUploadingValue(g)); console.info('Shapefile uploaded', g); + // guardar redux geojson asociado con planning area id (g.id) }, onError: () => { setLoading(false); + setSuccessFileName(null); + addToast('error-upload-shapefile', ( <>

Error!

@@ -151,7 +144,6 @@ export const NewProjectUploading: React.FC = ({ {({ handleSubmit }) => ( @@ -160,7 +152,7 @@ export const NewProjectUploading: React.FC = ({ role="presentation" className={cx({ 'text-sm py-2.5 focus:outline-none relative transition rounded-3xl px-10 cursor-pointer': true, - 'bg-gray-600 text-gray-200 opacity-50': !selected, + 'bg-gray-600 text-gray-200 opacity-50 hover:text-white hover:opacity-100': !selected, 'bg-gray-600 text-white': selected, })} onClick={() => onSelected('uploading')} @@ -181,80 +173,71 @@ export const NewProjectUploading: React.FC = ({ icon={UPLOAD_SVG} /> )} - - {selected && ( -
- - - -
- )} - {selected && ( -
-
- - -

- Drag and drop your - {' '} - polygon data file - {' '} - or click here to upload -

- -

{'Recommended file size < 1 MB'}

- - -
- -

- Learn more about supported file formats - - -

-

List of supported file formats:

-
    -
  • - Zipped: .shp - (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) -
    • -
-
- + {selected && !successFileName && ( +
+
+ + +

+ Drag and drop your + {' '} + polygon data file + {' '} + or click here to upload

+

{'Recommended file size < 3 MB'}

+ + +
+

+ Learn more about supported file formats + + +

+

List of supported file formats:

+
    +
  • + Zipped: .shp + (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) +
    • +
+
+ +

+
+ )} + + {selected && successFileName && ( +
+ +

{successFileName}

+ +
)} +
)} diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index b74423464e..c87faf1a33 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -154,7 +154,10 @@ const ProjectForm: React.FC = () => { className="w-20 h-6 mr-4" size="xs" theme={hasPlanningArea !== null && !hasPlanningArea ? 'white' : 'secondary'} - onClick={() => setHasPlanningArea(false)} + onClick={() => { + setHasPlanningArea(false); + setSelected(false); + }} > No @@ -179,7 +182,6 @@ const ProjectForm: React.FC = () => { {hasPlanningArea && (
setSelected(s)} /> From 11bddfbb20e113b43988cae377c0056bfd248c76 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 16:31:40 +0200 Subject: [PATCH 05/22] remove file --- .../new/form/buttons/uploading/component.tsx | 44 +++++++++++-------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index ebcb82bfc0..a4f501f7f1 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -2,6 +2,8 @@ import React, { useCallback, /* useEffect, useMemo, */ useState, } from 'react'; +import { motion } from 'framer-motion'; + import cx from 'classnames'; import InfoButton from 'components/info-button'; @@ -29,10 +31,9 @@ export const NewProjectUploading: React.FC = ({ onSelected, }: NewProjectUploadingProps) => { const [loading, setLoading] = useState(false); - const [successFileName, setSuccessFileName] = useState(null); + const [successFile, setSuccessFile] = useState(null); const { addToast } = useToasts(); - console.log('success file name', successFileName); // const scenarioSlice = getScenarioSlice(sid); // const { setUploading, setUploadingValue } = scenarioSlice.actions; @@ -70,10 +71,11 @@ export const NewProjectUploading: React.FC = ({ const data = new FormData(); data.append('file', f); - uploadProjectPUMutation.mutate({ /* id: `${pid}`, */ data }, { - onSuccess: ({ data: { data: g } }) => { + uploadProjectPUMutation.mutate({ data }, { + + onSuccess: ({ data: { data: g, id: PUid } }) => { setLoading(false); - setSuccessFileName(f.name); + setSuccessFile({ id: PUid, name: f.name }); addToast('success-upload-shapefile', ( <> @@ -90,7 +92,7 @@ export const NewProjectUploading: React.FC = ({ }, onError: () => { setLoading(false); - setSuccessFileName(null); + setSuccessFile(null); addToast('error-upload-shapefile', ( <> @@ -175,7 +177,8 @@ export const NewProjectUploading: React.FC = ({ )} - {selected && !successFileName && ( + {selected && !successFile && ( +
= ({

+ )} - {selected && successFileName && ( -
- -

{successFileName}

- -
+ {selected && successFile && ( + +
+ +

{successFile.name}

+ +
+ )}
From 7456d03d59b32599e3183204cc949038bbe6fb29 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 17:08:27 +0200 Subject: [PATCH 06/22] save geoJson on store --- .../new/form/buttons/uploading/component.tsx | 47 ++++++++----------- app/store/slices/projects/new.ts | 14 +++++- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index a4f501f7f1..bcced5d4ee 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -1,6 +1,4 @@ -import React, { - useCallback, /* useEffect, useMemo, */ useState, -} from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { motion } from 'framer-motion'; @@ -11,8 +9,9 @@ import Icon from 'components/icon'; import { Form as FormRFF } from 'react-final-form'; -// import { useSelector, useDispatch } from 'react-redux'; -// import { getScenarioSlice } from 'store/slices/scenarios/edit'; +import { useDispatch } from 'react-redux'; + +import { setUploading, setUploadingValue } from 'store/slices/projects/new'; import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; @@ -34,11 +33,7 @@ export const NewProjectUploading: React.FC = ({ const [successFile, setSuccessFile] = useState(null); const { addToast } = useToasts(); - // const scenarioSlice = getScenarioSlice(sid); - // const { setUploading, setUploadingValue } = scenarioSlice.actions; - - // const dispatch = useDispatch(); - // const { uploadingValue } = useSelector((state) => state[`/scenarios/${sid}/edit`]); + const dispatch = useDispatch(); const uploadProjectPUMutation = useUploadProjectPU({ requestConfig: { @@ -47,22 +42,17 @@ export const NewProjectUploading: React.FC = ({ }); // Effects - // useEffect(() => { - // if (selected) { - // dispatch(setUploading(true)); - // } - - // if (!selected) { - // dispatch(setUploading(false)); - // dispatch(setUploadingValue(null)); - // } - - // // Unmount - // return () => { - // dispatch(setUploading(false)); - // dispatch(setUploadingValue(null)); - // }; - // }, [selected]); // eslint-disable-line + useEffect(() => { + if (selected) { + dispatch(setUploading(true)); + } + + if (!selected) { + dispatch(setUploading(false)); + dispatch(setUploadingValue(null)); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selected]); const onDropAccepted = async (acceptedFiles) => { setLoading(true); @@ -86,9 +76,10 @@ export const NewProjectUploading: React.FC = ({ level: 'success', }); - // dispatch(setUploadingValue(g)); + dispatch(setUploadingValue(g)); + dispatch(setUploading(true)); + console.info('Shapefile uploaded', g); - // guardar redux geojson asociado con planning area id (g.id) }, onError: () => { setLoading(false); diff --git a/app/store/slices/projects/new.ts b/app/store/slices/projects/new.ts index 060090cc62..2d175495d3 100644 --- a/app/store/slices/projects/new.ts +++ b/app/store/slices/projects/new.ts @@ -4,12 +4,16 @@ interface ProjectShowStateProps { bbox: number[]; minPuAreaSize: number; maxPuAreaSize: number; + uploading: boolean; + uploadingValue: Record } const initialState = { bbox: null, minPuAreaSize: 0, maxPuAreaSize: 100, + uploading: false, + uploadingValue: null, } as ProjectShowStateProps; const projectsNewSlice = createSlice({ @@ -25,8 +29,16 @@ const projectsNewSlice = createSlice({ setMaxPuAreaSize: (state, action: PayloadAction) => { state.maxPuAreaSize = action.payload; }, + setUploading: (state, action: PayloadAction) => { + state.uploading = action.payload; + }, + setUploadingValue: (state, action: PayloadAction>) => { + state.uploadingValue = action.payload; + }, }, }); -export const { setBbox, setMinPuAreaSize, setMaxPuAreaSize } = projectsNewSlice.actions; +export const { + setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploading, setUploadingValue, +} = projectsNewSlice.actions; export default projectsNewSlice.reducer; From 9c5392ec5b84ee4de9b858ee5343f84bfd618195 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 17:26:51 +0200 Subject: [PATCH 07/22] save puarea id --- .../new/form/buttons/uploading/component.tsx | 88 ++++++++++--------- app/layout/projects/new/form/component.tsx | 11 ++- app/store/slices/projects/new.ts | 7 +- 3 files changed, 60 insertions(+), 46 deletions(-) diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index bcced5d4ee..eac198ad97 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -151,6 +151,7 @@ export const NewProjectUploading: React.FC = ({ onClick={() => onSelected('uploading')} >
+
= ({ icon={UPLOAD_SVG} /> )} +
{selected && !successFile && ( +
+
-
-
- - -

- Drag and drop your - {' '} - polygon data file - {' '} - or click here to upload -

+ -

{'Recommended file size < 3 MB'}

+

+ Drag and drop your + {' '} + polygon data file + {' '} + or click here to upload +

- +

{'Recommended file size < 3 MB'}

-
-

- Learn more about supported file formats + - -

-

List of supported file formats:

-
    -
  • - Zipped: .shp - (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) -
    • -
-
- -

-
+
+ +

+ Learn more about supported file formats + +

+

List of supported file formats:

+
    +
  • + Zipped: .shp + (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) +
    • +
+
+ +

+
)} {selected && successFile && ( diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index c87faf1a33..0d0277f9a5 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -17,13 +17,15 @@ import { composeValidators, } from 'components/forms/validations'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { useRouter } from 'next/router'; import { useOrganizations } from 'hooks/organizations'; import { useSaveProject } from 'hooks/projects'; import { useToasts } from 'hooks/toast'; -import { setBbox, setMaxPuAreaSize, setMinPuAreaSize } from 'store/slices/projects/new'; +import { + setBbox, setMaxPuAreaSize, setMinPuAreaSize, setUploadingValue, +} from 'store/slices/projects/new'; import PlanningAreaSelector from './planning-area-selector'; import ProjectFormProps from './types'; @@ -41,11 +43,16 @@ const ProjectForm: React.FC = () => { // Project mutation and submit const saveProjectMutation = useSaveProject({}); + const { uploadingValue: planningArea } = useSelector((state) => state['/projects/new']); + + console.log('PLANNING AREA--->', planningArea); + useEffect(() => { return () => { dispatch(setBbox(null)); dispatch(setMinPuAreaSize(null)); dispatch(setMaxPuAreaSize(null)); + dispatch(setUploadingValue(null)); }; }, [dispatch]); diff --git a/app/store/slices/projects/new.ts b/app/store/slices/projects/new.ts index 2d175495d3..19f11a5c81 100644 --- a/app/store/slices/projects/new.ts +++ b/app/store/slices/projects/new.ts @@ -4,6 +4,7 @@ interface ProjectShowStateProps { bbox: number[]; minPuAreaSize: number; maxPuAreaSize: number; + planningAreaId: number; uploading: boolean; uploadingValue: Record } @@ -12,6 +13,7 @@ const initialState = { bbox: null, minPuAreaSize: 0, maxPuAreaSize: 100, + planningAreaId: null, uploading: false, uploadingValue: null, } as ProjectShowStateProps; @@ -35,10 +37,13 @@ const projectsNewSlice = createSlice({ setUploadingValue: (state, action: PayloadAction>) => { state.uploadingValue = action.payload; }, + setPlanningAreaId: (state, action: PayloadAction) => { + state.planningAreaId = action.payload; + }, }, }); export const { - setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploading, setUploadingValue, + setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploading, setUploadingValue, setPlanningAreaId, } = projectsNewSlice.actions; export default projectsNewSlice.reducer; From d8cfef5933f1b2e2b50d1dd09cbd5d0c901a6203 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 17:33:29 +0200 Subject: [PATCH 08/22] post planning area id on new project form --- app/layout/projects/new/form/buttons/uploading/component.tsx | 4 +++- app/layout/projects/new/form/component.tsx | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index eac198ad97..249e38ff5f 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -11,7 +11,7 @@ import { Form as FormRFF } from 'react-final-form'; import { useDispatch } from 'react-redux'; -import { setUploading, setUploadingValue } from 'store/slices/projects/new'; +import { setUploading, setUploadingValue, setPlanningAreaId } from 'store/slices/projects/new'; import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; @@ -50,6 +50,7 @@ export const NewProjectUploading: React.FC = ({ if (!selected) { dispatch(setUploading(false)); dispatch(setUploadingValue(null)); + dispatch(setPlanningAreaId(null)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [selected]); @@ -78,6 +79,7 @@ export const NewProjectUploading: React.FC = ({ dispatch(setUploadingValue(g)); dispatch(setUploading(true)); + dispatch(setPlanningAreaId(PUid)); console.info('Shapefile uploaded', g); }, diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 0d0277f9a5..96c271d652 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -43,7 +43,7 @@ const ProjectForm: React.FC = () => { // Project mutation and submit const saveProjectMutation = useSaveProject({}); - const { uploadingValue: planningArea } = useSelector((state) => state['/projects/new']); + const { uploadingValue: planningArea, planningAreaId } = useSelector((state) => state['/projects/new']); console.log('PLANNING AREA--->', planningArea); @@ -62,6 +62,7 @@ const ProjectForm: React.FC = () => { const data = { ...values, organizationId: organizationsData[0].id || '7f1fb7f8-1246-4509-89b9-f48b6f976e3f', + planningAreaId, }; saveProjectMutation.mutate({ data }, { From 1f3539b52b9cc2ca16b72215eee8baf5c2e0b8f0 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 17:37:30 +0200 Subject: [PATCH 09/22] improve naming --- app/hooks/projects/index.ts | 12 ++++++------ app/hooks/projects/types.ts | 6 +++--- .../new/form/buttons/uploading/component.tsx | 12 ++++++------ 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/app/hooks/projects/index.ts b/app/hooks/projects/index.ts index f62c8e881e..80403b5893 100644 --- a/app/hooks/projects/index.ts +++ b/app/hooks/projects/index.ts @@ -19,8 +19,8 @@ import { SaveProjectProps, UseDeleteProjectProps, DeleteProjectProps, - UseUploadProjectPUProps, - UploadProjectPUProps, + UseUploadProjectPAProps, + UploadProjectPAProps, } from './types'; export function useProjects(options: UseProjectsOptionsProps): UseProjectsResponse { @@ -222,14 +222,14 @@ export function useDeleteProject({ }); } -export function useUploadProjectPU({ +export function useUploadProjectPA({ requestConfig = { method: 'POST', }, -}: UseUploadProjectPUProps) { +}: UseUploadProjectPAProps) { const [session] = useSession(); - const uploadProjectPUShapefile = ({ data }: UploadProjectPUProps) => { + const uploadProjectPAShapefile = ({ data }: UploadProjectPAProps) => { return UPLOADS.request({ url: '/projects/planning-area/shapefile', data, @@ -241,7 +241,7 @@ export function useUploadProjectPU({ }); }; - return useMutation(uploadProjectPUShapefile, { + return useMutation(uploadProjectPAShapefile, { onSuccess: (data: any, variables, context) => { console.info('Succces', data, variables, context); }, diff --git a/app/hooks/projects/types.ts b/app/hooks/projects/types.ts index 79946e17c9..e60a509b70 100644 --- a/app/hooks/projects/types.ts +++ b/app/hooks/projects/types.ts @@ -29,11 +29,11 @@ export interface DeleteProjectProps { id: string } -// useUploadProjectPU -export interface UseUploadProjectPUProps { +// useUploadProjectPA +export interface UseUploadProjectPAProps { requestConfig?: AxiosRequestConfig } -export interface UploadProjectPUProps { +export interface UploadProjectPAProps { id?: string, data: any, } diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/buttons/uploading/component.tsx index 249e38ff5f..7c56fb0d92 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/buttons/uploading/component.tsx @@ -15,7 +15,7 @@ import { setUploading, setUploadingValue, setPlanningAreaId } from 'store/slices import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; -import { useUploadProjectPU } from 'hooks/projects'; +import { useUploadProjectPA } from 'hooks/projects'; import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite'; import Loading from 'components/loading'; @@ -35,7 +35,7 @@ export const NewProjectUploading: React.FC = ({ const dispatch = useDispatch(); - const uploadProjectPUMutation = useUploadProjectPU({ + const uploadProjectPAMutation = useUploadProjectPA({ requestConfig: { method: 'POST', }, @@ -62,11 +62,11 @@ export const NewProjectUploading: React.FC = ({ const data = new FormData(); data.append('file', f); - uploadProjectPUMutation.mutate({ data }, { + uploadProjectPAMutation.mutate({ data }, { - onSuccess: ({ data: { data: g, id: PUid } }) => { + onSuccess: ({ data: { data: g, id: PAid } }) => { setLoading(false); - setSuccessFile({ id: PUid, name: f.name }); + setSuccessFile({ id: PAid, name: f.name }); addToast('success-upload-shapefile', ( <> @@ -79,7 +79,7 @@ export const NewProjectUploading: React.FC = ({ dispatch(setUploadingValue(g)); dispatch(setUploading(true)); - dispatch(setPlanningAreaId(PUid)); + dispatch(setPlanningAreaId(PAid)); console.info('Shapefile uploaded', g); }, From 15d7164fa94f31c2ddca95adb790b266197f8ede Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 14 Jul 2021 17:49:51 +0200 Subject: [PATCH 10/22] console info planning area --- app/layout/projects/new/form/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 96c271d652..cb0ab47473 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -45,7 +45,7 @@ const ProjectForm: React.FC = () => { const { uploadingValue: planningArea, planningAreaId } = useSelector((state) => state['/projects/new']); - console.log('PLANNING AREA--->', planningArea); + console.info('Planning area--->', planningArea); useEffect(() => { return () => { From f8cb7e93da076f6bccf1c7690490c297eb6e2937 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Thu, 15 Jul 2021 11:48:58 +0200 Subject: [PATCH 11/22] Project new: renaming and styling --- app/layout/projects/new/form/component.tsx | 18 +++++----- .../component.tsx | 35 ++++++++++++------- .../index.ts | 0 3 files changed, 30 insertions(+), 23 deletions(-) rename app/layout/projects/new/form/{buttons/uploading => planning-area-uploader}/component.tsx (87%) rename app/layout/projects/new/form/{buttons/uploading => planning-area-uploader}/index.ts (100%) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index cb0ab47473..8f0b302f9a 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -11,7 +11,7 @@ import Textarea from 'components/forms/textarea'; import Button from 'components/button'; import InfoButton from 'components/info-button'; -import Uploading from 'layout/projects/new/form/buttons/uploading'; +import Uploading from 'layout/projects/new/form/planning-area-uploader'; import { composeValidators, @@ -182,18 +182,16 @@ const ProjectForm: React.FC = () => {
{hasPlanningArea !== null && !hasPlanningArea && ( - + )} {hasPlanningArea && ( -
- setSelected(s)} - /> -
+ setSelected(s)} + /> )} diff --git a/app/layout/projects/new/form/buttons/uploading/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx similarity index 87% rename from app/layout/projects/new/form/buttons/uploading/component.tsx rename to app/layout/projects/new/form/planning-area-uploader/component.tsx index 7c56fb0d92..0a7cd7a310 100644 --- a/app/layout/projects/new/form/buttons/uploading/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -6,6 +6,7 @@ import cx from 'classnames'; import InfoButton from 'components/info-button'; import Icon from 'components/icon'; +import Loading from 'components/loading'; import { Form as FormRFF } from 'react-final-form'; @@ -18,17 +19,17 @@ import { useToasts } from 'hooks/toast'; import { useUploadProjectPA } from 'hooks/projects'; import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite'; -import Loading from 'components/loading'; +import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; -export interface NewProjectUploadingProps { +export interface PlanningAreUploaderProps { selected: boolean; onSelected: (s: string) => void; } -export const NewProjectUploading: React.FC = ({ +export const PlanningAreUploader: React.FC = ({ selected, onSelected, -}: NewProjectUploadingProps) => { +}: PlanningAreUploaderProps) => { const [loading, setLoading] = useState(false); const [successFile, setSuccessFile] = useState(null); const { addToast } = useToasts(); @@ -146,7 +147,7 @@ export const NewProjectUploading: React.FC = ({ key="uploading" role="presentation" className={cx({ - 'text-sm py-2.5 focus:outline-none relative transition rounded-3xl px-10 cursor-pointer': true, + 'text-sm py-2.5 focus:outline-none relative transition rounded-3xl px-10 cursor-pointer mt-6': true, 'bg-gray-600 text-gray-200 opacity-50 hover:text-white hover:opacity-100': !selected, 'bg-gray-600 text-white': selected, })} @@ -230,13 +231,21 @@ export const NewProjectUploading: React.FC = ({ animate={{ opacity: 1 }} exit={{ opacity: 0 }} > -
- -

{successFile.name}

- +
+
+

{successFile.name}

+ + +
)} @@ -248,4 +257,4 @@ export const NewProjectUploading: React.FC = ({ ); }; -export default NewProjectUploading; +export default PlanningAreUploader; diff --git a/app/layout/projects/new/form/buttons/uploading/index.ts b/app/layout/projects/new/form/planning-area-uploader/index.ts similarity index 100% rename from app/layout/projects/new/form/buttons/uploading/index.ts rename to app/layout/projects/new/form/planning-area-uploader/index.ts From 56a9afe96c6be83c724ea3594cd9a495d132cf89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Thu, 15 Jul 2021 13:43:12 +0200 Subject: [PATCH 12/22] Project new: feedback --- app/hooks/map/index.ts | 31 ++- app/hooks/map/types.ts | 5 + app/layout/projects/new/form/component.tsx | 21 +- .../form/planning-area-uploader/component.tsx | 230 ++++++++---------- app/layout/projects/new/map/component.tsx | 9 +- app/store/slices/projects/new.ts | 12 +- 6 files changed, 155 insertions(+), 153 deletions(-) diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts index b5d968d7b8..4bf49c3cc1 100644 --- a/app/hooks/map/index.ts +++ b/app/hooks/map/index.ts @@ -1,8 +1,37 @@ import { useMemo } from 'react'; import { - UseAdminPreviewLayer, UsePUGridLayer, UsePUGridPreviewLayer, UseWDPAPreviewLayer, + UseAdminPreviewLayer, UseGeoJSONLayer, UsePUGridLayer, UsePUGridPreviewLayer, UseWDPAPreviewLayer, } from './types'; +// GeoJSON +export function useGeoJsonLayer({ + id, active, data, +}: UseGeoJSONLayer) { + return useMemo(() => { + if (!active || !id || !data) return null; + + return { + id: `${id}`, + type: 'geojson', + source: { + type: 'geojson', + data, + }, + render: { + layers: [ + { + type: 'line', + paint: { + 'line-color': '#FFF', + 'line-width': 3, + }, + }, + ], + }, + }; + }, [id, active, data]); +} + // AdminPreview export function useAdminPreviewLayer({ active, country, region, subregion, diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts index 9d0e9130b5..c594c67e16 100644 --- a/app/hooks/map/types.ts +++ b/app/hooks/map/types.ts @@ -1,3 +1,8 @@ +export interface UseGeoJSONLayer { + id: string; + active?: boolean; + data: Record; +} export interface UseAdminPreviewLayer { active?: boolean; bbox?: number[]; diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 8f0b302f9a..5833ea04f7 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -11,7 +11,7 @@ import Textarea from 'components/forms/textarea'; import Button from 'components/button'; import InfoButton from 'components/info-button'; -import Uploading from 'layout/projects/new/form/planning-area-uploader'; +import PlanningAreaUploader from 'layout/projects/new/form/planning-area-uploader'; import { composeValidators, @@ -32,8 +32,7 @@ import ProjectFormProps from './types'; import { DEFAULT_AREA } from './constants'; const ProjectForm: React.FC = () => { - const [hasPlanningArea, setHasPlanningArea] = useState(null); - const [selected, setSelected] = useState(null); + const [hasPlanningArea, setHasPlanningArea] = useState(false); const { addToast } = useToasts(); const { push } = useRouter(); const { data: organizationsData } = useOrganizations(); @@ -150,6 +149,7 @@ const ProjectForm: React.FC = () => { {/* PLANNING AREA */}

Do you have a planning region shapefile of your own?

+
@@ -164,7 +164,6 @@ const ProjectForm: React.FC = () => { theme={hasPlanningArea !== null && !hasPlanningArea ? 'white' : 'secondary'} onClick={() => { setHasPlanningArea(false); - setSelected(false); }} > No @@ -188,12 +187,15 @@ const ProjectForm: React.FC = () => { )} {hasPlanningArea && ( - setSelected(s)} - /> + + {(fprops) => { + return ; + }} + )} -
@@ -229,7 +231,6 @@ const ProjectForm: React.FC = () => { subregion={values.adminAreaLevel2Id} planningUnitGridShape={values.planningUnitGridShape} planningUnitAreakm2={values.planningUnitAreakm2} - />
diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index 0a7cd7a310..806b37a05b 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { motion } from 'framer-motion'; @@ -8,31 +8,29 @@ import InfoButton from 'components/info-button'; import Icon from 'components/icon'; import Loading from 'components/loading'; -import { Form as FormRFF } from 'react-final-form'; - import { useDispatch } from 'react-redux'; -import { setUploading, setUploadingValue, setPlanningAreaId } from 'store/slices/projects/new'; +import { setUploadingValue } from 'store/slices/projects/new'; import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; import { useUploadProjectPA } from 'hooks/projects'; -import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite'; import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; export interface PlanningAreUploaderProps { - selected: boolean; - onSelected: (s: string) => void; + input: any; + meta: any; } export const PlanningAreUploader: React.FC = ({ - selected, - onSelected, + input, + meta, }: PlanningAreUploaderProps) => { const [loading, setLoading] = useState(false); const [successFile, setSuccessFile] = useState(null); const { addToast } = useToasts(); + const { error } = meta; const dispatch = useDispatch(); @@ -44,17 +42,12 @@ export const PlanningAreUploader: React.FC = ({ // Effects useEffect(() => { - if (selected) { - dispatch(setUploading(true)); - } - - if (!selected) { - dispatch(setUploading(false)); + return () => { + input.onChange(null); dispatch(setUploadingValue(null)); - dispatch(setPlanningAreaId(null)); - } + }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selected]); + }, []); const onDropAccepted = async (acceptedFiles) => { setLoading(true); @@ -68,6 +61,7 @@ export const PlanningAreUploader: React.FC = ({ onSuccess: ({ data: { data: g, id: PAid } }) => { setLoading(false); setSuccessFile({ id: PAid, name: f.name }); + input.onChange(PAid); addToast('success-upload-shapefile', ( <> @@ -79,8 +73,6 @@ export const PlanningAreUploader: React.FC = ({ }); dispatch(setUploadingValue(g)); - dispatch(setUploading(true)); - dispatch(setPlanningAreaId(PAid)); console.info('Shapefile uploaded', g); }, @@ -130,130 +122,110 @@ export const PlanningAreUploader: React.FC = ({ onDropAccepted, onDropRejected, }); - // Callbacks - const onSubmit = useCallback((values) => { - // Save current drawn shape - console.info(values); - }, []); return ( - - {({ handleSubmit }) => ( -
+
+ +
+ Upload shapefile +
+
+ + {!successFile && ( +
onSelected('uploading')} > -
-
- Upload shapefile -
+ - {!selected && ( - - )} - -
- - {selected && !successFile && ( -
-
- - - -

- Drag and drop your - {' '} - polygon data file - {' '} - or click here to upload -

- -

{'Recommended file size < 3 MB'}

- - - -
- -

- Learn more about supported file formats - -

-

List of supported file formats:

-
    -
  • - Zipped: .shp - (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) -
    • -
-
- -

+

+ Drag and drop your + {' '} + polygon data file + {' '} + or click here to upload +

+ +

{'Recommended file size < 3 MB'}

+ + +
+ +

+ Learn more about supported file formats + +

+

List of supported file formats:

+
    +
  • + Zipped: .shp + (zipped shapefiles must include .shp, .shx, .dbf, and .prj files) +
    • +
- )} + +

- {selected && successFile && ( - -
-
-

{successFile.name}

- - -
-
- - )} +
+ )} + {successFile && ( + +
+
+

{successFile.name}

+ + +
- + )} - + +
); }; diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx index ca88d5f902..7d93c739d3 100644 --- a/app/layout/projects/new/map/component.tsx +++ b/app/layout/projects/new/map/component.tsx @@ -13,7 +13,7 @@ import FitBoundsControl from 'components/map/controls/fit-bounds'; import { useSelector } from 'react-redux'; import { useSession } from 'next-auth/client'; -import { useAdminPreviewLayer, usePUGridPreviewLayer } from 'hooks/map'; +import { useAdminPreviewLayer, usePUGridPreviewLayer, useGeoJsonLayer } from 'hooks/map'; import ProjectMapProps from './types'; @@ -26,7 +26,7 @@ export const ProjectNewMap: React.FC = ({ }: ProjectMapProps) => { const minZoom = 2; const maxZoom = 20; - const { bbox } = useSelector((state) => state['/projects/new']); + const { bbox, uploadingValue } = useSelector((state) => state['/projects/new']); const [viewport, setViewport] = useState({}); const [bounds, setBounds] = useState(null); @@ -34,6 +34,11 @@ export const ProjectNewMap: React.FC = ({ const [session] = useSession(); const LAYERS = [ + useGeoJsonLayer({ + id: 'uploaded-geojson', + active: !!uploadingValue, + data: uploadingValue, + }), useAdminPreviewLayer({ active: true, country, diff --git a/app/store/slices/projects/new.ts b/app/store/slices/projects/new.ts index 19f11a5c81..51bced6018 100644 --- a/app/store/slices/projects/new.ts +++ b/app/store/slices/projects/new.ts @@ -4,8 +4,6 @@ interface ProjectShowStateProps { bbox: number[]; minPuAreaSize: number; maxPuAreaSize: number; - planningAreaId: number; - uploading: boolean; uploadingValue: Record } @@ -13,8 +11,6 @@ const initialState = { bbox: null, minPuAreaSize: 0, maxPuAreaSize: 100, - planningAreaId: null, - uploading: false, uploadingValue: null, } as ProjectShowStateProps; @@ -31,19 +27,13 @@ const projectsNewSlice = createSlice({ setMaxPuAreaSize: (state, action: PayloadAction) => { state.maxPuAreaSize = action.payload; }, - setUploading: (state, action: PayloadAction) => { - state.uploading = action.payload; - }, setUploadingValue: (state, action: PayloadAction>) => { state.uploadingValue = action.payload; }, - setPlanningAreaId: (state, action: PayloadAction) => { - state.planningAreaId = action.payload; - }, }, }); export const { - setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploading, setUploadingValue, setPlanningAreaId, + setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploadingValue, } = projectsNewSlice.actions; export default projectsNewSlice.reducer; From 23ae9c44ff58ebd8ed7f2064fbb3819e36d21349 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Thu, 15 Jul 2021 15:23:33 +0200 Subject: [PATCH 13/22] imporve naming and styles --- app/layout/projects/new/form/component.tsx | 6 ++--- .../form/planning-area-uploader/component.tsx | 22 ++++++++++--------- app/store/slices/projects/new.ts | 10 ++++----- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 5833ea04f7..a89dbfe585 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -24,7 +24,7 @@ import { useSaveProject } from 'hooks/projects'; import { useToasts } from 'hooks/toast'; import { - setBbox, setMaxPuAreaSize, setMinPuAreaSize, setUploadingValue, + setBbox, setMaxPuAreaSize, setMinPuAreaSize, setUploadingPlanningArea, } from 'store/slices/projects/new'; import PlanningAreaSelector from './planning-area-selector'; @@ -42,7 +42,7 @@ const ProjectForm: React.FC = () => { // Project mutation and submit const saveProjectMutation = useSaveProject({}); - const { uploadingValue: planningArea, planningAreaId } = useSelector((state) => state['/projects/new']); + const { uploadingPlanningArea: planningArea, planningAreaId } = useSelector((state) => state['/projects/new']); console.info('Planning area--->', planningArea); @@ -51,7 +51,7 @@ const ProjectForm: React.FC = () => { dispatch(setBbox(null)); dispatch(setMinPuAreaSize(null)); dispatch(setMaxPuAreaSize(null)); - dispatch(setUploadingValue(null)); + dispatch(setUploadingPlanningArea(null)); }; }, [dispatch]); diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index 806b37a05b..94bd22bc69 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -10,7 +10,7 @@ import Loading from 'components/loading'; import { useDispatch } from 'react-redux'; -import { setUploadingValue } from 'store/slices/projects/new'; +import { setUploadingPlanningArea } from 'store/slices/projects/new'; import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; @@ -44,7 +44,7 @@ export const PlanningAreUploader: React.FC = ({ useEffect(() => { return () => { input.onChange(null); - dispatch(setUploadingValue(null)); + dispatch(setUploadingPlanningArea(null)); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -72,7 +72,7 @@ export const PlanningAreUploader: React.FC = ({ level: 'success', }); - dispatch(setUploadingValue(g)); + dispatch(setUploadingPlanningArea(g)); console.info('Shapefile uploaded', g); }, @@ -140,7 +140,7 @@ export const PlanningAreUploader: React.FC = ({ 'text-left': true, })} > - Upload shapefile + {successFile ? 'Uploaded shapefile' : 'Upload shapefile'}
@@ -203,20 +203,22 @@ export const PlanningAreUploader: React.FC = ({ exit={{ opacity: 0 }} >
-
-

{successFile.name}

- +
+ diff --git a/app/store/slices/projects/new.ts b/app/store/slices/projects/new.ts index 51bced6018..f9c8adc168 100644 --- a/app/store/slices/projects/new.ts +++ b/app/store/slices/projects/new.ts @@ -4,14 +4,14 @@ interface ProjectShowStateProps { bbox: number[]; minPuAreaSize: number; maxPuAreaSize: number; - uploadingValue: Record + uploadingPlanningArea: Record } const initialState = { bbox: null, minPuAreaSize: 0, maxPuAreaSize: 100, - uploadingValue: null, + uploadingPlanningArea: null, } as ProjectShowStateProps; const projectsNewSlice = createSlice({ @@ -27,13 +27,13 @@ const projectsNewSlice = createSlice({ setMaxPuAreaSize: (state, action: PayloadAction) => { state.maxPuAreaSize = action.payload; }, - setUploadingValue: (state, action: PayloadAction>) => { - state.uploadingValue = action.payload; + setUploadingPlanningArea: (state, action: PayloadAction>) => { + state.uploadingPlanningArea = action.payload; }, }, }); export const { - setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploadingValue, + setBbox, setMinPuAreaSize, setMaxPuAreaSize, setUploadingPlanningArea, } = projectsNewSlice.actions; export default projectsNewSlice.reducer; From f39c8d49948ade39e69d59b7c696702e958b9dbc Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Thu, 15 Jul 2021 16:01:24 +0200 Subject: [PATCH 14/22] update styles error --- .../new/form/planning-area-uploader/component.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index 94bd22bc69..20c4e4fb2c 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -30,7 +30,8 @@ export const PlanningAreUploader: React.FC = ({ const [loading, setLoading] = useState(false); const [successFile, setSuccessFile] = useState(null); const { addToast } = useToasts(); - const { error } = meta; + + const { submitFailed, valid } = meta; const dispatch = useDispatch(); @@ -128,9 +129,10 @@ export const PlanningAreUploader: React.FC = ({ key="uploading" role="presentation" className={cx({ - 'border text-sm py-2.5 focus:outline-none relative transition rounded-3xl px-5 cursor-pointer mt-6 bg-gray-600 text-white': true, - 'border-transparent': !error, - 'border-red-500': error, + 'border text-sm py-2.5 focus:outline-none relative transition rounded-3xl px-5 cursor-pointer mt-6 text-white': true, + 'border-transparent': !submitFailed && valid, + 'border-red-500 bg-gray-600': submitFailed && !valid, + 'bg-gray-600': !submitFailed && !valid, })} >
From 8394d51888a7538563508489e48773b0704ec701 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Thu, 15 Jul 2021 17:34:13 +0200 Subject: [PATCH 15/22] reset values when change planning area --- app/layout/projects/new/form/component.tsx | 10 ++++++---- .../new/form/planning-area-uploader/component.tsx | 11 ++++++----- app/layout/projects/new/form/types.ts | 2 +- app/layout/projects/new/map/component.tsx | 6 +++--- 4 files changed, 16 insertions(+), 13 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index a89dbfe585..5aaa9cf033 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -42,10 +42,9 @@ const ProjectForm: React.FC = () => { // Project mutation and submit const saveProjectMutation = useSaveProject({}); + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { uploadingPlanningArea: planningArea, planningAreaId } = useSelector((state) => state['/projects/new']); - console.info('Planning area--->', planningArea); - useEffect(() => { return () => { dispatch(setBbox(null)); @@ -100,7 +99,7 @@ const ProjectForm: React.FC = () => { ...DEFAULT_AREA, }} > - {({ handleSubmit, values }) => ( + {({ form, handleSubmit, values }) => (
= () => { className="w-20 h-6" size="xs" theme={hasPlanningArea ? 'white' : 'secondary'} - onClick={() => setHasPlanningArea(true)} + onClick={() => { + setHasPlanningArea(true); + form.reset(); + }} > Yes diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index 20c4e4fb2c..ad26d8dbe0 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -129,10 +129,10 @@ export const PlanningAreUploader: React.FC = ({ key="uploading" role="presentation" className={cx({ - 'border text-sm py-2.5 focus:outline-none relative transition rounded-3xl px-5 cursor-pointer mt-6 text-white': true, + 'border text-sm py-2.5 focus:outline-none relative transition rounded-3xl cursor-pointer mt-6 text-white': true, 'border-transparent': !submitFailed && valid, - 'border-red-500 bg-gray-600': submitFailed && !valid, - 'bg-gray-600': !submitFailed && !valid, + 'border-red-500 bg-gray-600 px-5': submitFailed && !valid, + 'bg-gray-600 px-5': !submitFailed && !valid, })} >
@@ -140,6 +140,7 @@ export const PlanningAreUploader: React.FC = ({
{successFile ? 'Uploaded shapefile' : 'Upload shapefile'} @@ -212,7 +213,7 @@ export const PlanningAreUploader: React.FC = ({ diff --git a/app/layout/projects/new/form/types.ts b/app/layout/projects/new/form/types.ts index bb2b719777..353102e781 100644 --- a/app/layout/projects/new/form/types.ts +++ b/app/layout/projects/new/form/types.ts @@ -1,3 +1,3 @@ export default interface ProjectFormProps { - + resetFieldState: (name: string) => void; } diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx index 7d93c739d3..4ddca761b1 100644 --- a/app/layout/projects/new/map/component.tsx +++ b/app/layout/projects/new/map/component.tsx @@ -26,7 +26,7 @@ export const ProjectNewMap: React.FC = ({ }: ProjectMapProps) => { const minZoom = 2; const maxZoom = 20; - const { bbox, uploadingValue } = useSelector((state) => state['/projects/new']); + const { bbox, uploadingPlanningArea } = useSelector((state) => state['/projects/new']); const [viewport, setViewport] = useState({}); const [bounds, setBounds] = useState(null); @@ -36,8 +36,8 @@ export const ProjectNewMap: React.FC = ({ const LAYERS = [ useGeoJsonLayer({ id: 'uploaded-geojson', - active: !!uploadingValue, - data: uploadingValue, + active: !!uploadingPlanningArea, + data: uploadingPlanningArea, }), useAdminPreviewLayer({ active: true, From d268071464e25e2a157ab22ae9e714db2d7d38c8 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Thu, 15 Jul 2021 17:51:07 +0200 Subject: [PATCH 16/22] order planning unit area folder structure --- app/layout/projects/new/form/component.tsx | 2 +- .../new/form/planning-area-selector/component.tsx | 8 ++++---- .../planning-unit-area-size/component.tsx | 0 .../planning-unit-area-size/index.ts | 0 .../planning-unit-area-size/types.ts | 0 .../planning-unit-grid/component.tsx | 0 .../planning-unit-grid/index.ts | 0 .../planning-unit-grid/planning-unit-button/component.tsx | 0 .../planning-unit-grid/planning-unit-button/index.ts | 0 .../planning-unit-grid/planning-unit-button/types.ts | 0 .../planning-unit-grid/types.ts | 0 app/layout/projects/new/form/types.ts | 2 +- 12 files changed, 6 insertions(+), 6 deletions(-) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-area-size/component.tsx (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-area-size/index.ts (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-area-size/types.ts (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-grid/component.tsx (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-grid/index.ts (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-grid/planning-unit-button/component.tsx (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-grid/planning-unit-button/index.ts (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-grid/planning-unit-button/types.ts (100%) rename app/layout/projects/new/form/{planning-area-selector => }/planning-unit-grid/types.ts (100%) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 5aaa9cf033..7106ba6452 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -11,6 +11,7 @@ import Textarea from 'components/forms/textarea'; import Button from 'components/button'; import InfoButton from 'components/info-button'; +import PlanningAreaSelector from 'layout/projects/new/form/planning-area-selector'; import PlanningAreaUploader from 'layout/projects/new/form/planning-area-uploader'; import { @@ -27,7 +28,6 @@ import { setBbox, setMaxPuAreaSize, setMinPuAreaSize, setUploadingPlanningArea, } from 'store/slices/projects/new'; -import PlanningAreaSelector from './planning-area-selector'; import ProjectFormProps from './types'; import { DEFAULT_AREA } from './constants'; diff --git a/app/layout/projects/new/form/planning-area-selector/component.tsx b/app/layout/projects/new/form/planning-area-selector/component.tsx index ad3b16e994..93227eee37 100644 --- a/app/layout/projects/new/form/planning-area-selector/component.tsx +++ b/app/layout/projects/new/form/planning-area-selector/component.tsx @@ -8,11 +8,11 @@ import { import { useSelector } from 'react-redux'; -import { PlanningAreaSelectorProps } from './types'; +import PlanningUnitGrid from 'layout/projects/new/form/planning-unit-grid'; +import PlanningUnitAreaSize from 'layout/projects/new/form/planning-unit-area-size'; +import CountryRegionSelector from 'layout/projects/new/form/planning-area-selector/country-region-selector'; -import CountryRegionSelector from './country-region-selector'; -import PlanningUnitGrid from './planning-unit-grid'; -import PlanningUnitAreaSize from './planning-unit-area-size'; +import { PlanningAreaSelectorProps } from './types'; export const PlanningAreaSelector: React.FC = ({ values, diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/component.tsx b/app/layout/projects/new/form/planning-unit-area-size/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/component.tsx rename to app/layout/projects/new/form/planning-unit-area-size/component.tsx diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/index.ts b/app/layout/projects/new/form/planning-unit-area-size/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/index.ts rename to app/layout/projects/new/form/planning-unit-area-size/index.ts diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/types.ts b/app/layout/projects/new/form/planning-unit-area-size/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/types.ts rename to app/layout/projects/new/form/planning-unit-area-size/types.ts diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/component.tsx b/app/layout/projects/new/form/planning-unit-grid/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-grid/component.tsx rename to app/layout/projects/new/form/planning-unit-grid/component.tsx diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/index.ts b/app/layout/projects/new/form/planning-unit-grid/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-grid/index.ts rename to app/layout/projects/new/form/planning-unit-grid/index.ts diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/component.tsx b/app/layout/projects/new/form/planning-unit-grid/planning-unit-button/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/component.tsx rename to app/layout/projects/new/form/planning-unit-grid/planning-unit-button/component.tsx diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/index.ts b/app/layout/projects/new/form/planning-unit-grid/planning-unit-button/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/index.ts rename to app/layout/projects/new/form/planning-unit-grid/planning-unit-button/index.ts diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/types.ts b/app/layout/projects/new/form/planning-unit-grid/planning-unit-button/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/types.ts rename to app/layout/projects/new/form/planning-unit-grid/planning-unit-button/types.ts diff --git a/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/types.ts b/app/layout/projects/new/form/planning-unit-grid/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/planning-unit-grid/types.ts rename to app/layout/projects/new/form/planning-unit-grid/types.ts diff --git a/app/layout/projects/new/form/types.ts b/app/layout/projects/new/form/types.ts index 353102e781..452e513190 100644 --- a/app/layout/projects/new/form/types.ts +++ b/app/layout/projects/new/form/types.ts @@ -1,3 +1,3 @@ export default interface ProjectFormProps { - resetFieldState: (name: string) => void; + reset?: () => void; } From 9d533e28fd96b62608eebce90f3ff6e839acec94 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Fri, 16 Jul 2021 09:26:40 +0200 Subject: [PATCH 17/22] add planning grid and area to upload planning area --- app/layout/projects/new/form/component.tsx | 61 ++++++++++++++++--- .../form/planning-area-uploader/component.tsx | 4 +- 2 files changed, 52 insertions(+), 13 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 7106ba6452..8e9a3ac442 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -13,6 +13,8 @@ import InfoButton from 'components/info-button'; import PlanningAreaSelector from 'layout/projects/new/form/planning-area-selector'; import PlanningAreaUploader from 'layout/projects/new/form/planning-area-uploader'; +import PlanningUnitGrid from 'layout/projects/new/form/planning-unit-grid'; +import PlanningUnitAreaSize from 'layout/projects/new/form/planning-unit-area-size'; import { composeValidators, @@ -43,7 +45,7 @@ const ProjectForm: React.FC = () => { const saveProjectMutation = useSaveProject({}); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { uploadingPlanningArea: planningArea, planningAreaId } = useSelector((state) => state['/projects/new']); + const { uploadingPlanningArea: planningArea } = useSelector((state) => state['/projects/new']); useEffect(() => { return () => { @@ -60,7 +62,6 @@ const ProjectForm: React.FC = () => { const data = { ...values, organizationId: organizationsData[0].id || '7f1fb7f8-1246-4509-89b9-f48b6f976e3f', - planningAreaId, }; saveProjectMutation.mutate({ data }, { @@ -163,6 +164,8 @@ const ProjectForm: React.FC = () => { theme={hasPlanningArea !== null && !hasPlanningArea ? 'white' : 'secondary'} onClick={() => { setHasPlanningArea(false); + dispatch(setUploadingPlanningArea(null)); + form.reset(); }} > No @@ -173,6 +176,7 @@ const ProjectForm: React.FC = () => { theme={hasPlanningArea ? 'white' : 'secondary'} onClick={() => { setHasPlanningArea(true); + dispatch(setUploadingPlanningArea(null)); form.reset(); }} > @@ -189,14 +193,51 @@ const ProjectForm: React.FC = () => { )} {hasPlanningArea && ( - - {(fprops) => { - return ; - }} - + <> + + {(fprops) => { + return ; + }} + + + {values.planningAreaId && ( +
+ + {(fprops) => ( + + { + fprops.input.onChange(value); + }} + /> + + )} + + + {({ input }) => ( + + )} + +
+ )} + )}
diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index ad26d8dbe0..9036c77f03 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -58,7 +58,6 @@ export const PlanningAreUploader: React.FC = ({ data.append('file', f); uploadProjectPAMutation.mutate({ data }, { - onSuccess: ({ data: { data: g, id: PAid } }) => { setLoading(false); setSuccessFile({ id: PAid, name: f.name }); @@ -130,7 +129,7 @@ export const PlanningAreUploader: React.FC = ({ role="presentation" className={cx({ 'border text-sm py-2.5 focus:outline-none relative transition rounded-3xl cursor-pointer mt-6 text-white': true, - 'border-transparent': !submitFailed && valid, + 'border-transparent': (!submitFailed && valid) || (submitFailed && valid), 'border-red-500 bg-gray-600 px-5': submitFailed && !valid, 'bg-gray-600 px-5': !submitFailed && !valid, })} @@ -229,7 +228,6 @@ export const PlanningAreUploader: React.FC = ({
)} -
); }; From ce15447521d40542f5e3d8ec2897af69d6224a30 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Fri, 16 Jul 2021 15:20:32 +0200 Subject: [PATCH 18/22] add mocked data to upload planning area shapefile --- app/layout/projects/new/form/component.tsx | 21 ++++++++++++++++--- .../country-region-selector/component.tsx | 1 + .../form/planning-area-uploader/component.tsx | 16 +++++++++++++- app/layout/projects/new/map/component.tsx | 1 + 4 files changed, 35 insertions(+), 4 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 8e9a3ac442..bd537588a4 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -45,7 +45,7 @@ const ProjectForm: React.FC = () => { const saveProjectMutation = useSaveProject({}); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { uploadingPlanningArea: planningArea } = useSelector((state) => state['/projects/new']); + const { bbox, uploadingPlanningArea: planningArea } = useSelector((state) => state['/projects/new']); useEffect(() => { return () => { @@ -165,7 +165,14 @@ const ProjectForm: React.FC = () => { onClick={() => { setHasPlanningArea(false); dispatch(setUploadingPlanningArea(null)); - form.reset(); + + const registeredFields = form.getRegisteredFields(); + registeredFields.forEach((f) => { + const omitFields = ['name', 'description', 'planningUnitGridShape']; + if (!omitFields.includes(f)) { + form.change(f, null); + } + }); }} > No @@ -177,7 +184,15 @@ const ProjectForm: React.FC = () => { onClick={() => { setHasPlanningArea(true); dispatch(setUploadingPlanningArea(null)); - form.reset(); + dispatch(setBbox(null)); + + const registeredFields = form.getRegisteredFields(); + registeredFields.forEach((f) => { + const omitFields = ['name', 'description']; + if (!omitFields.includes(f)) { + form.change(f, null); + } + }); }} > Yes diff --git a/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx b/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx index 97ecfe66c0..5a21e4e3b2 100644 --- a/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx +++ b/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx @@ -74,6 +74,7 @@ export const CountryRegionSelector: React.FC = ({ onChange={(value: string) => { const COUNTRY = countriesData.find((c) => c.id === value); const { bbox, minPuAreaSize, maxPuAreaSize } = COUNTRY || {}; + console.log('HELLLLLLLOOOO------->', minPuAreaSize, maxPuAreaSize); dispatch(setBbox(bbox)); dispatch(setMinPuAreaSize(minPuAreaSize)); dispatch(setMaxPuAreaSize(maxPuAreaSize)); diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index 9036c77f03..fb968330a6 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -10,7 +10,9 @@ import Loading from 'components/loading'; import { useDispatch } from 'react-redux'; -import { setUploadingPlanningArea } from 'store/slices/projects/new'; +import { + setBbox, setUploadingPlanningArea, setMaxPuAreaSize, setMinPuAreaSize, +} from 'store/slices/projects/new'; import { useDropzone } from 'react-dropzone'; import { useToasts } from 'hooks/toast'; @@ -59,6 +61,15 @@ export const PlanningAreUploader: React.FC = ({ uploadProjectPAMutation.mutate({ data }, { onSuccess: ({ data: { data: g, id: PAid } }) => { + const mockMinPuAreaSize = 251; + const mockMaxPuAreaSize = 2311631; + const mockBbox = [ + 4.21875, + 14.150390625, + 2.8113711933311403, + 12.811801316582619, + ]; + setLoading(false); setSuccessFile({ id: PAid, name: f.name }); input.onChange(PAid); @@ -73,6 +84,9 @@ export const PlanningAreUploader: React.FC = ({ }); dispatch(setUploadingPlanningArea(g)); + dispatch(setBbox(mockBbox)); + dispatch(setMinPuAreaSize(mockMinPuAreaSize)); + dispatch(setMaxPuAreaSize(mockMaxPuAreaSize)); console.info('Shapefile uploaded', g); }, diff --git a/app/layout/projects/new/map/component.tsx b/app/layout/projects/new/map/component.tsx index 4ddca761b1..dc58b3a6fd 100644 --- a/app/layout/projects/new/map/component.tsx +++ b/app/layout/projects/new/map/component.tsx @@ -29,6 +29,7 @@ export const ProjectNewMap: React.FC = ({ const { bbox, uploadingPlanningArea } = useSelector((state) => state['/projects/new']); const [viewport, setViewport] = useState({}); + const [bounds, setBounds] = useState(null); const [session] = useSession(); From dc025fcddb245adab87699be62559d42546cf7fc Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Fri, 16 Jul 2021 15:32:20 +0200 Subject: [PATCH 19/22] set hexagon as default --- app/layout/projects/new/form/component.tsx | 4 ++-- .../country-region-selector/component.tsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index bd537588a4..f38a9a17a8 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -45,7 +45,7 @@ const ProjectForm: React.FC = () => { const saveProjectMutation = useSaveProject({}); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { bbox, uploadingPlanningArea: planningArea } = useSelector((state) => state['/projects/new']); + const { uploadingPlanningArea: planningArea } = useSelector((state) => state['/projects/new']); useEffect(() => { return () => { @@ -188,7 +188,7 @@ const ProjectForm: React.FC = () => { const registeredFields = form.getRegisteredFields(); registeredFields.forEach((f) => { - const omitFields = ['name', 'description']; + const omitFields = ['name', 'description', 'planningUnitGridShape']; if (!omitFields.includes(f)) { form.change(f, null); } diff --git a/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx b/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx index 5a21e4e3b2..97ecfe66c0 100644 --- a/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx +++ b/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx @@ -74,7 +74,6 @@ export const CountryRegionSelector: React.FC = ({ onChange={(value: string) => { const COUNTRY = countriesData.find((c) => c.id === value); const { bbox, minPuAreaSize, maxPuAreaSize } = COUNTRY || {}; - console.log('HELLLLLLLOOOO------->', minPuAreaSize, maxPuAreaSize); dispatch(setBbox(bbox)); dispatch(setMinPuAreaSize(minPuAreaSize)); dispatch(setMaxPuAreaSize(maxPuAreaSize)); From 9a8b2e9b1e54c261f89691a4623952d81950508e Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Fri, 16 Jul 2021 15:46:01 +0200 Subject: [PATCH 20/22] refactor reset --- app/layout/projects/new/form/component.tsx | 34 ++++++++++------------ 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index f38a9a17a8..41cc420b70 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -93,6 +93,19 @@ const ProjectForm: React.FC = () => { }); }; + const resetPlanningArea = (form) => { + dispatch(setUploadingPlanningArea(null)); + dispatch(setBbox(null)); + + const registeredFields = form.getRegisteredFields(); + registeredFields.forEach((f) => { + const omitFields = ['name', 'description', 'planningUnitGridShape']; + if (!omitFields.includes(f)) { + form.change(f, null); + } + }); + }; + return ( = () => { theme={hasPlanningArea !== null && !hasPlanningArea ? 'white' : 'secondary'} onClick={() => { setHasPlanningArea(false); - dispatch(setUploadingPlanningArea(null)); - - const registeredFields = form.getRegisteredFields(); - registeredFields.forEach((f) => { - const omitFields = ['name', 'description', 'planningUnitGridShape']; - if (!omitFields.includes(f)) { - form.change(f, null); - } - }); + resetPlanningArea(form); }} > No @@ -183,16 +188,7 @@ const ProjectForm: React.FC = () => { theme={hasPlanningArea ? 'white' : 'secondary'} onClick={() => { setHasPlanningArea(true); - dispatch(setUploadingPlanningArea(null)); - dispatch(setBbox(null)); - - const registeredFields = form.getRegisteredFields(); - registeredFields.forEach((f) => { - const omitFields = ['name', 'description', 'planningUnitGridShape']; - if (!omitFields.includes(f)) { - form.change(f, null); - } - }); + resetPlanningArea(form); }} > Yes From ad6275d20309201d916e08c213e5880fb5287d25 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Fri, 16 Jul 2021 15:52:39 +0200 Subject: [PATCH 21/22] reset when remove file --- app/layout/projects/new/form/component.tsx | 8 +++++++- .../new/form/planning-area-uploader/component.tsx | 6 +++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 41cc420b70..1d8a36990c 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -210,7 +210,13 @@ const ProjectForm: React.FC = () => { validate={composeValidators([{ presence: true }])} > {(fprops) => { - return ; + return ( + + ); }} diff --git a/app/layout/projects/new/form/planning-area-uploader/component.tsx b/app/layout/projects/new/form/planning-area-uploader/component.tsx index fb968330a6..f6668a3540 100644 --- a/app/layout/projects/new/form/planning-area-uploader/component.tsx +++ b/app/layout/projects/new/form/planning-area-uploader/component.tsx @@ -23,11 +23,15 @@ import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; export interface PlanningAreUploaderProps { input: any; meta: any; + resetPlanningArea: any, + form: any, } export const PlanningAreUploader: React.FC = ({ input, meta, + resetPlanningArea, + form, }: PlanningAreUploaderProps) => { const [loading, setLoading] = useState(false); const [successFile, setSuccessFile] = useState(null); @@ -230,7 +234,7 @@ export const PlanningAreUploader: React.FC = ({ onClick={() => { setSuccessFile(null); input.onChange(null); - dispatch(setUploadingPlanningArea(null)); + resetPlanningArea(form); }} > Date: Fri, 16 Jul 2021 16:28:34 +0200 Subject: [PATCH 22/22] planning area folder structure --- app/layout/projects/new/form/component.tsx | 59 +++++-------------- .../country-region-selector/component.tsx | 0 .../country-region-selector/index.ts | 0 .../country-region-selector/types.ts | 0 .../form/planning-area-selector/component.tsx | 17 ++---- .../planning-unit-area-size/component.tsx | 0 .../planning-unit-area-size/index.ts | 0 .../planning-unit-area-size/types.ts | 0 .../planning-unit-grid/component.tsx | 0 .../planning-unit-grid/index.ts | 0 .../planning-unit-button/component.tsx | 0 .../planning-unit-button/index.ts | 0 .../planning-unit-button/types.ts | 0 .../planning-unit-grid/types.ts | 0 14 files changed, 19 insertions(+), 57 deletions(-) rename app/layout/projects/new/form/{planning-area-selector => }/country-region-selector/component.tsx (100%) rename app/layout/projects/new/form/{planning-area-selector => }/country-region-selector/index.ts (100%) rename app/layout/projects/new/form/{planning-area-selector => }/country-region-selector/types.ts (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-area-size/component.tsx (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-area-size/index.ts (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-area-size/types.ts (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-grid/component.tsx (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-grid/index.ts (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-grid/planning-unit-button/component.tsx (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-grid/planning-unit-button/index.ts (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-grid/planning-unit-button/types.ts (100%) rename app/layout/projects/new/form/{ => planning-area-selector}/planning-unit-grid/types.ts (100%) diff --git a/app/layout/projects/new/form/component.tsx b/app/layout/projects/new/form/component.tsx index 1d8a36990c..0f7d0df466 100644 --- a/app/layout/projects/new/form/component.tsx +++ b/app/layout/projects/new/form/component.tsx @@ -11,16 +11,15 @@ import Textarea from 'components/forms/textarea'; import Button from 'components/button'; import InfoButton from 'components/info-button'; +import CountryRegionSelector from 'layout/projects/new/form/country-region-selector'; import PlanningAreaSelector from 'layout/projects/new/form/planning-area-selector'; import PlanningAreaUploader from 'layout/projects/new/form/planning-area-uploader'; -import PlanningUnitGrid from 'layout/projects/new/form/planning-unit-grid'; -import PlanningUnitAreaSize from 'layout/projects/new/form/planning-unit-area-size'; import { composeValidators, } from 'components/forms/validations'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { useRouter } from 'next/router'; import { useOrganizations } from 'hooks/organizations'; import { useSaveProject } from 'hooks/projects'; @@ -44,9 +43,6 @@ const ProjectForm: React.FC = () => { // Project mutation and submit const saveProjectMutation = useSaveProject({}); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { uploadingPlanningArea: planningArea } = useSelector((state) => state['/projects/new']); - useEffect(() => { return () => { dispatch(setBbox(null)); @@ -198,9 +194,16 @@ const ProjectForm: React.FC = () => {
{hasPlanningArea !== null && !hasPlanningArea && ( - + <> + + + )} {hasPlanningArea && ( @@ -219,41 +222,9 @@ const ProjectForm: React.FC = () => { ); }} - - {values.planningAreaId && ( -
- - {(fprops) => ( - - { - fprops.input.onChange(value); - }} - /> - - )} - - - {({ input }) => ( - - )} - -
- )} + )}
diff --git a/app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx b/app/layout/projects/new/form/country-region-selector/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/country-region-selector/component.tsx rename to app/layout/projects/new/form/country-region-selector/component.tsx diff --git a/app/layout/projects/new/form/planning-area-selector/country-region-selector/index.ts b/app/layout/projects/new/form/country-region-selector/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/country-region-selector/index.ts rename to app/layout/projects/new/form/country-region-selector/index.ts diff --git a/app/layout/projects/new/form/planning-area-selector/country-region-selector/types.ts b/app/layout/projects/new/form/country-region-selector/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-area-selector/country-region-selector/types.ts rename to app/layout/projects/new/form/country-region-selector/types.ts diff --git a/app/layout/projects/new/form/planning-area-selector/component.tsx b/app/layout/projects/new/form/planning-area-selector/component.tsx index 93227eee37..0410585898 100644 --- a/app/layout/projects/new/form/planning-area-selector/component.tsx +++ b/app/layout/projects/new/form/planning-area-selector/component.tsx @@ -8,9 +8,8 @@ import { import { useSelector } from 'react-redux'; -import PlanningUnitGrid from 'layout/projects/new/form/planning-unit-grid'; -import PlanningUnitAreaSize from 'layout/projects/new/form/planning-unit-area-size'; -import CountryRegionSelector from 'layout/projects/new/form/planning-area-selector/country-region-selector'; +import PlanningUnitGrid from 'layout/projects/new/form/planning-area-selector/planning-unit-grid'; +import PlanningUnitAreaSize from 'layout/projects/new/form/planning-area-selector/planning-unit-area-size'; import { PlanningAreaSelectorProps } from './types'; @@ -19,9 +18,8 @@ export const PlanningAreaSelector: React.FC = ({ }: PlanningAreaSelectorProps) => { const { countryId, - adminAreaLevel1Id, - adminAreaLevel2Id, planningUnitGridShape, + planningAreaId, } = values; const { @@ -31,13 +29,7 @@ export const PlanningAreaSelector: React.FC = ({ return (
- - - {!!countryId && ( + {(!!countryId || !!planningAreaId) && (
= ({ { - // React Final Form onChange fprops.input.onChange(value); }} /> diff --git a/app/layout/projects/new/form/planning-unit-area-size/component.tsx b/app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-unit-area-size/component.tsx rename to app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/component.tsx diff --git a/app/layout/projects/new/form/planning-unit-area-size/index.ts b/app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-unit-area-size/index.ts rename to app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/index.ts diff --git a/app/layout/projects/new/form/planning-unit-area-size/types.ts b/app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-unit-area-size/types.ts rename to app/layout/projects/new/form/planning-area-selector/planning-unit-area-size/types.ts diff --git a/app/layout/projects/new/form/planning-unit-grid/component.tsx b/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-unit-grid/component.tsx rename to app/layout/projects/new/form/planning-area-selector/planning-unit-grid/component.tsx diff --git a/app/layout/projects/new/form/planning-unit-grid/index.ts b/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-unit-grid/index.ts rename to app/layout/projects/new/form/planning-area-selector/planning-unit-grid/index.ts diff --git a/app/layout/projects/new/form/planning-unit-grid/planning-unit-button/component.tsx b/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/component.tsx similarity index 100% rename from app/layout/projects/new/form/planning-unit-grid/planning-unit-button/component.tsx rename to app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/component.tsx diff --git a/app/layout/projects/new/form/planning-unit-grid/planning-unit-button/index.ts b/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/index.ts similarity index 100% rename from app/layout/projects/new/form/planning-unit-grid/planning-unit-button/index.ts rename to app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/index.ts diff --git a/app/layout/projects/new/form/planning-unit-grid/planning-unit-button/types.ts b/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-unit-grid/planning-unit-button/types.ts rename to app/layout/projects/new/form/planning-area-selector/planning-unit-grid/planning-unit-button/types.ts diff --git a/app/layout/projects/new/form/planning-unit-grid/types.ts b/app/layout/projects/new/form/planning-area-selector/planning-unit-grid/types.ts similarity index 100% rename from app/layout/projects/new/form/planning-unit-grid/types.ts rename to app/layout/projects/new/form/planning-area-selector/planning-unit-grid/types.ts