From 31f7c11bde04d427dfddfa689e715f88d5d1a91b Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 8 Dec 2023 09:54:57 +0545 Subject: [PATCH 01/36] feat(osm-download): Component Configured --- .../projectDetail/downloadOsmData.js | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 frontend/src/components/projectDetail/downloadOsmData.js diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js new file mode 100644 index 0000000000..899aef48b1 --- /dev/null +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -0,0 +1,66 @@ +import React from 'react'; +import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, AsteriskIcon } from '../svgIcons'; +import FileFormatCard from './fileFormatCard'; + +export const TITLED_ICONS = [ + { Icon: RoadIcon, title: 'roads', value: 'ROADS' }, + { Icon: HomeIcon, title: 'buildings', value: 'BUILDINGS' }, + { Icon: WavesIcon, title: 'waterways', value: 'WATERWAYS' }, + { Icon: TaskIcon, title: 'landUse', value: 'LAND_USE' }, + { Icon: AsteriskIcon, title: 'other', value: 'OTHER' }, +]; + +const fileFormats = [ + { format: 'SHP', url: 'https://s3.us-east-1.amazonaws.com/exports-stage.hotosm.org/' }, + { format: 'GEOJSON', url: 'https://s3.us-east-1.amazonaws.com/exports-stage.hotosm.org/' }, + { format: 'KML', url: 'https://s3.us-east-1.amazonaws.com/exports-stage.hotosm.org/' }, +]; +/** + * Renders a list of download options for OSM data based on the project mapping types. + * + * @param {Array} projectMappingTypes - The mapping types of the project. + * @return {JSX.Element} - The JSX element containing the download options. + */ +export const DownloadOsmData = ({ projectMappingTypes }) => { + const filteredMappingTypes = TITLED_ICONS?.filter((icon) => + projectMappingTypes?.includes(icon.value), + ); + + return ( +
+ {filteredMappingTypes.map((type) => ( +
+
+ +
+ +
+

{type.title}

+ +
+
+ ))} +
+ ); +}; From a1c9c4879de36cddab4c3b25dae565ff87a0dfde Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 8 Dec 2023 09:55:25 +0545 Subject: [PATCH 02/36] feat(osm-download): fileformatcard component --- .../projectDetail/fileFormatCard.js | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 frontend/src/components/projectDetail/fileFormatCard.js diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js new file mode 100644 index 0000000000..1820bef79f --- /dev/null +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -0,0 +1,29 @@ +import React from 'react'; + +/** + * Renders a list of file formats as clickable links. + * + * @param {Object[]} fileFormats - An array of file format objects. + * @param {string} fileFormats[].url - The URL of the file. + * @param {string} fileFormats[].format - The format of the file. + * @return {JSX.Element} The rendered list of file formats. + */ + +function FileFormatCard({ fileFormats }) { + return ( + <> + {fileFormats.map((fileFormat, index) => ( + + +

+ {fileFormat.format} +

+ + {index !== fileFormats.length - 1 &&
} + + ))} + + ); +} + +export default FileFormatCard; From 38ffca7568878ef1c7ad4ca68d936b1148667ac6 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 8 Dec 2023 09:55:47 +0545 Subject: [PATCH 03/36] feat(osm-download): project detail osm download card integrate --- frontend/src/components/projectDetail/index.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js index 675113cbc4..314e3fed79 100644 --- a/frontend/src/components/projectDetail/index.js +++ b/frontend/src/components/projectDetail/index.js @@ -26,6 +26,7 @@ import { Alert } from '../alert'; import './styles.scss'; import { useWindowSize } from '../../hooks/UseWindowSize'; +import { DownloadOsmData } from './downloadOsmData.js'; /* lazy imports must be last import */ const ProjectTimeline = React.lazy(() => import('./timeline' /* webpackChunkName: "timeline" */)); @@ -285,6 +286,18 @@ export const ProjectDetail = (props) => { /> )} + {/* Download OSM Data section Start */} +
+ + + +

+ +

+ +
+ {/* Download OSM Data section End */} + From 6e3e052cac0da329fd9d2135383373a304b399d5 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 8 Dec 2023 09:56:03 +0545 Subject: [PATCH 04/36] feat(osm-download): download osm data title --- frontend/src/components/projectDetail/messages.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/components/projectDetail/messages.js b/frontend/src/components/projectDetail/messages.js index 8298442b66..ba02a397de 100644 --- a/frontend/src/components/projectDetail/messages.js +++ b/frontend/src/components/projectDetail/messages.js @@ -223,6 +223,10 @@ export default defineMessages({ id: 'project.detail.sections.contributionsTimeline', defaultMessage: 'Contributions timeline', }, + downloadOsmData: { + id: 'project.detail.sections.downloadOsmData', + defaultMessage: 'Download OSM Data', + }, viewInOsmcha: { id: 'project.detail.sections.contributions.osmcha', defaultMessage: 'Changesets in OSMCha', From 6899e9a490d643ad363cc56bfdf798171e5e4e48 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 8 Dec 2023 09:57:39 +0545 Subject: [PATCH 05/36] feat(osm-download-style): style.scss updated --- frontend/src/components/projectDetail/styles.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/components/projectDetail/styles.scss b/frontend/src/components/projectDetail/styles.scss index 8e8aab2e1a..d454a55656 100644 --- a/frontend/src/components/projectDetail/styles.scss +++ b/frontend/src/components/projectDetail/styles.scss @@ -26,3 +26,10 @@ .menu-items-container { scrollbar-width: none; } + +.file-list-separator { + top: 13px; + height: 27px; + position: relative; + border: 1px solid #d73f3f; +} From 92089427fd365062b6544b88862598dd10b89ea8 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 15 Dec 2023 11:04:09 +0545 Subject: [PATCH 06/36] feat: added project metadata into component props --- frontend/src/components/projectDetail/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js index 314e3fed79..0fcfad6ce9 100644 --- a/frontend/src/components/projectDetail/index.js +++ b/frontend/src/components/projectDetail/index.js @@ -286,7 +286,9 @@ export const ProjectDetail = (props) => { /> )} + {/* Download OSM Data section Start */} + + {/* Download OSM Data section End */} From 1e5e54e9f102bb12e808bd87783a9a04694d50a5 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 15 Dec 2023 11:04:47 +0545 Subject: [PATCH 07/36] feat: added config for export tool s3 url --- frontend/src/config/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js index 41074cd781..16348cf611 100644 --- a/frontend/src/config/index.js +++ b/frontend/src/config/index.js @@ -59,6 +59,7 @@ export const POTLATCH2_EDITOR_URL = 'https://www.openstreetmap.org/edit?editor=potlatch2'; export const RAPID_EDITOR_URL = process.env.REACT_APP_RAPID_EDITOR_URL || 'https://mapwith.ai/rapid'; +export const EXPORT_TOOL_S3_URL = process.env.REACT_APP_EXPORT_TOOL_S3_URL || ''; export const TASK_COLOURS = { READY: '#fff', From 364118aefd25bf20c7d53543e8116f9751b9ad2f Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 15 Dec 2023 11:05:04 +0545 Subject: [PATCH 08/36] feat: added export tool s3 url and enable env --- example.env | 5 +++++ frontend/.env.expand | 1 + 2 files changed, 6 insertions(+) diff --git a/example.env b/example.env index 51c2e37818..9afc83f9d2 100644 --- a/example.env +++ b/example.env @@ -204,3 +204,8 @@ TM_DEFAULT_LOCALE=en # Sentry.io DSN Config (optional) # TM_SENTRY_BACKEND_DSN=https://foo.ingest.sentry.io/1234567 # TM_SENTRY_FRONTEND_DSN=https://bar.ingest.sentry.io/8901234 + + +EXPORT TOOL Integration with 0(Disable) and 1(Enable) and S3 URL for Export Tool +#EXPORT_TOOL_S3_URL=https://foorawdataapi.s3.amazonaws.com +#ENABLE_EXPORT_TOOL=0 \ No newline at end of file diff --git a/frontend/.env.expand b/frontend/.env.expand index 29585a9c42..93b6e9df93 100644 --- a/frontend/.env.expand +++ b/frontend/.env.expand @@ -43,3 +43,4 @@ REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL +REACT_APP_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL From 8ddeb67bf3390a88dca994d424805d08e353da6e Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 15 Dec 2023 11:05:20 +0545 Subject: [PATCH 09/36] feat: refactored code and added popup for not available data --- .../projectDetail/downloadOsmData.js | 98 +++++++++++++++++-- 1 file changed, 90 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 899aef48b1..350f9d2dc8 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -1,6 +1,8 @@ -import React from 'react'; +import React, { useState } from 'react'; import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, AsteriskIcon } from '../svgIcons'; import FileFormatCard from './fileFormatCard'; +import Popup from 'reactjs-popup'; +import { EXPORT_TOOL_S3_URL } from '../../config'; export const TITLED_ICONS = [ { Icon: RoadIcon, title: 'roads', value: 'ROADS' }, @@ -10,24 +12,99 @@ export const TITLED_ICONS = [ { Icon: AsteriskIcon, title: 'other', value: 'OTHER' }, ]; -const fileFormats = [ - { format: 'SHP', url: 'https://s3.us-east-1.amazonaws.com/exports-stage.hotosm.org/' }, - { format: 'GEOJSON', url: 'https://s3.us-east-1.amazonaws.com/exports-stage.hotosm.org/' }, - { format: 'KML', url: 'https://s3.us-east-1.amazonaws.com/exports-stage.hotosm.org/' }, -]; +const fileFormats = [{ format: 'SHP' }, { format: 'GEOJSON' }, { format: 'KML' }]; + /** * Renders a list of download options for OSM data based on the project mapping types. * * @param {Array} projectMappingTypes - The mapping types of the project. * @return {JSX.Element} - The JSX element containing the download options. */ -export const DownloadOsmData = ({ projectMappingTypes }) => { + +export const DownloadOsmData = ({ projectMappingTypes, project }) => { + const [showPopup, setShowPopup] = useState(false); + const [isDownloadingState, setIsDownloadingState] = useState(null); + + /** + * Downloads an S3 file from the given URL and saves it as a file. + * + * @param {string} title - The title of the file. + * @param {string} fileFormat - The format of the file. + * @return {Promise} Promise that resolves when the download is complete. + */ + const downloadS3File = async (title, fileFormat) => { + // Create the base URL for the S3 file + const baseUrl = `${EXPORT_TOOL_S3_URL}/TM/${project.projectId}/hotosm_project_${ + project.projectId + }_${title}_${fileFormat?.toLowerCase()}.zip`; + + // Set the state to indicate that the file download is in progress + setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: true }); + + try { + // Fetch the file from the S3 URL + const response = await fetch(baseUrl); + + // Check if the request was successful + if (response.ok) { + // Set the state to indicate that the file download is complete + setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: false }); + + // Get the file data as a blob + const blob = await response.blob(); + + // Create a download link for the file + const href = window.URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = href; + link.setAttribute( + 'download', + `hotosm_project_${project.projectId}_${title}_${fileFormat?.toLowerCase()}.zip`, + ); + + // Add the link to the document body, click it, and then remove it + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } else { + // Show a popup and throw an error if the request was not successful + setShowPopup(true); + throw new Error(`Request failed with status: ${response.status}`); + } + } catch (error) { + // Show a popup and log the error if an error occurs during the download + setShowPopup(true); + setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: false }); + console.error('Error:', error.message); + } + }; const filteredMappingTypes = TITLED_ICONS?.filter((icon) => projectMappingTypes?.includes(icon.value), ); return (
+ setShowPopup(false)}> + {(close) => ( +
+

Data Not Available.

+
+ +
+
+ )} + {filteredMappingTypes.map((type) => (
{ style={{ display: 'flex', gap: '12px' }} >

{type.title}

- +
))} From 71f11847aa9b425bf97aca84f0c7be923e405db5 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 15 Dec 2023 11:05:34 +0545 Subject: [PATCH 10/36] feat: added spinner for loading on download --- .../projectDetail/fileFormatCard.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js index 1820bef79f..c6ee525945 100644 --- a/frontend/src/components/projectDetail/fileFormatCard.js +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -1,24 +1,35 @@ import React from 'react'; +import { AnimatedLoadingIcon } from '../button'; /** * Renders a list of file formats as clickable links. * * @param {Object[]} fileFormats - An array of file format objects. - * @param {string} fileFormats[].url - The URL of the file. * @param {string} fileFormats[].format - The format of the file. * @return {JSX.Element} The rendered list of file formats. */ -function FileFormatCard({ fileFormats }) { +function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState }) { return ( <> {fileFormats.map((fileFormat, index) => ( - + {index !== fileFormats.length - 1 &&
} ))} From a6624933d4318cb18fb626c4f98f61ae0b2d3b86 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Tue, 19 Dec 2023 11:39:16 +0545 Subject: [PATCH 11/36] fix: json of mapping type changed --- frontend/src/components/projectDetail/downloadOsmData.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 350f9d2dc8..721cb8ae0f 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -5,10 +5,10 @@ import Popup from 'reactjs-popup'; import { EXPORT_TOOL_S3_URL } from '../../config'; export const TITLED_ICONS = [ - { Icon: RoadIcon, title: 'roads', value: 'ROADS' }, - { Icon: HomeIcon, title: 'buildings', value: 'BUILDINGS' }, - { Icon: WavesIcon, title: 'waterways', value: 'WATERWAYS' }, - { Icon: TaskIcon, title: 'landUse', value: 'LAND_USE' }, + { Icon: RoadIcon, title: 'highway', value: 'HIGHWAY' }, + { Icon: HomeIcon, title: 'building', value: 'BUILDING' }, + { Icon: WavesIcon, title: 'waterway', value: 'WATERWAY' }, + { Icon: TaskIcon, title: 'landuse', value: 'LANDUSE' }, { Icon: AsteriskIcon, title: 'other', value: 'OTHER' }, ]; From 7b5ff6132e6532912981af3e59e23c83105d0bc8 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Tue, 19 Dec 2023 13:09:53 +0545 Subject: [PATCH 12/36] revert: changes revert on mapping types --- frontend/src/components/projectDetail/downloadOsmData.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 721cb8ae0f..350f9d2dc8 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -5,10 +5,10 @@ import Popup from 'reactjs-popup'; import { EXPORT_TOOL_S3_URL } from '../../config'; export const TITLED_ICONS = [ - { Icon: RoadIcon, title: 'highway', value: 'HIGHWAY' }, - { Icon: HomeIcon, title: 'building', value: 'BUILDING' }, - { Icon: WavesIcon, title: 'waterway', value: 'WATERWAY' }, - { Icon: TaskIcon, title: 'landuse', value: 'LANDUSE' }, + { Icon: RoadIcon, title: 'roads', value: 'ROADS' }, + { Icon: HomeIcon, title: 'buildings', value: 'BUILDINGS' }, + { Icon: WavesIcon, title: 'waterways', value: 'WATERWAYS' }, + { Icon: TaskIcon, title: 'landUse', value: 'LAND_USE' }, { Icon: AsteriskIcon, title: 'other', value: 'OTHER' }, ]; From f74b4361d467015fcac828c2c18b7983d1447269 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 22 Dec 2023 16:23:27 +0545 Subject: [PATCH 13/36] feat: added formatted message and handled loading after download --- .../components/projectDetail/downloadOsmData.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 350f9d2dc8..016d77f0cd 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -3,6 +3,8 @@ import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, AsteriskIcon } from '../svgIco import FileFormatCard from './fileFormatCard'; import Popup from 'reactjs-popup'; import { EXPORT_TOOL_S3_URL } from '../../config'; +import messages from './messages'; +import { FormattedMessage } from 'react-intl'; export const TITLED_ICONS = [ { Icon: RoadIcon, title: 'roads', value: 'ROADS' }, @@ -22,7 +24,7 @@ const fileFormats = [{ format: 'SHP' }, { format: 'GEOJSON' }, { format: 'KML' } */ export const DownloadOsmData = ({ projectMappingTypes, project }) => { - const [showPopup, setShowPopup] = useState(false); + const [showPopup, setShowPopup] = useState(true); const [isDownloadingState, setIsDownloadingState] = useState(null); /** @@ -47,9 +49,6 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { // Check if the request was successful if (response.ok) { - // Set the state to indicate that the file download is complete - setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: false }); - // Get the file data as a blob const blob = await response.blob(); @@ -66,6 +65,8 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { document.body.appendChild(link); link.click(); document.body.removeChild(link); + // Set the state to indicate that the file download is complete + setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: false }); } else { // Show a popup and throw an error if the request was not successful setShowPopup(true); @@ -87,7 +88,12 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { setShowPopup(false)}> {(close) => (
-

Data Not Available.

+

+ +

+

+ +

{/* Download OSM Data section Start */} - -
- - - -

- -

- -
+ {/* Converted String to Integer */} + {+ENABLE_EXPORT_TOOL === 1 && ( +
+ + + +

+ +

+ +
+ )} {/* Download OSM Data section End */} From 080da1ca15ef0c88c584940f3b9136b725b7e1be Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 22 Dec 2023 17:08:10 +0545 Subject: [PATCH 18/36] feat: added env bool for enable export tool --- frontend/.env.expand | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/.env.expand b/frontend/.env.expand index 93b6e9df93..58cf2498ab 100644 --- a/frontend/.env.expand +++ b/frontend/.env.expand @@ -44,3 +44,4 @@ REACT_APP_ENVIRONMENT=$TM_ENVIRONMENT REACT_APP_TM_DEFAULT_CHANGESET_COMMENT=$TM_DEFAULT_CHANGESET_COMMENT REACT_APP_RAPID_EDITOR_URL=$RAPID_EDITOR_URL REACT_APP_EXPORT_TOOL_S3_URL=$EXPORT_TOOL_S3_URL +REACT_APP_ENABLE_EXPORT_TOOL=$ENABLE_EXPORT_TOOL From 6d812ed03a38f0e08e893fee9fdfae82a657b236 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 22 Dec 2023 17:08:21 +0545 Subject: [PATCH 19/36] feat: config added --- frontend/src/config/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js index 16348cf611..343f7c3171 100644 --- a/frontend/src/config/index.js +++ b/frontend/src/config/index.js @@ -60,6 +60,7 @@ export const POTLATCH2_EDITOR_URL = export const RAPID_EDITOR_URL = process.env.REACT_APP_RAPID_EDITOR_URL || 'https://mapwith.ai/rapid'; export const EXPORT_TOOL_S3_URL = process.env.REACT_APP_EXPORT_TOOL_S3_URL || ''; +export const ENABLE_EXPORT_TOOL = process.env.REACT_APP_ENABLE_EXPORT_TOOL || ''; export const TASK_COLOURS = { READY: '#fff', From 15ec2397af691ab054bdffb6f1108d4280af6e0c Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Wed, 27 Dec 2023 15:44:52 +0545 Subject: [PATCH 20/36] fix (sonarLint): classname and proptypes issue --- .../projectDetail/downloadOsmData.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index f6cf249d5a..c7f561dce3 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, AsteriskIcon } from '../svgIcons'; import FileFormatCard from './fileFormatCard'; import Popup from 'reactjs-popup'; @@ -87,18 +88,18 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {
setShowPopup(false)}> {(close) => ( -
-

+
+

-

+

-
+
); }; + +DownloadOsmData.propTypes = { + projectMappingTypes: PropTypes.arrayOf(PropTypes.string).isRequired, + project: PropTypes.objectOf(PropTypes.any).isRequired, +}; From ddd9739bb276a997ccbcb8c4da5497ff7144f878 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Wed, 27 Dec 2023 16:05:40 +0545 Subject: [PATCH 21/36] fix(SonarLint) : fileFormatCard proptypes --- .../components/projectDetail/fileFormatCard.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js index 9c4ff67392..4f83fd79f6 100644 --- a/frontend/src/components/projectDetail/fileFormatCard.js +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -1,5 +1,6 @@ import React from 'react'; import { AnimatedLoadingIcon } from '../button'; +import PropTypes from 'prop-types'; /** * Renders a list of file formats as clickable links. @@ -19,23 +20,23 @@ function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState isDownloadingState?.fileFormat === fileFormat?.format; return ( - -
+
+ {index !== fileFormats.length - 1 &&
} ); @@ -45,3 +46,10 @@ function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState } export default FileFormatCard; + +FileFormatCard.propTypes = { + title: PropTypes.string, + fileFormats: PropTypes.arrayOf(PropTypes.object), + downloadS3Data: PropTypes.func, + isDownloadingState: PropTypes.bool, +}; From 8ff0499294502c2f5758249d8526908cd52e3bd6 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 28 Dec 2023 10:53:40 +0545 Subject: [PATCH 22/36] Feat project details proptypes added sonarlint fix --- .../src/components/projectDetail/index.js | 54 ++++++++++++++++++- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js index 011820beae..54a7e83193 100644 --- a/frontend/src/components/projectDetail/index.js +++ b/frontend/src/components/projectDetail/index.js @@ -4,6 +4,7 @@ import ReactPlaceholder from 'react-placeholder'; import centroid from '@turf/centroid'; import { FormattedMessage } from 'react-intl'; import { supported } from 'mapbox-gl'; +import PropTypes from 'prop-types'; import messages from './messages'; import viewsMessages from '../../views/messages'; @@ -80,7 +81,13 @@ const ProjectDetailMap = (props) => { }} >
- setTaskBordersOnly(false)} className="pb2 mh2 pointer ph2"> + setTaskBordersOnly(false)} + onKeyDown={() => setTaskBordersOnly(false)} + className="pb2 mh2 pointer ph2 " + >
@@ -90,7 +97,7 @@ const ProjectDetailMap = (props) => { ); }; -export const ProjectDetailLeft = ({ project, contributors, className, type }: Object) => { +export const ProjectDetailLeft = ({ project, contributors, className, type }) => { const htmlShortDescription = project.projectInfo && htmlFromMarkdown(project.projectInfo.shortDescription); @@ -362,3 +369,46 @@ export const ProjectDetail = (props) => {
); }; + +ProjectDetail.propTypes = { + project: PropTypes.shape({ + projectId: PropTypes.number, + projectInfo: PropTypes.shape({ + description: PropTypes.string, + }), + mappingTypes: PropTypes.arrayOf(PropTypes.any).isRequired, + author: PropTypes.string, + organisationName: PropTypes.string, + organisationSlug: PropTypes.string, + organisationLogo: PropTypes.string, + mappingPermission: PropTypes.string, + validationPermission: PropTypes.string, + teams: PropTypes.arrayOf(PropTypes.object), + }).isRequired, + className: PropTypes.string, +}; + +ProjectDetailMap.propTypes = { + project: PropTypes.shape({ + areaOfInterest: PropTypes.object, + priorityAreas: PropTypes.arrayOf(PropTypes.object), + }).isRequired, + tasks: PropTypes.arrayOf(PropTypes.object), + navigate: PropTypes.func, + type: PropTypes.string, + tasksError: PropTypes.string, + projectLoading: PropTypes.bool, +}; + +ProjectDetailLeft.propTypes = { + project: PropTypes.shape({ + projectInfo: PropTypes.shape({ + shortDescription: PropTypes.string, + }), + projectId: PropTypes.number, + tasks: PropTypes.arrayOf(PropTypes.object), + }).isRequired, + contributors: PropTypes.arrayOf(PropTypes.object), + className: PropTypes.string, + type: PropTypes.string, +}; From 8f5129a3426f0c8c6ba657fab7aff5220d2c98e7 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 28 Dec 2023 10:54:07 +0545 Subject: [PATCH 23/36] Feat removed button tag for ui representation --- frontend/src/components/projectDetail/fileFormatCard.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js index 4f83fd79f6..bde232e040 100644 --- a/frontend/src/components/projectDetail/fileFormatCard.js +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -21,7 +21,8 @@ function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState return ( - + {index !== fileFormats.length - 1 &&
} ); From 645f8e916ff059cb84656ab64671c43cf6077ef1 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 28 Dec 2023 10:54:30 +0545 Subject: [PATCH 24/36] Feat added footer menuitem for downloadosmdata --- frontend/src/components/projectDetail/footer.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/components/projectDetail/footer.js b/frontend/src/components/projectDetail/footer.js index 09cc1ad65a..35c7e35d59 100644 --- a/frontend/src/components/projectDetail/footer.js +++ b/frontend/src/components/projectDetail/footer.js @@ -40,6 +40,10 @@ const menuItems = [ href: '#similarProjects', label: , }, + { + href: '#downloadOsmData', + label: , + }, ]; export const ProjectDetailFooter = ({ className, projectId }) => { From c12a6965c64dbd4e22370db2840aede5645ad8c2 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 28 Dec 2023 10:55:08 +0545 Subject: [PATCH 25/36] Fix order of menuitem fixed --- frontend/src/components/projectDetail/footer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/projectDetail/footer.js b/frontend/src/components/projectDetail/footer.js index 35c7e35d59..a14f13abd6 100644 --- a/frontend/src/components/projectDetail/footer.js +++ b/frontend/src/components/projectDetail/footer.js @@ -36,14 +36,14 @@ const menuItems = [ href: '#contributions', label: , }, - { - href: '#similarProjects', - label: , - }, { href: '#downloadOsmData', label: , }, + { + href: '#similarProjects', + label: , + }, ]; export const ProjectDetailFooter = ({ className, projectId }) => { From eb859f4b4d3102736b1f610f6c8fc2c9e099c875 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 10:52:06 +0545 Subject: [PATCH 26/36] feat animation scss added --- frontend/src/assets/styles/index.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss index bab0e3f339..64037b15ef 100644 --- a/frontend/src/assets/styles/index.scss +++ b/frontend/src/assets/styles/index.scss @@ -11,3 +11,14 @@ @import 'learn'; @import 'notifications'; @import 'contributions'; + +.fade-in { + // display: none; + opacity: 0; + transition: opacity 0.5s ease-in; +} + +.fade-in.active { + // display: flex; + opacity: 1; +} From 7d6c0a258adb14464481674c49adf984048dc446 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 10:52:22 +0545 Subject: [PATCH 27/36] feat download svg icon added --- frontend/src/components/svgIcons/download.js | 21 ++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 frontend/src/components/svgIcons/download.js diff --git a/frontend/src/components/svgIcons/download.js b/frontend/src/components/svgIcons/download.js new file mode 100644 index 0000000000..bf33896801 --- /dev/null +++ b/frontend/src/components/svgIcons/download.js @@ -0,0 +1,21 @@ +import React from 'react'; + +export class DownloadIcon extends React.PureComponent { + render() { + return ( + + + + ); + } +} From da7aadbbaa955e5647293ff381ce1549b06900e7 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 10:53:08 +0545 Subject: [PATCH 28/36] feat UI added for category of formats --- .../projectDetail/downloadOsmData.js | 110 ++++++++++++++---- 1 file changed, 87 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index c7f561dce3..5eacd54f5f 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, AsteriskIcon } from '../svgIcons'; +import { RoadIcon, HomeIcon, WavesIcon, TaskIcon, DownloadIcon } from '../svgIcons'; import FileFormatCard from './fileFormatCard'; import Popup from 'reactjs-popup'; import { EXPORT_TOOL_S3_URL } from '../../config'; @@ -8,11 +8,34 @@ import messages from './messages'; import { FormattedMessage } from 'react-intl'; export const TITLED_ICONS = [ - { Icon: RoadIcon, title: 'roads', value: 'ROADS' }, - { Icon: HomeIcon, title: 'buildings', value: 'BUILDINGS' }, - { Icon: WavesIcon, title: 'waterways', value: 'WATERWAYS' }, - { Icon: TaskIcon, title: 'landUse', value: 'LAND_USE' }, - { Icon: AsteriskIcon, title: 'other', value: 'OTHER' }, + { + Icon: RoadIcon, + title: 'roads', + value: 'ROADS', + featuretype: ['lines'], + formats: ['geojson', 'shp', 'kml'], + }, + { + Icon: HomeIcon, + title: 'buildings', + value: 'BUILDINGS', + featuretype: ['points', 'polygons'], + formats: ['geojson', 'shp', 'kml'], + }, + { + Icon: WavesIcon, + title: 'waterways', + value: 'WATERWAYS', + featuretype: ['lines', 'polygons'], + formats: ['geojson', 'shp', 'kml'], + }, + { + Icon: TaskIcon, + title: 'landuse', + value: 'LAND_USE', + featuretype: ['points', 'polygons'], + formats: ['geojson', 'shp', 'kml'], + }, ]; const fileFormats = [{ format: 'SHP' }, { format: 'GEOJSON' }, { format: 'KML' }]; @@ -27,7 +50,13 @@ const fileFormats = [{ format: 'SHP' }, { format: 'GEOJSON' }, { format: 'KML' } export const DownloadOsmData = ({ projectMappingTypes, project }) => { const [showPopup, setShowPopup] = useState(false); const [isDownloadingState, setIsDownloadingState] = useState(null); + const [selectedCategoryFormat, setSelectedCategoryFormat] = useState(null); + const datasetConfig = { + dataset_prefix: `hotosm_project_${project.projectId}`, + dataset_folder: 'TM', + dataset_title: `Tasking Manger Project ${project.projectId}`, + }; /** * Downloads an S3 file from the given URL and saves it as a file. * @@ -35,11 +64,13 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { * @param {string} fileFormat - The format of the file. * @return {Promise} Promise that resolves when the download is complete. */ - const downloadS3File = async (title, fileFormat) => { + const downloadS3File = async (title, fileFormat, feature_type) => { // Create the base URL for the S3 file - const baseUrl = `${EXPORT_TOOL_S3_URL}/TM/${project.projectId}/hotosm_project_${ - project.projectId - }_${title}_${fileFormat?.toLowerCase()}.zip`; + const baseUrl = `${EXPORT_TOOL_S3_URL}/${datasetConfig.dataset_folder}/${ + datasetConfig.dataset_prefix + }/${title}/${feature_type}/${ + datasetConfig.dataset_prefix + }_${title}_${feature_type}_${fileFormat.toLowerCase()}.zip`; // Set the state to indicate that the file download is in progress setIsDownloadingState({ title: title, fileFormat: fileFormat, isDownloading: true }); @@ -83,7 +114,6 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { const filteredMappingTypes = TITLED_ICONS?.filter((icon) => projectMappingTypes?.includes(icon.value), ); - return (
setShowPopup(false)}> @@ -135,18 +165,52 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { style={{ height: '56px' }} />
- -
-

{type.title}

- +
+
+

{type.title}

+ +
+
+ {selectedCategoryFormat && + selectedCategoryFormat.title === type.title && + type?.featuretype?.map((typ) => ( + + downloadS3File( + selectedCategoryFormat.title, + selectedCategoryFormat.format, + typ, + ) + } + className="flex flex-row items-center pointer link hover-red color-inherit" + style={{ gap: '10px' }} + > + +

{typ}

+ + ))} +
))} From bca69c75823a23b62c421d8ce3f1404378df6c4c Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 10:53:22 +0545 Subject: [PATCH 29/36] feat format category hover effect added --- .../projectDetail/fileFormatCard.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js index bde232e040..b62024900b 100644 --- a/frontend/src/components/projectDetail/fileFormatCard.js +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -10,7 +10,13 @@ import PropTypes from 'prop-types'; * @return {JSX.Element} The rendered list of file formats. */ -function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState }) { +function FileFormatCard({ + title, + fileFormats, + isDownloadingState, + setSelectedCategoryFormat, + selectedCategoryFormat, +}) { return ( <> {fileFormats.map((fileFormat, index) => { @@ -29,9 +35,14 @@ function FileFormatCard({ title, fileFormats, downloadS3Data, isDownloadingState ? { cursor: 'not-allowed', pointerEvents: 'none' } : { cursor: 'pointer' } } - onClick={() => downloadS3Data(title, fileFormat.format)} - onKeyUp={() => downloadS3Data(title, fileFormat.format)} - className="link hover-red color-inherit" + onClick={() => setSelectedCategoryFormat({ title, format: fileFormat.format })} + onKeyUp={() => setSelectedCategoryFormat({ title, format: fileFormat.format })} + className={`link ${ + selectedCategoryFormat?.format === fileFormat?.format && + selectedCategoryFormat.title === title + ? 'red' + : '' + } hover-red color-inherit`} >

{fileFormat.format} From bbb367b95f68a8d18bd92be91492145de7950c20 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 10:53:38 +0545 Subject: [PATCH 30/36] feat svg icon added on index of svgicons --- frontend/src/components/svgIcons/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/svgIcons/index.js b/frontend/src/components/svgIcons/index.js index b59491f78d..c828d472a3 100644 --- a/frontend/src/components/svgIcons/index.js +++ b/frontend/src/components/svgIcons/index.js @@ -82,3 +82,4 @@ export { CutIcon } from './cut'; export { FileImportIcon } from './fileImport'; export { CalendarIcon } from './calendar'; export { CommentIcon } from './comment'; +export { DownloadIcon } from './download'; From f83f0c526c851ee0ac0d97787df4f557a4b9752a Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 14:27:05 +0545 Subject: [PATCH 31/36] fix sonarlint changes --- .../src/components/projectDetail/downloadOsmData.js | 9 +++++++++ .../src/components/projectDetail/fileFormatCard.js | 11 +++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 5eacd54f5f..68f43723e2 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -62,6 +62,7 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { * * @param {string} title - The title of the file. * @param {string} fileFormat - The format of the file. + * @param {string} feature_type - The feature type of the ffile. * @return {Promise} Promise that resolves when the download is complete. */ const downloadS3File = async (title, fileFormat, feature_type) => { @@ -192,6 +193,7 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { selectedCategoryFormat.title === type.title && type?.featuretype?.map((typ) => ( downloadS3File( selectedCategoryFormat.title, @@ -199,6 +201,13 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { typ, ) } + onKeyUp={() => + downloadS3File( + selectedCategoryFormat.title, + selectedCategoryFormat.format, + typ, + ) + } className="flex flex-row items-center pointer link hover-red color-inherit" style={{ gap: '10px' }} > diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js index b62024900b..7e57fbc596 100644 --- a/frontend/src/components/projectDetail/fileFormatCard.js +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -5,8 +5,11 @@ import PropTypes from 'prop-types'; /** * Renders a list of file formats as clickable links. * + * @param {string} props.title - The title of the card. * @param {Object[]} fileFormats - An array of file format objects. - * @param {string} fileFormats[].format - The format of the file. + * @param {Object} isDownloadingState - The downloading state object. + * @param {function} setSelectedCategoryFormat - The function to set the selected category format. + * @param {Object} selectedCategoryFormat - The selected category format object. * @return {JSX.Element} The rendered list of file formats. */ @@ -62,6 +65,10 @@ export default FileFormatCard; FileFormatCard.propTypes = { title: PropTypes.string, fileFormats: PropTypes.arrayOf(PropTypes.object), - downloadS3Data: PropTypes.func, isDownloadingState: PropTypes.bool, + setSelectedCategoryFormat: PropTypes.func, + selectedCategoryFormat: PropTypes.objectOf({ + title: PropTypes.string, + format: PropTypes.PropTypes.string, + }), }; From e65c57f734922d17c0a170506251ee4c1abbb736 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 17:15:28 +0545 Subject: [PATCH 32/36] feat: added feature_type on downloaded file --- frontend/src/assets/styles/index.scss | 2 -- frontend/src/components/projectDetail/downloadOsmData.js | 4 +++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss index 64037b15ef..e582f8c119 100644 --- a/frontend/src/assets/styles/index.scss +++ b/frontend/src/assets/styles/index.scss @@ -13,12 +13,10 @@ @import 'contributions'; .fade-in { - // display: none; opacity: 0; transition: opacity 0.5s ease-in; } .fade-in.active { - // display: flex; opacity: 1; } diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 68f43723e2..2f665a8ac7 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -91,7 +91,9 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { link.href = href; link.setAttribute( 'download', - `hotosm_project_${project.projectId}_${title}_${fileFormat?.toLowerCase()}.zip`, + `hotosm_project_${ + project.projectId + }_${title}_${feature_type}_${fileFormat?.toLowerCase()}.zip`, ); // Add the link to the document body, click it, and then remove it From 80a516b29f7c65605f51bddf142fabf37b0c7208 Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Thu, 4 Jan 2024 18:03:15 +0545 Subject: [PATCH 33/36] feat removed points from buildings --- frontend/src/components/projectDetail/downloadOsmData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 2f665a8ac7..24779a9484 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -19,7 +19,7 @@ export const TITLED_ICONS = [ Icon: HomeIcon, title: 'buildings', value: 'BUILDINGS', - featuretype: ['points', 'polygons'], + featuretype: ['polygons'], formats: ['geojson', 'shp', 'kml'], }, { From 574770a85d60e53ec7a0868c82ee70b4e3aa22db Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 5 Jan 2024 10:42:27 +0545 Subject: [PATCH 34/36] feat: hover effect added on osm download icon --- frontend/src/assets/styles/index.scss | 5 +++++ frontend/src/components/projectDetail/downloadOsmData.js | 8 ++------ frontend/src/components/svgIcons/download.js | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/frontend/src/assets/styles/index.scss b/frontend/src/assets/styles/index.scss index e582f8c119..fa5ce80aa6 100644 --- a/frontend/src/assets/styles/index.scss +++ b/frontend/src/assets/styles/index.scss @@ -20,3 +20,8 @@ .fade-in.active { opacity: 1; } + +.categorycard:hover > svg *, +.categorycard:hover { + fill: #d73f3f; +} diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 24779a9484..33d308bba1 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -210,14 +210,10 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { typ, ) } - className="flex flex-row items-center pointer link hover-red color-inherit" + className="flex flex-row items-center pointer link hover-red color-inherit categorycard" style={{ gap: '10px' }} > - +

{typ}

))} diff --git a/frontend/src/components/svgIcons/download.js b/frontend/src/components/svgIcons/download.js index bf33896801..61d0399042 100644 --- a/frontend/src/components/svgIcons/download.js +++ b/frontend/src/components/svgIcons/download.js @@ -8,11 +8,11 @@ export class DownloadIcon extends React.PureComponent { height="16" width="16" viewBox="0 0 512 512" + fill="#000" {...this.props} > From a38dc576d98e40c655e300bbcc074bd84f7e137a Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Fri, 5 Jan 2024 10:59:27 +0545 Subject: [PATCH 35/36] feat padding reduced for gaps on osmdownload --- frontend/src/components/projectDetail/downloadOsmData.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 33d308bba1..4a1acdfefa 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -118,7 +118,7 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => { projectMappingTypes?.includes(icon.value), ); return ( -
+
setShowPopup(false)}> {(close) => (
From 838eb5b6a34871b35d79004fe7b6df37d2dfcb5a Mon Sep 17 00:00:00 2001 From: Deepak Pradhan Date: Mon, 8 Jan 2024 11:34:35 +0545 Subject: [PATCH 36/36] feat: format handled from config itself --- .../components/projectDetail/downloadOsmData.js | 8 ++++---- .../components/projectDetail/fileFormatCard.js | 15 +++++++-------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/projectDetail/downloadOsmData.js b/frontend/src/components/projectDetail/downloadOsmData.js index 4a1acdfefa..aea68bace2 100644 --- a/frontend/src/components/projectDetail/downloadOsmData.js +++ b/frontend/src/components/projectDetail/downloadOsmData.js @@ -38,8 +38,6 @@ export const TITLED_ICONS = [ }, ]; -const fileFormats = [{ format: 'SHP' }, { format: 'GEOJSON' }, { format: 'KML' }]; - /** * Renders a list of download options for OSM data based on the project mapping types. * @@ -176,7 +174,7 @@ export const DownloadOsmData = ({ projectMappingTypes, project }) => {

{type.title}

{ style={{ gap: '10px' }} > -

{typ}

+

+ {typ} {selectedCategoryFormat.format} +

))}
diff --git a/frontend/src/components/projectDetail/fileFormatCard.js b/frontend/src/components/projectDetail/fileFormatCard.js index 7e57fbc596..fc2c11b24c 100644 --- a/frontend/src/components/projectDetail/fileFormatCard.js +++ b/frontend/src/components/projectDetail/fileFormatCard.js @@ -26,10 +26,10 @@ function FileFormatCard({ const loadingState = isDownloadingState?.isDownloading && isDownloadingState?.title === title && - isDownloadingState?.fileFormat === fileFormat?.format; + isDownloadingState?.fileFormat === fileFormat; return ( - + setSelectedCategoryFormat({ title, format: fileFormat.format })} - onKeyUp={() => setSelectedCategoryFormat({ title, format: fileFormat.format })} + onClick={() => setSelectedCategoryFormat({ title, format: fileFormat })} + onKeyUp={() => setSelectedCategoryFormat({ title, format: fileFormat })} className={`link ${ - selectedCategoryFormat?.format === fileFormat?.format && - selectedCategoryFormat.title === title + selectedCategoryFormat === fileFormat && selectedCategoryFormat.title === title ? 'red' : '' } hover-red color-inherit`} > -

- {fileFormat.format} +

+ {fileFormat} {loadingState ? : null}