Tarea #164 Filtros con superpoderes

This commit is contained in:
Daniel Herrero 2018-03-13 14:30:25 +01:00
parent 6b1ad875cb
commit 176ce860ca
6 changed files with 90 additions and 57 deletions

View File

@ -5,7 +5,7 @@
"validations" : true,
"routes": [
{
"url": "/clients",
"url": "/clients?q",
"state": "clients",
"component": "vn-client-index",
"acl": ["employee"]

View File

@ -1,4 +1,4 @@
<mg-ajax path="/client/api/Clients/filter" options="mgIndex"></mg-ajax>
<mg-ajax path="/client/api/Clients/filter" options="vnIndexNonAuto"></mg-ajax>
<div margin-medium>
<div class="vn-list">
<vn-card>

View File

@ -11,7 +11,7 @@
"component": "ui-view"
},
{
"url": "/list",
"url": "/list?q",
"state": "item.index",
"component": "vn-item-list"
},

View File

@ -1,4 +1,4 @@
<mg-ajax path="/item/api/Items/filter" options="mgIndex"></mg-ajax>
<mg-ajax path="/item/api/Items/filter" options="vnIndexNonAuto"></mg-ajax>
<div margin-medium>
<div class="vn-list">
<vn-card>

View File

@ -1,7 +1,7 @@
import ngModule from '../../module';
export default class Controller {
constructor($element, $scope, $document, $compile, vnPopover, $timeout) {
constructor($element, $scope, $document, $compile, vnPopover, $timeout, $state, $transitions) {
this.element = $element[0];
this.$scope = $scope;
this.$document = $document;
@ -9,46 +9,52 @@ export default class Controller {
this.vnPopover = vnPopover;
this.$timeout = $timeout;
this.stringSearch = '';
this.$state = $state;
this.deregisterCallback = $transitions.onStart({},
transition => this.changeState(transition));
}
clearFilter() {
this.index.filter = {
page: 1,
size: 20
};
}
/**
* String search to JSON filter
*/
getFiltersFromSearch() {
let toFind = this.stringSearch;
let find;
if (this.stringSearch) {
setFilter(filterObject) {
this.clearFilter();
Object.assign(this.index.filter, filterObject);
}
getFiltersFromString(stringSearch) {
let result = {};
if (stringSearch) {
// find pattern key:value or key:(extra value) and returns array
find = toFind.match(/((([\w_]+):([\w_]+))|([\w_]+):\(([\w_ ]+)\))/gi);
// remove pattern key:value or key:(extra value) from string and returns string
this.index.filter.search = (toFind.replace(/((([\w_]+):([\w_]+))|([\w_]+):\(([\w_ ]+)\))/gi, '')).trim();
if (find)
for (let i = 0; i < find.length; i++) {
let aux = find[i].split(':');
let findPattern = stringSearch.match(/((([\w_]+):([\w_]+))|([\w_]+):\(([\w_ ]+)\))/gi);
let remnantString = (stringSearch.replace(/((([\w_]+):([\w_]+))|([\w_]+):\(([\w_ ]+)\))/gi, '')).trim();
if (findPattern) {
for (let i = 0; i < findPattern.length; i++) {
let aux = findPattern[i].split(':');
let property = aux[0];
let value = aux[1].replace(/\(|\)/g, '');
this.index.filter[property] = value.trim();
result[property] = value.trim();
}
}
if (remnantString) {
result.search = remnantString;
}
}
return result;
}
/**
* JSON filter to string search
*
* @param {Object} filter The filter
*/
createFilterSearch(filter) {
createStringFromObject(filterObject) {
let search = [];
let keys = Object.keys(filter);
let keys = Object.keys(filterObject);
if (keys.length) {
keys.forEach(k => {
let ignore = (this.ignoreKeys && this.ignoreKeys instanceof Array && this.ignoreKeys.indexOf(k) !== -1);
if (!ignore) {
let value = filter[k];
let value = filterObject[k];
if (typeof value === 'string' && value.indexOf(' ') !== -1) {
search.push(`${k}:(${value})`);
@ -57,42 +63,59 @@ export default class Controller {
}
}
});
if (filterObject.search)
search.unshift(filterObject.search);
}
if (this.index.filter.search) {
search.push(this.index.filter.search);
}
delete this.index.filter.search;
this.stringSearch = (search.length) ? search.join(' ') : '';
return (search.length) ? search.join(' ') : '';
}
changeState(transition) {
return !(transition._targetState._identifier.name === this.$state.current.name);
}
pushFiltersToState(filters) {
let history = window.history || {pushState: () => {
console.error('Error in history.pushState(): Browser incompatibility error');
}};
let aux = window.location.hash.split('?q=');
if (Object.keys(filters).length)
history.pushState({}, null, `${aux[0]}?q=${encodeURIComponent(JSON.stringify(filters))}`);
else
history.pushState({}, null, aux[0]);
}
onpenFilters(event) {
let filter = {};
if (this.stringSearch) {
this.getFiltersFromSearch();
filter = this.getFiltersFromString(this.stringSearch);
}
this.child = this.vnPopover.showComponent(this.popover, this.$scope, this.element);
// XXX: ¿Existe una forma más adecuada de acceder al controlador de un componente?
var childCtrl = angular.element(this.child).isolateScope().$ctrl;
childCtrl.filter = Object.assign({}, this.index.filter);
childCtrl.filter = Object.assign({}, filter);
childCtrl.onSubmit = filter => this.onChildSubmit(filter);
if (this.data)
childCtrl.data = Object.assign({}, this.data);
event.preventDefault();
}
onChildSubmit(filter) {
this.createFilterSearch(filter);
this.index.filter = {
page: 1,
size: 20
};
this.stringSearch = this.createStringFromObject(filter);
this.clearFilter();
this.$timeout(() => {
this.onSubmit();
});
}
onSubmit() {
let filter = {};
if (this.stringSearch) {
this.getFiltersFromSearch();
filter = this.getFiltersFromString(this.stringSearch);
}
this.setFilter(filter);
if (this.onSearch)
this.onSearch();
@ -103,12 +126,25 @@ export default class Controller {
angular.element(this.child).remove();
}
delete this.child;
this.pushFiltersToState(filter);
}
$onDestroy() {
this.clearFilter();
this.deregisterCallback();
}
$onInit() {
if (this.$state.params.q) {
let filter = JSON.parse(decodeURIComponent(this.$state.params.q));
this.stringSearch = this.createStringFromObject(filter);
}
this.$timeout(() => {
this.onSubmit();
});
}
}
Controller.$inject = ['$element', '$scope', '$document', '$compile', 'vnPopover', '$timeout'];
Controller.$inject = ['$element', '$scope', '$document', '$compile', 'vnPopover', '$timeout', '$state', '$transitions'];
ngModule.component('vnSearchbar', {
template: require('./searchbar.html'),

View File

@ -2,7 +2,7 @@ module.exports = Self => {
Self.installMethod('filter', filterParams);
function filterParams(params) {
let filter = {
let filters = {
where: {},
skip: (params.page - 1) * params.size,
limit: params.size,
@ -20,7 +20,7 @@ module.exports = Self => {
delete params.order;
if (params.search) {
filter.where.and = [
filters.where.and = [
{
or: [
{id: params.search},
@ -36,21 +36,18 @@ module.exports = Self => {
delete params.itemSize;
}
let keys = Object.keys(params);
if (keys.length) {
keys.forEach(
key => {
if (filter.where.and) {
let filter = {};
filter[key] = (key === 'description') ? {regexp: params[key]} : params[key];
filter.where.and.push(filter);
} else {
filter.where[key] = (key === 'description') ? {regexp: params[key]} : params[key];
}
Object.keys(params).forEach(
key => {
if (filters.where.and) {
let filter = {};
filter[key] = (key === 'description' || key === 'name') ? {regexp: params[key]} : params[key];
filters.where.and.push(filter);
} else {
filters.where[key] = (key === 'description' || key === 'name') ? {regexp: params[key]} : params[key];
}
);
}
}
);
return filter;
return filters;
}
};