FilterBar

App

Select, multiselect, daterange ve text tabanlı filtre paneli. GET form submit ile URL tabanlı filtre desteği.

Full filter set

Preview

Status

Category

Date range

–

Code

<%- 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
}) %>

Compact filters

Preview

Status

Role

Code

<%- 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
}) %>

Source modules/app/FilterBar.ejs

<%
  var _fields     = locals.fields     || [];
  var _values     = locals.values     || {};
  var _action     = locals.action     || '#';
  var _method     = locals.method     || 'get';
  var _applyLabel = locals.applyLabel || 'Apply';
  var _resetLabel = locals.resetLabel || 'Reset';
%>


  <% _fields.forEach(function(f) {
    var val = _values[f.id] || '';
  %>
  
    <%= f.label %>

    <% if (f.type === 'select') { %>
    
      
      
    

    <% } else if (f.type === 'multiselect') { %>
    

    <% } else if (f.type === 'daterange') { %>
    
      
      –
      
    

    <% } else { %>
    
    <% } %>
  
  <% }); %>