fix: [genericTemplate:filters] Correctly takes filter fields and simplified UI
Sami Mokaddem
parent
1fc583c9aa
commit
d21bad721a
|
|
@ -90,7 +90,7 @@ class CRUDComponent extends Component
|
|||
$this->Controller->set('taggingEnabled', true);
|
||||
$this->setAllTags();
|
||||
}
|
||||
$filters = !empty($this->Controller->filters) ? $this->Controller->filters : [];
|
||||
$filters = !empty($this->Controller->filterFields) ? $this->Controller->filterFields : [];
|
||||
$this->Controller->set('filters', $filters);
|
||||
$this->Controller->viewBuilder()->setLayout('ajax');
|
||||
$this->Controller->render('/genericTemplates/filters');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
<?php
|
||||
|
||||
use Cake\Utility\Inflector;
|
||||
|
||||
$tableItems = array_map(function ($fieldName) {
|
||||
return [
|
||||
'fieldname' => $fieldName,
|
||||
];
|
||||
}, $filters);
|
||||
|
||||
$filteringForm = $this->Bootstrap->table(
|
||||
[
|
||||
'small' => true,
|
||||
|
|
@ -9,19 +16,36 @@ $filteringForm = $this->Bootstrap->table(
|
|||
'tableClass' => ['indexFilteringTable'],
|
||||
],
|
||||
[
|
||||
'fields' => [
|
||||
__('Field'),
|
||||
__('Operator'),
|
||||
[
|
||||
'labelHtml' => sprintf('%s %s',
|
||||
__('Value'),
|
||||
sprintf('<sup class="fa fa-info" title="%s"><sup>', __('Supports strict matches and LIKE matches with the `%` character. Example: `%.com`'))
|
||||
)
|
||||
'fields' => [
|
||||
[
|
||||
'key' => 'fieldname', 'label' => __('Field'), 'formatter' => function ($field, $row) {
|
||||
return sprintf('<span class="fieldName" data-fieldname="%s">%s</span>', h($field), h($field));
|
||||
}
|
||||
],
|
||||
[
|
||||
'key' => 'operator', 'label' => __('Operator'), 'formatter' => function ($field, $row) {
|
||||
$options = [
|
||||
sprintf('<option value="%s">%s</option>', '=', '='),
|
||||
sprintf('<option value="%s">%s</option>', '!=', '!='),
|
||||
];
|
||||
return sprintf('<select class="fieldOperator form-select form-select-sm">%s</select>', implode('', $options));
|
||||
}
|
||||
],
|
||||
[
|
||||
'key' => 'value',
|
||||
'labelHtml' => sprintf(
|
||||
'%s %s',
|
||||
__('Value'),
|
||||
sprintf('<sup class="fa fa-info" title="%s"><sup>', __('Supports strict matches and LIKE matches with the `%` character. Example: `%.com`'))
|
||||
),
|
||||
'formatter' => function ($field, $row) {
|
||||
return sprintf('<input type="text" class="fieldValue form-control form-control-sm">');
|
||||
}
|
||||
],
|
||||
],
|
||||
__('Action')
|
||||
],
|
||||
'items' => []
|
||||
]);
|
||||
'items' => $tableItems
|
||||
]
|
||||
);
|
||||
|
||||
if ($taggingEnabled) {
|
||||
$helpText = $this->Bootstrap->genNode('sup', [
|
||||
|
|
@ -40,7 +64,6 @@ if ($taggingEnabled) {
|
|||
}
|
||||
$modalBody = sprintf('%s%s', $filteringForm, $filteringTags);
|
||||
|
||||
|
||||
echo $this->Bootstrap->modal([
|
||||
'title' => __('Filtering options for {0}', Inflector::singularize($this->request->getParam('controller'))),
|
||||
'size' => 'lg',
|
||||
|
|
@ -69,7 +92,9 @@ echo $this->Bootstrap->modal([
|
|||
if (rowData['operator'] == '!=') {
|
||||
fullFilter += ' !='
|
||||
}
|
||||
activeFilters[fullFilter] = rowData['value']
|
||||
if (rowData['value'].length > 0) {
|
||||
activeFilters[fullFilter] = rowData['value']
|
||||
}
|
||||
})
|
||||
$select = modalObject.$modal.find('select.tag-input')
|
||||
activeFilters['filteringTags'] = $select.select2('data').map(tag => tag.text)
|
||||
|
|
@ -85,8 +110,6 @@ echo $this->Bootstrap->modal([
|
|||
|
||||
function initFilteringTable($filteringTable) {
|
||||
const $controlRow = $filteringTable.find('#controlRow')
|
||||
$filteringTable.find('tbody').empty()
|
||||
addControlRow($filteringTable)
|
||||
const randomValue = getRandomValue()
|
||||
const activeFilters = Object.assign({}, $(`#toggleFilterButton-${randomValue}`).data('activeFilters'))
|
||||
const tags = activeFilters['filteringTags'] !== undefined ? Object.assign({}, activeFilters)['filteringTags'] : []
|
||||
|
|
@ -100,7 +123,7 @@ echo $this->Bootstrap->modal([
|
|||
} else if (fieldParts.length > 2) {
|
||||
console.error('Field contains multiple spaces. ' + field)
|
||||
}
|
||||
addFilteringRow($filteringTable, field, value, operator)
|
||||
setFilteringValues($filteringTable, field, value, operator)
|
||||
}
|
||||
$select = $filteringTable.closest('.modal-body').find('select.tag-input')
|
||||
let passedTags = []
|
||||
|
|
@ -118,97 +141,17 @@ echo $this->Bootstrap->modal([
|
|||
.trigger('change')
|
||||
}
|
||||
|
||||
function addControlRow($filteringTable) {
|
||||
const availableFilters = <?= json_encode($filters) ?>;
|
||||
const $selectField = $('<select/>').addClass('fieldSelect form-select form-select-sm')
|
||||
availableFilters.forEach(filter => {
|
||||
$selectField.append($('<option/>').text(filter))
|
||||
});
|
||||
const $selectOperator = $('<select/>').addClass('fieldOperator form-select form-select-sm')
|
||||
.append([
|
||||
$('<option/>').text('=').val('='),
|
||||
$('<option/>').text('!=').val('!='),
|
||||
])
|
||||
const $row = $('<tr/>').attr('id', 'controlRow')
|
||||
.append(
|
||||
$('<td/>').append($selectField),
|
||||
$('<td/>').append($selectOperator),
|
||||
$('<td/>').append(
|
||||
$('<input>').attr('type', 'text').addClass('fieldValue form-control form-control-sm')
|
||||
),
|
||||
$('<td/>').append(
|
||||
$('<button/>').attr('type', 'button').addClass('btn btn-sm btn-primary')
|
||||
.append($('<span/>').addClass('fa fa-plus'))
|
||||
.click(addFiltering)
|
||||
)
|
||||
)
|
||||
$filteringTable.append($row)
|
||||
}
|
||||
|
||||
function addFilteringRow($filteringTable, field, value, operator) {
|
||||
const $selectOperator = $('<select/>').addClass('fieldOperator form-select form-select-sm')
|
||||
.append([
|
||||
$('<option/>').text('=').val('='),
|
||||
$('<option/>').text('!=').val('!='),
|
||||
]).val(operator)
|
||||
const $row = $('<tr/>')
|
||||
.append(
|
||||
$('<td/>').text(field).addClass('fieldName').data('fieldName', field),
|
||||
$('<td/>').append($selectOperator),
|
||||
$('<td/>').append(
|
||||
$('<input>').attr('type', 'text').addClass('fieldValue form-control form-control-sm').val(value)
|
||||
),
|
||||
$('<td/>').append(
|
||||
$('<button/>').attr('type', 'button').addClass('btn btn-sm btn-danger')
|
||||
.append($('<span/>').addClass('fa fa-trash'))
|
||||
.click(removeSelf)
|
||||
)
|
||||
)
|
||||
$filteringTable.append($row)
|
||||
const $controlRow = $filteringTable.find('#controlRow')
|
||||
disableOptionFromSelect($controlRow, field)
|
||||
}
|
||||
|
||||
function addFiltering() {
|
||||
const $table = $(this).closest('table.indexFilteringTable')
|
||||
const $controlRow = $table.find('#controlRow')
|
||||
const field = $controlRow.find('select.fieldSelect').val()
|
||||
const value = $controlRow.find('input.fieldValue').val()
|
||||
const operator = $controlRow.find('input.fieldOperator').val()
|
||||
addFilteringRow($table, field, value, operator)
|
||||
$controlRow.find('input.fieldValue').val('')
|
||||
$controlRow.find('select.fieldSelect').val('')
|
||||
}
|
||||
|
||||
function removeSelf() {
|
||||
const $row = $(this).closest('tr')
|
||||
const $controlRow = $row.closest('table.indexFilteringTable').find('#controlRow')
|
||||
const field = $row.data('fieldName')
|
||||
$row.remove()
|
||||
enableOptionFromSelect($controlRow, field)
|
||||
}
|
||||
|
||||
function disableOptionFromSelect($controlRow, optionName) {
|
||||
$controlRow.find('select.fieldSelect option').each(function() {
|
||||
const $option = $(this)
|
||||
if ($option.text() == optionName) {
|
||||
$option.prop('disabled', true)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function enableOptionFromSelect($controlRow, optionName) {
|
||||
$controlRow.find('select.fieldSelect option').each(function() {
|
||||
const $option = $(this)
|
||||
if ($option.text() == optionName) {
|
||||
$option.prop('disabled', false)
|
||||
}
|
||||
});
|
||||
function setFilteringValues($filteringTable, field, value, operator) {
|
||||
$row = $filteringTable.find('td > span.fieldName').filter(function() {
|
||||
return $(this).data('fieldname') == field
|
||||
}).closest('tr')
|
||||
$row.find('.fieldOperator').val(operator)
|
||||
$row.find('.fieldValue').val(value)
|
||||
}
|
||||
|
||||
function getDataFromRow($row) {
|
||||
const rowData = {};
|
||||
rowData['name'] = $row.find('td.fieldName').data('fieldName')
|
||||
rowData['name'] = $row.find('td > span.fieldName').data('fieldname')
|
||||
rowData['operator'] = $row.find('select.fieldOperator').val()
|
||||
rowData['value'] = $row.find('input.fieldValue').val()
|
||||
return rowData
|
||||
|
|
|
|||
Loading…
Reference in New Issue