utilise a more generic sortable list system

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "dist/css/all.css": "dist/css/all-8b09a6139d.css",
+  "dist/css/all.css": "dist/css/all-9f109896fb.css",
-  "dist/js/all.js": "dist/js/all-914268da61.js"
+  "dist/js/all.js": "dist/js/all-a2296565be.js"
 }

resources/assets/js/app.js

@@ -161,63 +161,38 @@ $(function() {
         }
     });
 
-    // Sortable components.
+    // Sortable models.
-    var componentList = document.getElementById("component-list");
+    var orderableLists = document.querySelectorAll('[data-orderable-list]');
-    if (componentList) {
+
-        new Sortable(componentList, {
+    $.each(orderableLists, function (k, list) {
-            group: "omega",
+        var url = $(list).data('orderableList');
-            handle: ".drag-handle",
+        var notifier = new Cachet.Notifier();
+
+        new Sortable(list, {
+            group: 'omega',
+            handle: '.drag-handle',
             onUpdate: function() {
-                var orderedComponentIds = $.map($('#component-list .striped-list-item'), function(elem) {
+                var orderedIds = $.map(list.querySelectorAll('[data-orderable-id]'), function(elem) {
-                    return $(elem).data('component-id');
+                    return $(elem).data('orderable-id');
                 });
 
                 $.ajax({
                     async: true,
-                    url: '/dashboard/api/components/order',
+                    url: url,
                     type: 'POST',
                     data: {
-                        ids: orderedComponentIds
+                        ids: orderedIds
                     },
                     success: function() {
-                        (new Cachet.Notifier()).notify('Component orders updated.', 'success');
+                        notifier.notify('Ordering updated.', 'success');
                     },
                     error: function() {
-                        (new Cachet.Notifier()).notify('Component orders not updated.', 'error');
+                        notifier.notify('Ordering not updated.', 'error');
                     }
                 });
             }
         });
-    }
+    });
-
-    // Sortable Component Groups
-    var componentGroupList = document.getElementById("component-group-list");
-    if (componentGroupList) {
-        new Sortable(componentGroupList, {
-            group: "omega",
-            handle: ".drag-handle",
-            onUpdate: function() {
-                var orderedComponentGroupsIds = $.map(
-                    $('#component-group-list .striped-list-item'),
-                    function(elem) {
-                        return $(elem).data('group-id');
-                    }
-                );
-                $.ajax({
-                    async: true,
-                    url: '/dashboard/api/components/groups/order',
-                    type: 'POST',
-                    data: {ids: orderedComponentGroupsIds},
-                    success: function() {
-                        (new Cachet.Notifier()).notify('Component groups order has been updated.', 'success');
-                    },
-                    error: function() {
-                        (new Cachet.Notifier()).notify('Component groups order could not be updated.', 'error');
-                    }
-                });
-            }
-        });
-    }
 
     // Toggle inline component statuses.
     $('form.component-inline').on('click', 'input[type=radio]', function() {

resources/views/dashboard/components/groups/index.blade.php

@@ -17,9 +17,9 @@
         </div>
         @include('dashboard.partials.errors')
         <div class="row">
-            <div class="col-sm-12 striped-list" id="component-group-list">
+            <div class="col-sm-12 striped-list" data-orderable-list="/dashboard/api/components/groups/order">
                 @forelse($groups as $group)
-                <div class="row striped-list-item" data-group-id="{{ $group->id }}">
+                <div class="row striped-list-item" data-orderable-id="{{ $group->id }}">
                     <div class="col-xs-6">
                         <h4>
                             @if($groups->count() > 1)

resources/views/dashboard/components/index.blade.php

@@ -17,9 +17,9 @@
         </div>
         @include('dashboard.partials.errors')
         <div class="row">
-            <div class="col-sm-12 striped-list" id="component-list">
+            <div class="col-sm-12 striped-list" data-orderable-list="/dashboard/api/components/order">
                 @forelse($components as $component)
-                <div class="row striped-list-item {{ !$component->enabled ? 'bg-warning' : null }}" data-component-id="{{ $component->id }}">
+                <div class="row striped-list-item {{ !$component->enabled ? 'bg-warning' : null }}" data-orderable-id="{{ $component->id }}">
                     <div class="col-xs-6">
                         <h4>
                             @if($components->count() > 1)