ondevio-rest-list v1.2.1

OndevioRestList

This project was generated with Angular CLI version 7.3.0.

The library list in a table list of items from REST service.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

@Version 1.2.0

This version is compatible with angular 9

How to use

Append dependencies in package.json file (ondevio-translate: set language to table list)

"dependencies": {
    ...
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "ondevio-translate": "^1.0.4",
    "ondevio-rest-list": "^0.0.3",
    ...
  },

Import module library to app.module.ts, import library and append to NgModules imports list

import { OndevioListModule } from 'ondevio-rest-list';

..
@NgModule({
    declarations: [        
       ...
    ],
    imports     : [
       ...
        OndevioListModule,
    ],
    bootstrap   : [
        AppComponent
    ]
})

Import Service to app.component.ts

import { OndevioListService } from 'ondevio-rest-list';
import { OndevioTranslateService } from 'ondevio-translate';
import { locale as es } from './i18n/es';
import { locale as en } from './i18n/en';

 constructor(
    ...
        private _ondevioTranslate: OndevioTranslateService,
        private _ondevioList: OndevioListService
    ) {
        ...
        //See ondevio-translate "How to use" instrunctions for serviceConfig params
        this._ondevioTranslate.setTranslateServiceConfig(serviceConfig);
        let listServiceConfig = {
            apiUrl: 'http://localhost/',
            retry: 3, // Optional value default value 0, Disabled retry options,
            errorUrlRedirect: false //Optional value to set redirection when handleError from http call
        }
        this._ondevioList.setServiceConfig(listServiceConfig);
        ...
    }

Service Params

• apiUrl: Url base for rest services. Rest api sample generated by this apiUrl was:

// get(page, size, type) page=0, size=20, type=invoice
this.apiUrl + '/rest/' + type + '?page=' + page + '&size=' + size
http://localhost/api/rest/invoice?page=0&size=20

//search(query, page, size, type, sort) query=test
this.apiUrl + '/rest/'+type+'/search/all?q=' + query + '&page=' + page + '&size=' + size + '&sort=' + sort
http://localhost/api/rest/invoice?/search/all?q=test&page=0&size=20&sort=id,desc

There are some methods defined in Rest Service:

• get(page, size, type): To get items from service, results can be paged by page param and can select result size element by page.
• getById(id, projection, type): To get a item by item id, use projection to retrieve a specific instance of the object.
• search(query, page, size, type, sort): To search in rest service, it's is used by search option in top of table.
• create(item, type): To set a new item
• update(item, type): To update a item
• delete(id, type): To delete a item by id

Html Params

Append selector <ondevio-list [config]="config" [service]="" [data]="" [customFilterEvent]=""></ondevio-list> in your html component.

• config:

  config = {
    type: 'invoices', //it's used to service call
    item: 'invoice',
    projection: 'invoiceProjection', //To return a specific projection from server
    label: 'Invoices', // It's used to table title
    // filters is an array with filter configuration, change type to render as checkbox or selector
    filters: [{
      type: "checkbox",
      field: 'owner',
      value: false,
      enabled: true,
      label: "Is Owner"
    },
    {
      type: "select",
      field: "sex",
      label: "Sex",
      enabled: true,
      value: null,
      options: [{
        name: "All",
        value: null
      },
      {
        name: "Male",
        value: "M"
      },
      {
        name: "Female",
        value: "F"
      }],
    }],
    // Enable date filters to data list
    dateFilter: [{ 
      enable: true,
      locale: 'es-ES',
      format: 'yyyy-MM-dd', // Format returned date value from filter, default format 'yyyy-MM-dd'
      disableDateInput: false, // Default true,
      field: 'fechaNacimiento',
      label: 'Filtrar fecha nacimiento'
    },
    { // Enable date filter to data list
      enable: true,
      locale: 'es-ES',
      format: 'yyyy-MM-dd', // Format returned date value from filter, default format 'yyyy-MM-dd'
      disableDateInput: false, // Default true,
      field: 'fechaAlta',
      label: 'Filtrar fecha alta colegiado'
    }],
    search: false, // Disable search input
    actions: { //Enable button actions column and defines header cell align
      enable: true, // Enable button actions column
      headerAlign: null, //Defines header cell align,
      customActions: [ //It's possible to append a custom action defined by config and row actions
        {
          subscribe: {
            path: '/subscribe/', //When path exist, service call is fired
            icon: 'email',
            color: red, // color to apply to icon
            target: 'id',
            title: 'Subscribe',
            callback: function (row, error?) { // Callback is fired when service call was ended, error? is send when service call throught error
              console.log("Subscribe " + row[this.target]);
              if (error) {
                console.log(error);
              }
            }
          }
        },
        {
          unsubscribe: {
            path: false, // Witouth path, customCallback will be fired
            icon: 'unsubscribe',
            color: rgba(255, 0, 0 ,.8), // color to apply to icon
            target: 'id',
            title: 'Unsubscribe',
            customCallback: function (event, row) {
              console.log("Custom callback Unsubscribe " + row[this.target]);
            }
          }
        }
      ]
    },
    endpoint: { // http://.../api/rest/invoices/search/invoices-custom
      type: 'rest/invoices', // custom type endpoint
      params: 'invoices-custom' // custom params endpoint
    },
    rowClick: {
      enable: false, // Disable row click
      path: '/custom-path', //Witout finish slash
      target: 'id', //Custom path to rowClick action
      callback: function (event, row) { // Callback function, params event, row
        console.log(`${row[this.config.cellClick.target]} -> ${cell.columnDef}`);
      }
    },
    cellClick: {
      enable: true,
      path: '/custom-path',
      target: 'id',
      callback: function (event, row, cell) { // Callback function, params event, row, cell
        console.log(row[this.config.cellClick.target] + ' -> ' + cell.columnDef);
      }
    },
    addButton: true, //Show button to add new invoice 
    addButtonLink: '/path/', //Show button to add new invoice 
    mockData: false, //If data is provided in component, not for service. Append data variable as [data]="your-data"
    debounceTime: 1000, // Configure debounce Time in ms to search input keyup, default:1000 ms
    sort: {
      disable: false, // Disable order, default true
      active: 'fechaAlta', // Set active order column, get value from columnDef parameter
      direction: 'asc' // Set sort direction
    },  
    columns: [ // Define columns to table according tour received data from rest service. Use params headerAlign, cellAlign, cellClass to format cells. Disable cellClick is available setting true "disableClick" param.
      { columnDef: 'invoiceNumber', header: 'Invoice', headerAlign: "center", cellAlign: "center", cellClass: "ellipsis", arrowPosition: "before",
        disableSort: true, enableClear: true, disableClick: true, cell: (row: any) => `${row.invoiceNumber}` },
      { columnDef: 'subject', header: 'Subject', headerAlign: "center", cellAlign: "center", cell: (row: any) => `${row.subject}` },
      { columnDef: 'date', header: 'Date', headerAlign: "center", cellAlign: "center", cell: (row: any) => `${row.date}` },
      { columnDef: 'total', header: 'Total', headerAlign: "center", cellAlign: "center", cell: (row: any) => this.getTotal(`${row.total}`) }
    ]
  }

  data = [ // Sample of data
    {
      invoiceNumber: '00001',
      subject: 'Factura 1',
      date: '01 / 01 / 2019',
      total: '256,86 €',
      acciones: { // Show buttons if actions are available in config
        editar: true,
        borrar: true
      },
    },
    ...

• service: It's possible to pass your Rest Service Module
• data: It's is possible to use static data, set 'mockData:true' to use them and append data variable as data="your-data" in html
• customFilterEvent: It's a EventEmitter, module has a subscription to reload config.filters and launcH search()

// In Component 
@Output() public customFilterEvent = new EventEmitter<any>();
...
this.customFilterEvent.emit(any);
...

• CSS:
  • Available "headerAlign", "cellAlign" values: left, right, center
  • Available "cellClass" values: ellipsis, nowrap
  • Available "arrowPosition" values: before, after
• Sort data:
  • "disableSort": Disable column sort behaviour, default false.
  • "enableClear": To enable sort clear function, default false.
• customActions: Can create customAction by class

• path: Path to API call. When path exist, service call is fired
• icon: Mat-icon for button
• target: Row property to use
• title: Label for Tooltip
• callback: Callback is fired when service call was ended, error? is send when service call throught error
• customCallback: Is fired when path don't exist or is null, service api call is not fired.

export class customAction {
  path: any;
  icon: string;
  target: string;
  title: string;
  callback: Function;
  customCallback: Function;
  constructor(path: any, icon: string, target: string, title: string, callback: Function, customCallback: Function) {
   ...
  }
}

subscribe: customAction = new customAction(
  '/subscribe/',
  'email',
  'id',
  'Subscribe',
  function (row, error?) {
    console.log("Subscribe " + row[this.target]);
    if (error) {
      console.log(error);
    }
  },
  null
);

subscribe: {
  path: '/subscribe/', //When path exist, service call is fired
  icon: 'email',
  target: 'id',
  title: 'Subscribe',
  callback: function (row, error?) { // Callback is fired whrn service call was ended, error? is send when service call throught error
    console.log("Subscribe " + row[this.target]);
    if (error) {
      console.log(error);
    }
  }
}