[RFR] Required boolean fields use a checkbox for edition instad of a dropdown

doc/Configuration-reference.md

@@ -440,7 +440,7 @@ A list of attributes to be added to the corresponding field.
 
 * `validation(object)`
 Set field validation rules. Based on Angular's form validation features.
- - `required`: boolean
+ - `required`: boolean *Required boolean fields will render as checkbox for edition*
  - `minlength`: number
  - `maxlength`: number
  - `pattern`: regular expression

examples/blog/config.js

@@ -248,7 +248,7 @@
                 nga.field('id').label('ID'),
                 nga.field('name'),
                 nga.field('published', 'boolean').cssClasses(function(entry) { // add custom CSS classes to inputs and columns
-                    if(entry){
+                    if(entry && entry.values){
                         if (entry.values.published) {
                             return 'bg-success text-center';
                         }
@@ -271,8 +271,9 @@
         tag.editionView()
             .fields([
                 nga.field('name'),
-                nga.field('published', 'boolean')
-                    .choices([{ value: null, label: 'null' }, { value: true, label: 'yes'}, {value: false,label: 'no' }])
+                nga.field('published', 'boolean').validation({
+                    required: true // as this boolean is required, ng-admin will use a checkbox instead of a dropdown
+                })
             ])
 
         tag.showView()

package.json

@@ -22,7 +22,7 @@
     "babel-core": "^5.2.17",
     "babel-loader": "^5.0.0",
     "bootstrap-sass": "^3.3.4",
-    "chai": "^2.1.0",
+    "chai": "^3.3.0",
     "codemirror": "^5.2.0",
     "core-js": "^0.6.1",
     "css-loader": "^0.12.0",

src/javascripts/ng-admin/Crud/column/maBooleanColumn.js

@@ -12,7 +12,7 @@ define(function (require) {
             link: function(scope) {
                 scope.value = scope.value();
             },
-            template: '<span class="glyphicon" ng-class="{\'glyphicon-ok\': value === true, \'glyphicon-remove\': value === false }"></span>'
+            template: '<span class="glyphicon" ng-class="{\'glyphicon-ok\': !!value, \'glyphicon-remove\': !value }"></span>'
         };
     }
 

src/javascripts/ng-admin/Crud/fieldView/BooleanFieldView.js

@@ -1,6 +1,9 @@
 module.exports = {
     getReadWidget:   () => '<ma-boolean-column value="::entry.values[field.name()]"></ma-boolean-column>',
-    getLinkWidget:   () => '<a ng-click="gotoDetail()">' + module.exports.getReadWidget() + '</a>', 
+    getLinkWidget:   () => '<a ng-click="gotoDetail()">' + module.exports.getReadWidget() + '</a>',
     getFilterWidget: () => `<ma-choice-field field="::field" value="values[field.name()]" choices="[{value: 'true', label: 'true' }, { value: 'false', label: 'false' }]"></ma-choice-field>`,
-    getWriteWidget:  () => `<div class="row"><ma-choice-field class="col-sm-4 col-md-3" field="::field" value="entry.values[field.name()]"></ma-choice-field></div>`
+    getWriteWidget:  () => `<div class="row">
+        <ma-choice-field class="col-sm-4 col-md-3" ng-if="!field.validation().required" field="::field" value="entry.values[field.name()]"></ma-choice-field>
+        <ma-checkbox-field class="col-sm-4 col-md-3" ng-if="!!field.validation().required" field="::field" value="entry.values[field.name()]"></ma-checkbox-field>
+    </div>`
 }

src/javascripts/test/e2e/EditionViewSpec.js

@@ -72,20 +72,11 @@ describe('EditionView', function () {
             browser.get(browser.baseUrl + '#/tags/edit/5');
         });
 
-        it('should render as a choice field', function () {
-            $$('.ng-admin-field-published .ui-select-container')
-            .then(function(uiSelect) {
-                expect(uiSelect.length).toBe(1)
-            })
-            .then(function() {
-                return $$('.ng-admin-field-published .btn').first().click();
+        it('should render as a checkbox field', function () {
+            $$('.ng-admin-field-published input[type="checkbox"]')
+            .then(function(checkbox) {
+                expect(checkbox.length).toBe(1);
             })
-            .then(function() {
-                return $$('.ng-admin-field-published .ui-select-choices-row');
-            })
-            .then(function(choices) {
-                expect(choices.length).toBe(3)
-            });
         });
     })
 

src/javascripts/test/unit/Crud/column/maBooleanColumnSpec.js

@@ -0,0 +1,59 @@
+/*global angular,inject,describe,it,expect,beforeEach*/
+describe('directive: ma-boolean-column', function () {
+    'use strict';
+
+    var directive = require('../../../../ng-admin/Crud/column/maBooleanColumn');
+    var BooleanField = require('admin-config/lib/Field/BooleanField');
+
+    angular.module('testapp_BooleanColumn', []).directive('maBooleanColumn', directive);
+
+    var $compile,
+        scope,
+        directiveUsage = '<ma-boolean-column field="field" value="value"></ma-boolean-column>';
+
+    beforeEach(angular.mock.module('testapp_BooleanColumn'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_) {
+        $compile = _$compile_;
+        scope = _$rootScope_;
+    }));
+
+    it("should contain a span tag", function () {
+        scope.field = new BooleanField();
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].nodeName).toBe('SPAN');
+    });
+
+    it("should contain a span tag with classes glyphicon and glyphicon-ok when value is true", function () {
+        scope.field = new BooleanField();
+        scope.value = true;
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].className).toBe('glyphicon glyphicon-ok');
+    });
+
+    it("should contain a span tag with classes glyphicon and glyphicon-remove when value is false", function () {
+        scope.field = new BooleanField();
+        scope.value = false;
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].className).toBe('glyphicon glyphicon-remove');
+    });
+
+    it("should contain a span tag with classes glyphicon and glyphicon-ok when value is truthy", function () {
+        scope.field = new BooleanField();
+        scope.value = 1;
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].className).toBe('glyphicon glyphicon-ok');
+    });
+
+    it("should contain a span tag with classes glyphicon and glyphicon-remove when value is falsy", function () {
+        scope.field = new BooleanField();
+        scope.value = 0;
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].className).toBe('glyphicon glyphicon-remove');
+    });
+});

src/javascripts/test/unit/Crud/field/maCheckboxFieldSpec.js

@@ -0,0 +1,44 @@
+/*global angular,inject,describe,it,expect,beforeEach*/
+describe('directive: checkbox-field', function () {
+    'use strict';
+
+    var directive = require('../../../../ng-admin/Crud/field/maCheckboxField');
+    var Field = require('admin-config/lib/Field/Field');
+    angular.module('testapp_CheckboxField', []).directive('maCheckboxField', directive);
+
+    var $compile,
+        scope,
+        directiveUsage = '<ma-checkbox-field field="field" value="value"></ma-checkbox-field>';
+
+    beforeEach(angular.mock.module('testapp_CheckboxField'));
+
+    beforeEach(inject(function (_$compile_, _$rootScope_) {
+        $compile = _$compile_;
+        scope = _$rootScope_;
+    }));
+
+    it("should contain an input tag", function () {
+        scope.field = new Field();
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].nodeName).toBe('INPUT');
+    });
+
+    it("should use the checkbox type", function () {
+        scope.field = new Field();
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.children()[0].type).toBe('checkbox');
+    });
+
+    it("should be checked according to the bounded value", function () {
+        scope.field = new Field();
+        scope.value = true;
+        var element = $compile(directiveUsage)(scope);
+        scope.$digest();
+        expect(element.find('input').attr('checked')).toBeTruthy();
+        scope.value = false;
+        scope.$digest();
+        expect(element.find('input').attr('checked')).toBeFalsy();
+    });
+});

src/javascripts/test/unit/Crud/fieldView/BooleanFieldView.js

@@ -0,0 +1,37 @@
+var assert = require('chai').assert;
+var BooleanFieldView = require('../../../../ng-admin/Crud/fieldView/BooleanFieldView');
+
+describe('BooleanFieldView', function() {
+    describe('getReadWidget', function() {
+        it('should return boolean column directive', function() {
+            var widget = BooleanFieldView.getReadWidget();
+            assert.include(widget, '<ma-boolean-column');
+        });
+    });
+
+    describe('getLinkWidget', function() {
+        it('should return boolean column directive', function() {
+            var widget = BooleanFieldView.getLinkWidget();
+            assert.include(widget, '<ma-boolean-column');
+        });
+    });
+
+    describe('getFilterWidget', function() {
+        it('should return choice field directive with true and false choices', function() {
+            var widget = BooleanFieldView.getFilterWidget();
+            assert.match(widget, /<ma-choice-field .* choices="\[{value: \'true\', label: \'true\' }, { value: \'false\', label: \'false\' }]"/);
+        });
+    });
+
+    describe('getWriteWidget', function() {
+        it('should return choice field directive with check for non required field', function() {
+            var widget = BooleanFieldView.getWriteWidget();
+            assert.match(widget, /<ma-choice-field .* ng-if="!field\.validation\(\)\.required" .*><\/ma-choice-field>/);
+        });
+
+        it('should return checkbox field directive with check for required field', function() {
+            var widget = BooleanFieldView.getWriteWidget();
+            assert.match(widget, /<ma-checkbox-field .* ng-if="!!field\.validation\(\)\.required" .*><\/ma-checkbox-field>/);
+        });
+    });
+});