Financial Records List

This section describes the BfmFinancialRecordsListComponent component.

Composition

The BfmFinancialRecordsListComponent is composed of the following components:

• BfmListItemComponent - Component for list items.
• BfmValueAccordionComponent - Component for value accordion.

Usage

You need to import it in your module and use it in your template.

financial-records-list.component.ts

import { BfmFinancialRecordsListComponent } from '@celerofinancas/ui-cash-flow';

@Component({
  standalone: true,
  selector: 'financial-records-list',
  imports: [BfmFinancialRecordsListComponent],
  templateUrl: './financial-records-list.component.html',
})
export class FinancialRecordsListComponent {}

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

financial-records-list.component.html

<bfm-financial-records-list 
  [balanceConfig]="{ type: 'predicted', isCustom: false }"
  [balanceLoading]="false"
  [checkingAccountBalance]="{}"
  [columns]="[]"
  [columnsStr]="''"
  [currentPage]="0"
  [enableUpdate]="true"
  [financialRecordsList]="[]"
  [financialRecordsStr]="''"
  [groupBy]="''"
  [hasCheckingAccountValues]="false"
  [headerClick]="false"
  [isEditable]="false"
  [isLate]="false"
  [modalClick]="true"
  [modalOpen]="true"
  [noPadding]="false"
  [selectionEnabled]="false"
  [showScheduledDateOnDueDate]="false"
  [headers]="{}"
  [bankDetails]="false"
  [statusIcons]="{}"
/>

Inputs

The BfmFinancialRecordsListComponent component has the following inputs:

balanceConfig

Balance configuration.

Type	Default
BalanceConfig	{ type: 'predicted', isCustom: false }

balanceLoading

Balance controller.

Type	Default
boolean	false

checkingAccountBalance

Checking account balance.

Type	Default
any	{}

columns

A list of columns to be displayed.

Type	Default
any	[]

columnsStr

List Columns string.

Type	Default
string	''

currentPage

Current page.

Type	Default
number	0

enableUpdate

Whether list value will be updated after financial record modal closes.

Type	Default
boolean	true

financialRecordsList

The list of financial records to be displayed.

Type	Default
any[]	[]

financialRecordsStr

Financial Records List String.

Type	Default
string	''

groupBy

Grouping.

Type	Default
string	''

hasCheckingAccountValues

Enable checking account values.

Type	Default
boolean	false

headerClick

Boolean to say if is possible ordering.

Type	Default
boolean	false

isEditable

Whether edition icon will be displayed.

Type	Default
boolean	false

isLate

Applies red class to row.

Type	Default
boolean	false

modalClick

Control modal click.

Type	Default
boolean	true

modalOpen

Boolean to control if Detail Modal will be opening.

Type	Default
boolean	true

noPadding

No Padding on list.

Type	Default
boolean	false

selectionEnabled

Selection enabled.

Type	Default
boolean	false

showScheduledDateOnDueDate

Whether to show scheduled_date value on due_date column, if available.

Type	Default
boolean	false

headers

Headers for the financial records list.

Type	Default
headers	{ name: 'Nome', description: 'Descrição', payment_method: 'Método de pagamento', due_at: 'Vencimento', paid_at: 'Data', created_at: 'Envio', scheduled_date: 'Agendado para', cost_center: 'Centro de Custos', coa_name: 'Plano de Contas', value: 'Valor', include: 'Incluir', bank_id: 'Banco', processing_status: 'Status de Processamento', status: 'Status', edit: '', solve: '', has_document: '' }

bankDetails

Whether to show bank details in the financial records list.

Type	Default
boolean	false

statusIcons

Status icons to be displayed in the financial records list

Type	Default
StatusIcons?	-

Events

The BfmFinancialRecordPaymentInfoComponent component has no events.

Configuration

To customize the BfmFinancialRecordsListComponent, you can inject configuration tokens in your module.

FINANCIAL_RECORD_LIST_TOKEN

This token is used to provide custom configuration for the financial records list behavior. If not provided, the default values will be used.

Properties

Key	Description	Default
recordGroupHeaderInformationType	Controls the type of information displayed in the group header. Can be either 'weekDay' to show the day of the week or 'count' to show the number of records.	'weekDay'
previousBalanceTextDone	This text is displayed after the 'saldo' label to indicate the initial period, only in the finalcialRecordList Done	'anterior'
endBalanceTextDone	This text is displayed after the 'saldo' label to indicate the final period, only in the finalcialRecordList Done	'final'

Example

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { FINANCIAL_RECORD_LIST_TOKEN } from '@celerofinancas/ui-cash-flow';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_LIST_TOKEN,
      useValue: {
        recordGroupHeaderInformationType: 'count',
        previousBalanceTextDone: 'anterior',
        endBalanceTextDone: 'final'
      },
    },
  ],
};

Interface

The configuration interface is defined as follows:

export interface FinancialRecordsListConfig {
  recordGroupHeaderInformationType: 'weekDay' | 'count';
  previousBalanceTextDone: 'anterior',
  endBalanceTextDone: 'final'
}

Default Configuration

export const FINANCIAL_RECORDS_LIST_CONFIG_DEFAULT: FinancialRecordsListConfig = {
  recordGroupHeaderInformationType: 'weekDay',
  previousBalanceTextDone: 'anterior',
  endBalanceTextDone: 'final'
};