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.