updating filter
This commit is contained in:
rlx
parent
7c23fb3741
commit
25b5bd1ace
1 changed files with 86 additions and 77 deletions
|
|
@ -16,7 +16,7 @@ Ox.Filter <f:Ox.Element> Filter Element
|
|||
Ox.Filter = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element({}, self)
|
||||
that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
findKeys: [],
|
||||
query: {
|
||||
|
|
@ -81,23 +81,23 @@ Ox.Filter = function(options, self) {
|
|||
}];
|
||||
}
|
||||
|
||||
self.$operator = new Ox.FormElementGroup({
|
||||
self.$operator = Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Label({
|
||||
Ox.Label({
|
||||
title: 'Match',
|
||||
overlap: 'right',
|
||||
width: 48
|
||||
}),
|
||||
new Ox.FormElementGroup({
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Select({
|
||||
Ox.Select({
|
||||
items: self.operators,
|
||||
width: 48
|
||||
})
|
||||
.bindEvent({
|
||||
change: changeOperator
|
||||
}),
|
||||
new Ox.Label({
|
||||
Ox.Label({
|
||||
overlap: 'left',
|
||||
title: 'of the following conditions',
|
||||
width: 160
|
||||
|
|
@ -115,17 +115,17 @@ Ox.Filter = function(options, self) {
|
|||
return constructCondition(condition, i);
|
||||
});
|
||||
|
||||
self.$limit = new Ox.InputGroup({
|
||||
self.$limit = Ox.InputGroup({
|
||||
inputs: [
|
||||
new Ox.Checkbox({
|
||||
Ox.Checkbox({
|
||||
width: 16
|
||||
}),
|
||||
new Ox.FormElementGroup({
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Input({
|
||||
Ox.Input({
|
||||
width: 56
|
||||
}),
|
||||
new Ox.Select({
|
||||
Ox.Select({
|
||||
items: [
|
||||
{id: 'items', title: 'items'},
|
||||
{},
|
||||
|
|
@ -141,20 +141,20 @@ Ox.Filter = function(options, self) {
|
|||
float: 'right',
|
||||
width: 120
|
||||
}),
|
||||
new Ox.Select({
|
||||
Ox.Select({
|
||||
items: self.options.sortKeys,
|
||||
width: 128
|
||||
}),
|
||||
new Ox.FormElementGroup({
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Select({
|
||||
Ox.Select({
|
||||
items: [
|
||||
{id: 'ascending', title: 'ascending'},
|
||||
{id: 'descending', title: 'descending'}
|
||||
],
|
||||
width: 96
|
||||
}),
|
||||
new Ox.Label({
|
||||
Ox.Label({
|
||||
overlap: 'left',
|
||||
title: 'order',
|
||||
width: 72
|
||||
|
|
@ -171,12 +171,12 @@ Ox.Filter = function(options, self) {
|
|||
]
|
||||
});
|
||||
|
||||
self.$view = new Ox.InputGroup({
|
||||
self.$view = Ox.InputGroup({
|
||||
inputs: [
|
||||
new Ox.Checkbox({
|
||||
Ox.Checkbox({
|
||||
width: 16
|
||||
}),
|
||||
new Ox.Select({
|
||||
Ox.Select({
|
||||
items: self.options.viewKeys,
|
||||
width: 128
|
||||
})
|
||||
|
|
@ -186,12 +186,12 @@ Ox.Filter = function(options, self) {
|
|||
]
|
||||
});
|
||||
|
||||
self.$save = new Ox.InputGroup({
|
||||
self.$save = Ox.InputGroup({
|
||||
inputs: [
|
||||
new Ox.Checkbox({
|
||||
Ox.Checkbox({
|
||||
width: 16
|
||||
}),
|
||||
new Ox.Input({
|
||||
Ox.Input({
|
||||
id: 'list',
|
||||
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
|
||||
});
|
||||
that.$element = self.$form.$element;
|
||||
|
||||
function addCondition(pos) {
|
||||
function addCondition(pos, isInGroup) {
|
||||
var key = self.options.findKeys[0];
|
||||
self.options.query.conditions.splice(pos, 0, {
|
||||
key: key.id,
|
||||
value: '',
|
||||
operator: self.conditionOperators[key.type][0].id
|
||||
});
|
||||
self.$conditions.splice(pos, 0, constructCondition({}, pos));
|
||||
self.$conditions.splice(pos, 0, constructCondition({}, pos, isInGroup));
|
||||
updateConditions();
|
||||
self.$form.addItem(pos + 1, self.$conditions[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) {
|
||||
|
|
@ -252,11 +254,52 @@ Ox.Filter = function(options, self) {
|
|||
that.$element.find('.OxGroupLabel').html(self.options.query.operator == '&' ? 'and' : 'or');
|
||||
}
|
||||
|
||||
function constructCondition(condition, pos) {
|
||||
var $condition;
|
||||
return $condition = new Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Select({
|
||||
function constructButtons(isGroup, isInGroup) {
|
||||
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 ? '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) {
|
||||
return {
|
||||
id: key.id,
|
||||
|
|
@ -274,51 +317,17 @@ Ox.Filter = function(options, self) {
|
|||
}
|
||||
}),
|
||||
constructConditionOperator(pos),
|
||||
new Ox.Input({
|
||||
Ox.Input({
|
||||
width: 256
|
||||
}),
|
||||
new Ox.Button({
|
||||
disabled: self.options.query.conditions.length == 1,
|
||||
id: 'remove',
|
||||
title: 'remove',
|
||||
type: 'image'
|
||||
})
|
||||
.css({margin: '0 4px 0 8px'})
|
||||
.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)
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
], constructButtons(false, isInGroup))
|
||||
})
|
||||
.css({marginLeft: isInGroup ? '24px' : 0})
|
||||
.data({position: pos});
|
||||
}
|
||||
|
||||
function constructConditionOperator(pos, selected) {
|
||||
return new Ox.Select({
|
||||
return Ox.Select({
|
||||
items: $.map(self.conditionOperators[getConditionType(
|
||||
Ox.getObjectById(
|
||||
self.options.findKeys,
|
||||
|
|
@ -343,16 +352,16 @@ Ox.Filter = function(options, self) {
|
|||
|
||||
function constructGroup() {
|
||||
// fixme: duplicated
|
||||
return new Ox.FormElementGroup({
|
||||
return Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Label({
|
||||
Ox.Label({
|
||||
title: self.options.query.operator == '&' ? 'and' : 'or',
|
||||
overlap: 'right',
|
||||
width: 48
|
||||
}).addClass('OxGroupLabel'),
|
||||
new Ox.FormElementGroup({
|
||||
elements: [
|
||||
new Ox.Select({
|
||||
Ox.FormElementGroup({
|
||||
elements: Ox.merge([
|
||||
Ox.Select({
|
||||
items: $.map(self.operators, function(operator) {
|
||||
return {
|
||||
checked: operator.id != self.options.query.operator,
|
||||
|
|
@ -368,12 +377,12 @@ Ox.Filter = function(options, self) {
|
|||
.bindEvent({
|
||||
change: changeOperator
|
||||
}),
|
||||
new Ox.Label({
|
||||
Ox.Label({
|
||||
overlap: 'left',
|
||||
title: 'of the following conditions',
|
||||
width: 160
|
||||
})
|
||||
],
|
||||
], constructButtons(true)),
|
||||
float: 'right',
|
||||
width: 208
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue