Skip to content

Commit

Permalink
fix: select filters spacing, theme and operation select (#2079)
Browse files Browse the repository at this point in the history 
* fix: select filters spacing and theme

* fix filters
  • Loading branch information
@dpgaspar
dpgaspar authored Jul 10, 2023
1 parent fbb2af7 commit 1aa6b76
Showing 1 changed file with 81 additions and 80 deletions.
161 changes: 81 additions & 80 deletions flask_appbuilder/static/appbuilder/js/ab_filters.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
var AdminFilters = function(element, labels, form, filters, active_filters) {
var AdminFilters = function (element, labels, form, filters, active_filters) {
// Admin filters will deal with the adding and removing of search filters
// :param labels:
// {'col','label'}
// :param active_filters:
// [['col','filter name','value'],[...],...]
var $root = $(element);
var $container = $('.filters', $root);
var lastCount = 0;

let $root = $(element);
let $container = $('.filters', $root);
let lastCount = 0;

function removeFilter() {
$(this).closest('tr').remove();
Expand All @@ -16,9 +16,8 @@ var AdminFilters = function(element, labels, form, filters, active_filters) {
return false;
}

function addActiveFilters()
{
$(active_filters).each(function() {
function addActiveFilters() {
$(active_filters).each(function () {
if (Array.isArray(this[2])) {
// Multiple values applied for the same filter.
for (var i = 0; i < this[2].length; i++) {
Expand All @@ -30,123 +29,125 @@ var AdminFilters = function(element, labels, form, filters, active_filters) {
});
}

function addActiveFilter(name, filter_name, value)
{
var $el = $('<tr />').appendTo($container);
function addActiveFilter(name, filter_name, value) {
let $el = $('<tr />').appendTo($container);

addRemoveFilter($el, name, labels[name]);
let i_option = addFilterOptionsValue($el, name, filter_name, false);

addRemoveFilter($el, name, labels[name]);
var i_option = addFilterOptionsValue($el, name, filter_name);

var $field = $(form[name]);
let $field = $(form[name]);
// if form item complex like <div><input bla></div>, datetime
if ( $("input", $($field)).html() != undefined ) {
if ($("input", $($field)).html() != undefined) {
$field_inner = $("input", $field)
$field_inner.attr('name', '_flt_' + i_option + '_' + name);
$field_inner.val(value);
$field_inner.attr('class', ' filter_val ' + $field_inner.attr('class'));
}
else {
if (($field.attr( 'type')) == 'checkbox') {
$field.attr( 'checked', true );
} else {
if (($field.attr('type')) === 'checkbox') {
$field.attr('checked', true);
}
$field.attr('name', '_flt_' + i_option + '_' + name);
$field.val(value);
$field.attr('class', ' filter_val ' + $field.attr('class'));
}
$el.append(
$('<td/>').append($field)
);
);
}

function addRemoveFilter($el, name, label)
{
$el.append(
$('<td class="col-lg-1 col-md-1" />').append(
function addRemoveFilter($el, name, label) {
$el.append(
$('<td />').append(
$('<a href="#" class="btn remove-filter" />')
.append($('<span class="close-icon">&times;</span>'))
.append('&nbsp;')
.append(label)
.on('click', removeFilter)
)
);
}

function addFilterOptionsValue($el, name, value)
{
var $select = $('<select class="filter-op my_select2" />');
cx = 0;
var i_option = -1;
$(filters[name]).each(function() {
)
);
}

function addFilterOptionsValue($el, name, value, activateSelect2 = true) {
let $select = $('<select class="filter-op my_select2" />');
let cx = 0;
let i_option = -1;
$(filters[name]).each(function () {
if (value == this) {
$select.append($('<option selected="selected"/>').attr('value', cx).text(this));
i_option = cx;
}
else {
} else {
$select.append($('<option/>').attr('value', cx).text(this));
}
cx += 1;
cx += 1;
});

$el.append(
$('<td class="col-lg-1 col-md-1 col-sm-1" />').append($select)
$('<td />').append($select)
);
// avoids error
if (i_option == -1) { $select.select2(); }
$select.on('change', function() {
changeOperation(this, $el, name)
});

// if (i_option === -1) { $select.select2(); }
$select.on('select2:select', function (e) {
changeOperation(e, $el, name);
});
if (activateSelect2) {
$select.select2({
placeholder: "Select a State",
allowClear: true,
theme: "bootstrap"
});
}
return i_option;
}
}


function addFilter(name, filter) {
var $el = $('<tr />').appendTo($container);
addRemoveFilter($el, name, labels[name]);
let $el = $('<tr />').appendTo($container);

addRemoveFilter($el, name, labels[name]);

addFilterOptionsValue($el, name);
var $field = $(form[name]);

// if form item complex like <div><input bla></div>, datetime
if ( $("input", $($field)).html() != undefined ) {
$field_inner = $("input", $($field))
$field_inner.attr('name', '_flt_0_' + name);
$field_inner.attr('class', ' filter_val ' + $field_inner.attr('class'));

}
else {
$field.attr('name', '_flt_0_' + name);
$field.attr('class', ' filter_val ' + $field.attr('class'));
}
$el.append(
$('<td/>').append($field)
let $field = $(form[name]);

// if form item complex like <div><input bla></div>, datetime
if ($("input", $($field)).html() != undefined) {
$field_inner = $("input", $($field))
$field_inner.attr('name', '_flt_0_' + name);
$field_inner.attr('class', ' filter_val ' + $field_inner.attr('class'));
} else {
$field.attr('name', '_flt_0_' + name);
$field.attr('class', ' filter_val ' + $field.attr('class'));
}
$el.append(
$('<td/>').append($field)
);
if ($field.hasClass( "my_select2" )) {
$field.select2({placeholder: "Select a State", allowClear: true});
if ($field.hasClass("my_select2")) {
$field.select2({
placeholder: "Select a State",
allowClear: true,
theme: "bootstrap"
});
}
if ($field.hasClass( "appbuilder_datetime" )) {
$field.datetimepicker();
if ($field.hasClass("appbuilder_datetime")) {
$field.datetimepicker();
}
if ($field.hasClass( "appbuilder_date" )) {
$field.datetimepicker({pickTime: false });
if ($field.hasClass("appbuilder_date")) {
$field.datetimepicker({pickTime: false});
}
lastCount += 1;
}

// ----------------------------------------------------------
// Trigger for option change will change input element name
// ----------------------------------------------------------
// ----------------------------------------------------------
// Trigger for option change will change input element name
// ----------------------------------------------------------
function changeOperation(e, $el, name) {
$in = $el.find('.filter_val');
$in.attr('name','_flt_' + $(e.target).val() + '_' + name);
let $in = $el.find('.filter_val');
const data = e.params.data;
$in.attr('name', '_flt_' + data.id + '_' + name);
}

$('a.filter').on('click', function() {
var name = $(this).attr('name');
$('a.filter').on('click', function () {
const name = $(this).attr('name');
addFilter(name);
});

addActiveFilters();

addActiveFilters();
};

0 comments on commit 1aa6b76

Please sign in to comment.