Add sort and order options

Author: SamuelTallet

static/css/mpg.css

@@ -98,6 +98,12 @@ button, input {
 
 }
 
+#mpg-index-order-select, #mpg-unique-index-select {
+
+    width: auto;
+
+}
+
 #mpg-create-index-button {
 
     margin-left: 10px;

static/js/mpg.database.query.js

@@ -277,6 +277,18 @@ MPG.eventListeners.addCollections = function() {
                         }
                     });
 
+                    var sortSelect = document.querySelector('#mpg-sort-select');
+                    sortSelect.innerHTML = '';
+
+                    MPG.collectionFields.forEach(function(collectionField) {
+
+                        sortSelect.innerHTML += '<option value="' + collectionField + '">'
+                            + collectionField + '</option>';
+
+                    });
+
+                    document.querySelector('#mpg-output-code').innerHTML = '';
+
                 },
                 null
             );
@@ -515,6 +527,17 @@ MPG.eventListeners.addFind = function() {
         requestBody.options = {};
         requestBody.options.limit = parseInt(document.querySelector('#mpg-limit-input').value);
 
+        var sortSelect = document.querySelector('#mpg-sort-select');
+
+        if ( sortSelect.value !== '' ) {
+
+            var order = parseInt(document.querySelector('#mpg-order-select').value);
+
+            requestBody.options.sort = {};
+            requestBody.options.sort[sortSelect.value] = order;
+
+        }
+
         MPG.helpers.doAjaxRequest(
             'POST',
             '/ajax/database/' + MPG.databaseName + '/collection/'

views/collection.indexes.tpl.php

@@ -106,14 +106,14 @@
 
                                 <span class="align-middle">Order</span>
 
-                                <select id="mpg-index-order-select" class="align-middle">
+                                <select id="mpg-index-order-select" class="form-control d-inline-block align-middle">
                                     <option value="1" selected>ASC</option>
                                     <option value="-1">DESC</option>
                                 </select>
 
                                 <span class="align-middle">Unique?</span>
 
-                                <select id="mpg-unique-index-select" class="align-middle">
+                                <select id="mpg-unique-index-select" class="form-control d-inline-block align-middle">
                                     <option value="true">Yes</option>
                                     <option value="false" selected>No</option>
                                 </select>

views/database.query.tpl.php

@@ -84,7 +84,7 @@
 
                 <div class="row">
 
-                    <div class="col-md-8">
+                    <div class="col-md-6">
 
                         <h2 class="float-left">Document</h2>
 
@@ -110,10 +110,32 @@
 
                     </div>
 
-                    <div class="col-md-4">
+                    <div class="col-md-6">
 
                         <h2>Options</h2>
-                        Limit <input id="mpg-limit-input" type="number" value="5" min="1">
+                        
+                        <div class="form-group">
+
+                            <div>
+                                Limit <input id="mpg-limit-input" type="number" class="form-control" value="5" min="1">
+                            </div>
+                            
+                            <div>
+                                Sort
+                                <select id="mpg-sort-select" class="form-control">
+                                    <option value="">Please select a database and a collection.</option>
+                                </select>
+                            </div>
+                            
+                            <div>
+                                Order
+                                <select id="mpg-order-select" class="form-control">
+                                    <option value="1">ASC</option>
+                                    <option value="-1">DESC</option>
+                                </select>
+                            </div>
+
+                        </div>
 
                     </div>