Neoprospecta DataBox

Data table with REST implementation.

##Parameters

|Attribute |Type |Default |function | |--- |--- |--- |--- | |title |string |undefined |The table title| |title-size |number |undefined |The size of the table title h1, h2, h3, h4, h5, h6 or p| |columns |DataBoxColumn[] |[ ] |Columns list configuration. See the Columns section.| |actions |any |[ ] |Actions to be used in each row. See the Actions section.| |data |any |[ ] |The data to be shown in the table. Can be an array of objects or a REST Api address as: myapi.com/articles| |stripped |boolean |true |Stripped table| |condensed |boolean |false |Turn the lines compact| |hover |boolean |true |Hover the line when the mouse is over| |searchable |boolean |true |Defines if the table should be searchable or not| |selectable |boolean |true |Defines if the rows should be selectable or not| |model |any |undefined |The models to be used to add new items| |max-rows |number |undefined |The max number of rows in a page. If not defined, pagination wont be done | |tips |boolean |true |Defines if the tips button and div should be included | |counter |boolean |true |Defines if the counter should be included | |auto-save |boolean |false |Defines if the changes should be automaticaly saved | |http-service |any |undefined |The service used to send and get data from backend | |track-by |string |index |Defines the field to be used in track by function in for loop | |insert |boolean | Function |false |Defines if the insert button should be displayed or not. It receives a boolean or a function that returns an Observable. | |insert-position |string |'start' |Defines where a new item should be placed. Options are 'start' and 'end' | |on-pagination |Function |undefined | Function to be called when pagination arrow is clicked.| |totalItems |number |filteredList.length | The total of items to be paginated.| |currentPage |number |undefined | The current page of paginated list.| |amountPerPage |number |undefined | Amount of items per page. |

##Events

|Event |function | |--- |--- | |change |Event fired when some data change inside the table|

##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:

|Parameter |type |Default |function | |--- |--- |--- |--- | |attr |string | Function |undefined |Object attribute to be shown in the column |attr2 |string | Function |undefined |Sub object attribute to be shown in the column |arrayAttr |string | Function |undefined |Used to define the label of items in a given array. |header |string |undefined |The header of the column |options |Array<{id: string, label: string}> |[] |The options to be used in columns of type 'option' |sort |boolean = true |undefined |If should sort the column |search |boolean = true |undefined |If should include the the column in the search |align |string | 'left' |Where the content should be aligned. Options are: 'left' | 'center' | 'right' |fitText |boolean = false |undefined |If true, the width of the table will be equal que text contained in it |tooltip |string |undefined |Text to be shown when the mouse is over the header |maxLength |number |undefined |Max length of the content in the cell. The rest is shown by a tooltip |editable |boolean = false |undefined |Allow object edition directly in the table |selectable |boolean = false |undefined |Allow object edition directly in the table |type |string |'text' |The type pf the data that will be displayed. Options are: 'text' | 'number' | 'date' | 'date-time' | 'boolean' | 'array' | 'currency' | 'option' | 'text-icon' |actions |array |[] |Used when type column is 'actions'. |dateFormat |string |undefined |In case of date or date-time tipe, the format should be passed |currencyLocation |string |'USD' |Used to set the currency location. Some other options 'EUR', 'BRL'... |max |number |undefined |Defines the maximum number value of a number type input |min |number |undefined |Defines the minimum number value of a number type input |fontIcon |string | Function |undefined |Defines the icon used when column is 'text-icon' |colorIcon |string | Function |'black' |Defines the color of icon when column is 'text-icon' |disable |boolean | Function |false |Defines if the option cell column "" will be disabled

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:

|Parameter |Type |Default |function | |--- |--- |--- |--- | |title |string |undefined |Defines the title of the action| |action |string | function |undefined |Can be a string that triggers a built-in action like 'delete' or 'add' or a custom function that receives the object as parameter | |icon |string |undefined |The icon to be used. Ex: fa-trash | |color |string |undefined |The color of the icon. Oprions are primary | accent | warn | |hide |boolean | function |false |Defines if action should be hide or not |

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:

|Parameter |Type |Default |function | |--- |--- |--- |--- | |title |string |undefined |Defines the title of the action | |action |string | function |undefined |Can be a string 'menu' that built a menu or a custom function that receives the object as parameter | |options |array |[] |Defines an array of object functions to show inside of menu | |icon |string |undefined |The icon to be used. Ex: fa-trash | |color |string |undefined |The color of the icon. Oprions are primary | accent | warn |

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.