Merge pull request #191 from cachethq/component-reordering

Components can now be re-ordered, closes #165

app/assets/js/start.js

@@ -69,6 +69,32 @@ $(function() {
         $(this).parents('div.alert').addClass('hide');
     });
 
+    // Sortable components.
+    var componentList = document.getElementById("component-list");
+    new Sortable(componentList, {
+        group: "omega",
+        handle: ".drag-handle",
+        onUpdate: function() {
+            // Loop each component, setting the order input to the new order.
+            var $components = $('#component-list .striped-list-item');
+            $.each($components, function(id) {
+                // Order should start from 1 now.
+                $(this).find('input[rel=order]').val(id + 1);
+            });
+
+            // Now POST the form to the internal API.
+            $.ajax({
+                async: true,
+                url: '/dashboard/api/components/order',
+                type: 'POST',
+                data: $('form[name=componentList]').serializeObject(),
+                success: function() {
+                    (new CachetHQ.Notifier).notify('Components updated.', 'success');
+                }
+            });
+        }
+    });
+
     // Toggle inline component statuses.
     $('form.component-inline').on('click', 'input[type=radio]', function() {
         var $form = $(this).parents('form');

app/controllers/DashAPIController.php

@@ -19,4 +19,24 @@ class DashAPIController extends Controller
             App::abort(500);
         }
     }
+
+    /**
+     * Updates a components ordering.
+     *
+     * @return array
+     */
+    public function postUpdateComponentOrder()
+    {
+        $componentData = Input::all();
+        unset($componentData['component'][0]); // Remove random 0 index.
+
+        foreach ($componentData['component'] as $componentId => $order) {
+            $component = Component::find($componentId);
+            $component->update([
+                'order' => $order,
+            ]);
+        }
+
+        return $componentData;
+    }
 }

app/controllers/DashComponentController.php

@@ -9,7 +9,7 @@ class DashComponentController extends Controller
      */
     public function showComponents()
     {
-        $components = Component::all();
+        $components = Component::orderBy('order')->orderBy('created_at')->get();
 
         return View::make('dashboard.components.index')->with([
             'pageTitle'  => 'Components - Dashboard',

app/controllers/HomeController.php

@@ -28,8 +28,10 @@ class HomeController extends Controller
      */
     public function showIndex()
     {
+        $components = Component::orderBy('order')->orderBy('created_at')->get();
+
         return View::make('index', [
-            'components' => $this->component->all(),
+            'components' => $components,
             'pageTitle'  => Setting::get('app_name')
         ]);
     }

app/database/migrations/2015_01_01_122720_AlterTableComponentsAddOrderColumn.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+
+class AlterTableComponentsAddOrderColumn extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('components', function (Blueprint $table) {
+            $table->tinyInteger('order')->default(0)->after('status');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('components', function (Blueprint $table) {
+            $table->dropColumn('order');
+        });
+    }
+}

app/models/Component.php

@@ -21,6 +21,7 @@ class Component extends Eloquent implements \Dingo\Api\Transformer\Transformable
         'user_id',
         'tags',
         'link',
+        'order',
     ];
 
     /**

app/routes/dashboard.php

@@ -40,6 +40,7 @@ Route::group(['before' => 'auth', 'prefix' => 'dashboard'], function () {
     // Internal API.
     // This should only be used for making requests within the dashboard.
     Route::group(['prefix' => 'api'], function () {
+        Route::post('components/order', 'DashAPIController@postUpdateComponentOrder');
         Route::post('components/{component}', 'DashAPIController@postUpdateComponent');
     });
 });

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

@@ -12,24 +12,27 @@
 	</div>
     <div class="content-wrapper">
         <div class="row">
-            <div class="col-sm-12 striped-list">
-                @forelse($components as $component)
-                <div class='row striped-list-item'>
-                    <div class='col-md-8'>
-                        <strong>{{ $component->name }}</strong> <small>{{ $component->humanStatus }}</small>
-                        @if($component->description)
-                        <p><small>{{ $component->description }}</small></p>
-                        @endif
-                    </div>
-                    <div class='col-md-4 text-right'>
-                        <a href='/dashboard/components/{{ $component->id }}/edit' class='btn btn-default'>Edit</a>
-                        <a href='/dashboard/components/{{ $component->id }}/delete' class='btn btn-danger'>Delete</a>
+            <form name='componentList'>
+                <div class="col-sm-12 striped-list" id='component-list'>
+                    @forelse($components as $component)
+                    <div class='row striped-list-item'>
+                        <div class='col-md-8'>
+                            <h4><span class='drag-handle'><i class='ion-drag'></i></span> {{ $component->name }} <small>{{ $component->humanStatus }}</small></h4>
+                            @if($component->description)
+                            <p><small>{{ $component->description }}</small></p>
+                            @endif
+                        </div>
+                        <div class='col-md-4 text-right'>
+                            <a href='/dashboard/components/{{ $component->id }}/edit' class='btn btn-default'>Edit</a>
+                            <a href='/dashboard/components/{{ $component->id }}/delete' class='btn btn-danger'>Delete</a>
+                        </div>
+                        <input type='hidden' rel='order' name='component[{{ $component->id }}]' value='{{ $component->order }}' />
                     </div>
+                    @empty
+                    <div class='list-group-item text-danger'>You should add a component.</div>
+                    @endforelse
                 </div>
-                @empty
-                <div class='list-group-item text-danger'>You should add a component.</div>
-                @endforelse
-            </div>
+            </form>
         </div>
     </div>
 @stop

bower.json

@@ -1,6 +1,7 @@
 {
   "name": "Cachet",
   "dependencies": {
+    "Sortable": "1.0.0",
     "bootstrap-sass-official": "3.3.*",
     "jquery": "~2.1.1",
     "chartjs": "0.2.*",

gulpfile.js

@@ -39,6 +39,7 @@ elixir(function (mix) {
             'bower_components/lodash/dist/lodash.js',
             'bower_components/messenger/build/js/messenger.js',
             // 'bower_components/chartjs/Chart.min.js',
+            'bower_components/Sortable/Sortable.js',
             'bower_components/jquery-minicolors/jquery.minicolors.js',
             'bower_components/jquery-serialize-object/jquery.serialize-object.js',
             'js/app.js',

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-84f50550.css",
-  "js/all.js": "js/all-b4f68abf.js"
+  "css/all.css": "css/all-c5b65085.css",
+  "js/all.js": "js/all-337c2216.js"
 }