Introducing "pinned" filters

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

@@ -160,7 +160,10 @@
                     .targetField(nga.field('title').map(truncate))
             ])
             .filters([
-                nga.field('q', 'string').label('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'}),

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/filter/maFilter.js

@@ -10,19 +10,21 @@ function maFilterDirective(FieldViewConfiguration) {
         }).join('');
 
     var template = `
-        <form class="filters col-md-8 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-click="filterCtrl.removeFilter(field)"><span class="glyphicon glyphicon-remove"></span></a>
-                </div>
-                <label for="{{ field.name() }}" class="col-sm-2 col-xs-11 control-label">
-                    {{ field.label() }}<span ng-if="field.validation().required">&nbsp;*</span>&nbsp;
-                </label>
-                <div class="col-sm-8" 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>
-        </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 {

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

@@ -49,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)) {

src/javascripts/ng-admin/Crud/list/ListLayoutController.js

@@ -15,7 +15,10 @@ define(function () {
         this.loadingPage = false;
         this.search = $location.search().search ? JSON.parse($location.search().search) : {};
         this.filters = view.filters();
-        this.enabledFilters = this.filters.filter(filter => this.search && (filter.name() in this.search));
+        this.enabledFilters = this.filters.filter(filter => {
+            if (filter.pinned()) return true;
+            return this.search && (filter.name() in this.search)
+        });
         this.hasFilters = Object.keys(this.filters).length > 0;
         this.focusedFilterId = null;
         // required to pass enableFilter down 2 directives to the filterButton

src/javascripts/ng-admin/Crud/list/listLayout.html

@@ -15,6 +15,7 @@ <h1 compile="::llCtrl.view.title()">
         </div>
 
         <ma-filter ng-if="llCtrl.hasFilters" filters="llCtrl.enabledFilters" values="::llCtrl.search" datastore="::llCtrl.dataStore"></ma-filter>
+
     </div>
 </div>