Closes geosolutions-it/austrocontrol-C125#12

web/client/actions/__tests__/annotations-test.js

@@ -64,7 +64,8 @@ const {
     filterAnnotations,
     closeAnnotations,
     confirmCloseAnnotations,
-    cancelCloseAnnotations
+    cancelCloseAnnotations,
+    DOWNLOAD, download
 } = require('../annotations');
 
 describe('Test correctness of the annotations actions', () => {
@@ -267,4 +268,8 @@ describe('Test correctness of the annotations actions', () => {
         const result = cancelCloseAnnotations();
         expect(result.type).toEqual(CANCEL_CLOSE_ANNOTATIONS);
     });
+    it('download  annotations', () => {
+        const result = download();
+        expect(result.type).toEqual(DOWNLOAD);
+    });
 });

web/client/actions/annotations.js

@@ -39,6 +39,13 @@ const SHOW_TEXT_AREA = 'ANNOTATIONS:SHOW_TEXT_AREA';
 const ADD_TEXT = 'ANNOTATIONS:ADD_TEXT';
 const CANCEL_CLOSE_TEXT = 'ANNOTATIONS:CANCEL_CLOSE_TEXT';
 const SAVE_TEXT = 'ANNOTATIONS:SAVE_TEXT';
+const DOWNLOAD = 'ANNOTATIONS:DOWNLOAD';
+
+function download() {
+    return {
+        type: DOWNLOAD
+    };
+}
 
 const {head} = require('lodash');
 
@@ -289,5 +296,6 @@ module.exports = {
     filterAnnotations,
     closeAnnotations,
     confirmCloseAnnotations,
-    cancelCloseAnnotations
+    cancelCloseAnnotations,
+    DOWNLOAD, download
 };

web/client/components/mapcontrols/annotations/Annotations.jsx

@@ -71,6 +71,7 @@ const defaultConfig = require('./AnnotationsConfig');
  * @prop {function} onDetail triggered when the user clicks on an annotation card
  * @prop {function} onFilter triggered when the user enters some text in the filtering widget
  * @prop {function} classNameSelector optional selector to assign custom a CSS class to annotations, based on
+ * @prop {function} onDownload triggered when the user clicks on the download annotations button
  * the annotation's attributes.
  */
 class Annotations extends React.Component {
@@ -104,7 +105,8 @@ class Annotations extends React.Component {
         filter: PropTypes.string,
         onFilter: PropTypes.func,
         classNameSelector: PropTypes.func,
-        width: PropTypes.number
+        width: PropTypes.number,
+        onDownload: React.PropTypes.func
     };
 
     static contextTypes = {
@@ -227,6 +229,13 @@ class Annotations extends React.Component {
                                     tooltip: <Message msgId="annotations.add"/>,
                                     visible: this.props.mode === "list",
                                     onClick: () => { this.props.onAdd(); }
+                                },
+                                {
+                                    glyph: 'download',
+                                    disabled: !(this.props.annotations && this.props.annotations.length > 0),
+                                    tooltip: <Message msgId="annotations.downloadtooltip"/>,
+                                    visible: this.props.mode === "list",
+                                    onClick: () => { this.props.onDownload(); }
                                 }
                             ]}/>
                     </Col>

web/client/epics/__tests__/annotations-test.js

@@ -16,13 +16,13 @@ const {HIDE_MAPINFO_MARKER, PURGE_MAPINFO_RESULTS} = require('../../actions/mapI
 const {configureMap
 } = require('../../actions/config');
 const {editAnnotation, confirmRemoveAnnotation, saveAnnotation, cancelEditAnnotation, setStyle, highlight, cleanHighlight,
-    toggleAdd, UPDATE_ANNOTATION_GEOMETRY, SHOW_TEXT_AREA, cancelText, stopDrawing
+    toggleAdd, UPDATE_ANNOTATION_GEOMETRY, SHOW_TEXT_AREA, cancelText, stopDrawing, download
 } = require('../../actions/annotations');
 const {clickOnMap
 } = require('../../actions/map');
 const {addAnnotationsLayerEpic, editAnnotationEpic, removeAnnotationEpic, saveAnnotationEpic,
     cancelEditAnnotationEpic, startDrawMarkerEpic, endDrawGeomEpic, setStyleEpic, restoreStyleEpic, highlighAnnotationEpic,
-    cleanHighlightAnnotationEpic, addTextEpic, cancelTextAnnotationsEpic, endDrawTextEpic, stopDrawingMultiGeomEpic
+    cleanHighlightAnnotationEpic, addTextEpic, cancelTextAnnotationsEpic, endDrawTextEpic, stopDrawingMultiGeomEpic, downloadAnnotations
 } = require('../annotations')({});
 const rootEpic = combineEpics(addAnnotationsLayerEpic, editAnnotationEpic, removeAnnotationEpic, saveAnnotationEpic,
     setStyleEpic, cancelEditAnnotationEpic, startDrawMarkerEpic, endDrawGeomEpic, restoreStyleEpic, highlighAnnotationEpic,
@@ -306,4 +306,24 @@ describe('annotations Epics', () => {
         }, state);
     });
 
+    it('export annotation fail', (done) => {
+        const state = {
+            layers: {
+                            flat: []
+                        }
+        };
+        testEpic(downloadAnnotations, 1, download(), actions => {
+            expect(actions.length).toBe(1);
+            actions.map((action) => {
+                switch (action.type) {
+                    case "SHOW_NOTIFICATION":
+                        break;
+                    default:
+                        expect(false).toBe(true);
+                }
+            });
+            done();
+        }, state);
+    });
+
 });

web/client/epics/annotations.js

@@ -7,15 +7,18 @@
  */
 
 const Rx = require('rxjs');
+const {saveAs} = require('file-saver');
 const {MAP_CONFIG_LOADED} = require('../actions/config');
 const {TOGGLE_CONTROL, toggleControl} = require('../actions/controls');
 const {addLayer, updateNode, changeLayerProperties, removeLayer} = require('../actions/layers');
 const {hideMapinfoMarker, purgeMapInfoResults} = require('../actions/mapInfo');
 
+const {error} = require('../actions/notifications');
+
 const {updateAnnotationGeometry, setStyle, toggleStyle, cleanHighlight, toggleAdd, showTextArea,
     CONFIRM_REMOVE_ANNOTATION, SAVE_ANNOTATION, EDIT_ANNOTATION, CANCEL_EDIT_ANNOTATION,
     TOGGLE_ADD, SET_STYLE, RESTORE_STYLE, HIGHLIGHT, CLEAN_HIGHLIGHT, CONFIRM_CLOSE_ANNOTATIONS, STOP_DRAWING,
-    CANCEL_CLOSE_TEXT, SAVE_TEXT} = require('../actions/annotations');
+    CANCEL_CLOSE_TEXT, SAVE_TEXT, DOWNLOAD} = require('../actions/annotations');
 const {CLICK_ON_MAP} = require('../actions/map');
 
 const {GEOMETRY_CHANGED} = require('../actions/draw');
@@ -27,6 +30,8 @@ const assign = require('object-assign');
 const {annotationsLayerSelector} = require('../selectors/annotations');
 // const {DEFAULT_ANNOTATIONS_STYLES} = require('../utils/AnnotationsUtils');
 
+const { mapNameSelector} = require('../selectors/map');
+
 const {changeDrawingStatus} = require('../actions/draw');
 
    /**
@@ -257,5 +262,22 @@ module.exports = (viewer) => ({
     confirmCloseAnnotationsEpic: (action$, store) => action$.ofType(CONFIRM_CLOSE_ANNOTATIONS)
     .switchMap(() => {
         return Rx.Observable.from((store.getState().controls.annotations && store.getState().controls.annotations.enabled ? [toggleControl('annotations')] : []).concat([purgeMapInfoResults()]));
-    })
+    }),
+    downloadAnnotations: (action$, {getState}) => action$.ofType(DOWNLOAD)
+        .switchMap(() => {
+            try {
+                const annotations = annotationsLayerSelector(getState());
+                const mapName = mapNameSelector(getState());
+                saveAs(new Blob([JSON.stringify(annotations.features)], {type: "application/json;charset=utf-8"}), `${ mapName.length > 0 && mapName || "Annotations"}.json`);
+                return Rx.Observable.empty();
+            }catch (e) {
+                return Rx.Observable.of(error({
+                        title: "annotations.title",
+                        message: "annotations.downloadError",
+                        autoDismiss: 5,
+                        position: "tr"
+                    }));
+            }
+        })
+
 });

web/client/plugins/Annotations.jsx

@@ -20,7 +20,7 @@ const {cancelRemoveAnnotation, confirmRemoveAnnotation, editAnnotation, newAnnot
     saveAnnotation, toggleAdd, validationError, removeAnnotationGeometry, toggleStyle, setStyle, restoreStyle,
     highlight, cleanHighlight, showAnnotation, cancelShowAnnotation, filterAnnotations, closeAnnotations,
     cancelCloseAnnotations, confirmCloseAnnotations, stopDrawing, changeStyler, setUnsavedChanges, toggleUnsavedChangesModal, changedProperties,
-    setUnsavedStyle, toggleUnsavedStyleModal, addText, cancelText, saveText} =
+    setUnsavedStyle, toggleUnsavedStyleModal, addText, cancelText, saveText, download} =
     require('../actions/annotations');
 
 const { zoomToExtent } = require('../actions/map');
@@ -86,7 +86,8 @@ const Annotations = connect(panelSelector, {
     onHighlight: highlight,
     onCleanHighlight: cleanHighlight,
     onDetail: showAnnotation,
-    onFilter: filterAnnotations
+    onFilter: filterAnnotations,
+    onDownload: download
 })(require('../components/mapcontrols/annotations/Annotations'));
 
 const ContainerDimensions = require('react-container-dimensions').default;

web/client/translations/data.de-DE

@@ -719,6 +719,8 @@
             "add": "Neue",
             "filter": "Filtern die annotationen...",
             "undo": "Sind Sie sicher, dass Sie die Annotationsbearbeitungssitzung aufgeben möchten?",
+            "downloadtooltip": "Laden Sie Anmerkungen herunter",
+            "downloadError": "Fehler beim Exportieren",
             "zoomTo": "Zoom",
             "field": {
                 "title": "Titel",

web/client/translations/data.en-US

@@ -720,6 +720,8 @@
             "undo": "Are you sure you want to abandon the annotation editing session?",
             "title": "Annotations",
             "zoomTo": "Zoom",
+            "downloadtooltip": "Download annotations",
+            "downloadError": "Export error",
             "field": {
                 "title": "Title",
                 "description": "Description"

web/client/translations/data.es-ES

@@ -720,6 +720,8 @@
             "filter": "Filtrar las anotaciones...",
             "undo": "¿Estás seguro de que quieres abandonar la sesión de edición de anotaciones?",
             "zoomTo": "Zoom",
+            "downloadtooltip": "Descargar anotaciones",
+            "downloadError": "Error de exportación",
             "field": {
                 "title": "Título",
                 "description": "Descripción"

web/client/translations/data.fr-FR

@@ -694,6 +694,8 @@
             "filter": "Filtrer les annotations...",
             "undo": "Êtes-vous sûr de vouloir abandonner la session d'édition d'annotation?",
             "zoomTo": "Zoom",
+            "downloadtooltip": "Télécharger les annotations",
+            "downloadError": "Erreur d'exportation",
             "field": {
                 "title": "Titre",
                 "description": "Description"

web/client/translations/data.it-IT

@@ -721,6 +721,8 @@
             "undo": "Sei sicuro di voler abbandonare la modifica in corso?",
             "title": "Annotazioni",
             "zoomTo": "Zoom",
+            "downloadtooltip": "Esporta annotazioni",
+            "downloadError": "Errore di esportazione",
             "field": {
                 "title": "Titolo",
                 "description": "Descrizione"