List Component

This section describes the BfmAmountListComponent component.

Composition

The BfmAmountListComponent is composed of the following components:

• BfmAmountFormComponent - Amount form
• BfmAmountsUploadComponent - Amounts upload

Usage

You can import the BfmAmountListComponent directly in your route configuration.

amount-list.component.html

import { BfmAmountListComponent } from "@celerofinancas/ui-cash-flow";

@Component({
  standalone: true,
  selector: 'bfm-amount-list',
  imports: [BfmAmountListComponent],
  templateUrl: './list.component.html',
})
export class CustomListComponent {}

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

amount-list.component.html

<bfm-amount-list
  [addEntriesIndividuallyText]="'Adicionar lançamento individual'"
  [amounts]="amountsList"
  [disabled]="false"
  [isEditFinancialRecords]="false"
  [companyPk]="companyPkValue"
  [financialRecordPk]="financialRecordPkValue"
  [paidAt]="paidAtValue"
  [hasCostCenter]="true"
  [enableClassification]="true"
  [hasInvoice]="false"
  [enableSelection]="true"
  [hiddenClassification]="false"
  [selectAllText]="Selecionar todos"
  (amountExpandedChanges)="handleAmountExpandedChanges($event)"
  (formChanges)="handleFormChanges($event)"
  (delete)="handleDelete($event)"
  (newRecord)="handleNewRecord($event)"
  (refreshData)="handleRefreshData($event)"
  (editCompanyRelated)="handleEditCompanyRelated($event)"
  (createCompanyRelated)="handleCreateCompanyRelated($event)"
  (addAmount)="handleAddAmount($event)"
  (appliedToAll)="handleappliedToAll($event)"
/>

Inputs

The BfmAmountListComponent component has the following inputs:

addEntriesIndividuallyText

Add entries individually text for the button.

Type	Default
string	'Adicionar lançamento individual'

amounts

Amounts list.

Type	Default
any[]	[]

companyPk

Companies identifier.

Type	Default
string	''

disabled

Controls form disabled.

Type	Default
boolean	false

enableClassification

User Permissions Classify Amounts.

Type	Default
boolean	true

enableSelection

Whether amount selection is enabled.

Type	Default
boolean	true

financialRecordPk

Financial record PK.

Type	Default
string	''

hasCostCenter

Whether user has the cost center liberation.

Type	Default
boolean	false

hasInvoice

Whether the financial record has a platform-generated invoice attached.

Type	Default
boolean	false

hiddenClassification

Whether financial record has to_check status hidden all classification values.

Type	Default
boolean	false

isEditFinancialRecords

Controls form disabled.

Type	Default
boolean	false

paidAt

Payment date to get the corresponding coa pk.

Type	Default
string	''

selectAllText

Select all text for the input.

Type	Default
string	'Selecionar todos'

showUploadButtons

Whether to show the upload buttons.

Type	Default
boolean	true

Events

The BfmAmountListComponent component has the following Events:

addAmount

Emits when a new amount is added.

Type
EventEmitter

amountExpandedChanges

Emits a value when isExpanded$ changes to track on mixpanel.

Type
EventEmitter

appliedToAll

Emits when any "apply to all" button is clicked.

Type
EventEmitter

createCompanyRelated

Create company related event emitter.

Type
EventEmitter

delete

Emits delete event for an amount.

Type
EventEmitter

editCompanyRelated

Edit company related event emitter.

Type
EventEmitter

formChanges

Form changes emitter - Emits form changes.

Type
EventEmitter

newRecord

Emits when a new financial record is created from some amounts.

Type
EventEmitter

refreshData

Emits event requesting for new data.

Type
EventEmitter

Configuration

TOKEN VISIBILITY_AMOUNT_LIST_TOKEN

To customize the BfmAmountListComponent, you can inject the VISIBILITY_AMOUNT_LIST_TOKEN 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
multipleAmountsDeletionEnabled	Indicates whether the feature to delete multiple amounts at once is enabled.
showCoaLastLevel	Determines if the last level of the Chart of Accounts (CoA) should be displayed.
blackList	Specifies a list of items that are restricted or excluded from certain operations.

Example

To customize the BfmAmountListComponent, you can inject the VISIBILITY_AMOUNT_LIST_TOKEN token in your module.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: VISIBILITY_AMOUNT_LIST_TOKEN,
      useValue: {
        multipleAmountsDeletionEnabled: false,
        showCoaLastLevel: false,
        blackList: [],
      },
    },
  ],
};

TOKEN FINANCIAL_RECORD_AMOUNT_LIST_DEFAULT_CONFIGS

To customize the BfmAmountListComponent, you can inject the FINANCIAL_RECORD_AMOUNT_LIST_DEFAULT_CONFIGS 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
showSelectCheckbox	Whether to show the select checkbox.	true
showUploadButtons	Whether to show the upload buttons.	true

The FINANCIAL_RECORD_AMOUNT_LIST_DEFAULT_CONFIGS default values are:

{
  "showSelectCheckbox": true,
  "showUploadButtons": true,
}

Example

To customize the BfmAmountListComponent, you can inject the FINANCIAL_RECORD_AMOUNT_LIST_DEFAULT_CONFIGS token in your module.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_AMOUNT_LIST_DEFAULT_CONFIGS,
      useValue: {
        showSelectCheckbox: false,
        showUploadButtons: false,
      },
    },
  ],
};