Added click-to-toggle for boolean columns

Controller/AdminController.php

@@ -20,6 +20,7 @@
 use Doctrine\ORM\EntityManager;
 use Doctrine\ORM\Mapping\ClassMetadataInfo;
 use Symfony\Component\Form\Form;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -33,7 +34,7 @@
  */
 class AdminController extends Controller
 {
-    protected $allowedActions = array('list', 'edit', 'new', 'show', 'search', 'delete');
+    protected $allowedActions = array('list', 'edit', 'new', 'show', 'search', 'delete', 'toggle');
     protected $config;
     protected $entity = array();
 
@@ -267,6 +268,52 @@ protected function searchAction()
         ));
     }
 
+    protected function toggleAction()
+    {
+        if (!$entity = $this->em->getRepository($this->entity['class'])->find($this->request->query->get('id'))) {
+            throw new \Exception('The entity does not exist.');
+        }
+
+        $propertyName = $this->request->query->get('property');
+        if (!isset($this->entity['properties'][$propertyName])
+            || 'boolean' != $this->entity['properties'][$propertyName]['type']) {
+            throw new \Exception(sprintf('The "%s" property is not boolean.', $propertyName));
+        }
+
+        // get the current property value
+        $getter = 'get'.ucfirst($propertyName);
+        $isser = 'is'.ucfirst($propertyName);
+
+        if (method_exists($entity, $getter)) {
+            $value = $entity->{$getter}();
+        } elseif (method_exists($entity, $isser)) {
+            $value = $entity->{$isser}();
+        } elseif (property_exists($entity, $propertyName)) {
+            $value = $entity->{$propertyName};
+        } else {
+            throw new \Exception(sprintf('It\'s not possible to get the current value of the "%s" boolean property of the "%s" entity.', $propertyName, $this->entity['name']));
+        }
+
+        // toggle the property value
+        $newValue = !$value;
+        $setter = 'set'.ucfirst($propertyName);
+        $isser = 'setIs'.ucfirst($propertyName);
+
+        if (method_exists($entity, $setter)) {
+            $entity->{$setter}($newValue);
+        } elseif (method_exists($entity, $isser)) {
+            $entity->{$isser}($newValue);
+        } elseif (property_exists($entity, $propertyName)) {
+            $entity->{$propertyName} = $newValue;
+        } else {
+            throw new \Exception(sprintf('It\'s not possible to toggle the value of the "%s" boolean property of the "%s" entity.', $propertyName, $this->entity['name']));
+        }
+
+        $this->em->flush();
+
+        return new Response(true === $newValue ? 'on' : 'off');
+    }
+
     /**
      * Allows applications to modify the entity associated with the item being
      * edited before persisting it.

Resources/public/stylesheet/admin.css

@@ -202,20 +202,63 @@ ul.pager .next {
 
 /* Labels
    ------------------------------------------------------------------------- */
-span.label {
+.label {
     background: #222;
     color: #FFF;
     font-size: 11px;
     padding: 2px 4px;
     text-transform: uppercase;
 }
-span.label-success {
+.label-success {
     background: #00994D;
 }
-span.label-danger {
+.label-warning {
+    background: #FFFF61;
+    color: #222;
+}
+.label-danger {
     background: #D44542;
 }
 
+/* Switches / toggles
+   ------------------------------------------------------------------------- */
+.boolean .btn {
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: bold;
+}
+.boolean .toggle.btn-success {
+    border-color: #398439;
+    background: #00994D;
+}
+.boolean .toggle.btn-danger {
+    border-color: #AC2925;
+    background: #D0322F;
+}
+.boolean .btn-success .toggle-handle {
+    box-shadow: -2px 0 1px #008040;
+}
+.boolean .btn-danger .toggle-handle {
+    box-shadow: 2px 0 1px #BB2D2A;
+}
+.boolean .toggle .toggle-on {
+    background: #00994D;
+}
+.boolean .toggle .toggle-off {
+    background: #D0322F;
+}
+.boolean .toggle-group label {
+    padding-top: 2px;
+}
+.boolean .toggle.btn-xs {
+    width: 44px;
+}
+.boolean .toggle.btn-xs .toggle-handle {
+    height: 18px;
+    margin-top: 1px;
+    margin-right: 5px;
+}
+
 /* Badges
    ------------------------------------------------------------------------- */
 span.badge {

Resources/public/stylesheet/bootstrap-toggle.min.css

@@ -0,0 +1,28 @@
+/*! ========================================================================
+ * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
+ * http://www.bootstraptoggle.com
+ * ========================================================================
+ * Copyright 2014 Min Hur, The New York Times Company
+ * Licensed under MIT
+ * ======================================================================== */
+.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
+.toggle{position:relative;overflow:hidden}
+.toggle input[type=checkbox]{display:none}
+.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
+.toggle.off .toggle-group{left:-100%}
+.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
+.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
+.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
+.toggle.btn{min-width:59px;min-height:34px}
+.toggle-on.btn{padding-right:24px}
+.toggle-off.btn{padding-left:24px}
+.toggle.btn-lg{min-width:79px;min-height:45px}
+.toggle-on.btn-lg{padding-right:31px}
+.toggle-off.btn-lg{padding-left:31px}
+.toggle-handle.btn-lg{width:40px}
+.toggle.btn-sm{min-width:50px;min-height:30px}
+.toggle-on.btn-sm{padding-right:20px}
+.toggle-off.btn-sm{padding-left:20px}
+.toggle.btn-xs{min-width:35px;min-height:22px}
+.toggle-on.btn-xs{padding-right:12px}
+.toggle-off.btn-xs{padding-left:12px}

Resources/views/list.html.twig

@@ -3,6 +3,11 @@
 {% trans_default_domain "EasyAdminBundle" %}
 {% block body_class 'admin list ' ~ entity.name|lower %}
 
+{% block head_stylesheets %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('bundles/easyadmin/stylesheet/bootstrap-toggle.min.css') }}">
+{% endblock %}
+
 {% block content_title %}
     {% if 'search' == app.request.get('action') %}
         {{ 'search.page_title'|transchoice(paginator.nbResults)|raw }}
@@ -49,7 +54,7 @@
                         {% for field, metadata in fields %}
                             {% set isSortingField = metadata.property == app.request.get('sortField') %}
 
-                            <th class="{{ isSortingField ? 'sorted' : '' }} {{ metadata.type|lower }}">
+                            <th data-property-name="{{ metadata.property }}" class="{{ isSortingField ? 'sorted' : '' }} {{ metadata.virtual|default(false) ? 'virtual' : '' }} {{ metadata.type|lower }}">
                                 {% if isSortingField %}
                                     {% set sortDirection = ('DESC' == app.request.get('sortDirection')) ? 'ASC' : 'DESC' %}
                                     {% set request_attributes = request_attributes|merge({ sortField: metadata.property }) %}
@@ -91,7 +96,7 @@
 
                 <tbody>
                     {% for item in paginator.currentPageResults %}
-                        <tr>
+                        <tr data-id="{{ attribute(item, entity.primary_key_field_name) }}">
                             {% for field, metadata in fields %}
                                 {% set isSortingField = metadata.property == app.request.get('sortField') %}
 
@@ -124,3 +129,43 @@
     </div>
 </div>
 {% endblock %}
+
+{% block body_javascript %}
+    {{ parent() }}
+
+    <script src="{{ asset('bundles/easyadmin/javascript/bootstrap-toggle.min.js') }}"></script>
+
+    <script type="text/javascript">
+        $(function() {
+            $('#main table .boolean .toggle input[type="checkbox"]').change(function() {
+                var toggle = $(this);
+                var newValue = toggle.prop('checked');
+                var oldValue = !newValue;
+
+                var columnIndex = $(this).closest('td').index() + 1;
+                var propertyName = $('table th.boolean:nth-child(' + columnIndex + ')').data('property-name');
+
+                var toggleUrl = "{{ path('admin', { action: 'toggle', entity: entity.name })|raw }}"
+                              + "&property=" + propertyName
+                              + "&id=" + $(this).closest('tr').data('id');
+
+                var toggleRequest = $.ajax({ type: "GET", url: toggleUrl, data: {} });
+
+                toggleRequest.done(function(result) {
+                    // protection against race conditions: if the persisted value
+                    // doesn't match the new value, change it to avoid confusions
+                    var persistedValue = ('on' == result) ? true : false;
+                    if (persistedValue != newValue) {
+                        toggle.bootstrapToggle(persistedValue == true ? 'on' : 'off');
+                    }
+                });
+
+                toggleRequest.fail(function(result) {
+                    // in case of error, restore the original value and disable the toggle
+                    toggle.bootstrapToggle(oldValue == true ? 'on' : 'off');
+                    toggle.bootstrapToggle('disable');
+                });
+            });
+        });
+    </script>
+{% endblock %}

Twig/EasyAdminTwigExtension.php

@@ -78,9 +78,8 @@ public function displayEntityField($entity, $fieldName, array $fieldMetadata)
             }
 
             if (in_array($fieldType, array('boolean'))) {
-                return new \Twig_Markup(sprintf('<span class="label label-%s">%s</span>',
-                    true === $value ? 'success' : 'danger',
-                    true === $value ? 'YES' : 'NO'
+                return new \Twig_Markup(sprintf('<input type="checkbox" %s data-toggle="toggle" data-size="mini" data-onstyle="success" data-offstyle="danger" data-on="YES" data-off="NO">',
+                    true === $value ? 'checked' : ''
                 ), 'UTF-8');
             }