From 83471892cea35aca7cf87f4fab399e4ead6e1348 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Fri, 15 Nov 2024 09:13:01 +0100
Subject: [PATCH] Geo attribute: added download button (#3653)

* layout adjustmnets

* code cleanup

---------

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
---
 webapp/components/buttons/ButtonDelete.js     |  4 +--
 webapp/components/form/uploadButton.js        |  3 +++
 .../nodeDefs/components/types/nodeDefGeo.js   | 25 ++++++++++++++-----
 .../nodeDefs/components/types/nodeDefGeo.scss |  6 +++++
 webapp/utils/domUtils.js                      | 22 +++++++++++-----
 5 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/webapp/components/buttons/ButtonDelete.js b/webapp/components/buttons/ButtonDelete.js
index 958b30df63..026d84f83c 100644
--- a/webapp/components/buttons/ButtonDelete.js
+++ b/webapp/components/buttons/ButtonDelete.js
@@ -4,11 +4,11 @@ import classNames from 'classnames'
 import { Button } from './Button'
 
 export const ButtonDelete = (props) => {
-  const { label = 'common.delete' } = props
+  const { className, label = 'common.delete' } = props
   return (
     <Button
       {...props}
-      className={classNames('btn-danger btn-delete', props.className)}
+      className={classNames('btn-danger btn-delete', className)}
       iconClassName="icon-bin2 icon-12px"
       label={label}
       variant="text"
diff --git a/webapp/components/form/uploadButton.js b/webapp/components/form/uploadButton.js
index 9c547ad062..dba654a4a4 100644
--- a/webapp/components/form/uploadButton.js
+++ b/webapp/components/form/uploadButton.js
@@ -21,6 +21,7 @@ const UploadButton = (props) => {
     onChange = null,
     showLabel = true,
     showIcon = true,
+    variant = 'contained',
   } = props
 
   const fileInput = useRef(null)
@@ -55,6 +56,7 @@ const UploadButton = (props) => {
         }}
         showLabel={showLabel}
         showIcon={showIcon}
+        variant={variant}
       />
     </>
   )
@@ -70,6 +72,7 @@ UploadButton.propTypes = {
   onChange: PropTypes.func,
   showIcon: PropTypes.bool,
   showLabel: PropTypes.bool,
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
 }
 
 export default UploadButton
diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.js b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.js
index 5bc08a3204..4255291812 100644
--- a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.js
+++ b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.js
@@ -11,7 +11,7 @@ import * as NodeDefLayout from '@core/survey/nodeDefLayout'
 
 import { RecordState } from '@webapp/store/ui/record'
 
-import { Button, ButtonIconDelete, ExpansionPanel, Map, PanelRight } from '@webapp/components'
+import { Button, ButtonDownload, ButtonIconDelete, ExpansionPanel, Map, PanelRight } from '@webapp/components'
 import { UploadButton } from '@webapp/components/form'
 import { Input } from '@webapp/components/form/Input'
 import { GeoPolygonInfo } from '@webapp/components/geo/GeoPolygonInfo'
@@ -21,6 +21,7 @@ import { useSurveyPreferredLang } from '@webapp/store/survey'
 import { NotificationActions } from '@webapp/store/ui'
 import { useAuthCanUseMap } from '@webapp/store/user/hooks'
 
+import { downloadTextToFile } from '@webapp/utils/domUtils'
 import { FileUtils } from '@webapp/utils/fileUtils'
 import { GeoJsonUtils } from '@webapp/utils/geoJsonUtils'
 
@@ -56,6 +57,7 @@ const NodeDefGeo = (props) => {
   const value = Node.getValue(node, NodeDefUiProps.getDefaultValue(nodeDef))
   const valueText = value ? JSON.stringify(value) : ''
 
+  const nodeDefName = NodeDef.getName(nodeDef)
   const nodeDefLabel = NodeDef.getLabel(nodeDef, lang)
 
   const toggleShowMap = useCallback(() => setShowMap(!showMap), [showMap])
@@ -75,6 +77,10 @@ const NodeDefGeo = (props) => {
     [dispatch, node, nodeDef, updateNode]
   )
 
+  const onDownloadClick = useCallback(() => {
+    downloadTextToFile(valueText, `${nodeDefName}.geojson`)
+  }, [nodeDefName, valueText])
+
   const onClearValueClick = useCallback(async () => {
     if (await confirm({ key: 'surveyForm.nodeDefGeo.confirmDelete' })) {
       updateNode(nodeDef, node, null)
@@ -130,16 +136,23 @@ const NodeDefGeo = (props) => {
       </div>
       <div className="action-buttons">
         {valueText && (
-          <>
+          <div className="row">
             {mapTriggerButton}
+            <ButtonDownload className="btn-s" onClick={onDownloadClick} showLabel={false} variant="contained" />
             {mapPanelRight}
-          </>
+          </div>
         )}
         {!entryDisabled && (
-          <>
-            <UploadButton className="btn-s" showLabel={false} onChange={onFilesChange} maxSize={maxFileSize} />
+          <div className="row">
+            <UploadButton
+              className="btn-s"
+              showLabel={false}
+              onChange={onFilesChange}
+              maxSize={maxFileSize}
+              variant="outlined"
+            />
             {valueText && <ButtonIconDelete onClick={onClearValueClick} />}
-          </>
+          </div>
         )}
       </div>
     </div>
diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.scss b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.scss
index c2f7b39fed..a6cc45cf16 100644
--- a/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.scss
+++ b/webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.scss
@@ -7,6 +7,12 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+
+    .row {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+    }
   }
 
   .info-panel {
diff --git a/webapp/utils/domUtils.js b/webapp/utils/domUtils.js
index f98a071bdf..2ded899d47 100644
--- a/webapp/utils/domUtils.js
+++ b/webapp/utils/domUtils.js
@@ -46,6 +46,21 @@ export const copyToClipboard = async (text) => {
   }
 }
 
+export const downloadToFile = (url, outputFileName) => {
+  const link = document.createElement('a')
+  link.href = url
+  link.download = outputFileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+export const downloadTextToFile = (text, outputFileName) => {
+  const blob = new Blob([text], { type: 'text/plain' })
+  const url = URL.createObjectURL(blob)
+  downloadToFile(url, outputFileName)
+}
+
 export const downloadSvgToPng = (svgElement) => {
   const serializer = new XMLSerializer()
   const svgString = serializer.serializeToString(svgElement)
@@ -67,12 +82,7 @@ export const downloadSvgToPng = (svgElement) => {
 
     // Create a download link for the canvas image
     const pngUrl = canvas.toDataURL('image/png')
-    const downloadLink = document.createElement('a')
-    downloadLink.href = pngUrl
-    downloadLink.download = 'chart.png'
-    document.body.appendChild(downloadLink)
-    downloadLink.click()
-    document.body.removeChild(downloadLink)
+    downloadToFile(pngUrl, 'chart.png')
     URL.revokeObjectURL(url)
   }
 }