Model

What is a model

Model is a class that represent a type of data object in your app. For consistency, each model should refer to a table in database design.

Here is an example:

import {Model} from 'react3l-common';
import {Field, MomentField} from 'react3l-decorators';

class User extends Model {
  @Field(String)
  public id?: string;
  
  @Field(String)
  public firstName?: string;
  
  @Field(String)
  public lastName?: string;
  
  @Field(String)
  public email?: string;
  
  @MomentField()
  public birthday?: Moment;
}
  

Error reporting

Data standardization

Decorators are used to standardize data type to avoid type mismatch on runtime assignment or map raw JSON data from back-end API to app's defined models.

There is 5 types of decorators:

Field

For primitive types: String, Number, Boolean.

Field requires one argument that is prototype function of the data type

List

For primitive list types: String[], Number[], Boolean[]

List requires one argument that is prototype function of the data type

ObjectField

For reference types (belongs-to relationship)

ObjectField requires one argument that is reference class

ObjectList

For reference list types (has-many relationship)

ObjectList requires one argument that is reference class

MomentField

Transform data to moment.

ModelFilter

To standardize the communicating payloads between our apps and backend services, we define a bunch of classes that represent structure of the model that we wants to retrieve from APIs, which have keys mapped from the model object and values are query objects called advanced filters.

There are 5 types of advanced filters

IdFilter and GuidFilter

Filter classes to query using an id field (both primary and foreign key).

IdFilter is for keys that in number format.

declare class IdFilter {
    equal?: number;

    notEqual?: number;

    in?: number[];

    notIn?: number[];
}
  

Guid is for keys that in string format.

declare class GuidFilter {
    equal?: string;

    notEqual?: string;

    in?: string[];

    notIn?: string[];
}
  

DateFilter

Filter class to query using a date field

declare class DateFilter {
    equal?: Moment;

    notEqual?: Moment;

    greater?: Moment;

    greaterEqual?: Moment;

    less?: Moment;

    lessEqual?: Moment;
}

NumberFilter

Filter class to query using a number field

declare class NumberFilter {
    equal?: number;

    notEqual?: number;

    greater?: number;

    greaterEqual?: number;

    less?: number;

    lessEqual?: number;
}

StringFilter

Filter class to query using a string field

declare class StringFilter {
    startWith?: string;

    notStartWith?: string;

    endWith?: string;

    notEndWith?: string;

    equal?: string;

    notEqual?: string;

    contain?: string;

    notContain?: string;
}

Example

Consider your User model is look like below:

import {Model} from 'react3l-common';
import {Field, MomentField} from 'react3l-decorators';

class User extends Model {
  @Field(String)
  public id?: string;
  
  @Field(String)
  public firstName?: string;
  
  @Field(String)
  public lastName?: string;
  
  @Field(String)
  public email?: string;
  
  @MomentField()
  public birthday?: Moment;
}
  

Our UserFilter class will be defined as below:

import {ModelFilter} from 'react3l-common';
import {IdFilter, StringFilter, NumberFilter, DateFilter} from 'react3l-advanced-filters';

class UserFilter extends ModelFilter {
  public id?: IdFilter = new IdFilter();
  
  public firstName?: StringFilter = new StringFilter();
  
  public lastName?: StringFilter = new StringFilter();
  
  public email?: StringFilter = new StringFilter();
  
  public birthday?: DateFilter = new DateFilter();
}
  