Details

This section describes the BfmFinancialRecordDetailsComponent component.

Composition

The BfmFinancialRecordDetailsComponent has no any composition components.

Usage

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

financial-record-details.component.ts

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

@Component({
  standalone: true,
  selector: 'bfm-financial-record-details',
  imports: [BfmFinancialRecordDetailsComponent],
  templateUrl: './financial-record-details.component.html',
})
export class FinancialRecordDetailsComponent {}

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

financial-record-details.component.html

<bfm-financial-record-details 
  [chargeType]="chargeType"
  [financialRecordPk]="financialRecordPk"
  [showAuthorizationSection]="showAuthorizationSection"
  [showComments]="showComments"
  [showDocuments]="showDocuments"
  [showHistory]="showHistory"
/>

Inputs

The BfmFinancialRecordDetailsComponent component accepts the following inputs:

`chargeType`

Verify if it's from charge list and which type it is.

Type	Default
`ChargeType` enum from `@celerofinancas/state-management`	`null`

`financialRecordPk`

Financial record primary key.

Type	Default
`string`	`''`

`showAuthorizationSection`

Show authorization section.

Type	Default
`boolean`	`false`

`showComments`

Show comments.

Type	Default
`boolean`	`true`

`showDocuments`

Show documents.

Type	Default
`boolean`	`true`

`showHistory`

Show history section.

Type	Default
`boolean`	`true`

`showGotoHistoryButton`

Whether to show the "Ir para histórico" button.

Type	Default
`boolean`	`true`

`showCreateAtTitle`

Whether to show the "Criado por sistema em 01/01/2000" title in the amounts section

Type	Default
`boolean`	`true`

`showEconomicGroupName`

Whether to show the economic group name in the amounts section.

Type	Default
`boolean`	`true`

`showPreviousAmountValue`

Whether to show the previous amount value in the amounts section.

Type	Default
`boolean`	`true`

`showPaymentInfoTitle`

Whether to show the payment info title in the amounts section.

Type	Default
`boolean`	`false`

Configuration

`TOKEN FINANCIAL_RECORD_DETAILS_CONFIGS`

To customize the BfmFinancialRecordDetailsComponent, you can inject the FINANCIAL_RECORD_DETAILS_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
`priorizeAmountDisabling`	This property is used to prioritize the disabling of amounts in the financial record details.	`false`
`showTextCreatedByAndName`	Determines whether to display the "Created By" text and the creator's name.	`true`

The FINANCIAL_RECORD_DETAILS_CONFIGS default values are:

{
  "priorizeAmountDisabling": "false",
  "showTextCreatedByAndName": "true",
}

Example

To customize the BfmFinancialRecordDetailsComponent, you can inject the FINANCIAL_RECORD_DETAILS_CONFIGS token in your module.

app.config.ts
import { ApplicationConfig } from '@angular/core';
import { FINANCIAL_RECORD_DETAILS_CONFIGS } from '@celerofinancas/ui-cash-flow';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_DETAILS_CONFIGS,
      useValue: {
        priorizeAmountDisabling: true,
        showTextCreatedByAndName: true
      },
    },
  ],
};

`TOKEN FINANCIAL_RECORD_VALIDATIONS_CONFIGS`

To customize the BfmFinancialRecordDetailsComponent, you can inject the FINANCIAL_RECORD_VALIDATIONS_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
`disabledPaymentCompany`	Whether the payment company is disabled.	`false`

The FINANCIAL_RECORD_VALIDATIONS_CONFIGS default values are:

{
  "disabledPaymentCompany": "false",
}

Example

To customize the BfmFinancialRecordDetailsComponent, you can inject the FINANCIAL_RECORD_VALIDATIONS_CONFIGS token in your module.

app.config.ts
import { ApplicationConfig } from '@angular/core';
import { FINANCIAL_RECORD_VALIDATIONS_CONFIGS } from '@celerofinancas/ui-cash-flow';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_VALIDATIONS_CONFIGS,
      useValue: {
        disabledPaymentCompany: true,
      },
    },
  ],
};

`TOKEN FINANCIAL_RECORD_DETAILS_DEFAULT_CONFIGS`

To customize the BfmFinancialRecordDetailsComponent, you can inject the FINANCIAL_RECORD_DETAILS_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
`showEconomicGroupName`	Whether to show the economic group name in the amounts section.	`true`
`showCreateAtTitle`	Whether to show the "Criado por sistema em 01/01/2000" title in the amounts section.	`true`
`showPaymentInfoTitle`	Whether to show the payment info title in the amounts section.	`false`
`showAmountsTitleTooltip`	Whether to show the amounts title tooltip.	`true`
`showPreviousAmountValue`	Whether to show the previous amount value in the amounts section.	`true`
`showHiddenAmountsButton`	Whether to show the hidden amounts button.	`true`
`showDocumentsSection`	Whether to show the documents section.	`true`
`showCommentsSection`	Whether to show the comments section.	`true`
`showHistorySection`	Whether to show the history section.	`true`
`showGotoHistoryButton`	Whether to show the "Ir para histórico" button.	`true`
`showRecordNameAutoComplete`	Whether to show the record name autocomplete.	`true`
`showCopyLinkButton`	Whether to show the copy link button.	`true`
`statusIconPosition`	Position of the status icon. Can be 'payment-info' or 'amounts'.	`'payment-info'`
`priorizeAmountDisabling`	Whether to prioritize disabling the amount field	`false`
`textPaymentInfoTitle`	Title for the payment information section.	`'Informações do lançamento'`
`showTextCreatedByAndName`	Whether to show text in the "Created by" section title and include the creator's name	`true`
`showAmountCount`	Whether to show the amount count in the financial record details	`true`

The FINANCIAL_RECORD_DETAILS_DEFAULT_CONFIGS default values are:

{
  "showEconomicGroupName": "true",
  "showCreateAtTitle": "true",
  "showPaymentInfoTitle": "false",
  "showAmountsTitleTooltip": "true",
  "showPreviousAmountValue": "true",
  "showHiddenAmountsButton": "true",
  "showDocumentsSection": "true",
  "showCommentsSection": "true",
  "showHistorySection": "true",
  "showGotoHistoryButton": "true",
  "showRecordNameAutoComplete": "true",
  "showCopyLinkButton": "true",
  "statusIconPosition": "'payment-info'",
  "priorizeAmountDisabling": "false",
  "textPaymentInfoTitle": "'Informações do lançamento'",
  "showTextCreatedByAndName": "true",
  "showAmountCount": "true",
}

Example

To customize the BfmFinancialRecordDetailsComponent, you can inject the FINANCIAL_RECORD_DETAILS_DEFAULT_CONFIGS token in your module.

app.config.ts
import { ApplicationConfig } from '@angular/core';

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: FINANCIAL_RECORD_DETAILS_DEFAULT_CONFIGS,
      useValue: {
        showEconomicGroupName: false,
        showCreateAtTitle: false,
        showPaymentInfoTitle: true,
        showAmountsTitleTooltip: false,
        showPreviousAmountValue: false,
        showHiddenAmountsButton: false,
        showDocumentsSection: false,
        showCommentsSection: false,
        showHistorySection: false,
        showGotoHistoryButton: false,
        showRecordNameAutoComplete: false,
        showCopyLinkButton: false,
        statusIconPosition: 'header',
        priorizeAmountDisabling: true,
        textPaymentInfoTitle: 'Informações do lançamento',
        showTextCreatedByAndName: false,
        showAmountCount: false,
      },
    },
  ],
};

`FINANCIAL_RECORD_STATUS_TOKEN`

The FINANCIAL_RECORD_STATUS_TOKEN is an Angular injection token that allows you to provide a custom implementation for handling financial record status logic in your application.

`FinancialRecordStatusInterface`

This interface defines the contract for status handling:

Method	Description
`getName(index: FINANCIAL_RECORD_STATUS): string`	Returns the display name for a given status.
`getCodeName(index: FINANCIAL_RECORD_STATUS): string`	Returns the code name for a given status.
`getIcon(index: FINANCIAL_RECORD_STATUS): string`	Returns the icon name for a given status.
`statusList(financialRecord: any): FINANCIAL_RECORD_STATUS[]`	Returns a list of statuses for a financial record.
`typesList(): string[]`	Returns a list of status types.

Usage

To provide a custom implementation, use the token in your module or component providers:

import { FINANCIAL_RECORD_STATUS_TOKEN } from '@celerofinancas/ui-cash-flow';
import { Status } from './status';

providers: [
  {
    provide: FINANCIAL_RECORD_STATUS_TOKEN,
    useClass: Status,
  }
]

Example Implementation

Below is an example of a class (Status) that implements the FinancialRecordStatusInterface.
This class uses the enums and maps from status.ts to provide logic for status display, icons, and lists.

status.ts
import { FINANCIAL_RECORD_STATUS } from '@celerofinancas/core-ts';
import { FinancialRecordStatusInterface } from './status.token';
import { financialRecordStatusOptions, financialRecordStatusIcons } from './status.types';

export class Status implements FinancialRecordStatusInterface {
  /** Returns the human-readable name for a status */
  public getName(index: FINANCIAL_RECORD_STATUS): string {
    return financialRecordStatusOptions.get(index);
  }

  /** Returns the code name for a status */
  public getCodeName(index: FINANCIAL_RECORD_STATUS): string {
    return FINANCIAL_RECORD_STATUS[index];
  }

  /** Returns the icon name for a status */
  public getIcon(index: FINANCIAL_RECORD_STATUS): string {
    return financialRecordStatusIcons.get(index);
  }

  /** Returns a list of statuses for a financial record */
  public statusList(financialRecord: any): FINANCIAL_RECORD_STATUS[] {
    const list = [];

    if (financialRecord.scheduled_at) {
      list.push(FINANCIAL_RECORD_STATUS.scheduled);
    }
    if (financialRecord.documents_count > 0) {
      list.push(FINANCIAL_RECORD_STATUS.document);
    }
    if (financialRecord.is_late_paid) {
      list.push(FINANCIAL_RECORD_STATUS.late_paid);
    }
    if (financialRecord.is_late) {
      list.push(FINANCIAL_RECORD_STATUS.late_not_paid);
    }
    if (financialRecord.is_pending) {
      list.push(FINANCIAL_RECORD_STATUS.pending);
    }
    if (financialRecord.paid_at) {
      list.push(FINANCIAL_RECORD_STATUS.done);
    }
    if (financialRecord.is_review) {
      list.push(FINANCIAL_RECORD_STATUS.is_review);
    }
    if (financialRecord.is_partially_classified) {
      list.push(FINANCIAL_RECORD_STATUS.is_partially_classified);
    }

    return this.orderListByIconColor(list);
  }

  /** Orders the status list by icon color */
  private orderListByIconColor(list: FINANCIAL_RECORD_STATUS[]): FINANCIAL_RECORD_STATUS[] {
    const coloredStatus = [];
    const notColoredStatus = [];
    list.forEach((status) =>
      financialRecordStatusIcons.get(status).includes('c-icon-medium')
        ? notColoredStatus.push(status)
        : coloredStatus.push(status),
    );
    return [...notColoredStatus, ...coloredStatus];
  }

  /** Returns a list of status types (document types) */
  public typesList({ document_types }: any): string[] {
    const list: string[] = [];
    if (document_types) {
      document_types.forEach((code) => list.push(documentTypesOptions.get(code)));
    }
    return list;
  }
}

and the types files you can create for the status management:

status.types.ts
/**
 * Financial record status enum
 */
export enum FINANCIAL_RECORD_STATUS {
  other                   = 0,
  scheduled               = 1,
  document                = 2,
  not_document            = 3,
  late_paid               = 4,
  late_not_paid           = 5,
  pending                 = 6,
  done                    = 7,
  not_done                = 8,
  is_review               = 9,
  is_partially_classified = 10,
}

/**
 * Financial record status map options
 */
export const financialRecordStatusOptions = new Map([
  [FINANCIAL_RECORD_STATUS.other,                    'Outro'                      ],
  [FINANCIAL_RECORD_STATUS.scheduled,                'Agendado'                   ],
  [FINANCIAL_RECORD_STATUS.document,                 'Possui Documento'           ],
  [FINANCIAL_RECORD_STATUS.not_document,             'Sem documento'              ],
  [FINANCIAL_RECORD_STATUS.late_paid,                'Atrasado Pago'              ],
  [FINANCIAL_RECORD_STATUS.late_not_paid,            'Atrasado não Pago'          ],
  [FINANCIAL_RECORD_STATUS.pending,                  'Pendente'                   ],
  [FINANCIAL_RECORD_STATUS.done,                     'Realizado'                  ],
  [FINANCIAL_RECORD_STATUS.not_done,                 'Não realizado'              ],
  [FINANCIAL_RECORD_STATUS.is_review,                'Em análise'                 ],
  [FINANCIAL_RECORD_STATUS.is_partially_classified,  'Classificado Parcialmente'  ],
]);

/**
 * A map to financial record status on font icon
 */
export const financialRecordStatusIcons = new Map([
  [FINANCIAL_RECORD_STATUS.scheduled,                'cds-icon-calendar-circle c-icon-medium'    ],
  [FINANCIAL_RECORD_STATUS.document,                 'cds-icon-document-circle c-icon-medium'    ],
  [FINANCIAL_RECORD_STATUS.late_paid,                'cds-icon-late-circle c-icon-medium'        ],
  [FINANCIAL_RECORD_STATUS.late_not_paid,            'cds-icon-info-circle c-danger-500'         ],
  [FINANCIAL_RECORD_STATUS.pending,                  'cds-icon-filled-question c-warn-500'       ],
  [FINANCIAL_RECORD_STATUS.done,                     'cds-icon-filled-check c-success'           ],
  [FINANCIAL_RECORD_STATUS.is_review,                'cds-icon-filled-question c-secondary-300'  ],
  [FINANCIAL_RECORD_STATUS.is_partially_classified,  'cds-icon-classified-circle c-icon-medium'  ],
]);

Composition​

Usage​

Inputs​

chargeType​

financialRecordPk​

showAuthorizationSection​

showComments​

showDocuments​

showHistory​

showGotoHistoryButton​

showCreateAtTitle​

showEconomicGroupName​

showPreviousAmountValue​

showPaymentInfoTitle​

Configuration​

TOKEN FINANCIAL_RECORD_DETAILS_CONFIGS​

Properties​

Example​

TOKEN FINANCIAL_RECORD_VALIDATIONS_CONFIGS​

Properties​

Example​

TOKEN FINANCIAL_RECORD_DETAILS_DEFAULT_CONFIGS​

Properties​

Example​

FINANCIAL_RECORD_STATUS_TOKEN​

FinancialRecordStatusInterface​

Usage​

Example Implementation​

Composition

Usage

Inputs

`chargeType`

`financialRecordPk`

`showAuthorizationSection`

`showComments`

`showDocuments`

`showHistory`

`showGotoHistoryButton`

`showCreateAtTitle`

`showEconomicGroupName`

`showPreviousAmountValue`

`showPaymentInfoTitle`

Configuration

`TOKEN FINANCIAL_RECORD_DETAILS_CONFIGS`

Properties

Example

`TOKEN FINANCIAL_RECORD_VALIDATIONS_CONFIGS`

Properties

Example

`TOKEN FINANCIAL_RECORD_DETAILS_DEFAULT_CONFIGS`

Properties

Example

`FINANCIAL_RECORD_STATUS_TOKEN`

`FinancialRecordStatusInterface`

Usage

Example Implementation