Allows ordering of component groups. Closes #573.

app/Http/Controllers/Admin/ApiController.php

@@ -15,6 +15,7 @@ namespace CachetHQ\Cachet\Http\Controllers\Admin;
 
 use CachetHQ\Cachet\Http\Controllers\AbstractController;
 use CachetHQ\Cachet\Models\Component;
+use CachetHQ\Cachet\Models\ComponentGroup;
 use CachetHQ\Cachet\Models\IncidentTemplate;
 use Exception;
 use GrahamCampbell\Binput\Facades\Binput;
@@ -56,6 +57,23 @@ class ApiController extends AbstractController
         return $componentData;
     }
 
+    /**
+     * Updates the order of component groups.
+     *
+     * @return array
+     */
+    public function postUpdateComponentGroupOrder()
+    {
+        $groupData = Binput::all();
+        foreach ($groupData['ids'] as $order => $groupId) {
+            ComponentGroup::find($groupId)->update([
+                'order' => $order + 1,
+            ]);
+        }
+
+        return $groupData;
+    }
+
     /**
      * Returns a template by slug.
      *

app/Http/Controllers/Admin/ComponentController.php

@@ -78,7 +78,7 @@ class ComponentController extends AbstractController
 
         return View::make('dashboard.components.groups.index')->with([
             'pageTitle' => trans_choice('dashboard.components.groups.groups', 2).' - '.trans('dashboard.dashboard'),
-            'groups'    => ComponentGroup::all(),
+            'groups'    => ComponentGroup::orderBy('order')->get(),
             'subMenu'   => $this->subMenu,
         ]);
     }

app/Http/Controllers/HomeController.php

@@ -107,7 +107,7 @@ class HomeController extends AbstractController
 
         // Component & Component Group lists.
         $usedComponentGroups = Component::where('group_id', '>', 0)->groupBy('group_id')->lists('group_id');
-        $componentGroups = ComponentGroup::whereIn('id', $usedComponentGroups)->get();
+        $componentGroups = ComponentGroup::whereIn('id', $usedComponentGroups)->orderBy('order')->get();
         $ungroupedComponents = Component::where('group_id', 0)->orderBy('order')->orderBy('created_at')->get();
 
         $canPageBackward = Incident::notScheduled()->where('created_at', '<', $startDate->format('Y-m-d'))->count() != 0;

app/Http/Routes/AdminRoutes.php

@@ -201,6 +201,7 @@ class AdminRoutes
             // This should only be used for making requests within the dashboard.
             $router->group(['prefix' => 'api'], function ($router) {
                 $router->get('incidents/templates', 'ApiController@getIncidentTemplate');
+                $router->post('components/groups/order', 'ApiController@postUpdateComponentGroupOrder');
                 $router->post('components/order', 'ApiController@postUpdateComponentOrder');
                 $router->post('components/{component}', 'ApiController@postUpdateComponent');
             });

app/Models/ComponentGroup.php

@@ -19,6 +19,7 @@ use Watson\Validating\ValidatingTrait;
 /**
  * @property int            $id
  * @property string         $name
+ * @property int            $order
  * @property \Carbon\Carbon $created_at
  * @property \Carbon\Carbon $updated_at
  * @property \Carbon\Carbon $deleted_at
@@ -41,7 +42,7 @@ class ComponentGroup extends Model
      *
      * @var string[]
      */
-    protected $fillable = ['name'];
+    protected $fillable = ['name', 'order'];
 
     /**
      * A group can have many components.

database/migrations/2015_05_19_214534_AlterTableComponentGroupsAddOrder.php

@@ -0,0 +1,44 @@
+<?php
+
+/*
+ * This file is part of Cachet.
+ *
+ * (c) James Brooks <james@cachethq.io>
+ * (c) Joseph Cohen <joseph.cohen@dinkbit.com>
+ * (c) Graham Campbell <graham@mineuk.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AlterTableComponentGroupsAddOrder extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('component_groups', function (Blueprint $table) {
+            $table->integer('order')->after('name');
+            $table->index('order');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('component_groups', function (Blueprint $table) {
+            $table->dropColumn('order');
+        });
+    }
+}

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "dist/css/all.css": "dist/css/all-85d5201e.css",
-  "dist/js/all.js": "dist/js/all-030dc0bd.js"
+  "dist/css/all.css": "dist/css/all-11e30ad0.css",
+  "dist/js/all.js": "dist/js/all-495fb41f.js"
 }

resources/assets/js/app.js

@@ -167,6 +167,32 @@ $(function() {
         });
     }
 
+    // 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 CachetHQ.Notifier()).notify('Component groups order has been updated.', 'success');
+                    }
+                });
+            }
+        });
+    }
+
     // Toggle inline component statuses.
     $('form.component-inline').on('click', 'input[type=radio]', function() {
         var $form = $(this).parents('form');

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

@@ -16,11 +16,17 @@
                 <div class="clearfix"></div>
             </div>
             <div class="row">
-                <div class="col-sm-12 striped-list">
+                <div class="col-sm-12 striped-list" id="component-group-list">
                     @forelse($groups as $group)
-                    <div class="row striped-list-item">
+                    <div class="row striped-list-item" data-group-id="{{ $group->id }}">
                         <div class="col-xs-6">
-                            <strong>{{ $group->name }}</strong> <span class="label label-info">{{ $group->components->count() }}</span>
+                            <h4>
+                                @if($groups->count() > 1)
+                                <span class="drag-handle"><i class="ion-drag"></i></span>
+                                @endif
+                                {{ $group->name }}
+                                <span class="label label-info">{{ $group->components->count() }}</span>
+                            </h4>
                         </div>
                         <div class="col-xs-6 text-right">
                             <a href="{{ route('dashboard.components.groups.edit', [$group->id]) }}" class="btn btn-default">{{ trans('forms.edit') }}</a>