Add export feature

Author: SamuelTallet

index.php

@@ -19,7 +19,7 @@
  * 
  * @var string
  */
-define('MPG_APP_VERSION', '0.9.7');
+define('MPG_APP_VERSION', '0.9.8');
 
 /**
  * Development mode?

static/css/mpg.css

@@ -14,7 +14,9 @@
 .navbar-brand, .navbar-nav .nav-link {
 
     position: relative;
+    left: 0;
     top: 15px;
+
     padding-bottom: 15px;
 
 }
@@ -98,6 +100,16 @@ button, input {
 
 }
 
+#mpg-export-button {
+
+    position: relative;
+    top: -5px;
+    left: 0;
+
+    margin-left: 10px;
+
+}
+
 #mpg-index-order-select, #mpg-unique-index-select {
 
     width: auto;

static/js/mpg.database.query.js

@@ -63,6 +63,13 @@ MPG.documentId = '';
  */
 MPG.documentIdType = '';
 
+/**
+ * Cached output.
+ * 
+ * @type {string}
+ */
+MPG.cachedOutput = '';
+
 /**
  * Initializes CodeMirror instance.
  * 
@@ -186,6 +193,38 @@ MPG.helpers.convertAnyToString = function(any) {
 
 };
 
+/**
+ * Downloads a file.
+ * 
+ * @see https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
+ * 
+ * @param {string} filename
+ * @param {string} data
+ * @param {string} type
+ * 
+ * @returns {void}
+ */
+MPG.helpers.downloadFile = function(filename, data, type) {
+
+    var blob = new Blob([data], {type: type});
+
+    if ( window.navigator.msSaveOrOpenBlob ) {
+
+        window.navigator.msSaveBlob(blob, filename);
+
+    } else {
+
+        var elem = window.document.createElement('a');
+        elem.href = window.URL.createObjectURL(blob);
+        elem.download = filename;
+        document.body.appendChild(elem);
+        elem.click();
+        document.body.removeChild(elem);
+
+    }
+
+};
+
 /**
  * Reloads collections of a specific database.
  * 
@@ -544,6 +583,8 @@ MPG.eventListeners.addFind = function() {
                 + MPG.collectionName + '/find',
             function(response) {
 
+                MPG.cachedOutput = response;
+
                 var outputCode = document.querySelector('#mpg-output-code');
                 outputCode.innerHTML = '';
 
@@ -577,6 +618,29 @@ MPG.eventListeners.addCtrlSpace = function() {
 
 };
 
+/**
+ * Adds an event listener on "Export" button.
+ * 
+ * @returns {void}
+ */
+MPG.eventListeners.addExport = function() {
+
+    document.querySelector('#mpg-export-button').addEventListener('click', function(_event) {
+
+        if ( MPG.cachedOutput === '' ) {
+            return window.alert('There is nothing to export for now...');
+        }
+
+        MPG.helpers.downloadFile(
+            'mongodb-php-gui-export-' + (new Date()).getTime() + '.json',
+            JSON.stringify(JSON.parse(MPG.cachedOutput), null, 4),
+            'application/json'
+        );
+
+    });
+
+};
+
 // When document is ready:
 window.addEventListener('DOMContentLoaded', function(_event) {
 
@@ -588,6 +652,7 @@ window.addEventListener('DOMContentLoaded', function(_event) {
     MPG.eventListeners.addDeleteOne();
     MPG.eventListeners.addFind();
     MPG.eventListeners.addCtrlSpace();
+    MPG.eventListeners.addExport();
 
     window.location.hash = '';
 

views/database.query.tpl.php

@@ -145,8 +145,13 @@
 
                     <div id="mpg-output-column" class="col-md-12">
 
-                        <h2>Output</h2>
-                        <code id="mpg-output-code"></code>
+                        <h2 class="d-inline-block">Output</h2>
+
+                        <button id="mpg-export-button" class="btn btn-secondary">Export</button>
+                        
+                        <div>
+                            <code id="mpg-output-code"></code>
+                        </div>
 
                     </div>