diff --git a/src/frontend/src/api/SubmissionService.ts b/src/frontend/src/api/SubmissionService.ts index a041290cc8..03c37edf2f 100644 --- a/src/frontend/src/api/SubmissionService.ts +++ b/src/frontend/src/api/SubmissionService.ts @@ -151,3 +151,35 @@ export const DeleteGeometry = (url: string) => { await deleteGeometry(); }; }; + +export const downloadSubmissionGeojson = ( + url: string, + projectName: string, + params: { project_id: string; submitted_date_range: string | null }, +) => { + return async (dispatch: AppDispatch) => { + dispatch(SubmissionActions.DownloadSubmissionGeojsonLoading(true)); + + const getProjectSubmission = async (url: string) => { + try { + const response = await CoreModules.axios.get(url, { params, responseType: 'blob' }); + var a = document.createElement('a'); + a.href = window.URL.createObjectURL(response.data); + a.download = `${projectName}.geojson`; + a.click(); + } catch (error) { + dispatch( + CommonActions.SetSnackBar({ + open: true, + message: JSON.parse(await error.response.data.text())?.detail || 'Something went wrong', + variant: 'error', + duration: 2000, + }), + ); + } finally { + dispatch(SubmissionActions.DownloadSubmissionGeojsonLoading(false)); + } + }; + await getProjectSubmission(url); + }; +}; diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx index 916070b93c..139d8b265b 100644 --- a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx +++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx @@ -25,7 +25,11 @@ import { SubmissionActions } from '@/store/slices/SubmissionSlice'; import { CreateTaskEvent } from '@/api/TaskEvent'; import { ConvertXMLToJOSM, getDownloadProjectSubmission } from '@/api/task'; -import { SubmissionFormFieldsService, SubmissionTableService } from '@/api/SubmissionService'; +import { + downloadSubmissionGeojson, + SubmissionFormFieldsService, + SubmissionTableService, +} from '@/api/SubmissionService'; import filterParams from '@/utilfunctions/filterParams'; import { camelToFlat } from '@/utilfunctions/commonUtils'; @@ -59,6 +63,7 @@ const SubmissionsTable = ({ toggleView }) => { const projectInfo = useAppSelector((state) => state.project.projectInfo); const josmEditorError = useAppSelector((state) => state.task.josmEditorError); const downloadSubmissionLoading = useAppSelector((state) => state.task.downloadSubmissionLoading); + const downloadSubmissionGeojsonLoading = useAppSelector((state) => state.submission.DownloadSubmissionGeojsonLoading); const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails); const updateTaskStatusLoading = useAppSelector((state) => state.common.loading); @@ -82,6 +87,20 @@ const SubmissionsTable = ({ toggleView }) => { : null, }); + const submissionDownloadTypes: { type: 'csv' | 'json' | 'geojson'; label: string; loading: boolean }[] = [ + { + type: 'csv', + label: 'Download as Csv', + loading: downloadSubmissionLoading.type === 'csv' && downloadSubmissionLoading.loading, + }, + { + type: 'json', + label: 'Download as Json', + loading: downloadSubmissionLoading.type === 'json' && downloadSubmissionLoading.loading, + }, + { type: 'geojson', label: 'Download as GeoJson', loading: downloadSubmissionGeojsonLoading }, + ]; + useEffect(() => { if (!dateRange.start || !dateRange.end) return; @@ -209,14 +228,24 @@ const SubmissionsTable = ({ toggleView }) => { ); }; - const handleDownload = (downloadType: 'csv' | 'json') => { - dispatch( - getDownloadProjectSubmission(`${import.meta.env.VITE_API_URL}/submission/download`, projectInfo.name!, { - project_id: projectId, - submitted_date_range: filter?.submitted_date_range, - export_json: downloadType === 'json', - }), - ); + const handleDownload = (downloadType: 'csv' | 'json' | 'geojson') => { + if (downloadType === 'geojson') { + dispatch( + downloadSubmissionGeojson( + `${import.meta.env.VITE_API_URL}/submission/download-submission-geojson`, + projectInfo.name!, + { project_id: projectId, submitted_date_range: filter?.submitted_date_range }, + ), + ); + } else { + dispatch( + getDownloadProjectSubmission(`${import.meta.env.VITE_API_URL}/submission/download`, projectInfo.name!, { + project_id: projectId, + submitted_date_range: filter?.submitted_date_range, + export_json: downloadType === 'json', + }), + ); + } }; const handleTaskMap = async () => { @@ -364,28 +393,20 @@ const SubmissionsTable = ({ toggleView }) => { - handleDownload('csv')} - > -
-

Download as Csv

- {downloadSubmissionLoading.type === 'csv' && downloadSubmissionLoading.loading && ( - - )} -
-
- handleDownload('json')} - disabled={downloadSubmissionLoading.type === 'json' && downloadSubmissionLoading.loading} - > -
-

Download as Json

- {downloadSubmissionLoading.type === 'json' && downloadSubmissionLoading.loading && ( - - )} -
{' '} -
+ {submissionDownloadTypes?.map((submissionDownload) => ( + handleDownload(submissionDownload.type)} + > +
+

{submissionDownload.label}

+ {submissionDownload.loading && ( + + )} +
+
+ ))}