@neoprospecta/angular-data-box v4.1.3

Neoprospecta DataBox

Data table with REST implementation.

##Parameters

##Events

##Usage

####Load the DataBox Module in your module

import { DataBoxModule } from '@neoprospecta/angular-data-box';
...
@NgModule({
  imports: [
    ...
    DataBoxModule,
    ...
  ]
  ...
})
...

####Configure the columns of your DataBox in the component that uses it The column object have many parameters to be configured:

app.component.ts

// Import the colum model
import { DataBoxColumn } from '@neoprospecta/angular-data-box';
...
export class AppListComponent {
...
    columns = [
        new DataBoxColumn({header: 'Code', attr: 'id', sort: true, align: 'left', tooltip: 'Person code'}),
        new DataBoxColumn({header: 'Name', attr: 'name', sort: true, align: 'left', tooltip: 'Person name'}),
        new DataBoxColumn({header: 'More than 18?', attr: (app) => app.age >= 18 ? true : false, type: 'boolean', editable: true, sort: true, align: 'left', tooltip: 'Detects if person have more than 18 years'}),
    ];
...
}

####Configure the actions of your DataBox in the component that uses it (FIXED COLUMN AT THE END)

The action object have 4 parameters to be configured:

app.component.ts

export class AppComponent {
...
    gotoDetail = () => {
        ...
    }

    actions = [
        {title: 'Excluir oportunidade', action: 'delete', icon: 'fa-trash', color: 'warn'},
        {title: 'Abrir', action: this.gotoDetail, icon: 'fa-external-link', color: 'primary'},
    ]
...

#####Built-in actions

• delete: removes a reccord from the table
• add: create a new reccord and add it in the table

#####New feature: Create a custom actions column

The action object have 5 parameters to be configured:

app.component.ts

functionMenuOption1 = (obj) => {
    console.log('Teste para abrir functionMenuOption1.');
}

functionMenuOption2 = (obj) => {
    console.log('Teste para abrir functionMenuOption2.');
}

export class AppComponent {
...

    actionsColumn = [
        { title: 'Teste menu', action: 'menu', options: [{name: 'option 1', function: this.functionMenuOption1}, {name: 'option 2', function: this.functionMenuOption2}],  color: 'primary' },
        { title: 'Abrir notificações', action: this.openNotifications,  color: 'primary' },
        { title: 'Abrir mensagens', action: this.openMessages, icon: 'fa-comments', color: 'primary' }
    ];

...

    columns = [
        new DataBoxColumn({ header: 'Notificações', type: 'actions', actions: this.actionsColumn, align: 'left', tooltip: 'Notificações, alertas, mensagens, etc' }),
        ...
    ];
...

####Place the DataBox in your component HTML app.component.html

<data-box
    [columns]="columns"
    [actions]="actions"
    [http-service]="myService" // REST OPERATIONS. See Add data to your DataBox section
    [data]="myList" // LOCAL DATA - NO HTTP CALLS. See Add data to your DataBox section
    track-by="id"
></data-box>

####Add data to your DataBox You have two ways of adding data to your DataBox. The options are local and remote.

1 - To load LOCAL DATA, use the [data] attribute in your html component tag and pass an array of objects that shuold be displayed in the table.

app.component.ts

export class AppListComponent {

    ...
    myList = [
        {id: 1, name: 'Andreas', age: 32},
        {id: 2, label: 'Helio', age: 19},
        {id: 4, label: 'Maria', age: 14},
        {id: 5, label: 'Karl', age: 24},
    ]
    ...

app.component.html

<data-box
    ...
    [data]="myList"
    ...
></data-box>

2 - To load REMOTE DATA, use the [http-service] attribute in your html component tag and pass a service that must have the crud operations (filter, get, save, delete) implemented so the DataBox component can interate with each reccord in the table using this service that you have total control and can make any custom configuration.

app.service.ts

export class myService {
    ...
    app: BehaviorSubject<Array<App>>;

    filter = (filter: URLSearchParams) => {
        this.http.get('app endpoint', filter).then(app => this.app.next(app));
        return this.app;
    }

    delete(app: App) {
        return this.http.delete('app endpoint', app);
    }

    save(app: App): Promise<App>  {
        return this.http.post('app endpoint', app);
    }
}

app.component.html

<data-box
    ...
    [http-service]="myService"
    ...
></data-box>

##Todo

• Remove edit from table and place it inside a modal to remove unnecessary watchers and a bunch of input components.