FilterBar
AppSelect, multiselect, daterange and text-based filter panel. Supports URL-based filtering via GET form submit.
–
<%- include('modules/app/FilterBar', {
action: req.path,
method: 'get',
fields: [
{ type: 'select', id: 'status', label: 'Status', options: [{value:'active',label:'Active'},{value:'inactive',label:'Inactive'}] },
{ type: 'select', id: 'category', label: 'Category', options: categories.map(c => ({value: c.id, label: c.name})) },
{ type: 'daterange', id: 'date', label: 'Date range' },
],
values: req.query
}) %><%- include('modules/app/FilterBar', {
action: req.path,
fields: [
{ type: 'select', id: 'status', label: 'Status', options: statusOptions },
{ type: 'select', id: 'role', label: 'Role', options: roleOptions },
],
values: req.query
}) %><%
var _fields = locals.fields || [];
var _values = locals.values || {};
var _applyLabel = locals.applyLabel || 'Apply';
var _resetLabel = locals.resetLabel || 'Reset';
var _className = locals.className || '';
var _filterId = locals.id || ('filterbar-' + Math.random().toString(36).slice(2, 8));
%>
<% _fields.forEach(function (f) {
var val = _values[f.id];
var fieldId = 'filter-' + f.id;
%>
<% if (f.type === 'select') { %>
<%- include('../ui/Select', {
id: fieldId,
label: f.label,
options: f.options || [],
placeholder: f.placeholder || 'All',
value: (val == null ? '' : val),
}) %>
<% } else if (f.type === 'multiselect') { %>
<%- include('../ui/MultiSelect', {
id: fieldId,
label: f.label,
options: f.options || [],
value: Array.isArray(val) ? val : [],
placeholder: f.placeholder || 'Any',
}) %>
<% } else if (f.type === 'daterange') { %>
<%- include('../ui/DateRangePicker', {
id: fieldId,
label: f.label,
value: val || { start: null, end: null },
}) %>
<% } else if (f.type === 'tags') { %>
<%- include('../ui/TagInput', {
id: fieldId,
label: f.label,
value: Array.isArray(val) ? val : [],
placeholder: f.placeholder || 'Add tag…',
}) %>
<% } %>
<% }); %>
<%- include('../ui/Button', {
variant: 'ghost',
size: 'sm',
children: _resetLabel,
}) %>
<%- include('../ui/Button', {
variant: 'primary',
size: 'sm',
children: _applyLabel,
}) %>