Amount Form

This section describes the BfmAmountFormComponent component.

Composition

The BfmAmountFormComponent is composed of the following components:

• AmountHeaderComponent - Amount header component.

Usage

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

amount-form.component.ts

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

@Component({
  standalone: true,
  selector: 'amount-form',
  imports: [BfmAmountFormComponent],
  templateUrl: './amount-form.component.html',
})
export class CustomAmountFormComponent {}

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

amount-form.component.html

<bfm-amount-form
  [activeCoaPk]="'someValue'"
  [amountForm]="formGroup"
  [amountIndex]="currentIndex"
  [companyPk]="'companyPkValue'"
  [enableClassification]="true"
  [enableDeletion]="true"
  [enableSelection]="true"
  [isClientUser]="false"
  [multiple]="false"
  [selected]="false"
  [showViewMoreAmountInfo]="true"
  [showApplyToAllCheckbox]="true"
  [showAmountTitle]="true"
  (applyToAll)="handleApplyToAll($event)"
  (createCompanyRelated)="handleCreateCompanyRelated($event)"
  (deleteAmount)="handleDeleteAmount($event)"
  (editCompanyRelated)="handleEditCompanyRelated($event)"
  (isExpandedChange)="handleIsExpandedChange($event)"
  (selection)="handleSelection($event)"
/>

Inputs

The BfmAmountFormComponent component has the following inputs:

activeCoaPk

Current chart of account identifier.

Type	Default
string	null

amountForm

A form group that contains the amount form.

Type
FormGroup

amountIndex

Current amount index in the list.

Type	Default
number	null

companyPk

Active company identifier.

Type	Default
string	null

enableClassification

User Permissions for staff users.

Type	Default
boolean	true

enableDeletion

Controls whether the deletion is enabled.

Type	Default
boolean	true

enableSelection

Whether amount selection is enabled.

Type	Default
boolean	true

isClientUser

Whether the user is a client.

Type	Default
boolean	false

multiple

Whether multiple amounts are enabled.

Type	Default
boolean	false

selected

Whether current amount is selected.

Type	Default
boolean	false

showViewMoreAmountInfo

Whether to show the view more amount info.

Type	Default
boolean	true

showApplyToAllCheckbox

Whether to show the apply to all checkbox.

Type	Default
boolean	true

showAmountTitle

Whether to show the amount title.

Type	Default
boolean	true

fields

The fields to be displayed in the component.

Type	Default
FinancialRecordAmountFormField[]	[]

Events

The BfmAmountFormComponent component has the following Events:

applyToAll

Dispatches an event when the user applies the amount to all.

Type
EventEmitter

createCompanyRelated

Emits an event when the user creates a company related.

Type
EventEmitter

deleteAmount

Emits an event when the user deletes an amount.

Type
EventEmitter

editCompanyRelated

Emits an event when the user edits a company related.

Type
EventEmitter

isExpandedChange

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

Type
EventEmitter

selection

Emits an event when the user selects an amount.

Type
EventEmitter

Configuration

TOKEN FINANCIAL_RECORD_AMOUNT_FORM_DEFAULT_CONFIGS

To customize the BfmAmountFormComponent, you can inject the FINANCIAL_RECORD_AMOUNT_FORM_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
showViewMoreAmountInfo	Whether to show the view more amount info.	true
showAmountTitle	Whether to show the amount title.	true
showApplyToAllCheckbox	Whether to show the apply to all checkbox.	true
fields	The fields to be displayed in the component.	See above

The FINANCIAL_RECORD_AMOUNT_FORM_DEFAULT_CONFIGS default values are:

{
  "showViewMoreAmountInfo": true,
  "showAmountTitle": true,
  "showApplyToAllCheckbox": true,
  "fields": [
    {
      "key": "amount",
      "editable": true,
      "label": "Valor do lançamento",
      "order": 1,
      "required": true
    },
    {
      "key": "description",
      "editable": true,
      "label": "Nome do lançamento",
      "order": 2,
      "required": false
    },
    {
      "key": "classification",
      "editable": true,
      "label": "Classificação",
      "order": 3,
      "required": true
    },
    {
      "key": "accrualBasis",
      "editable": true,
      "label": "Período de competência",
      "order": 4,
      "required": false
    },
    {
      "key": "accountType",
      "editable": true,
      "label": "Tipo de lançamento",
      "order": 5,
      "required": false
    },
    {
      "key": "costCenter",
      "editable": true,
      "label": "Centro de custos",
      "order": 6,
      "required": false
    },
    {
      "key": "companyRelated",
      "editable": true,
      "label": "Terceiro",
      "order": 7,
      "required": false
    },
    {
      "key": "observation",
      "editable": true,
      "label": "Observações",
      "order": 8,
      "required": false
    }
  ]
}

Example

To customize the BfmAmountFormComponent, you can inject the FINANCIAL_RECORD_AMOUNT_FORM_DEFAULT_CONFIGS token in your module.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_AMOUNT_FORM_DEFAULT_CONFIGS,
      useValue: {
        showViewMoreAmountInfo: false,
        showAmountTitle: false,
        showApplyToAllCheckbox: false,
        fields: [
          {
            key: 'amount',
            editable: true,
            label: 'Valor do lançamento',
            order: 1,
            required: true
          }
        ]
      },
    },
  ],
};