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

updating filter

Browse source
This commit is contained in:
rlx 2011-06-01 16:09:34 +00:00
parent 7c23fb3741
commit 25b5bd1ace
1 changed files with 86 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,7 +16,7 @@ Ox.Filter <f:Ox.Element> Filter Element
Ox.Filter = function(options, self) { Ox.Filter = function(options, self) {
var self = self || {}, var self = self || {},
that = new Ox.Element({}, self) that = Ox.Element({}, self)
.defaults({ .defaults({
findKeys: [], findKeys: [],
query: { query: {
@ -81,23 +81,23 @@ Ox.Filter = function(options, self) {
}]; }];
} }
self.$operator = new Ox.FormElementGroup({ self.$operator = Ox.FormElementGroup({
elements: [ elements: [
new Ox.Label({ Ox.Label({
title: 'Match', title: 'Match',
overlap: 'right', overlap: 'right',
width: 48 width: 48
}), }),
new Ox.FormElementGroup({ Ox.FormElementGroup({
elements: [ elements: [
new Ox.Select({ Ox.Select({
items: self.operators, items: self.operators,
width: 48 width: 48
}) })
.bindEvent({ .bindEvent({
change: changeOperator change: changeOperator
}), }),
new Ox.Label({ Ox.Label({
overlap: 'left', overlap: 'left',
title: 'of the following conditions', title: 'of the following conditions',
width: 160 width: 160
@ -115,17 +115,17 @@ Ox.Filter = function(options, self) {
return constructCondition(condition, i); return constructCondition(condition, i);
}); });
self.$limit = new Ox.InputGroup({ self.$limit = Ox.InputGroup({
inputs: [ inputs: [
new Ox.Checkbox({ Ox.Checkbox({
width: 16 width: 16
}), }),
new Ox.FormElementGroup({ Ox.FormElementGroup({
elements: [ elements: [
new Ox.Input({ Ox.Input({
width: 56 width: 56
}), }),
new Ox.Select({ Ox.Select({
items: [ items: [
{id: 'items', title: 'items'}, {id: 'items', title: 'items'},
{}, {},
@ -141,20 +141,20 @@ Ox.Filter = function(options, self) {
float: 'right', float: 'right',
width: 120 width: 120
}), }),
new Ox.Select({ Ox.Select({
items: self.options.sortKeys, items: self.options.sortKeys,
width: 128 width: 128
}), }),
new Ox.FormElementGroup({ Ox.FormElementGroup({
elements: [ elements: [
new Ox.Select({ Ox.Select({
items: [ items: [
{id: 'ascending', title: 'ascending'}, {id: 'ascending', title: 'ascending'},
{id: 'descending', title: 'descending'} {id: 'descending', title: 'descending'}
], ],
width: 96 width: 96
}), }),
new Ox.Label({ Ox.Label({
overlap: 'left', overlap: 'left',
title: 'order', title: 'order',
width: 72 width: 72
@ -171,12 +171,12 @@ Ox.Filter = function(options, self) {
] ]
}); });
self.$view = new Ox.InputGroup({ self.$view = Ox.InputGroup({
inputs: [ inputs: [
new Ox.Checkbox({ Ox.Checkbox({
width: 16 width: 16
}), }),
new Ox.Select({ Ox.Select({
items: self.options.viewKeys, items: self.options.viewKeys,
width: 128 width: 128
}) })
@ -186,12 +186,12 @@ Ox.Filter = function(options, self) {
] ]
}); });
self.$save = new Ox.InputGroup({ self.$save = Ox.InputGroup({
inputs: [ inputs: [
new Ox.Checkbox({ Ox.Checkbox({
width: 16 width: 16
}), }),
new Ox.Input({ Ox.Input({
id: 'list', id: 'list',
width: 128 width: 128
}) })
@ -201,27 +201,29 @@ Ox.Filter = function(options, self) {
] ]
}); });
self.$items = $.merge($.merge([self.$operator], self.$conditions), [self.$limit, self.$view, self.$save]); self.$items = Ox.merge([self.$operator], self.$conditions, [self.$limit, self.$view, self.$save]);
self.$form = new Ox.Form({ self.$form = Ox.Form({
items: self.$items items: self.$items
}); });
that.$element = self.$form.$element; that.$element = self.$form.$element;
function addCondition(pos) { function addCondition(pos, isInGroup) {
var key = self.options.findKeys[0]; var key = self.options.findKeys[0];
self.options.query.conditions.splice(pos, 0, { self.options.query.conditions.splice(pos, 0, {
key: key.id, key: key.id,
value: '', value: '',
operator: self.conditionOperators[key.type][0].id operator: self.conditionOperators[key.type][0].id
}); });
self.$conditions.splice(pos, 0, constructCondition({}, pos)); self.$conditions.splice(pos, 0, constructCondition({}, pos, isInGroup));
updateConditions(); updateConditions();
self.$form.addItem(pos + 1, self.$conditions[pos]); self.$form.addItem(pos + 1, self.$conditions[pos]);
} }
function addGroup(pos) { function addGroup(pos) {
self.$form.addItem(pos + 1, constructGroup(pos)) self.$form.addItem(pos + 1, constructGroup(pos));
self.options.query.conditions.splice(pos + 1, 0, 'foobar');
addCondition(pos + 1, true);
} }
function changeConditionKey(pos, key) { function changeConditionKey(pos, key) {
@ -252,11 +254,52 @@ 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 constructCondition(condition, pos) { function constructButtons(isGroup, isInGroup) {
var $condition; return Ox.merge([
return $condition = new Ox.FormElementGroup({ new Ox.Button({
elements: [ disabled: self.options.query.conditions.length == 1,
new Ox.Select({ id: 'remove',
title: 'remove',
type: 'image'
})
.css({margin: '0 4px 0 ' + (isGroup ? '262px' : '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) { items: $.map(self.options.findKeys, function(key) {
return { return {
id: key.id, id: key.id,
@ -274,51 +317,17 @@ Ox.Filter = function(options, self) {
} }
}), }),
constructConditionOperator(pos), constructConditionOperator(pos),
new Ox.Input({ Ox.Input({
width: 256 width: 256
}),
new Ox.Button({
disabled: self.options.query.conditions.length == 1,
id: 'remove',
title: 'remove',
type: 'image'
}) })
.css({margin: '0 4px 0 8px'}) ], constructButtons(false, isInGroup))
.bindEvent({
click: function() {
removeCondition($condition.data('position'));
}
}),
new Ox.Button({
id: 'add',
title: 'add',
type: 'image'
})
.css({margin: '0 4px 0 4px'})
.bindEvent({
click: function() {
Ox.print('add', $(this).parent().parent().data('position'))
addCondition($condition.data('position') + 1)
}
}),
new Ox.Button({
id: 'addgroup',
title: 'bracket',
type: 'image'
})
.css({margin: '0 0 0 4px'})
.bindEvent({
click: function() {
addGroup($condition.data('position') + 1)
}
})
]
}) })
.css({marginLeft: isInGroup ? '24px' : 0})
.data({position: pos}); .data({position: pos});
} }
function constructConditionOperator(pos, selected) { function constructConditionOperator(pos, selected) {
return new Ox.Select({ return Ox.Select({
items: $.map(self.conditionOperators[getConditionType( items: $.map(self.conditionOperators[getConditionType(
Ox.getObjectById( Ox.getObjectById(
self.options.findKeys, self.options.findKeys,
@ -343,16 +352,16 @@ Ox.Filter = function(options, self) {
function constructGroup() { function constructGroup() {
// fixme: duplicated // fixme: duplicated
return new Ox.FormElementGroup({ return Ox.FormElementGroup({
elements: [ elements: [
new Ox.Label({ Ox.Label({
title: self.options.query.operator == '&' ? 'and' : 'or', title: self.options.query.operator == '&' ? 'and' : 'or',
overlap: 'right', overlap: 'right',
width: 48 width: 48
}).addClass('OxGroupLabel'), }).addClass('OxGroupLabel'),
new Ox.FormElementGroup({ Ox.FormElementGroup({
elements: [ elements: Ox.merge([
new Ox.Select({ Ox.Select({
items: $.map(self.operators, function(operator) { items: $.map(self.operators, function(operator) {
return { return {
checked: operator.id != self.options.query.operator, checked: operator.id != self.options.query.operator,
@ -368,12 +377,12 @@ Ox.Filter = function(options, self) {
.bindEvent({ .bindEvent({
change: changeOperator change: changeOperator
}), }),
new Ox.Label({ Ox.Label({
overlap: 'left', overlap: 'left',
title: 'of the following conditions', title: 'of the following conditions',
width: 160 width: 160
}) })
], ], constructButtons(true)),
float: 'right', float: 'right',
width: 208 width: 208
}) })