Uploads

This section describes the BfmUploadsComponent component.

Composition

The BfmUploadsComponent is composed of the following components:

• BfmUploadFiltersComponent - The filters component that allows the user to filter the files by type.
• BfmUploadsListComponent - The list component that displays the files uploaded by the user.

Usage

You can import the BfmUploadsComponent directly in your route configuration.

app-routing.module.ts

import { BfmUploadsComponent } from "@celerofinancas/ui-files";

const routes: Routes[] = [
  {
    path: "financial-record/uploads",
    component: BfmUploadsComponent,
  },
  {
    path: "documents/uploads",
    component: BfmUploadsComponent,
  },
];

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

uploads.component.ts

import { BfmUploadsComponent } from "@celerofinancas/ui-files";

@Component({
  standalone: true,
  selector: "bfm-uploads",
  imports: [BfmUploadsComponent],
  templateUrl: "./uploads.component.html",
})
export class UploadsComponent {}

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

uploads.component.html

<bfm-uploads
  [headerTitle]="headerTitleValue"
  [headerSubtitle]="headerSubtitleValue"
  [documentNameColumn]="documentNameColumnValue"
  [registryNameColumn]="registryNameColumnValue"
  [sendByColumn]="sendByColumnValue"
  [sendAtColumn]="sendAtColumnValue"
  [statusColumn]="statusColumnValue"
/>

Inputs

The BfmUploadsComponent component has no inputs.

headerTitle

A title displayed at the top of the uploads component.

Type	Default
headerTitle	Meus uploads

headerSubtitle

A subtitle displayed below the title of the uploads component.

Type	Default
string	Consulte todos os arquivos enviados da empresa.

documentNameColumn

The name of the document displayed in the uploads component.

Type	Default
string	Nome do documento

registryNameColumn

The name of the registry displayed in the uploads component.

Type	Default
string	'Nome do registro

sendByColumn

The name of the person who sent the document.

Type	Default
string	Enviado por

sendAtColumn

The date and time when the document was sent.

Type	Default
string	Enviado em

statusColumn

The status of the document in the uploads component.

Type	Default
string	Status

Events

The BfmUploadsComponent component has no events.

Configuration

To customize the BfmUploadsComponent, you can inject the UPLOADS_LIST_CONFIG 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
displayUploadContainer	Determines if the upload container is displayed.	false

The UPLOADS_LIST_CONFIG default values are:

{
  "displayUploadContainer": "false",
}

Example

To customize the BfmUploadsComponent, you can inject the UPLOADS_LIST_CONFIG token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { UPLOADS_LIST_CONFIG } from '@celerofinancas/ui-files';

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