List Component

This section describes the BfmChargeListComponent component.

Usage

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

charge-list.component.ts

import { BfmChargeListComponent } from "@celerofinancas/ui-charges";

@Component({
  standalone: true,
  selector: "charge-list",
  imports: [BfmChargeListComponent],
  templateUrl: "./charge-list.component.html",
})
export class ChargeListComponent {}

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

charge-list.component.html

<bfm-charge-list
  [charges]="charges"
  [detailsType]="detailsType"
  [listType]="listType"
  [tableColumns]="tableColumns"
  (sortBy)="handleSortBy($event)"
  (updateDetail)="handleUpdateDetail($event)"
/>

Inputs

The BfmChargeListComponent component has the following inputs:

charges

Charges to be listed

Type	Default
Charge.List.Item[]	[]

detailsType

Charge list details type

Type	Default
CHARGE_LIST_TYPE	null

listType

Charge list type

Type	Default
CHARGE_LIST_TYPE	CHARGE_LIST_TYPE.charges

tableColumns

Charge List Table Columns

Type
ChargeListColumn[]

Default value:

[
  {
    label: "Status",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.status,
  },
  {
    label: "Cliente",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.client,
  },
  {
    label: "Emissão",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.emit_at,
  },
  {
    label: "Vencimento",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.due_at,
  },
  {
    label: "Pagamento",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.paid_at,
  },
  {
    label: "Método de pagamento",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.payment_method,
  },
  {
    label: "Recebimento",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.charge_recurrence,
  },
  {
    label: "E-mail",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.email,
  },
  {
    label: "Valor",
    columnEnum: CHARGE_LIST_TABLE_COLUMN.value,
  },
];

Events

The BfmChargeListComponent component has the following Events:

sortBy

Emits sorting params when a column is selected

Type
EventEmitter

updateDetail

Update charge list details and total value

Type
EventEmitter

Configuration

To customize the BfmChargeListComponent, you can inject the CHARGE_LIST_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
keychain	Keychain used for authentication.	null
integrationsLoading$	Observable indicating the loading state of integrations.	new BehaviorSubject(false)

The CHARGE_LIST_CONFIGS default values are:

{
  keychain: null,
  integrationsLoading$: new BehaviorSubject(false),
}

Example

To customize the BfmChargeListComponent, you can inject the CHARGE_LIST_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { ChargeListService } from "./charge-list.service";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CHARGE_LIST_CONFIGS,
      useClass: ChargeListService
    },
  ],
};

charge-list.service.ts

import { ApplicationConfig } from "@angular/core";
import { YourCustomService } from './your-custom-service';
import { KEYCHAINS } from '@celerofinancas/core-ts';
import { KeychainState } from '@celerofinancas/state-management';

@Injectable({
  providedIn: 'root',
})
export class ChargeListService {
 
 @Select(KeychainState.getCombinedLoading([KEYCHAINS.yourKeychain]))
  public integrationsLoading$: Observable<boolean>;

  public keychain = KEYCHAINS.key;

 }