npm package: @jvlsoft/ngx-generic-list
Description: `ngx-generic-list` is a library that works with Angular 16 and Bootstrap 5 to generate paginated lists of items with support for sorting and filters.
Latest version: 1.3.1

# NgxGenericList

`ngx-generic-list` is a library that works with Angular 16 and Bootstrap 5 to generate paginated lists of items with support for sorting and filters.

## Installation

To install the library, run:

```bash
yarn add @jvlsoft/ngx-generic-list @ng-bootstrap/ng-bootstrap bootstrap bootstrap-icons @jvlsoft/ngx-dynamic-form
```

Then add the following styles:

```scss
@import "@jvlsoft/ngx-generic-list/styles/styles.scss";
@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";
```

## Usage

Here's a basic example of how to use the library in your Angular project:

```typescript
import { GenericListComponent, TableContainerComponent, PaginatorTable, SortableHeader } from '@jvlsoft/ngx-generic-list';

@NgModule({
  imports: [
    GenericListComponent,
    TableContainerComponent,
    SortableHeader,
    PaginatorTable,
    // other imports
  ],
})
export class AppModule { }
```

In your component:

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-generic-lis',
  template: `
    <table-container 
        [isLoadingResults]="isLoadingResults" 
        [resultLenght]="dataSource.collectionSize" 
        [title]="title"
        [itemForm]="itemForm">
        <ng-container filters>
            <ng-container *ngFor="let field of config" [config]="field" [group]="itemForm" dynamicField></ng-container>
        </ng-container>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col" sortable="name">Name</th>
                    <!-- ...other headers -->
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of dataSource.data">
                    <td scope="col">{{ user.id }}</td>
                    <td scope="col">{{ user.name }}</td>
                    <!-- ...other columns --> 
                </tr>
            </tbody>
        </table>
        <app-paginator-table [collectionSize]="dataSource.collectionSize"></app-paginator-table>
    </table-container>
    `    
})
export class AppComponent extends GenericListComponent<User> {
  config: IFieldConfig[] = [
    // Dynamic fields for filtering
  ]
  constructor (private service: userService) {
    super();
    this.title = 'Users';
    this.singularTitle = 'this user';
    this.service = this.userService;
    this.defaultSort = 'name:asc';
    this.attributeField = 'id, name';
    this.fieldsFormSearch = { search: [null] };
  }
}
```

## API 

### GenericListComponent<T> 

| **Attribute**         | **Type**                     | **Description**                              |
|-----------------------|------------------------------|----------------------------------------------|
| `headers`             |`QueryList<SortableHeader<T>>`| Collection of sortable headers for the list. |
| `paginator`           | `PaginatorTable`             | Reference to the paginator component for pagination controls.                                   |
| `destroy$`              | `Subject<void>`              | Subject used for managing the lifecycle and cleanup of subscriptions.                           |
| `sortChange`            | `EventEmitter`               | Emits events when sorting changes occur.                                                        |
| `searchEmitter`         | `EventEmitter`               | Triggers an event to load the data source when emitting data.                                   |
| `title`                 | `string`                     | Title for the card of the list view.                                                            |
| `singularTitle`         | `string`                     | Model name string for display in delete confirmation modal.                                      |
| `deleteMessage`         | `string`                     | Message displayed in the delete confirmation modal.                                             |
| `pageSizeOptions`       | `number[]`                   | Array of pagination options available for selection.                                            |
| `attributeField`        | `string`                     | Attributes of the model to include in the response.                                             |
| `includeField`          | `string`                     | Relations of the model to include in the query (e.g., 'Area, Municipality, Phones').           |
| `dataSource`            | `IDataSource<T>`             | Data source supporting client-side data array with filtering, sorting, and pagination.          |
| `itemForm`              | `FormGroup`                  | Form group containing fields for filters (e.g., inputs, NgSelects).                           |
| `fieldsFormSearch`      | `any`                        | Fields for search functionality (e.g., inputs, NgSelects).                                    |
| `defaultSort`           | `string?`                    | Default sorting option to add to the query.                                                    |
| `defaultFilter`         | `any`                        | Default filters to apply to the query.                                                          |
| `editUrl`               | `string`                     | Path to the edit form component.                                                                 |
| `isLoadingResults`      | `boolean`                    | Indicates whether data is currently being loaded.                                               |
| `method`                | `Observable<IPaginationResult<T>>`  | Observable method used to fetch paginated results.                                              |
| `service`               | `IFieldService<T>`           | Service interface used for data operations related to the model type T.                         |


### IDataSource<T>
| Attribute         | Type    | Description                                         |
|-------------------|---------|-----------------------------------------------------|
| `data`            | `T[]`   | Array that contains the elements to show.           |
| `page`            | `number`| Actual page in the pagination.                      |
| `pageSize`        | `number`| Number of elements in a page.                       |
| `collectionSize`  | `number`| Number of elements in the api response.             |

### IPaginationResult<T>
| Attribute | Type    | Description                                                                 |
|-----------|---------|-----------------------------------------------------------------------------|
| `count`   | `number`| Number of element in the api response.                                      |
| `skip`    | `number`| Number of items to skip.                                                    |
| `limit`   | `number`| Maximum number of items that can be displayed per page.                     |
| `pages`   | `number`| Total number of pages available based on the total number of items and the  |
limit per page.                                                             |
| `rows`    | `T[]`   | Array that contains the elements to show.                                   |

### ISortEvent<T>
| Attribute   | Type               | Description                                           |
|-------------|--------------------|-------------------------------------------------------|
| `column`    | `keyof T`          | Attribute of the object by which it will be sorted.   |
| `direction` | `'asc' or 'desc'`  | Ditection to sort.                                    |