Skip to main content

Approval Flow Component

This section describes the BfmApprovalFlowComponent component.

Composition​

The BfmApprovalFlowComponent is composed of the following components:

Usage​

You can import the BfmApprovalFlowComponent directly in your route configuration.

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

const routes = [
{
path: 'approval-flow',
component: BfmApprovalFlowComponent,
},
];

But if you need more customization, you need to import it in your module and use it in your template.

approval-flow.component.ts
import { BfmApprovalFlowComponent } from '@celerofinancas/ui-cash-flow';

@Component({
standalone: true,
selector: 'approval-flow',
imports: [BfmApprovalFlowComponent],
templateUrl: './approval-flow.component.html',
})
export class ApprovalFlowComponent {}

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

approval-flow.component.html
<bfm-approval-flow 
[displayedColumns]="['sent_by', 'due_at', 'name', 'bank', 'value', 'status']"
[mainScrollPercent]="25"
[popoverFilterText]="'Filtrar'"
[popoverFilterTitle]="'Filtre por um período'"
(changeParams)="handleChangeParams($event)"
(popoverClose)="handlePopoverClose($event)"
/>

Inputs​

The BfmApprovalFlowComponent component has the following inputs:

displayedColumns​

Displayed Columns

TypeDefault
string[]['sent_by', 'due_at', 'name', 'bank', 'value', 'status']

mainScrollPercent​

Main scroll percent for the approval flow screen

TypeDefault
number25

popoverFilterText​

Popover filter text for the approval flow screen

TypeDefault
string'Filtrar'

popoverFilterTitle​

Popover filter title text for the approval flow screen

TypeDefault
string'Filtre por um período'

Events​

The BfmApprovalFlowComponent component has the following Events:

changeParams​

Change period event emitter for the approval flow screen

Type
EventEmitter

popoverClose​

Popover close event emitter for the approval flow screen

Type
EventEmitter