diff --git a/README.md b/README.md index ababc67f..26479d68 100644 --- a/README.md +++ b/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('
'), + ]); + * `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)` diff --git a/examples/blog/config.js b/examples/blog/config.js index 981755ee..d621c3df 100644 --- a/examples/blog/config.js +++ b/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('
'), nga.field('created_at', 'date') .label('Posted') .attributes({'placeholder': 'Filter by date'}), diff --git a/src/javascripts/ng-admin/Crud/field/maInputField.js b/src/javascripts/ng-admin/Crud/field/maInputField.js index 3ca0139c..d63661f5 100644 --- a/src/javascripts/ng-admin/Crud/field/maInputField.js +++ b/src/javascripts/ng-admin/Crud/field/maInputField.js @@ -33,8 +33,9 @@ define(function (require) { } }, template: -'' +`` }; } diff --git a/src/javascripts/ng-admin/Crud/field/maTemplateField.js b/src/javascripts/ng-admin/Crud/field/maTemplateField.js index 909ab011..0c3cbaba 100644 --- a/src/javascripts/ng-admin/Crud/field/maTemplateField.js +++ b/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(); diff --git a/src/javascripts/ng-admin/Crud/filter/maFilter.js b/src/javascripts/ng-admin/Crud/filter/maFilter.js index 551ffa39..2be33180 100644 --- a/src/javascripts/ng-admin/Crud/filter/maFilter.js +++ b/src/javascripts/ng-admin/Crud/filter/maFilter.js @@ -10,19 +10,21 @@ function maFilterDirective(FieldViewConfiguration) { }).join(''); var template = ` -
-
-
- -
- -
- ${filterWidgetTypes} -
+
+ +
+
+
- + +
+ ${filterWidgetTypes} +
+
+ +
`; return { diff --git a/src/javascripts/ng-admin/Crud/filter/maFilterController.js b/src/javascripts/ng-admin/Crud/filter/maFilterController.js index 782d50a0..1aa4f17a 100644 --- a/src/javascripts/ng-admin/Crud/filter/maFilterController.js +++ b/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)) { diff --git a/src/javascripts/ng-admin/Crud/list/ListLayoutController.js b/src/javascripts/ng-admin/Crud/list/ListLayoutController.js index 631717db..6608ac6a 100644 --- a/src/javascripts/ng-admin/Crud/list/ListLayoutController.js +++ b/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 diff --git a/src/javascripts/ng-admin/Crud/list/listLayout.html b/src/javascripts/ng-admin/Crud/list/listLayout.html index 7e4e881d..33668e98 100644 --- a/src/javascripts/ng-admin/Crud/list/listLayout.html +++ b/src/javascripts/ng-admin/Crud/list/listLayout.html @@ -15,6 +15,7 @@

+