Fillter mode

Filter Inputs Mode

Learn how to configure filter input modes in CMS entity lists. Filter input mode determines where filtering logic is handled - on the backend, frontend, or a combination of both.

A comprehensive guide for configuring filterInputsMode in CMS_FILTER_CONFIG to control how data filtering is processed in entity lists.

---

Overview

The filterInputsMode property in CMS_FILTER_CONFIG allows you to control where filtering logic is executed:

1. 'backend' - Filtering is handled entirely on the server side

2. 'manual' - Filtering is handled fully on the client side

3. 'merge' - A hybrid approach combining frontend and backend filtering

---

Where to Place filterInputsMode

The filterInputsMode property must be placed inside the CMS_FILTER_CONFIG provider, within the useValue object:

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual', // ← Place it here
    filterDto: {
      page: 0,
    },
    // ... other filter configuration
  } as FilterSchema,
}

Complete Example from Codebase

File: src/app/dashboard/categories/categories.component.ts

import { Component } from '@angular/core';
import { 
  CMS_FILTER_CONFIG, 
  FilterSchema,
  FilterInputType 
} from '@tradinos/cms-frontend-entity';

@Component({
  // ... component configuration
  providers: [
    {
      provide: CMS_FILTER_CONFIG,
      useValue: {
        filterInputsMode: 'manual', // ← Filter mode configuration
        filterDto: {
          page: 0,
          pagination: false,
        },
        inputs: [
          {
            key: 'id',
            label: 'id',
            inputType: FilterInputType.text,
          },
        ],
      } as FilterSchema,
    },
  ],
})
export class CategoriesComponent {}

---

Filter Inputs Mode Types

1. 'backend' - Server-Side Filtering

Filtering is handled entirely on the server side. The frontend sends filter parameters to the backend, and the backend returns the filtered results.

When to Use:

• Large datasets that require server-side processing

• Complex filtering logic that's better handled on the backend

• When you want to reduce client-side processing load

• When filter options come from the backend API

Configuration:

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'backend', // Backend handles all filtering
    filterDto: {
      page: 0,
    },
    // No manual inputs needed - backend provides filter schema
  } as FilterSchema,
}

Example from Codebase:

File: src/app/credentials/credential.component.ts (lines 40-48)

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterDto: {
      page: 0,
    },
    filterInputsMode: "backend", // Backend provides filter inputs
  } as FilterSchema,
}

How it Works:

1. Frontend requests filter schema from backend

2. Backend returns available filter inputs

3. User applies filters

4. Frontend sends filter parameters to backend

5. Backend processes filters and returns filtered results

---

2. 'manual' - Client-Side Filtering

Filtering is handled fully on the client side. The frontend manually processes the data based on the filter inputs without involving the backend.

When to Use:

• Small to medium datasets (< 1000 items)

• Quick, responsive filtering without API calls

• Simple filtering logic that can be handled client-side

• When you want to define filter inputs manually in the component

Configuration:

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual', // Frontend handles all filtering
    filterDto: {
      page: 0,
    },
    inputs: [ // Manual filter inputs definition
      {
        key: 'id',
        label: 'ID',
        inputType: FilterInputType.text,
      },
      {
        key: 'name',
        label: 'Name',
        inputType: FilterInputType.text,
      },
    ],
  } as FilterSchema,
}

Example from Codebase:

File: src/app/dashboard/categories/categories.component.ts (lines 40-58)

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual', // Manual filter configuration
    filterDto: {
      page: 0,
      pagination: false,
    },
    inputs: [
      {
        key: 'id',
        label: 'id',
        inputType: FilterInputType.text,
      },
    ],
  } as FilterSchema,
}

How it Works:

1. All data is loaded from backend (or cached)

2. Filter inputs are defined manually in component

3. User applies filters

4. Frontend filters data locally without API calls

5. Filtered results are displayed immediately

---

3. 'merge' - Hybrid Filtering

A hybrid approach. The frontend performs basic filtering, but the backend also handles additional or more complex filtering. This is useful when you want quick responsiveness for simple filters but still rely on backend processing for accuracy or large datasets.

When to Use:

• Medium to large datasets

• When you want quick response for simple filters

• Complex filtering that requires backend validation

• When some filters are simple (client-side) and others are complex (server-side)

Configuration:

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'merge', // Hybrid approach
    filterDto: {
      page: 0,
    },
    inputs: [
      // Basic filters handled client-side
      {
        key: 'status',
        label: 'Status',
        inputType: FilterInputType.dropdown,
        dropdownConfiguration: {
          options: [
            { name: 'Active', value: 'active' },
            { name: 'Inactive', value: 'inactive' },
          ],
        },
      },
    ],
    // Complex filters sent to backend
  } as FilterSchema,
}

How it Works:

1. Frontend handles simple, quick filters locally

2. Complex filters or large datasets are sent to backend

3. Backend processes complex filters and returns results

4. Frontend merges client-side and server-side filtered results

---

Comparison Table

Mode	Filtering Location	API Calls	Best For	Performance
'backend'	Server-side only	Every filter change	Large datasets, complex logic	Depends on backend
'manual'	Client-side only	Initial load only	Small datasets, simple logic	Fast (no API calls)
'merge'	Both client & server	Selective (complex filters)	Medium datasets, mixed complexity	Balanced

---

Complete Examples

Example 1: Backend Mode (Full Server-Side)

import { Component } from '@angular/core';
import { 
  CMS_FILTER_CONFIG, 
  FilterSchema 
} from '@tradinos/cms-frontend-entity';

@Component({
  providers: [
    {
      provide: CMS_FILTER_CONFIG,
      useValue: {
        filterInputsMode: 'backend', // Backend provides and handles filters
        filterDto: {
          page: 0,
        },
      } as FilterSchema,
    },
  ],
})
export class MyComponent {}

Result:

• Backend provides filter schema

• All filtering happens on server

• Frontend sends filter parameters to backend

• Backend returns filtered results

---

Example 2: Manual Mode (Full Client-Side)

import { Component } from '@angular/core';
import { 
  CMS_FILTER_CONFIG, 
  FilterSchema,
  FilterInputType 
} from '@tradinos/cms-frontend-entity';

@Component({
  providers: [
    {
      provide: CMS_FILTER_CONFIG,
      useValue: {
        filterInputsMode: 'manual', // Manual filter configuration
        filterDto: {
          page: 0,
        },
        inputs: [
          {
            key: 'name',
            label: 'Name',
            inputType: FilterInputType.text,
          },
          {
            key: 'status',
            label: 'Status',
            inputType: FilterInputType.dropdown,
            dropdownConfiguration: {
              options: [
                { name: 'Active', value: 'active' },
                { name: 'Inactive', value: 'inactive' },
              ],
              optionLabel: 'name',
              valueBy: 'value',
            },
          },
        ],
      } as FilterSchema,
    },
  ],
})
export class MyComponent {}

Result:

• Filter inputs defined manually

• All filtering happens on client

• No API calls during filtering

• Instant filter results

---

Example 3: Merge Mode (Hybrid)

import { Component } from '@angular/core';
import { 
  CMS_FILTER_CONFIG, 
  FilterSchema,
  FilterInputType 
} from '@tradinos/cms-frontend-entity';

@Component({
  providers: [
    {
      provide: CMS_FILTER_CONFIG,
      useValue: {
        filterInputsMode: 'merge', // Hybrid filtering
        filterDto: {
          page: 0,
        },
        inputs: [
          {
            key: 'quickFilter',
            label: 'Quick Search',
            inputType: FilterInputType.text,
          },
        ],
      } as FilterSchema,
    },
  ],
})
export class MyComponent {}

Result:

• Simple filters handled client-side

• Complex filters sent to backend

• Balanced performance and accuracy

---

Best Practices

1. Choose the Right Mode:

   • Use 'backend' for large datasets (> 1000 items)

   • Use 'manual' for small datasets (< 100 items)

   • Use 'merge' for medium datasets with mixed complexity

2. Backend Mode:

   • Ensure your backend API supports filter schema endpoint

   • Backend should return filter input definitions

   • Backend should handle all filter processing

3. Manual Mode:

   • Define all filter inputs in component

   • Keep filter logic simple

   • Consider pagination for large datasets

   • All data is loaded upfront

4. Merge Mode:

   • Use for balanced approach

   • Simple filters (text, dropdown) can be client-side

   • Complex filters (date ranges, multi-select) should be server-side

5. Performance Considerations:

   • 'manual' mode loads all data upfront - use with caution for large datasets

   • 'backend' mode makes API calls on every filter change - consider debouncing

   • 'merge' mode balances both approaches

---

Common Patterns

Pattern 1: Simple Backend Filtering

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'backend',
    filterDto: { page: 0 },
  } as FilterSchema,
}

Pattern 2: Manual Filtering with Multiple Inputs

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual',
    filterDto: { page: 0 },
    inputs: [
      { key: 'id', inputType: FilterInputType.text },
      { key: 'name', inputType: FilterInputType.text },
      { key: 'status', inputType: FilterInputType.dropdown },
    ],
  } as FilterSchema,
}

Pattern 3: Manual Filtering with Pagination Disabled

{
  provide: CMS_FILTER_CONFIG,
  useValue: {
    filterInputsMode: 'manual',
    filterDto: {
      page: 0,
      pagination: false, // Show all items
    },
    inputs: [
      { key: 'search', inputType: FilterInputType.text },
    ],
  } as FilterSchema,
}

---

Related Documentation

• Disable Pagination - Learn about disabling pagination

• Filter Configuration - See how to configure filters

• CRUD Configuration - Understand CRUD configuration

---

Summary

The filterInputsMode property in CMS_FILTER_CONFIG controls where filtering logic is executed:

• 'backend': Server-side filtering - best for large datasets and complex logic

• 'manual': Client-side filtering - best for small datasets and quick responses

• 'merge': Hybrid approach - balances client and server-side filtering

Placement: Always place filterInputsMode inside the CMS_FILTER_CONFIG provider's useValue object, at the same level as filterDto and inputs.

This feature enables flexible filtering strategies based on your data size, complexity, and performance requirements.