189 lines
8.0 KiB
PHP
189 lines
8.0 KiB
PHP
<?php
|
|
$filteringItems = [];
|
|
foreach ($metaTemplates as $template_id => $metaTemplate) {
|
|
foreach ($metaTemplate['meta_template_fields'] as $metaTemplateField) {
|
|
$filteringItems[h($metaTemplate->name)][] = ['id' => $metaTemplateField->id, 'name' => h($metaTemplateField->field), 'template_id' => $template_id];
|
|
}
|
|
}
|
|
|
|
$filteringForm = $this->Bootstrap->table(
|
|
[
|
|
'small' => true,
|
|
'striped' => false,
|
|
'hover' => false,
|
|
'tableClass' => ['indexMetaFieldsFilteringTable'],
|
|
],
|
|
[
|
|
'fields' => [
|
|
__('Meta 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`'))
|
|
)
|
|
],
|
|
__('Action')
|
|
],
|
|
'items' => []
|
|
]
|
|
);
|
|
?>
|
|
|
|
<?= $filteringForm; ?>
|
|
<script>
|
|
(function() {
|
|
const availableFilters = <?= json_encode($filteringItems) ?>;
|
|
|
|
$(document).ready(() => {
|
|
const $filteringTable = $('table.indexMetaFieldsFilteringTable')
|
|
initFilteringTable($filteringTable)
|
|
})
|
|
|
|
function initFilteringTable($filteringTable) {
|
|
$filteringTable.find('tbody').empty()
|
|
$filteringTable[0].getFiltersFunction = getFilters
|
|
addControlRow($filteringTable)
|
|
const randomValue = getRandomValue()
|
|
const activeFilters = Object.assign({}, $(`#toggleFilterButton-${randomValue}`).data('activeFilters'))
|
|
const metaFields = activeFilters['filteringMetaFields'] !== undefined ? Object.assign({}, activeFilters)['filteringMetaFields'] : []
|
|
metaFields.forEach(metaField => {
|
|
addFilteringRow($filteringTable, metaField.meta_template_field_id, metaField.value, '=')
|
|
})
|
|
}
|
|
|
|
function addControlRow($filteringTable) {
|
|
const $selectField = genMetaFieldsSelectElement()
|
|
.val(null).trigger('change')
|
|
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)
|
|
enableSelect2($selectField, $filteringTable.closest('.modal'))
|
|
}
|
|
|
|
function enableSelect2($select, $dropdownParent) {
|
|
$select.select2({
|
|
dropdownParent: $dropdownParent,
|
|
placeholder: '<?= __('Pick a meta field') ?>',
|
|
allowClear: true,
|
|
templateSelection: select2FormatState,
|
|
|
|
})
|
|
}
|
|
|
|
function select2FormatState(state) {
|
|
if (!state.id) {
|
|
return state.text;
|
|
}
|
|
const selectedData = $(state.element).data('meta_template_data')
|
|
const $state = $('<span/>').append(
|
|
$('<span/>').addClass('fw-light fs-8 me-1').text(`${selectedData.template_name} ::`),
|
|
$('<span/>').text(selectedData.template_field_name)
|
|
)
|
|
return $state
|
|
}
|
|
|
|
function addFilteringRow($filteringTable, field, value, operator) {
|
|
const $selectField = genMetaFieldsSelectElement()
|
|
$selectField.val(field).trigger('change.select2');
|
|
const $selectOperator = $('<select/>').addClass('fieldOperator form-select form-select-sm')
|
|
.append([
|
|
$('<option/>').text('=').val('='),
|
|
$('<option/>').text('!=').val('!='),
|
|
]).val(operator)
|
|
const $row = $('<tr/>')
|
|
.append(
|
|
$('<td/>').append($selectField),
|
|
$('<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)
|
|
enableSelect2($selectField, $filteringTable.closest('.modal'))
|
|
}
|
|
|
|
function addFiltering() {
|
|
const $table = $(this).closest('table.indexMetaFieldsFilteringTable')
|
|
const $controlRow = $table.find('#controlRow')
|
|
const field = $controlRow.find('select.fieldSelect').val()
|
|
const value = $controlRow.find('input.fieldValue').val()
|
|
const operator = $controlRow.find('select.fieldOperator').val()
|
|
addFilteringRow($table, field, value, operator)
|
|
$controlRow.find('input.fieldValue').val('')
|
|
$controlRow.find('select.fieldSelect').val('').trigger('change.select2');
|
|
}
|
|
|
|
function removeSelf() {
|
|
const $row = $(this).closest('tr')
|
|
const $controlRow = $row.closest('table.indexMetaFieldsFilteringTable').find('#controlRow')
|
|
const field = $row.data('fieldName')
|
|
$row.remove()
|
|
}
|
|
|
|
function genMetaFieldsSelectElement() {
|
|
const $selectField = $('<select/>').addClass('fieldSelect form-select form-select-sm')
|
|
for (let [metaTemplateName, metaTemplateFields] of Object.entries(availableFilters)) {
|
|
$selectField.append($('<optgroup/>').attr('label', metaTemplateName));
|
|
metaTemplateFields.forEach(metaTemplateField => {
|
|
$selectField.append($('<option/>')
|
|
.val(metaTemplateField['id'])
|
|
.text(metaTemplateField['name'])
|
|
.data('meta_template_data', {
|
|
template_id: metaTemplateField['template_id'],
|
|
template_field_id: metaTemplateField['id'],
|
|
template_name: metaTemplateName,
|
|
template_field_name: metaTemplateField['name'],
|
|
})
|
|
)
|
|
});
|
|
}
|
|
return $selectField
|
|
}
|
|
|
|
function getFilters() {
|
|
const $table = $(this)
|
|
let activeFilters = [];
|
|
$table.find('tbody tr').each(function() {
|
|
const $row = $(this)
|
|
if ($row.find('select.fieldSelect').select2('data').length > 0) {
|
|
let rowData = {}
|
|
selectedData = $($row.find('select.fieldSelect').select2('data')[0].element).data('meta_template_data')
|
|
rowData['name'] = `_metafield.${selectedData.template_id}.${selectedData.template_field_id}`
|
|
rowData['operator'] = $row.find('select.fieldOperator').val()
|
|
rowData['value'] = $row.find('input.fieldValue').val()
|
|
let fullFilter = rowData['name']
|
|
if (rowData['operator'] == '!=') {
|
|
fullFilter += ' !='
|
|
}
|
|
if (rowData['value'].length > 0) {
|
|
activeFilters[fullFilter] = rowData['value']
|
|
}
|
|
}
|
|
})
|
|
return activeFilters
|
|
}
|
|
}())
|
|
</script>
|