recon

Dependencies

• PrimeNG
• Lodash
• NGX Bootstrap

Installation

To install this library, run:

$ npm install recon-components --save

Consuming the library

You can import the library in any Angular application by running:

$ npm install recon-components

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { ReconModule } from 'recon-components';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify the library as an import
    ReconModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use the library component in app.component.html -->
<recon-grid [allowSearch]=false
            [customCls]="customCls"
            [columnConfig]="columnConfig"
            [gridData]="gridData"
            [editable]=true
            [addOnFooter]=true
            [disableAddNew]=true
            [disableAddButton]=true
            [checkAddForm]=true
            [newRecord]="newRecord"
            (actionHandler)="actionHandler($event)"></recon-grid>

Properties

• allowSearch: boolean => True if you want search form. (Default: false)
• customCls: string => Custom class for the grid.
• columnConfig: ReconGridColumnModel[] => Columns configuration, how each columns is going to behave.
• gridData: any => Store of data that is going to be displayed in the table. (gridData._data is taken)
• editable: boolean => True if you want to edit the current column. (Default: false)
• addOnFooter: boolean => True if you want to have add form in the bottom of the table. (Default: false)
• disableAddNew: boolean => True if you want to disable the add form. (Default: false)
• disableAddButton: boolean => True if you want to disable the add button. (Default: false)
• checkAddForm: boolean => True if you want to have change event on input in add form. (Default: false)
• newRecord: any => Simple record to have as template for the new one to be added.

Events

• actionHandler => Event response to every action. (click, keyup,...)

Column Config

ReconGridColumnModel: {
    // id used for sorting the table (Default: '')
    id: string;
    // title of the column in the table and used as placeholder of add form (Default: '')
    title: string;
    // icon from font-awesome for header or body of the table (Default: null)
    icon: string;
    // True if the column is sortable (Default: true)
    sortable: boolean;
    // True if the column is the default sorting column (Default: false)
    defaultSort: boolean;
    // Direction of the sorting - asc for ascending direction and desc for descending direction (Default: 'asc')
    sortDirection: string;
    // True if the column is included in the search filter (Default: true)
    filterable: boolean;
    // True if the column has actionColumn Class (Default: false)
    actionColumn: boolean;
    // Custom class applied to the table (Default: '')
    customCls: string;
    // Field to be filtered (Default: data: null)
    filter: Object = {
        data: null
    };
    // Column content config
    content: Object = {
        // Type of column (Default: 'text')
        type: 'text',
        // Field of the array containing data (Default: '')
        data: '',
        // Custom function to transform data (Default: null) TODO
        dataFn: null,

        // Custom config for special columns
        customConfig: {
            // Text used in button column (Default: '')
            text: '',
            // Custom action code identifying the action propagated (Default: '')
            action: '',
            // Custom parameter used to show commaSeparatedReference column (Default: '')
            wildcard: '',
            // Reference store from where data is taken (Default: {})
            referenceStore: {},
            // Reference store field that is used to find a record (Default: '')
            referenceField: '',
            // Reference store field displayed (Default: '')
            displayProperty: '',
            // True if special event is propagated (Default: false)
            eventEmit: false,
            // True if column is hidden (Default: true)
            isShowed: true,
            // Custom search config
            customSearch: {
                // True if custom search is used (Default: false)
                isCustomSearch: false,
                // Reference field to search (Default: '')
                referenceSearchField: ''
            },
            all: '',
            activeState: '',
            // Options in selector type column
            options: []
        }
    };
    // True if the column can be edited (Default: false)
    editable: boolean = false;
    // Edition config
    editor: Object = {
        // Column type when in editing mode
        type: 'text',
        text: '',
        // Action to perform when finishing edition
        action: '',
        // Options in selector type column
        options: [],
        // Add form config
        add: {
            type: null,
            text: null,
            action: null
        }
    };
    constructor(id: string, config: Object);
}

License

MIT © Fernando