Elements can be deleted, add overlay during AJAX operations

admin/manage_custom_nav_elements.php

@@ -56,16 +56,14 @@ require_once(HESK_PATH . 'inc/show_admin_nav.inc.php');
                             </tr>
                             </thead>
                             <tbody id="table-body">
-                            <tr id="loader">
-                                <td colspan="6">
-                                    <i class="fa fa-spinner fa-spin"></i> Loading Custom Nav Elements&hellip;
-                                </td>
-                            </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div>
+            <div class="overlay" id="overlay">
+                <i class="fa fa-spinner fa-spin"></i>
+            </div>
         </div>
     </section>
 </div>

css/colors.css

@@ -2,6 +2,10 @@
     color: #fff;
 }
 
+.black {
+    color: #000;
+}
+
 .red,
 .important,
 .critical-priority {

internal-api/js/manage-custom-nav-elements.js

@@ -4,6 +4,7 @@ $(document).ready(function() {
     loadTable();
     bindEditModal();
     bindCreateModal();
+    bindDeleteButton();
 
     $('[data-toggle="nav-iconpicker"]').iconpicker({
         iconset: ['fontawesome', 'octicon'],
@@ -143,7 +144,6 @@ function loadTable(modalToClose) {
                 }
                 $template.find('ul[data-property="subtext"]').html(subtext);
 
-                console.log($template);
                 $('#table-body').append($template);
 
                 elements[this.id] = this;
@@ -157,7 +157,7 @@ function loadTable(modalToClose) {
             console.error(data);
         },
         complete: function() {
-            $('#loader').hide();
+            $('#overlay').hide();
         }
     });
 }
@@ -241,3 +241,25 @@ function bindCreateModal() {
         $modal.modal('show');
     });
 }
+
+function bindDeleteButton() {
+    $(document).on('click', '[data-action="delete"]', function() {
+        $('#overlay').show();
+
+        var heskUrl = $('#heskUrl').text();
+        var element = elements[$(this).parent().parent().find('[data-property="id"]').text()];
+
+        $.ajax({
+            method: 'DELETE',
+            url: heskUrl + '/api/v1-internal/custom-navigation/' + element.id,
+            headers: { 'X-Internal-Call': true },
+            success: function() {
+                console.log('DELETED!');
+                loadTable();
+            },
+            error: function(data) {
+                console.error(data);
+            }
+        });
+    });
+}