[RFR] Revamp Filter UX

README.md

@@ -351,6 +351,19 @@ Add filters to the list. Each field maps a property in the API endpoint result.
             nga.field('age', 'number')
         ]);
 
+    Filters appear when the user clicks on the "Add filter" button at the top of the list. You can also set a filter field as "pinned", to be sure it's always displayed.
+
+        listView.filters([
+            nga.field('q').label('Search').pinned(true)
+        ]);
+
+    Filter fields can be of any type, including `reference` and `template`. this allows to define custom filters with ease.
+
+        listView.filters([
+            nga.field('q', 'template').label('')
+                .template('<div class="input-group"><input type="text" ng-model="value" placeholder="Search" class="form-control"></input><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span></div>'),
+        ]);
+
 * `listActions(String|Array)`
 Add an action column with action buttons on each line. You can pass a list of button names among 'show', 'edit', and 'delete'.
 
@@ -455,6 +468,9 @@ A list of CSS classes to be added to the corresponding field. If you provide a f
 * `defaultValue(*)`
 Define the default value of the field in the creation form.
 
+* `pinned(boolean)`
+Whether the field should always appear. Used in filters (see listView Settings). Default to false.
+
 ### `number` Field Settings
 
 * `format(string)`

examples/blog/config.js

@@ -166,21 +166,13 @@
                     .targetField(nga.field('title').map(truncate))
             ])
             .filters([
-                nga.field('q', 'string').label('').attributes({'placeholder': 'Global Search'}),
+                nga.field('q', 'template')
+                    .label('')
+                    .pinned(true)
+                    .template('<div class="input-group"><input type="text" ng-model="value" placeholder="Search" class="form-control"></input><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span></div>'),
                 nga.field('created_at', 'date')
                     .label('Posted')
                     .attributes({'placeholder': 'Filter by date'}),
-                nga.field('today', 'boolean').map(function() {
-                    var now = new Date(),
-                        year = now.getFullYear(),
-                        month = now.getMonth() + 1,
-                        day = now.getDate();
-                    month = month < 10 ? '0' + month : month;
-                    day = day < 10 ? '0' + day : day;
-                    return {
-                        created_at: [year, month, day].join('-') // ?created_at=... will be appended to the API call
-                    };
-                }),
                 nga.field('post_id', 'reference')
                     .label('Post')
                     .targetEntity(post)

package.json

@@ -59,7 +59,7 @@
     "jsonlint": "^1.6.2",
     "karma": "~0.12.14",
     "karma-babel-preprocessor": "^4.0.0",
-    "karma-chrome-launcher": "^0.1.4",
+    "karma-chrome-launcher": "^0.2.0",
     "karma-jasmine": "~0.3.3",
     "karma-ng-html2js-preprocessor": "~0.1.0",
     "karma-ng-scenario": "~0.1.0",

src/javascripts/ng-admin/Crud/CrudModule.js

@@ -4,6 +4,7 @@ var CrudModule = angular.module('crud', [
     'ui.router', 'ui.bootstrap', 'ngSanitize', 'textAngular', 'ngInflection', 'ui.codemirror', 'ngFileUpload', 'ngNumeraljs'
 ]);
 
+CrudModule.controller('ListLayoutController', require('./list/ListLayoutController'));
 CrudModule.controller('ListController', require('./list/ListController'));
 CrudModule.controller('ShowController', require('./show/ShowController'));
 CrudModule.controller('FormController', require('./form/FormController'));
@@ -39,13 +40,14 @@ CrudModule.directive('uiSelectRequired', require('./field/uiSelectRequired'));
 
 CrudModule.provider('FieldViewConfiguration', require('./fieldView/FieldViewConfiguration'));
 
-CrudModule.directive('listActions', require('./list/ListActions'));
+CrudModule.directive('maListActions', require('./list/maListActions'));
 CrudModule.directive('maDatagrid', require('./list/maDatagrid'));
 CrudModule.directive('maDatagridPagination', require('./list/maDatagridPagination'));
 CrudModule.directive('maDatagridInfinitePagination', require('./list/maDatagridInfinitePagination'));
 CrudModule.directive('maDatagridItemSelector', require('./list/maDatagridItemSelector'));
 CrudModule.directive('maDatagridMultiSelector', require('./list/maDatagridMultiSelector'));
 CrudModule.directive('maFilter', require('./filter/maFilter'));
+CrudModule.directive('maFilterButton', require('./filter/maFilterButton'));
 
 CrudModule.directive('maColumn', require('./column/maColumn'));
 CrudModule.directive('maBooleanColumn', require('./column/maBooleanColumn'));
@@ -68,9 +70,9 @@ CrudModule.directive('maListButton', require('./button/maListButton'));
 CrudModule.directive('maDeleteButton', require('./button/maDeleteButton'));
 CrudModule.directive('maBatchDeleteButton', require('./button/maBatchDeleteButton'));
 CrudModule.directive('maExportToCsvButton', require('./button/maExportToCsvButton'));
+CrudModule.directive('maViewBatchActions', require('./button/maViewBatchActions'));
 
 CrudModule.directive('maViewActions', require('./misc/ViewActions'));
-CrudModule.directive('maViewBatchActions', require('./misc/ViewBatchActions'));
 CrudModule.directive('compile', require('./misc/Compile'));
 
 CrudModule.config(require('./routing'));

src/javascripts/ng-admin/Crud/button/maViewBatchActions.js

@@ -0,0 +1,47 @@
+function maViewBatchActionsDirective($injector) {
+    var $compile = $injector.get('$compile');
+
+    return {
+        restrict: 'E',
+        scope: {
+            'entity': '=',
+            'selection': '=',
+            'buttons': '&'
+        },
+        link: function(scope) {
+            scope.isopen = false;
+
+            scope.toggleDropdown = function($event) {
+                $event.preventDefault();
+                $event.stopPropagation();
+                scope.isopen = !scope.isopen;
+            };
+
+            scope.buttons = scope.buttons();
+            if (typeof scope.buttons === 'string') {
+                scope.customTemplate = scope.buttons;
+                scope.buttons = null;
+            }
+        },
+        template:
+`<span ng-if="selection" class="btn-group" dropdown is-open="isopen">
+    <button type="button" ng-if="selection.length" class="btn btn-default dropdown-toggle" dropdown-toggle >
+        {{ selection.length }} Selected <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" role="menu">
+        <li ng-repeat="button in buttons" ng-switch="button">
+            <a ng-switch-when="delete">
+                <ma-batch-delete-button selection="selection" entity="entity"/>
+            </a>
+            <a ng-switch-default>
+                <span compile="button"></span>
+            </a>
+        </li>
+    </ul>
+</span>`
+    };
+}
+
+maViewBatchActionsDirective.$inject = ['$injector'];
+
+module.exports = maViewBatchActionsDirective;

src/javascripts/ng-admin/Crud/field/maInputField.js

@@ -33,8 +33,9 @@ define(function (require) {
                 }
             },
             template:
-'<input type="{{ type || text }}" ng-attr-step="{{ step }}" ng-model="value" id="{{ name }}" name="{{ name }}" class="form-control"' +
-    'ng-required="v.required" ng-minlength="v.minlength" ng-maxlength="v.maxlength" />'
+`<input type="{{ type || 'text' }}" ng-attr-step="{{ step }}" ng-model="value"
+    id="{{ name }}" name="{{ name }}" class="form-control"
+    'ng-required="v.required" ng-minlength="v.minlength" ng-maxlength="v.maxlength" />`
         };
     }
 

src/javascripts/ng-admin/Crud/field/maTemplateField.js

@@ -9,7 +9,8 @@ define(function (require) {
             scope: {
                 field: '&',
                 entry: '&',
-                entity: '&'
+                entity: '&',
+                value: '='
             },
             link: function(scope) {
                 scope.field = scope.field();

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

@@ -8,7 +8,7 @@ define(function(require) {
         return '<a ng-click="gotoDetail()">' + getReadWidget() + '</a>';
     }
     function getFilterWidget() {
-        return '<ma-button-field field="::field" value="values[field.name()]"></ma-button-field>';
+        return '<ma-checkbox-field field="::field" value="values[field.name()]"></ma-checkbox-field>';
     }
     function getWriteWidget() {
         return '<ma-checkbox-field field="::field" value="entry.values[field.name()]"></ma-checkbox-field>';

src/javascripts/ng-admin/Crud/filter/maFilter.js

@@ -10,30 +10,30 @@ function maFilterDirective(FieldViewConfiguration) {
         }).join('');
 
     var template = `
-        <form class="filters navbar-form well well-sm" ng-if="filterCtrl.shouldFilter()" ng-submit="filterCtrl.filter()">
-            <div class="filter form-group input-{{ field.type() }}" ng-repeat="field in filters track by $index" ng-class="{\'input-group\':field.label()}">
-                <label for="{{ field.name() }}" ng-if="field.label() && field.type() != \'boolean\'" class="input-group-addon">
-                    {{ field.label() }}<span ng-if="field.validation().required">&nbsp;*</span>&nbsp;
-                </label>
-                <div ng-switch="field.type()" ng-class="field.getCssClasses(entry)">
-                    ${filterWidgetTypes}
-                </div>
+<div class="row">
+    <form class="filters col-md-offset-6 col-md-6 form-horizontal" ng-if="filterCtrl.shouldFilter()">
+        <div class="filter form-group input-{{ field.type() }}" ng-repeat="field in filters track by $index">
+            <div class="col-sm-1 col-xs-1 remove_filter">
+                <a ng-if="!field.pinned()" ng-click="filterCtrl.removeFilter(field)"><span class="glyphicon glyphicon-remove"></span></a>
             </div>
-            <button class="btn btn-default" type="submit">
-                <span class="glyphicon glyphicon-search"></span> Filter
-            </button>
-            <button ng-if="!filterCtrl.isFilterEmpty" class="btn btn-default" type="button" ng-click="filterCtrl.clearFilters()">
-                <span class="glyphicon glyphicon-remove"></span> Clear
-            </button>
-        </form>
+            <label for="{{ field.name() }}" class="col-sm-4 col-xs-11 control-label">
+                {{ field.label() }}<span ng-if="field.validation().required">&nbsp;*</span>&nbsp;
+            </label>
+            <div class="col-sm-7" ng-switch="field.type()" ng-class="field.getCssClasses(entry)">
+                ${filterWidgetTypes}
+            </div>
+        </div>
+    </form>
+</div>
     `;
 
     return {
         restrict: 'E',
         template: template,
         scope: {
-            filters: '&',
-            datastore: '&'
+            filters: '=',
+            datastore: '&',
+            values: '&'
         },
         controllerAs: 'filterCtrl',
         controller: FilterController

src/javascripts/ng-admin/Crud/filter/maFilterButton.js

@@ -0,0 +1,33 @@
+function maFilterButtonDirective() {
+    'use strict';
+
+    return {
+        restrict: 'E',
+        scope: {
+            filters: '&',
+            enabledFilters: '=',
+            enableFilter: '&'
+        },
+        link: function(scope) {
+            scope.notYetEnabledFilters = () => scope.filters().filter(filter => 
+                scope.enabledFilters.indexOf(filter) === -1
+            );
+            scope.hasFilters = () => scope.notYetEnabledFilters().length > 0;
+        },
+        template:
+`<span class="btn-group" dropdown is-open="isopen" ng-if="hasFilters()">
+    <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle >
+        <span class="glyphicon glyphicon-filter" aria-hidden="true"></span>&nbsp;Add filter <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu" role="menu">
+        <li ng-repeat="filter in notYetEnabledFilters()" ng-switch="button">
+            <a ng-click="enableFilter()(filter)">{{ filter.label() }}</a>
+        </li>
+    </ul>
+</span>`
+    };
+}
+
+maFilterButtonDirective.$inject = [];
+
+module.exports = maFilterButtonDirective;

src/javascripts/ng-admin/Crud/filter/maFilterController.js

@@ -13,8 +13,13 @@ function maFilterController($scope, $state, $stateParams) {
     this.$scope = $scope;
     this.$state = $state;
     this.$stateParams = $stateParams;
-    this.$scope.values = this.$stateParams.search || {};
-    this.$scope.filters = this.$scope.filters();
+    this.$scope.values = this.$scope.values() || {};
+    $scope.$watch('values', (newValues, oldValues) => {
+        if (newValues != oldValues) {
+            this.filter(); // FIXME use debounce
+        }
+    }, true)
+    this.$scope.filters = this.$scope.filters;
     this.$scope.datastore = this.$scope.datastore();
     this.isFilterEmpty = isEmpty(this.$scope.values);
 }
@@ -26,6 +31,14 @@ function isEmpty(values) {
     return true;
 }
 
+maFilterController.prototype.removeFilter = function(filter) {
+    delete this.$scope.values[filter.name()];
+    this.$scope.filters = this.$scope.filters.filter(f => f !== filter);
+    if (filter.name() in this.$stateParams.search) {
+        this.filter();
+    }
+};
+
 maFilterController.prototype.filter = function () {
     var values = {},
         filters = this.$scope.filters,
@@ -36,6 +49,10 @@ maFilterController.prototype.filter = function () {
     for (i in filters) {
         field = filters[i];
         fieldName = field.name();
+        if (this.$scope.values[fieldName] === '') {
+            delete this.$scope.values[fieldName];
+            continue;
+        }
 
         if ((field.type() === 'boolean' && this.$scope.values[fieldName]) || // for boolean false is the same as null
             (field.type() !== 'boolean' && this.$scope.values[fieldName] !== null)) {
@@ -45,23 +62,13 @@ maFilterController.prototype.filter = function () {
 
     this.$stateParams.search = values;
     this.$stateParams.page = 1;
-    this.$state.go(this.$state.current, this.$stateParams, { reload: true, inherit: false, notify: true });
+    this.$state.go('list', this.$stateParams);
 };
 
 maFilterController.prototype.shouldFilter = function () {
     return Object.keys(this.$scope.filters).length;
 };
 
-maFilterController.prototype.clearFilters = function () {
-    var i;
-
-    for (i in this.$scope.values) {
-        this.$scope.values[i] = null;
-    }
-
-    this.filter();
-};
-
 maFilterController.prototype.destroy = function () {
     this.$scope = undefined;
 };