Results Period Filter

This section describes the BfmResultsPeriodFilterComponent component.

Usage

If you need more customization, you need to import it in your module and use it in your template.

results-period-filter.component.ts

import { BfmResultsPeriodFilterComponent } from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'results-period-filter',
  imports: [BfmResultsPeriodFilterComponent],
  templateUrl: './results-period-filter.component.html',
})
export class ResultsPeriodFilterComponent {}

Then, in your template, you can use the component like this:

results-period-filter.component.html

<bfm-results-period-filter
  [companyPk]="'companyPkValue'"
  [filterText]="'Analisar'"
  [header]="'Selecione o período de análise'"
  [showCostCenter]="false"
  (periodSelected)="handlePeriodSelected($event)"
/>

Inputs

The BfmResultsPeriodFilterComponent component has the following inputs:

companyPk

Company primary key

Type	Default
string	''

filterText

Filter text label

Type	Default
string	'Analisar'

header

Header text

Type	Default
string	'Selecione o período de análise'

showCostCenter

Show cost center filter

Type	Default
boolean	false

textCostCenter

Text for the cost center label

Type	Default
string	'Centro de Custo'

showCostCenterTooltipRight

Whether to show the cost center tooltip on the Right side

Type	Default
boolean	false

costCenterTooltipRightText

Tooltip text for the cost center filter when shown on the Right side

Type	Default
string	''

Events

The BfmResultsPeriodFilterComponent component has the following events:

periodSelected

Emits the selected filters

Type
EventEmitter<any>

TOKEN RESULTS_PERIOD_FILTER_CONFIG

To customize the BfmResultsPeriodFilterComponent, you can inject the RESULTS_PERIOD_FILTER_CONFIG token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description	Default
selectPeriodLabel	Label for the period selection	'Selecione o período de análise'
showCostCenter	Whether to show the cost center filter	false
showCostCenterTooltip	Whether to show the cost center tooltip	false
costCenterTooltipText	Tooltip text for the cost center filter	'Você pode criar um Centro de Custo para organizar e acompanhar entradas e saidas de dinheiro da empresa por área, projeto ou finalidade'
buttonFilterText	Text for the filter button	'Analisar'
useQueryParams	Whether to use query parameters for the selected tab and filters	true
textCostCenter	Text for the cost center tooltip	'Centro de Custo'
showCostCenterTooltipRight	Whether to show the cost center tooltip on the Right side	-
costCenterTooltipRightText	Tooltip text for the cost center filter when shown on the Right side	-

The RESULTS_PERIOD_FILTER_CONFIG default values are:

export const RESULTS_PERIOD_FILTER_CONFIG = {
  selectPeriodLabel: 'Selecione o período de análise',
  showCostCenter: false,
  showCostCenterTooltip: false,
  costCenterTooltipText: 'Você pode criar um Centro de Custo para organizar e acompanhar entradas e saidas de dinheiro da empresa por área, projeto ou finalidade',
  buttonFilterText: 'Analisar',
  useQueryParams: true,
  textCostCenter: 'Centro de Custo',
};

Example

results-period-filter.component.ts

import { Component } from '@angular/core';

import { BfmResultsPeriodFilterComponent } from '@celerofinancas/ui-reports';
import { RESULTS_PERIOD_FILTER_CONFIG } from '@celerofinancas/ui-reports';

@Component({
  standalone: true,
  selector: 'results-period-filter',
  imports: [BfmResultsPeriodFilterComponent],
  templateUrl: './results-period-filter.component.html',
  providers: [
    {
      provide: RESULTS_PERIOD_FILTER_CONFIG,
      useValue: {
        selectPeriodLabel: 'Selecione o período de análise',
        showCostCenter: false,
        showCostCenterTooltip: false,
        costCenterTooltipText: 'Você pode criar um Centro de Custo para organizar e acompanhar entradas e saidas de dinheiro da empresa por área, projeto ou finalidade',
        buttonFilterText: 'Analisar',
        useQueryParams: true,
        textCostCenter: 'Setor/Projeto',
        showCostCenterTooltipRight: true,
        costCenterTooltipRightText: 'Texto que será apresentando no tooltip a direita'
      },
    },
  ],
}) 
export class ResultsPeriodFilterComponent {
  handlePeriodSelected(event: any) {
    console.log('Selected period:', event);
  }
}

results-period-filter.component.html

<bfm-results-period-filter
  [companyPk]="'companyPkValue'"
  [filterText]="'Analisar'"
  [header]="'Selecione o período de análise'"
  [showCostCenter]="false"
  (periodSelected)="handlePeriodSelected($event)"
/>