From 170fd84c80734c0df604d3c7b81c1b5b1914e457 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Thu, 10 Nov 2011 13:55:33 +0000 Subject: [PATCH] some work on filters --- source/Ox.UI/js/Core/Ox.URL.js | 2 +- source/Ox.UI/js/Form/Ox.DateInput.js | 4 ++ source/Ox.UI/js/Form/Ox.Filter.js | 89 +++++++++++++++++++++------ source/Ox.UI/js/Form/Ox.InputGroup.js | 10 ++- source/Ox.UI/js/Form/Ox.Select.js | 3 +- 5 files changed, 83 insertions(+), 25 deletions(-) diff --git a/source/Ox.UI/js/Core/Ox.URL.js b/source/Ox.UI/js/Core/Ox.URL.js index f6655029..76fd0ce0 100644 --- a/source/Ox.UI/js/Core/Ox.URL.js +++ b/source/Ox.UI/js/Core/Ox.URL.js @@ -339,7 +339,7 @@ Ox.URL = function(options) { } } if (condition.value.indexOf(':') > -1) { - condition.value = condition.value.split(':').map(decodeValue).join(':'); + condition.value = condition.value.split(':').map(decodeValue); } else { condition.value = decodeValue(condition.value); } diff --git a/source/Ox.UI/js/Form/Ox.DateInput.js b/source/Ox.UI/js/Form/Ox.DateInput.js index 969b93d9..b584bd07 100644 --- a/source/Ox.UI/js/Form/Ox.DateInput.js +++ b/source/Ox.UI/js/Form/Ox.DateInput.js @@ -108,6 +108,10 @@ Ox.DateInput = function(options, self) { ] : [ self.$input.month, self.$input.day, self.$input.year ]), + joinValues: function(values) { + setValue(); + return self.options.value; + }, separators: Ox.merge(self.options.weekday ? [ {title: self.options.format == 'short' ? '' : ',', width: 8}, ] : [], self.options.format == 'short' ? [ diff --git a/source/Ox.UI/js/Form/Ox.Filter.js b/source/Ox.UI/js/Form/Ox.Filter.js index 12e7c60a..caee42f5 100644 --- a/source/Ox.UI/js/Form/Ox.Filter.js +++ b/source/Ox.UI/js/Form/Ox.Filter.js @@ -50,6 +50,10 @@ Ox.Filter = function(options, self) { Ox.Log('Form', 'Ox.Filter self.options', self.options) self.conditionOperators = { + boolean: [ + {id: '=', title: 'is'}, + {id: '!=', title: 'is not'} + ], date: [ {id: '=', title: 'is'}, {id: '!=', title: 'is not'}, @@ -57,8 +61,8 @@ Ox.Filter = function(options, self) { {id: '!<', title: 'is not before'}, {id: '>', title: 'is after'}, {id: '!>', title: 'is not after'}, - {id: '-', title: 'is between'}, - {id: '!-', title: 'is not between'} + {id: '=:', title: 'is between'}, + {id: '!=:', title: 'is not between'} ], list: [ {id: '=', title: 'is'}, @@ -71,8 +75,8 @@ Ox.Filter = function(options, self) { {id: '!<', title: 'is not less than'}, {id: '>', title: 'is greater than'}, {id: '!>', title: 'is not greater than'}, - {id: '-', title: 'is between'}, - {id: '!-', title: 'is not between'}/*, + {id: '=:', title: 'is between'}, + {id: '!=:', title: 'is not between'}/*, {id: '^', title: 'starts with'}, {id: '!^', title: 'does not start with'}, {id: '$', title: 'ends with'}, @@ -91,8 +95,26 @@ Ox.Filter = function(options, self) { text: [ {id: '=', title: 'contains'}, {id: '!=', title: 'does not contain'} + ], + year: [ + {id: '=', title: 'is'}, + {id: '!=', title: 'is not'}, + {id: '<', title: 'is before'}, + {id: '!<', title: 'is not before'}, + {id: '>', title: 'is after'}, + {id: '!>', title: 'is not after'}, + {id: '=:', title: 'is between'}, + {id: '!=:', title: 'is not between'} ] }; + self.defaultValue = { + boolean: 'true', + date: Ox.formatDate(new Date(), '%F'), + number: 0, + string: '', + text: '', + year: new Date().getFullYear() + }; self.operators = [ {id: '&', title: 'all'}, {id: '|', title: 'any'} @@ -307,6 +329,12 @@ Ox.Filter = function(options, self) { Ox.Log('Form', 'old new', oldConditionType, newConditionType) condition.key = key; if (changeConditionType) { + if ( + ['string', 'text'].indexOf(oldConditionType) == -1 + || ['string', 'text'].indexOf(newConditionType) == -1 + ) { + condition.value = self.defaultValue[newType]; + } renderConditions(); //self.$conditions[pos].replaceElement(1, constructConditionOperator(pos, oldOperator)); } @@ -317,16 +345,17 @@ Ox.Filter = function(options, self) { function changeConditionOperator(pos, subpos, operator) { subpos = Ox.isUndefined(subpos) ? -1 : subpos; - Ox.Log('Form', 'chCoOp', pos, subpos, operator) + Ox.Log('FILTER', 'chCoOp', 'query', self.options.query) var condition = subpos == -1 ? self.options.query.conditions[pos] : self.options.query.conditions[pos].conditions[subpos], - isBetween = operator.indexOf('-') > -1, - oldOperator = condition.operator, - wasBetween = oldOperator.indexOf('-') > -1, + isBetween = operator.indexOf(':') > -1, + wasBetween = Ox.isArray(condition.value), wasUselessCondition = isUselessCondition(pos, subpos); + Ox.Log('FILTER', 'chCoOp', 'iB/wB', isBetween, wasBetween) condition.operator = operator; if (isBetween && !wasBetween) { + condition.operator = condition.operator.replace(':', ''); condition.value = [condition.value, condition.value] renderConditions(); } else if (!isBetween && wasBetween) { @@ -504,13 +533,18 @@ Ox.Filter = function(options, self) { } function renderConditionOperator(condition) { - Ox.Log('Form', 'rCO', condition) + Ox.Log('FILTER', 'rCO', condition, self.conditionOperators[getConditionType( + Ox.getObjectById(self.options.findKeys, condition.key).type + )]) return Ox.Select({ items: self.conditionOperators[getConditionType( Ox.getObjectById(self.options.findKeys, condition.key).type )].map(function(operator) { return { - checked: operator.id == condition.operator, // fixme: should be "selected", not "checked" + // fixme: should be "selected", not "checked" + checked: Ox.isArray(condition.value) + ? operator.id == condition.operator + ':' + : operator.id == condition.operator, id: operator.id, title: operator.title }; @@ -626,7 +660,6 @@ Ox.Filter = function(options, self) { type = findKey.type == 'integer' ? 'int' : findKey.type, formatArgs, formatType, title; if (findKey.format) { - Ox.Log('Form', 'findKey.format', findKey.format) formatArgs = findKey.format.args formatType = findKey.format.type; if (formatType == 'color') { @@ -648,10 +681,10 @@ Ox.Filter = function(options, self) { }); } else if (formatType == 'date') { $input = Ox.DateInput(!isArray ? { - //value: condition.value, + value: condition.value, width: {day: 66, month: 66, year: 140} } : { - //value: condition.value[index], + value: condition.value[index], width: {day: 32, month: 32, year: 48} }); } else if (formatType == 'duration') { @@ -693,19 +726,35 @@ Ox.Filter = function(options, self) { }) } } else { - $input = Ox.Input({ - type: type, - value: !isArray ? condition.value : condition.value[index], - width: !isArray ? 288 : 128 - }); + if (type == 'boolean') { + $input = Ox.Select({ + items: [ + {id: 'true', title: 'true'}, + {id: 'false', title: 'false'} + ], + width: 288 + }); + } else { + $input = Ox.Input({ + type: type, + value: !isArray ? condition.value : condition.value[index], + width: !isArray ? 288 : 128 + }); + } } return $input; } function triggerChangeEvent() { - that.triggerEvent('change', { - query: self.options.query + var query = Ox.clone(self.options.query, true); + /* + // FIXME: doesn't work for nested conditions + query.conditions.forEach(function(condition) { + Ox.print('CO', condition.operator) + condition.operator = condition.operator.replace(':', ''); }); + */ + that.triggerEvent('change', {query: query}); } return that; diff --git a/source/Ox.UI/js/Form/Ox.InputGroup.js b/source/Ox.UI/js/Form/Ox.InputGroup.js index 9f79e813..5fd8ef72 100644 --- a/source/Ox.UI/js/Form/Ox.InputGroup.js +++ b/source/Ox.UI/js/Form/Ox.InputGroup.js @@ -21,6 +21,7 @@ Ox.InputGroup = function(options, self) { .defaults({ id: '', inputs: [], + joinValues: null, separators: [], width: 0 }) @@ -74,10 +75,13 @@ Ox.InputGroup = function(options, self) { function change(data) { //Ox.Log('Form', 'InputGroup change') + var values = self.options.inputs.map(function($input) { + return $input.value(); + }); that.triggerEvent('change', { - value: self.options.inputs.map(function($input) { - return $input.value(); - }) + value: self.options.joinValues + ? self.options.joinValues(values) + : values }); } diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index a48b3978..24c8342a 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -157,7 +157,8 @@ Ox.Select = function(options, self) { self.options.title ? self.options.title : data.checked[0].title ); that.triggerEvent('change', { - selected: data.checked + selected: data.checked, + value: self.options.value }); } else { that.triggerEvent('click', data);