From 98f033c7228ee73cfd201407f5c43935d955fc55 Mon Sep 17 00:00:00 2001
From: Javier Eguiluz <javier.eguiluz@gmail.com>
Date: Thu, 5 Mar 2015 22:45:11 +0100
Subject: [PATCH 1/2] Added click-to-toggle for boolean columns

---
 Controller/AdminController.php        | 45 ++++++++++++++++++++++-
 Resources/public/stylesheet/admin.css | 10 ++++--
 Resources/views/list.html.twig        | 51 +++++++++++++++++++++++++--
 3 files changed, 100 insertions(+), 6 deletions(-)

diff --git a/Controller/AdminController.php b/Controller/AdminController.php
index 51fa4e02ef..0112153497 100644
--- a/Controller/AdminController.php
+++ b/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,48 @@ 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');
+
+        // 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 JsonResponse(array('success' => true));
+    }
+
     /**
      * Allows applications to modify the entity associated with the item being
      * edited before persisting it.
diff --git a/Resources/public/stylesheet/admin.css b/Resources/public/stylesheet/admin.css
index 6a021a1d77..03002d848c 100644
--- a/Resources/public/stylesheet/admin.css
+++ b/Resources/public/stylesheet/admin.css
@@ -202,17 +202,21 @@ 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;
 }
 
diff --git a/Resources/views/list.html.twig b/Resources/views/list.html.twig
index 697d45a641..55fb6cbfab 100644
--- a/Resources/views/list.html.twig
+++ b/Resources/views/list.html.twig
@@ -49,7 +49,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 +91,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 +124,50 @@
     </div>
 </div>
 {% endblock %}
+
+{% block body_javascript %}
+    {{ parent() }}
+
+    <script type="text/javascript">
+        $(function() {
+            var nonVirtualBooleanColumns = $("table th.boolean:not(.virtual)");
+            nonVirtualBooleanColumns.each(function() {
+                var columnIndex = $(this).index() + 1;
+                var propertyName = $(this).data('property-name');
+
+                $("table tr td:nth-child(" + columnIndex + ")").each(function() {
+                    $(this).hover(function() {
+                        $(this).children("span.label").css("cursor", "pointer")
+                    });
+
+                    $(this).on("click", function (e) {
+                        var htmlElement = $(this).children("span.label");
+                        var value = ('YES' == htmlElement.html()) ? true : false;
+                        var newValue = !value;
+                        var newValueLabel = newValue ? 'YES' : 'NO';
+                        var oldCssClass = value ? 'label-success' : 'label-danger';
+                        var newCssClass = newValue ? 'label-success' : 'label-danger';
+
+                        var toggleUrl = "{{ path('admin', { action: 'toggle', entity: entity.name })|raw }}"
+                                      + "&property=" + propertyName
+                                      + "&id=" + $(this).parent('tr').data('id');
+
+                        var toggleRequest = $.ajax({ type: "GET", url: toggleUrl, data: {} });
+
+                        toggleRequest.done(function(result) {
+                            $(htmlElement).removeClass(oldCssClass);
+                            $(htmlElement).addClass(newCssClass);
+                            $(htmlElement).html(newValueLabel);
+                        });
+
+                        toggleRequest.fail(function(result) {
+                            $(htmlElement).removeClass(oldCssClass);
+                            $(htmlElement).addClass("label-warning");
+                            $(htmlElement).html("ERROR");
+                        });
+                    });
+                });
+            });
+        });
+    </script>
+{% endblock %}

From 73081275bd8e696de879680e3edf7413116a379c Mon Sep 17 00:00:00 2001
From: Javier Eguiluz <javier.eguiluz@gmail.com>
Date: Fri, 6 Mar 2015 22:00:40 +0100
Subject: [PATCH 2/2] Use the bootstrap-toggle library to handle
 click-to-toggle booleans

---
 Controller/AdminController.php                |  6 +-
 .../public/javascript/bootstrap-toggle.min.js |  8 +++
 Resources/public/stylesheet/admin.css         | 39 +++++++++++
 .../stylesheet/bootstrap-toggle.min.css       | 28 ++++++++
 Resources/views/list.html.twig                | 70 +++++++++----------
 Twig/EasyAdminTwigExtension.php               |  5 +-
 6 files changed, 116 insertions(+), 40 deletions(-)
 create mode 100644 Resources/public/javascript/bootstrap-toggle.min.js
 create mode 100644 Resources/public/stylesheet/bootstrap-toggle.min.css

diff --git a/Controller/AdminController.php b/Controller/AdminController.php
index 0112153497..1a51afa4a7 100644
--- a/Controller/AdminController.php
+++ b/Controller/AdminController.php
@@ -275,6 +275,10 @@ protected function toggleAction()
         }
 
         $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);
@@ -307,7 +311,7 @@ protected function toggleAction()
 
         $this->em->flush();
 
-        return new JsonResponse(array('success' => true));
+        return new Response(true === $newValue ? 'on' : 'off');
     }
 
     /**
diff --git a/Resources/public/javascript/bootstrap-toggle.min.js b/Resources/public/javascript/bootstrap-toggle.min.js
new file mode 100644
index 0000000000..5bed0ff7e2
--- /dev/null
+++ b/Resources/public/javascript/bootstrap-toggle.min.js
@@ -0,0 +1,8 @@
+/*! ========================================================================
+ * Bootstrap Toggle: bootstrap-toggle.js v2.2.0
+ * http://www.bootstraptoggle.com
+ * ========================================================================
+ * Copyright 2014 Min Hur, The New York Times Company
+ * Licensed under MIT
+ * ======================================================================== */
++function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
diff --git a/Resources/public/stylesheet/admin.css b/Resources/public/stylesheet/admin.css
index 03002d848c..48f5d7bfd4 100644
--- a/Resources/public/stylesheet/admin.css
+++ b/Resources/public/stylesheet/admin.css
@@ -220,6 +220,45 @@ ul.pager .next {
     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 {
diff --git a/Resources/public/stylesheet/bootstrap-toggle.min.css b/Resources/public/stylesheet/bootstrap-toggle.min.css
new file mode 100644
index 0000000000..0d42ed09cd
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/Resources/views/list.html.twig b/Resources/views/list.html.twig
index 55fb6cbfab..f5a87e1d47 100644
--- a/Resources/views/list.html.twig
+++ b/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 }}
@@ -128,44 +133,37 @@
 {% block body_javascript %}
     {{ parent() }}
 
+    <script src="{{ asset('bundles/easyadmin/javascript/bootstrap-toggle.min.js') }}"></script>
+
     <script type="text/javascript">
         $(function() {
-            var nonVirtualBooleanColumns = $("table th.boolean:not(.virtual)");
-            nonVirtualBooleanColumns.each(function() {
-                var columnIndex = $(this).index() + 1;
-                var propertyName = $(this).data('property-name');
-
-                $("table tr td:nth-child(" + columnIndex + ")").each(function() {
-                    $(this).hover(function() {
-                        $(this).children("span.label").css("cursor", "pointer")
-                    });
-
-                    $(this).on("click", function (e) {
-                        var htmlElement = $(this).children("span.label");
-                        var value = ('YES' == htmlElement.html()) ? true : false;
-                        var newValue = !value;
-                        var newValueLabel = newValue ? 'YES' : 'NO';
-                        var oldCssClass = value ? 'label-success' : 'label-danger';
-                        var newCssClass = newValue ? 'label-success' : 'label-danger';
-
-                        var toggleUrl = "{{ path('admin', { action: 'toggle', entity: entity.name })|raw }}"
-                                      + "&property=" + propertyName
-                                      + "&id=" + $(this).parent('tr').data('id');
-
-                        var toggleRequest = $.ajax({ type: "GET", url: toggleUrl, data: {} });
-
-                        toggleRequest.done(function(result) {
-                            $(htmlElement).removeClass(oldCssClass);
-                            $(htmlElement).addClass(newCssClass);
-                            $(htmlElement).html(newValueLabel);
-                        });
-
-                        toggleRequest.fail(function(result) {
-                            $(htmlElement).removeClass(oldCssClass);
-                            $(htmlElement).addClass("label-warning");
-                            $(htmlElement).html("ERROR");
-                        });
-                    });
+            $('#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');
                 });
             });
         });
diff --git a/Twig/EasyAdminTwigExtension.php b/Twig/EasyAdminTwigExtension.php
index ce5973803f..f5c7076019 100644
--- a/Twig/EasyAdminTwigExtension.php
+++ b/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');
             }