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

filter rewrite, allow for nested conditions

Browse source
This commit is contained in:
rlx 2011-06-02 01:04:52 +00:00
parent c2794a6d35
commit d660e0e30a
1 changed files with 192 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -110,11 +110,6 @@ Ox.Filter = function(options, self) {
float: 'left', float: 'left',
}); });
self.$buttons = [];
self.$conditions = $.map(self.options.query.conditions, function(condition, i) {
return constructCondition(condition, i);
});
self.$limit = Ox.InputGroup({ self.$limit = Ox.InputGroup({
inputs: [ inputs: [
Ox.Checkbox({ Ox.Checkbox({
@ -201,42 +196,38 @@ Ox.Filter = function(options, self) {
] ]
}); });
self.$items = Ox.merge([self.$operator], self.$conditions, [self.$limit, self.$view, self.$save]); self.$items = [self.$operator, self.$limit, self.$view, self.$save];
self.$form = Ox.Form({ self.$form = Ox.Form({
items: self.$items items: self.$items
}); });
renderConditions();
that.$element = self.$form.$element; that.$element = self.$form.$element;
function addCondition(pos, isInGroup) { function addCondition(pos, subpos, isGroup) {
var key = self.options.findKeys[0]; subpos = Ox.isUndefined(subpos) ? -1 : subpos;
self.options.query.conditions.splice(pos, 0, { var key = self.options.findKeys[0],
key: key.id, condition = {
value: '', key: key.id,
operator: self.conditionOperators[key.type][0].id value: '',
}); operator: self.conditionOperators[key.type][0].id
self.$conditions.splice(pos, 0, constructCondition({}, pos, isInGroup)); };
updateConditions(); if (isGroup) {
self.$form.addItem(pos + 1, self.$conditions[pos]); condition = {
conditions: [condition],
operator: self.options.query.operator == '&' ? '|' : '&'
};
}
if (subpos == -1) {
self.options.query.conditions.splice(pos, 0, condition);
} else {
self.options.query.conditions[pos].conditions.splice(subpos, 0, condition);
}
renderConditions();
} }
function addGroup(pos) { function changeConditionKey(pos, subpos, key) {
self.$form.addItem(pos + 1, constructGroup(pos)); Ox.print('changeConditionKey', pos, subpos, key);
self.options.query.conditions.splice(pos + 1, 0, {
conditions: [
{
key: '?',
value: '?',
operator: '?'
}
],
operator: '?'
});
addCondition(pos + 1, true);
}
function changeConditionKey(pos, key) {
Ox.print('changeConditionKey', pos, key);
var oldOperator = self.options.query.conditions[pos].operator, var oldOperator = self.options.query.conditions[pos].operator,
oldType = Ox.getObjectById( oldType = Ox.getObjectById(
self.options.findKeys, self.options.query.conditions[pos].key self.options.findKeys, self.options.query.conditions[pos].key
@ -269,83 +260,15 @@ Ox.Filter = function(options, self) {
that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or'); that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or');
} }
function constructButtons(isGroup, isInGroup) { function constructConditionOperator(pos, subpos, selected) {
return Ox.merge([ subpos = Ox.isUndefined(subpos) ? -1 : subpos;
new Ox.Button({ Ox.print('constructConditionOperator', pos, subpos)
disabled: self.options.query.conditions.length == 1, var condition = subpos == -1
id: 'remove', ? self.options.query.conditions[pos]
title: 'remove', : self.options.query.conditions[pos].conditions[subpos];
type: 'image'
})
.css({margin: '0 4px 0 ' + (isGroup ? '264px' : '8px')})
.bind({
click: function() {
removeCondition($(this).parent().data('position'));
}
}),
Ox.Button({
id: 'add',
title: 'add',
type: 'image'
})
.css({margin: '0 ' + (isInGroup ? '0' : '4px') + ' 0 4px'})
.bind({
click: function() {
Ox.print('add', $(this).parent().data('position'))
addCondition($(this).parent().data('position') + 1)
}
})
], isInGroup ? [] : [
Ox.Button({
id: 'addgroup',
title: 'bracket',
type: 'image'
})
.css({margin: '0 0 0 4px'})
.bind({
click: function() {
addGroup($(this).parent().data('position') + 1)
}
})
]);
}
function constructCondition(condition, pos, isInGroup) {
var $condition = {};
return $condition = Ox.FormElementGroup({
elements: Ox.merge([
Ox.Select({
items: $.map(self.options.findKeys, function(key) {
return {
id: key.id,
title: key.title
};
}),
//items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
overlap: 'right',
width: 128
})
.bindEvent({
change: function(event, data) {
Ox.print('event', event)
changeConditionKey($condition.data('position'), data.selected[0].id);
}
}),
constructConditionOperator(pos),
constructInput()
], constructButtons(false, isInGroup))
})
.css({marginLeft: isInGroup ? '24px' : 0})
.data({position: pos});
}
function constructConditionOperator(pos, selected) {
return Ox.Select({ return Ox.Select({
items: $.map(self.conditionOperators[getConditionType( items: $.map(self.conditionOperators[getConditionType(
Ox.getObjectById( Ox.getObjectById(self.options.findKeys, condition.key).type
self.options.findKeys,
self.options.query.conditions[pos].key
).type
)], function(operator) { )], function(operator) {
return { return {
checked: operator.id == selected, // fixme: should be "selected", not "checked" checked: operator.id == selected, // fixme: should be "selected", not "checked"
@ -363,49 +286,8 @@ Ox.Filter = function(options, self) {
}); });
} }
function constructGroup() {
// fixme: duplicated
return Ox.FormElementGroup({
elements: [
Ox.Label({
title: self.options.query.operator == '&' ? 'and' : 'or',
overlap: 'right',
width: 48
}).addClass('OxGroupLabel'),
Ox.FormElementGroup({
elements: Ox.merge([
Ox.Select({
items: $.map(self.operators, function(operator) {
return {
checked: operator.id != self.options.query.operator,
id: operator.id,
// fixme: should be operator.title,
// but is passed by reference to some select,
// which makes it an array
title: operator.title[0]
};
}),
width: 48
})
.bindEvent({
change: changeOperator
}),
Ox.Label({
overlap: 'left',
title: 'of the following conditions',
width: 160
})
], constructButtons(true)),
float: 'right',
width: 208
})
],
float: 'left',
});
}
function constructInput(isBetween) { function constructInput(isBetween) {
var $input var $input;
if (!isBetween) { if (!isBetween) {
$input = Ox.Input({ $input = Ox.Input({
width: 288 width: 288
@ -417,17 +299,6 @@ Ox.Filter = function(options, self) {
id: 'start', id: 'start',
width: 128 width: 128
}), }),
/*
Ox.TimeInput({
id: 'start',
//seconds: true,
width: {
hours: 38,
minutes: 37,
seconds: 37
}
}),
*/
Ox.DateInput({ Ox.DateInput({
id: 'end', id: 'end',
width: { width: {
@ -453,16 +324,170 @@ Ox.Filter = function(options, self) {
return type; return type;
} }
function removeCondition(pos) { function removeCondition(pos, subpos) {
self.options.query.conditions.splice(pos, 1); Ox.print('removeCondition', pos, subpos)
self.$conditions.splice(pos, 1); subpos = Ox.isUndefined(subpos) ? -1 : subpos;
updateConditions(); if (subpos == -1) {
self.$form.removeItem(pos + 1); self.options.query.conditions.splice(pos, 1);
} else {
self.options.query.conditions[pos].conditions.splice(subpos, 1);
}
renderConditions();
}
function renderButtons(pos, subpos) {
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
return Ox.merge([
new Ox.Button({
disabled: self.options.query.conditions.length == 1,
id: 'remove',
title: 'remove',
type: 'image'
})
.css({margin: '0 4px 0 ' + (isGroup ? '296px' : '8px')})
.bind({
click: function() {
removeCondition(
$(this).parent().data('position'),
$(this).parent().data('subposition')
);
}
}),
Ox.Button({
id: 'add',
title: 'add',
type: 'image'
})
.css({margin: '0 ' + (subpos == -1 ? '4px' : '0') + ' 0 4px'})
.bind({
click: function() {
if (subpos == -1) {
addCondition($(this).parent().data('position') + 1);
} else {
addCondition(
$(this).parent().data('position'),
$(this).parent().data('subposition') + 1
);
}
}
})
], subpos == -1 ? [
Ox.Button({
id: 'addgroup',
title: 'bracket',
type: 'image'
})
.css({margin: '0 0 0 4px'})
.bind({
click: function() {
addCondition($(this).parent().data('position') + 1, -1, true)
}
})
] : []);
}
function renderCondition(condition, pos, subpos) {
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
Ox.print('renderCondition', condition, pos, subpos)
var $condition = Ox.FormElementGroup({
elements: Ox.merge([
Ox.Select({
items: $.map(self.options.findKeys, function(key) {
return {
id: key.id,
title: key.title
};
}),
//items: $.extend({}, self.options.findKeys), // fixme: Ox.Menu messes with keys
overlap: 'right',
width: 128
})
.bindEvent({
change: function(event, data) {
Ox.print('event', event)
changeConditionKey(
$condition.data('position'),
$condition.data('subposition'),
data.selected[0].id
);
}
}),
constructConditionOperator(pos, subpos),
constructInput()
], renderButtons(pos, subpos))
})
.css({marginLeft: subpos == -1 ? 0 : '24px'})
.data({position: pos, subpostion: subpos});
return $condition;
}
function renderConditions() {
Ox.print('renderConditions', self.options.query)
var $conditions = [];
while (self.$form.options('items').length > 4) {
self.$form.removeItem(1);
}
self.options.query.conditions.forEach(function(condition, pos) {
if (!condition.conditions) {
$conditions.push(renderCondition(condition, pos));
} else {
$conditions.push(renderGroup(condition, pos));
condition.conditions.forEach(function(subcondition, subpos) {
$conditions.push(renderCondition(subcondition, pos, subpos));
});
}
});
$conditions.forEach(function($condition, pos) {
self.$form.addItem(1 + pos, $condition);
});
}
function renderGroup(condition, pos) {
var subpos = -1;
var $condition = Ox.FormElementGroup({
elements: Ox.merge([
Ox.Label({
title: self.options.query.operator == '&' ? 'and' : 'or',
overlap: 'right',
width: 48
}).addClass('OxGroupLabel'),
Ox.FormElementGroup({
elements: [
Ox.Select({
items: $.map(self.operators, function(operator) {
return {
checked: operator.id != self.options.query.operator,
id: operator.id,
// fixme: should be operator.title,
// but is passed by reference to some select,
// which makes it an array
title: operator.title[0]
};
}),
width: 48
})
.bindEvent({
change: changeOperator
}),
Ox.Label({
overlap: 'left',
title: 'of the following conditions',
width: 160
})
],
float: 'right',
width: 208
}),
], renderButtons(pos, subpos, true)),
float: 'left',
})
.data({position: pos, subposition: subpos});
return $condition;
} }
function updateConditions() { function updateConditions() {
self.$conditions.forEach(function(condition, pos) { self.$conditions.forEach(function(condition, pos) {
condition.data({position: pos}); condition.data({position: pos, subposition: -1});
}); });
self.$conditions[0].options('elements')[3].options({ self.$conditions[0].options('elements')[3].options({
disabled: self.options.query.conditions.length == 1 disabled: self.options.query.conditions.length == 1