Grid Xhr Model

Grid Xhr Model is a class that interacts with the server API holding the data.

Grid Xhr Model implements Grid Model Interface

Constructor

  const gridXhrModel = new UIKernel.Models.Grid.Xhr(settings);

Parameters:

Methods

async create

 const createdRecId = await gridXhrModel.create(record);

Create a new grid record. It sends POST request with header {'Content-type': 'application/json'} and body = JSON.stringify(record) to the URI = settings.api parameter taken in the constructor). Validation is supposed to be performed at the server (but you can also do explicit local validation calling gridXhrModel.isValidRecord(record) before). If the server response is successful(Status 200) and it has field error(which is expected to be validation errors), the ValidationErrors instance will be thrown. In case of unexpected error(e.g. server response status !== 200) an Error instance will be thrown. If the server response is successful(Status 200) and it doesn’t have the field error, so serverResponse.data will be resolved.

Parameters:

Example:

  try {
    const createdRecId = await gridXhrModel.create({
      id:131,
      name: "Sonya",
      surname: "Weaver",
      phone: "555-01591",
      age: 59,
      gender: 2
    });
    console.log(createdRecId);   //45
  } catch(err) {
    console.log(err);
  }

async read

  const gridData = await gridXhrModel.read(settings);

Retrieves grid records from the server. It sends GET request to the URI = settings.api parameter taken in the constructor). In successful case(response status == 200) returns server response, otherwise throws an error.

Parameters:

Returns: Promise which resolves with the server response which is expected to be an Object with the next structure:

Example:

  try {
     const gridData = await gridXhrModel.read({
      limit: 10,
      offset: 0,
      sort: [['surname', 'asc']],
      fields: ['name', 'surname', 'phone', 'age', 'gender'],
      extra: [],
      filters: {search: 'John', age: '7'}
    });
    console.log(gridData);
    /*
    {
      "records": [
        [
          4,
          {
              "id": 4,
              "name": "Joanne",
              "surname": "Rowling",
              "phone": "111-555",
              "age": 41,
              "gender": 2
          }
        ]
      ],
      "count": 1
    }
    */
  } catch(err) {
    console.log(err);
  }
});

async getRecord

  const gridRecord = await gridXhrModel.getRecord(id, fields);

Fetch record data by id. It sends GET request to the URI = ‘/:api/:id’ (where :api is settings.api parameter taken in the constructor, :id = passed argument) with header {'Content-type': 'application/json'} and body = JSON.stringify(fields) In successful case(response status == 200) returns server response, otherwise throws an error.

Parameters:

Returns: Promise which resolves with Object with record data. It has the following structure: {field1dName: 'value1', ..., fieldNName: 'valueN'}.

Example:

  try {
    const gridRecord = await gridXhrModel.getRecord(11, ['name', 'surname', 'phone', 'age', 'gender']);
    console.log(response);
    /*
    {
        id: 11,
        name: "Sonya",
        phone: "555-01591",
        age: 59,
        gender: 2,
        surname: "Weaver"
    }
    */
  } catch(err) {
    console.log(err);
  }
});

async update

  const gridUpdateResult = await gridXhrModel.update(changes);

Applies records changes. It sends PUT request with header {'Content-type': 'application/json'} and body = JSON.stringify(changes) to the URI = settings.api parameter taken in the constructor. Validation is supposed to be performed at the server (but you can also do explicit local validation calling gridXhrModel.isValidRecord(record) before). If the server response is successful(Status 200) and it has field errors(which is expected to be validation errors), the ValidationErrors instance will be thrown. In case of unexpected error(e.g. server response status !== 200) an Error instance will be thrown. If the server response is successful(Status 200) and it doesn’t have the field error, so serverResponse.data will be resolved.

Parameters:

Example:

  try {
    const gridUpdateResult = await gridXhrModel.update(
      [
        [4, {"name": "George", "gender": 1}],
        [7, {"name": "Alex", "gender": 'tomato'}]
      ]
    );
    console.log(gridUpdateResult);
    /*
    {
      "changes": [
        [4, {"name": "George", "gender": 1}]        // Applied valid record changes item
      ],
      "errors": [
        [7, {"gender": ["Invalid gender."]}]        // ValidationErrors instance
      ]
    }
    */
  } catch(err) {
    console.log(err);
  }
});

getValidationDependency

  const dependantFields = gridXhrModel.getValidationDependency(fields);

Return fields(Array of string values) that need to be sent additionally to validate fields specified in passed parameters. This method is required for creating group validators(read details here).

Parameters:

async isValidRecord

  const validationRes = await gridXhrModelisValidRecord(record);

Validate specified record by means of the validator passed in the constructor, or the default one. In case of an unexpected error it will be thrown(e.g. if there are async validation rules and the Internet connection doesn’t work, or server responds with status !== 200) will be thrown.

Parameters:

Returns: Promise which resolves with ValidationErrors

  try {
    const validationRes = await gridXhrModel model.isValidRecord({
      id: 4,
      name: 'Box',
      phone: '',
      surname: 'Dom'
    });
    console.log(validationRes);
    /*
      {
        "phone":["Invalid phone number."]
      }
    */
  } catch(unexpectedError) {
    console.log(unexpectedError);
  }
});