0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Ox.Filter: options.query -> options.value, handle value update

Browse source
This commit is contained in:
rolux 2014-02-17 11:26:33 +05:30
parent 15444fe5a9
commit 3ce2852a99
1 changed files with 76 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
source/Ox.UI/js/Form/Filter.js
View file

@ -7,14 +7,14 @@ Ox.Filter <f> Filter Object
list <o> list object list <o> list object
sort <s> List sort sort <s> List sort
view <s> List view view <s> List view
query <o> query object sortKeys <a|[]> keys to sort by
value <o> query object
conditions <[o]> Conditions (array of {key, value, operator}) conditions <[o]> Conditions (array of {key, value, operator})
operator <s> Operator ('&' or '|') operator <s> Operator ('&' or '|')
limit <o> Limit limit <o> Limit
key <s> Limit key key <s> Limit key
sort <s> Limit sort sort <s> Limit sort
value <n> Limit value value <n> Limit value
sortKeys <a|[]> keys to sort by
viewKeys <a|[]> visible keys viewKeys <a|[]> visible keys
self <o> Shared private variable self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> Filter Object ([options[, self]]) -> <o:Ox.Element> Filter Object
@ -28,29 +28,21 @@ Ox.Filter = function(options, self) {
.defaults({ .defaults({
findKeys: [], findKeys: [],
list: null, list: null,
query: { sortKeys: [],
viewKeys: [],
value: {
conditions: [], conditions: [],
operator: '&' operator: '&'
}, }
sortKeys: [],
viewKeys: []
}) })
.options(options || {}) .options(options || {})
.update({ .update({
query: function() { value: function() {
// ... setValue();
renderConditions();
} }
}); });
// fixme: this should not happen, but some lists
// have their query set to {} or their query operator set to ''
if (Ox.isEmpty(self.options.query)) {
self.options.query = {conditions: [], operator: '&'};
} else if (self.options.query.operator == '') {
self.options.query.operator = '&';
}
Ox.Log('Form', 'Ox.Filter self.options', self.options);
self.conditionOperators = { self.conditionOperators = {
boolean: [ boolean: [
{id: '=', title: Ox._('is')}, {id: '=', title: Ox._('is')},
@ -133,15 +125,7 @@ Ox.Filter = function(options, self) {
{id: '|', title: Ox._('any')} {id: '|', title: Ox._('any')}
]; ];
if (!self.options.query.conditions.length) { setValue();
self.options.query.conditions = [{
key: self.options.findKeys[0].id,
value: '',
operator: self.conditionOperators[
getConditionType(self.options.findKeys[0].type)
][0].id
}];
}
self.$operator = Ox.FormElementGroup({ self.$operator = Ox.FormElementGroup({
elements: [ elements: [
@ -154,7 +138,7 @@ Ox.Filter = function(options, self) {
elements: [ elements: [
Ox.Select({ Ox.Select({
items: self.operators, items: self.operators,
value: self.options.query.operator, value: self.options.value.operator,
width: 48 width: 48
}) })
.bindEvent({ .bindEvent({
@ -175,7 +159,7 @@ Ox.Filter = function(options, self) {
self.$save = Ox.InputGroup({ self.$save = Ox.InputGroup({
inputs: [ inputs: [
self.$foo = Ox.Checkbox({ Ox.Checkbox({
width: 16 width: 16
}), }),
Ox.Input({ Ox.Input({
@ -295,6 +279,7 @@ Ox.Filter = function(options, self) {
self.$form = Ox.Form({ self.$form = Ox.Form({
items: self.$items items: self.$items
}).appendTo(that); }).appendTo(that);
renderConditions(); renderConditions();
//that.$element = self.$form.$element; //that.$element = self.$form.$element;
@ -307,16 +292,16 @@ Ox.Filter = function(options, self) {
operator: self.conditionOperators[key.type][0].id operator: self.conditionOperators[key.type][0].id
}; };
if (isGroup) { if (isGroup) {
Ox.Log('Form', 'isGroup', self.options.query.operator) Ox.Log('Form', 'isGroup', self.options.value.operator)
condition = { condition = {
conditions: [condition], conditions: [condition],
operator: self.options.query.operator == '&' ? '|' : '&' operator: self.options.value.operator == '&' ? '|' : '&'
}; };
} }
if (subpos == -1) { if (subpos == -1) {
self.options.query.conditions.splice(pos, 0, condition); self.options.value.conditions.splice(pos, 0, condition);
} else { } else {
self.options.query.conditions[pos].conditions.splice(subpos, 0, condition); self.options.value.conditions[pos].conditions.splice(subpos, 0, condition);
} }
renderConditions(); renderConditions();
if (!isUselessCondition(pos, subpos)) { if (!isUselessCondition(pos, subpos)) {
@ -328,8 +313,8 @@ Ox.Filter = function(options, self) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
Ox.Log('Form', 'changeConditionKey', pos, subpos, key); Ox.Log('Form', 'changeConditionKey', pos, subpos, key);
var condition = subpos == -1 var condition = subpos == -1
? self.options.query.conditions[pos] ? self.options.value.conditions[pos]
: self.options.query.conditions[pos].conditions[subpos], : self.options.value.conditions[pos].conditions[subpos],
oldFindKey = Ox.getObjectById(self.options.findKeys, condition.key), oldFindKey = Ox.getObjectById(self.options.findKeys, condition.key),
newFindKey = Ox.getObjectById(self.options.findKeys, key), newFindKey = Ox.getObjectById(self.options.findKeys, key),
oldConditionType = getConditionType(oldFindKey.type), oldConditionType = getConditionType(oldFindKey.type),
@ -358,10 +343,10 @@ Ox.Filter = function(options, self) {
function changeConditionOperator(pos, subpos, operator) { function changeConditionOperator(pos, subpos, operator) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
Ox.Log('FILTER', 'chCoOp', 'query', self.options.query) Ox.Log('FILTER', 'chCoOp', 'query', self.options.value)
var condition = subpos == -1 var condition = subpos == -1
? self.options.query.conditions[pos] ? self.options.value.conditions[pos]
: self.options.query.conditions[pos].conditions[subpos], : self.options.value.conditions[pos].conditions[subpos],
isBetween = operator.indexOf(',') > -1, isBetween = operator.indexOf(',') > -1,
wasBetween = Ox.isArray(condition.value), wasBetween = Ox.isArray(condition.value),
wasUselessCondition = isUselessCondition(pos, subpos); wasUselessCondition = isUselessCondition(pos, subpos);
@ -383,28 +368,28 @@ Ox.Filter = function(options, self) {
function changeConditionValue(pos, subpos, value) { function changeConditionValue(pos, subpos, value) {
Ox.Log('FILTER', 'cCV', pos, subpos, value); Ox.Log('FILTER', 'cCV', pos, subpos, value);
var condition = subpos == -1 var condition = subpos == -1
? self.options.query.conditions[pos] ? self.options.value.conditions[pos]
: self.options.query.conditions[pos].conditions[subpos]; : self.options.value.conditions[pos].conditions[subpos];
condition.value = value; condition.value = value;
triggerChangeEvent(); triggerChangeEvent();
} }
function changeGroupOperator(pos, value) { function changeGroupOperator(pos, value) {
self.options.query.conditions[pos].operator = value; self.options.value.conditions[pos].operator = value;
triggerChangeEvent(); triggerChangeEvent();
} }
function changeOperator(data) { function changeOperator(data) {
var hasGroups = false; var hasGroups = false;
self.options.query.operator = data.value; self.options.value.operator = data.value;
Ox.forEach(self.options.query.conditions, function(condition) { Ox.forEach(self.options.value.conditions, function(condition) {
if (condition.conditions) { if (condition.conditions) {
hasGroups = true; hasGroups = true;
return false; // break return false; // break
} }
}); });
hasGroups && renderConditions(); hasGroups && renderConditions();
self.options.query.conditions.length > 1 && triggerChangeEvent(); self.options.value.conditions.length > 1 && triggerChangeEvent();
} }
function getConditionType(type) { function getConditionType(type) {
@ -418,16 +403,16 @@ Ox.Filter = function(options, self) {
function isUselessCondition(pos, subpos) { function isUselessCondition(pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var conditions = subpos == -1 var conditions = subpos == -1
? self.options.query.conditions[pos].conditions ? self.options.value.conditions[pos].conditions
|| [self.options.query.conditions[pos]] || [self.options.value.conditions[pos]]
: [self.options.query.conditions[pos].conditions[subpos]], : [self.options.value.conditions[pos].conditions[subpos]],
isUseless = false; isUseless = false;
Ox.forEach(conditions, function(condition) { Ox.forEach(conditions, function(condition) {
isUseless = ['string', 'text'].indexOf(getConditionType( isUseless = ['string', 'text'].indexOf(getConditionType(
Ox.getObjectById(self.options.findKeys, condition.key).type Ox.getObjectById(self.options.findKeys, condition.key).type
)) > -1 )) > -1
&& ( && (
self.options.query.operator == '&' ? ['', '^', '$'] : ['!', '!^', '!$'] self.options.value.operator == '&' ? ['', '^', '$'] : ['!', '!^', '!$']
).indexOf(condition.operator) > -1 ).indexOf(condition.operator) > -1
&& condition.value === ''; && condition.value === '';
if (!isUseless) { if (!isUseless) {
@ -440,10 +425,10 @@ Ox.Filter = function(options, self) {
function removeCondition(pos, subpos) { function removeCondition(pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var wasUselessCondition = isUselessCondition(pos, subpos); var wasUselessCondition = isUselessCondition(pos, subpos);
if (subpos == -1 || self.options.query.conditions[pos].conditions.length == 1) { if (subpos == -1 || self.options.value.conditions[pos].conditions.length == 1) {
self.options.query.conditions.splice(pos, 1); self.options.value.conditions.splice(pos, 1);
} else { } else {
self.options.query.conditions[pos].conditions.splice(subpos, 1); self.options.value.conditions[pos].conditions.splice(subpos, 1);
} }
renderConditions(); renderConditions();
if (!wasUselessCondition) { if (!wasUselessCondition) {
@ -453,12 +438,12 @@ Ox.Filter = function(options, self) {
function renderButtons(pos, subpos) { function renderButtons(pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions; var isGroup = subpos == -1 && self.options.value.conditions[pos].conditions;
return [].concat([ return [].concat([
Ox.Button({ Ox.Button({
id: 'remove', id: 'remove',
title: self.options.query.conditions.length == 1 ? 'close' : 'remove', title: self.options.value.conditions.length == 1 ? 'close' : 'remove',
tooltip: self.options.query.conditions.length == 1 ? Ox._('Reset this condition') tooltip: self.options.value.conditions.length == 1 ? Ox._('Reset this condition')
: isGroup ? Ox._('Remove this group of conditions') : isGroup ? Ox._('Remove this group of conditions')
: Ox._('Remove this condition'), : Ox._('Remove this condition'),
type: 'image' type: 'image'
@ -467,9 +452,9 @@ Ox.Filter = function(options, self) {
.bindEvent({ .bindEvent({
click: function(data) { click: function(data) {
var key; var key;
if (self.options.query.conditions.length == 1) { if (self.options.value.conditions.length == 1) {
key = self.options.findKeys[0]; key = self.options.findKeys[0];
self.options.query.conditions = [{ self.options.value.conditions = [{
key: key.id, key: key.id,
value: '', value: '',
operator: self.conditionOperators[key.type][0].id operator: self.conditionOperators[key.type][0].id
@ -533,8 +518,8 @@ Ox.Filter = function(options, self) {
function renderCondition(condition, pos, subpos) { function renderCondition(condition, pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
var condition = subpos == -1 var condition = subpos == -1
? self.options.query.conditions[pos] ? self.options.value.conditions[pos]
: self.options.query.conditions[pos].conditions[subpos]; : self.options.value.conditions[pos].conditions[subpos];
Ox.Log('Form', 'renderCondition', condition, pos, subpos) Ox.Log('Form', 'renderCondition', condition, pos, subpos)
return Ox.FormElementGroup({ return Ox.FormElementGroup({
elements: [ elements: [
@ -618,12 +603,12 @@ Ox.Filter = function(options, self) {
} }
function renderConditions() { function renderConditions() {
Ox.Log('Form', 'renderConditions', self.options.query) Ox.Log('Form', 'renderConditions', self.options.value)
var $conditions = []; var $conditions = [];
while (self.$form.options('items').length > self.numberOfAdditionalFormItems) { while (self.$form.options('items').length > self.numberOfAdditionalFormItems) {
self.$form.removeItem(1); self.$form.removeItem(1);
} }
self.options.query.conditions.forEach(function(condition, pos) { self.options.value.conditions.forEach(function(condition, pos) {
if (!condition.conditions) { if (!condition.conditions) {
$conditions.push(renderCondition(condition, pos)); $conditions.push(renderCondition(condition, pos));
} else { } else {
@ -643,7 +628,7 @@ Ox.Filter = function(options, self) {
var $condition = Ox.FormElementGroup({ var $condition = Ox.FormElementGroup({
elements: [ elements: [
Ox.Label({ Ox.Label({
title: self.options.query.operator == '&' title: self.options.value.operator == '&'
? (pos == 0 ? 'Both' : 'and') ? (pos == 0 ? 'Both' : 'and')
: (pos == 0 ? 'Either': 'or'), : (pos == 0 ? 'Either': 'or'),
overlap: 'right', overlap: 'right',
@ -653,7 +638,7 @@ Ox.Filter = function(options, self) {
elements: [ elements: [
Ox.Select({ Ox.Select({
items: self.operators, items: self.operators,
value: self.options.query.operator == '&' ? '|' : '&', value: self.options.value.operator == '&' ? '|' : '&',
width: 48 width: 48
}) })
.bindEvent({ .bindEvent({
@ -823,16 +808,37 @@ Ox.Filter = function(options, self) {
return $input; return $input;
} }
function setValue() {
// fixme: this should not happen, but some lists
// have their query set to {} or their query operator set to ''
if (Ox.isEmpty(self.options.value)) {
self.options.value = {conditions: [], operator: '&'};
} else if (self.options.value.operator == '') {
self.options.value.operator = '&';
}
Ox.Log('Form', 'Ox.Filter self.options', self.options);
// end fixme
if (!self.options.value.conditions.length) {
self.options.value.conditions = [{
key: self.options.findKeys[0].id,
value: '',
operator: self.conditionOperators[
getConditionType(self.options.findKeys[0].type)
][0].id
}];
}
}
function triggerChangeEvent() { function triggerChangeEvent() {
var query = Ox.clone(self.options.query, true); var value = Ox.clone(self.options.value, true);
/* /*
// FIXME: doesn't work for nested conditions // FIXME: doesn't work for nested conditions
query.conditions.forEach(function(condition) { value.conditions.forEach(function(condition) {
// Ox.print('CO', condition.operator) // Ox.print('CO', condition.operator)
condition.operator = condition.operator.replace(':', ''); condition.operator = condition.operator.replace(':', '');
}); });
*/ */
that.triggerEvent('change', {query: query}); that.triggerEvent('change', {value: value});
} }
/*@ /*@
@ -845,13 +851,17 @@ Ox.Filter = function(options, self) {
return { return {
save: value[0], save: value[0],
name: value[1], name: value[1],
query: self.options.query query: self.options.value
}; };
} }
}; };
that.value = function() { that.value = function() {
// ... if (arguments.length == 0) {
return self.options.value;
} else {
return that.options({value: arguments[0]});
}
}; };
return that; return that;