Services List

This section describes the BfmServicesListComponent component.

Usage

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

services-list.component.ts

import { BfmServicesListComponent } from '@celerofinancas/ui-charges';

@Component({
  standalone: true,
  selector: 'services-list',
  imports: [BfmServicesListComponent],
  templateUrl: './services-list.component.html',
})
export class ServicesListComponent {}

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

services-list.component.html

<bfm-services-list 
  [headers]="headersData"
  [loading]="loadingState"
  [services]="servicesData"
  (orderBy)="handleOrderBy($event)"
  (reloadServices)="handleReloadServices()"
/>

Inputs

The BfmServicesListComponent component has the following inputs:

headers

Table headers.

Type	Default
{ key: string, label: string, sortable: boolean }[]	[]

Example of headers data:

const headers = [
  {
    key: 'reference',
    label: 'Referência',
    sortable: true,
  },
  {
    key: 'name',
    label: 'Nome',
    sortable: true,
  },
  {
    key: 'unit',
    label: 'Unidade',
    sortable: false,
  },
  {
    key: 'unit_value',
    label: 'Valor unitário',
    sortable: true,
  },
  {
    key: 'enable_button',
    sortable: false,
  },
  {
    key: 'edit',
    sortable: false,
  },
  {
    key: 'quick_actions',
    sortable: false,
  },
];

loading

Loading state.

Type	Default
boolean	false

services

Services data.

Type	Default
OfferedService[]	[]

Events

The BfmServicesListComponent component has the following Events:

orderBy

Event triggered when the user clicks on a table header to order the services.

Type
EventEmitter<string>

reloadServices

Event triggered when the user clicks on the reload button.

Type
EventEmitter<void>