[kbss-cvut#37] Implement export of records to JSON.

js/actions/AsyncActionUtils.js

@@ -0,0 +1,14 @@
+export function asyncRequest(type) {
+    return {type};
+}
+
+export function asyncError(type, error) {
+    return {
+        type,
+        error
+    };
+}
+
+export function asyncSuccess(type) {
+    return {type};
+}

js/actions/RecordsActions.js

@@ -1,7 +1,9 @@
 import * as ActionConstants from "../constants/ActionConstants";
-import {ROLE} from "../constants/DefaultConstants";
+import {HttpHeaders, ROLE} from "../constants/DefaultConstants";
 import {axiosBackend} from "./index";
 import {API_URL} from '../../config';
+import {asyncError, asyncRequest, asyncSuccess} from "./AsyncActionUtils";
+import {fileDownload} from "../utils/Utils";
 
 export function loadRecords(currentUser, institutionKey = null) {
     //console.log("Loading records");
@@ -22,9 +24,7 @@ export function loadRecords(currentUser, institutionKey = null) {
 }
 
 export function loadRecordsPending() {
-    return {
-        type: ActionConstants.LOAD_RECORDS_PENDING
-    }
+    return asyncRequest(ActionConstants.LOAD_RECORDS_PENDING);
 }
 
 export function loadRecordsSuccess(records) {
@@ -35,12 +35,28 @@ export function loadRecordsSuccess(records) {
 }
 
 export function loadRecordsError(error) {
-    return {
-        type: ActionConstants.LOAD_RECORDS_ERROR,
-        error
-    }
+    return asyncError(ActionConstants.LOAD_RECORDS_ERROR, error);
 }
 
 export function exportRecords(exportType, institutionKey) {
-
+    return (dispatch) => {
+        dispatch(asyncRequest(ActionConstants.EXPORT_RECORDS_PENDING));
+        const urlSuffix = institutionKey ? `?institution=${institutionKey}` : '';
+        return axiosBackend.get(`${API_URL}/rest/records/export${urlSuffix}`, {
+            headers: {
+                accept: exportType.mediaType
+            },
+            responseType: 'arraybuffer'
+        }).then((resp) => {
+            const disposition = resp.headers[HttpHeaders.CONTENT_DISPOSITION];
+            const filenameMatch = disposition
+                ? disposition.match(/filename="(.+\..+)"/)
+                : null;
+            const fileName = filenameMatch ? filenameMatch[1] : "records" + exportType.fileExtension;
+            fileDownload(resp.data, fileName, exportType.mediaType);
+            return dispatch(asyncSuccess(ActionConstants.EXPORT_RECORDS_SUCCESS));
+        }).catch((error) => {
+            dispatch(asyncError(ActionConstants.EXPORT_RECORDS_ERROR, error.response.data));
+        });
+    }
 }

js/components/institution/InstitutionController.js

@@ -19,7 +19,7 @@ import {
     updateInstitution
 } from "../../actions/InstitutionActions";
 import * as EntityFactory from "../../utils/EntityFactory";
-import {loadRecords} from "../../actions/RecordsActions";
+import {exportRecords, loadRecords} from "../../actions/RecordsActions";
 import omit from 'lodash/omit';
 import {loadFormTemplates} from "../../actions/FormTemplatesActions";
 
@@ -126,7 +126,8 @@ class InstitutionController extends React.Component {
     };
 
     _onExportRecords = (exportType) => {
-        // TODO
+        const institutionKey = this.state.institution.key;
+        this.props.exportRecords(exportType, institutionKey);
     };
 
     _onAddNewUser = (institution) => {
@@ -191,6 +192,7 @@ function mapDispatchToProps(dispatch) {
         loadFormTemplates: bindActionCreators(loadFormTemplates, dispatch),
         deleteUser: bindActionCreators(deleteUser, dispatch),
         transitionToWithOpts: bindActionCreators(transitionToWithOpts, dispatch),
-        unloadInstitutionMembers: bindActionCreators(unloadInstitutionMembers, dispatch)
+        unloadInstitutionMembers: bindActionCreators(unloadInstitutionMembers, dispatch),
+        exportRecords: bindActionCreators(exportRecords, dispatch)
     }
 }

js/components/record/RecordsController.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Records from "./Records";
 import Routes from "../../constants/RoutesConstants";
 import {transitionToWithOpts} from "../../utils/Routing";
-import {loadRecords} from "../../actions/RecordsActions";
+import {exportRecords, loadRecords} from "../../actions/RecordsActions";
 import {injectIntl} from "react-intl";
 import withI18n from "../../i18n/withI18n";
 import {connect} from "react-redux";
@@ -54,7 +54,7 @@ class RecordsController extends React.Component {
     };
 
     _onExportRecords = (exportType) => {
-
+        this.props.exportRecords(exportType);
     };
 
     render() {
@@ -92,7 +92,8 @@ function mapDispatchToProps(dispatch) {
     return {
         deleteRecord: bindActionCreators(deleteRecord, dispatch),
         loadRecords: bindActionCreators(loadRecords, dispatch),
+        exportRecords: bindActionCreators(exportRecords, dispatch),
         loadFormTemplates: bindActionCreators(loadFormTemplates, dispatch),
-        transitionToWithOpts: bindActionCreators(transitionToWithOpts, dispatch)
+        transitionToWithOpts: bindActionCreators(transitionToWithOpts, dispatch),
     }
 }

js/constants/DefaultConstants.js

@@ -109,7 +109,8 @@ export const STATISTICS_TYPE = {
 export const SCRIPT_ERROR = 'SCRIPT_ERROR';
 
 export const HttpHeaders = {
-    AUTHORIZATION: "Authorization"
+    AUTHORIZATION: "Authorization",
+    CONTENT_DISPOSITION: "content-disposition"
 }
 
 export const MediaType = {

js/constants/ExportType.js

@@ -2,9 +2,11 @@ import {MediaType} from "./DefaultConstants";
 
 export const ExportType = {
     EXCEL: {
-        mediaType: MediaType.EXCEL
+        mediaType: MediaType.EXCEL,
+        fileExtension: ".xslx"
     },
     JSON: {
-        mediaType: MediaType.JSON
+        mediaType: MediaType.JSON,
+        fileExtension: ".json"
     }
 };

js/utils/Utils.js

@@ -286,3 +286,25 @@ export function formatDateWithMilliseconds(timestamp) {
 export function sanitizeArray(arr) {
     return arr ? (Array.isArray(arr) ? arr : [arr]) : [];
 }
+
+/**
+ * Ensures that file download using Ajax triggers browser file save mechanism.
+ *
+ * Adapted from https://github.com/kennethjiang/js-file-download/blob/master/file-download.js
+ * @param data The downloaded data
+ * @param filename Name of the file
+ * @param mimeType Type of data
+ */
+export function fileDownload(data, filename, mimeType = "application/octet-stream") {
+    const blob = new Blob([data], {type: mimeType});
+    const blobURL = window.URL.createObjectURL(blob);
+    const tempLink = document.createElement("a");
+    tempLink.style.display = "none";
+    tempLink.href = blobURL;
+    tempLink.setAttribute("download", filename);
+
+    document.body.appendChild(tempLink);
+    tempLink.click();
+    document.body.removeChild(tempLink);
+    window.URL.revokeObjectURL(blobURL);
+}