aurelia-v-grid - Demo: Remote data

app.html

<template>
  <require from="valueConverters"></require>
  <require from="v-grid-control-form.html"></require>
  <div class="row">
     <v-grid
      class="col-md-6"
      style="height:350px"
      v-row-height="25"
      v-header-height="50"
      v-footer-height="50"
      v-multi-select="true"
      v-row-onclick.delegate="singleClick($event.detail)"
      v-row-ondblclick.delegate="singleDblClick($event.detail)"
      v-current-entity.bind=myCurrentEntity
      v-remote-index="id"
      v-event-onremote.call="callRemoteServer($event)"
      v-row-on-draw.call="onRowDraw($event)"
      v-collection.bind=myCollection
      v-grid-context.bind=myGrid>
      <v-grid-col col-width="50" col-type="selection" col-add-row-attributes="v-key-move"></v-grid-col>
      <v-grid-col col-width="120" col-type="text" col-field="name" col-sort="name" col-header-name="Full name" col-filter="name|*|onKeyDown" col-filter-top="false" col-add-row-attributes="v-row-menu='name' v-key-move" col-add-filter-attributes="v-col-header-name-menu='name'"></v-grid-col>
      <v-grid-col col-width="100" col-field="number | numberFormat & updateTrigger:'blur':'paste'" col-sort="number" col-header-name="Salery" col-filter="number|>=" col-filter-top="true" col-add-row-attributes="v-row-menu='number' v-key-move" col-add-filter-attributes="v-col-header-name-menu='number'" col-css="color:${tempRef.numberColor};font-weight:${tempRef.numberFont}"></v-grid-col>
      <v-grid-col col-width="105" col-type="text" col-field="date | dateFormat & updateTrigger:'blur':'paste'" col-sort="date" col-header-name="Created" col-filter="date|>|dateFormat" col-filter-top="true" col-add-row-attributes="v-row-menu='date' v-key-move" col-add-filter-attributes="v-col-header-name-menu='date'"></v-grid-col>
      <v-grid-col col-width="100" col-type="checkbox" col-field="bool" col-sort="bool" col-header-name="Booked" col-filter="bool|=" col-filter-top="true" col-add-row-attributes="v-row-menu='bool' v-key-move" col-add-filter-attributes="v-col-header-name-menu='bool'"></v-grid-col>
      <v-grid-col col-width="107" col-type="image" col-field="images" col-header-name="Profile Img"  col-filter-top="true" col-add-row-attributes="v-row-menu='images' v-key-move tabindex='0'" col-add-filter-attributes="v-col-header-name-menu='images'"></v-grid-col>
    </v-grid>

      <!-- Form to the right -->
    <v-grid-control-form entity.bind="myCurrentEntity"></v-grid-control-form>

  </div>
</template>

app.js

import {RemoteData} from 'remoteData'

export class BasicUse {


  //utillity functions
  myGrid = {};
  //current entity, link this to inputs etc
  myCurrentEntity = {};
  //collection to display
  myCollection = [];

  
  //on row draw event, setting some extra fields to tempRef we will use in the css
  onRowDraw(data) {
    if (data) {
      if (data.tempRef) {
        if (data.tempRef.number > 100) {
          data.tempRef.numberColor = "green";
          data.tempRef.numberFont = "normal";
        } else {
          data.tempRef.numberColor = "red";
          data.tempRef.numberFont = "bold";
        }
      }
    }
  }
  


  //helper for dummy data
  constructor() {
    //create a new remote data class
    this.remoteData = new RemoteData('https://vgriddummydata-nodedataapi.rhcloud.com/', 'data/people');

  }



  attached(){
    //call our load data
    this.loadData();
  }



  loadData() {
    //tell grid to set loading overlay while we get our data
    this.myGrid.ctx.setLoadingOverlay(true);
    
    //set limit//offset in our dataclass
    this.remoteData.setLimit(40);
    this.remoteData.setOffset(0);
    
    //get the data from class
    this.remoteData.getData()
      .then((data)=>{
        //set data to grid (the data have limit % length included)
        //-> data ={col:data.result, length:data.length, limit:40}
        // you could include offset here if you wanted..
        this.myGrid.ctx.setData(data);
      })
  }


  //called by grid
  callRemoteServer(param){//filterArray, orderByArray, callback) {
    
    //create orderby string in dataclass
    this.remoteData.createOrderByString(param.sort);
    
    //create qquery string in dataclass
    this.remoteData.createQueryString(param.filter);
    
    //set limit and offset in dataclass
    this.remoteData.setLimit(param.limit);
    this.remoteData.setOffset(param.offset);
    
    //call datac,lss and return the data obj.
    return this.remoteData.getData()
      .then((data)=> {
        return data;
      }).catch((err)=> {
        console.error(err);
        console.log(err)
      });
  }






}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body aurelia-app="main">
  <h1>Loading...</h1>
    <script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.8/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/vegarringdal/vGridGistRunJSPMBundle/v.1.0.8/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-v-grid');

  aurelia.start().then(a => a.setRoot());
}

remoteData.js

import {HttpClient, json} from 'aurelia-fetch-client';

//helper class to generate my reuests to the "dummy data server" (open shift)
//for anyone that want to create a own opensift server for same purpose can use this one:
//https://github.com/vegarringdal/v-grid-remote-dummy-data
export class RemoteData {


  constructor(baseUrl, dataApi){
    this.http = new HttpClient();
    this.baseUrl = baseUrl;
    this.dataApi = dataApi;
    this.queryString = null;
    this.orderbyString = null;
    this.limit = null;
    this.offset = null;
    this.length = null;
    this.configureHttp()
  }


  /*
   configure http with base url
   */
  configureHttp(){
    this.http.configure(config => {
      config
        .withBaseUrl(this.baseUrl)
        .withDefaults({
          credentials: 'same-origin'
        });
    });
  }


  /*
   Get data from remote
   */
  getData(){
    return new Promise((resolve, reject)=>{

      var params = '';

      if(this.queryString){
        params = '?'+this.queryString

      }

      if(this.orderbyString){
        var op = params ? '&':'?';
        params = params + op + this.orderbyString;
      }

      if(this.limit){
        var op = params ? '&':'?';
        params = params + op + 'sqlLimit=' + this.limit;
      }

      if(this.offset){
        var op = params ? '&':'?';
        params = params + op + 'sqlOffset=' + this.offset;
      }

      console.log('request params:' + params);

      var encodedString = params !== '' ? window.encodeURI(params):'';

      this.http.fetch(this.dataApi + encodedString)
        .then(response => response.json())
        .then(data => {

          if(data.success = true){
            this.length = data.length;
            resolve({col:data.result, length:data.length, limit:40});
          } else {
            this.length = 0;
            reject({error:data.error});
          }
        })
    })
  }

  /*
   set limit
   */
  setLimit(x){
    this.limit = x || 40;
  }

  
  /*
   set offset
   */
  setOffset(x){
    this.offset = x || 0;
  }


  /*
   create orderby string
   */
  createOrderByString(orderByArray){
    if(orderByArray){
      var sortString = null;
      orderByArray.forEach((param, index)=> {
        if (index === 0) {
          sortString = 'sqlOrderby='
        } else {
          sortString = sortString + ','
        }
        sortString = sortString + `${param.attribute} ${param.asc ? "asc" : "desc"}`
      });
      this.orderbyString = sortString;
    } else {
      this.orderbyString = null;
    }
  }


  /*
   create query string
   */
  createQueryString(queryArray){
    if (queryArray) {
      var queryString = null;
      queryArray.forEach((param, index)=> {
        if (index === 0) {
          queryString = 'sqlQuery=';
        } else {
          queryString = queryString + ' and '
        }
        switch (param.operator) {
          case "=": //"equals"
            queryString = queryString + `${param.attribute} = "${param.value}"`;
            break;
          case "*": //"contains"
            queryString = queryString + `${param.attribute} LIKE "%${param.value}%"`;
            break;
          case "!=": //"not equal to"
            queryString = queryString + `${param.attribute} IS NOT "${param.value}"`;
            break;
          case "<": //"less than"
            queryString = queryString + `${param.attribute} ${param.operator} "${param.value}"`;
            break;
          case ">": //"greater than"
            queryString = queryString + `${param.attribute} ${param.operator} "${param.value}"`;
            break;
          case "<=": //"less than or eq"
            queryString = queryString + `${param.attribute} ${param.operator} "${param.value}"`;
            break;
          case ">=": //"greater than or eq"
            queryString = queryString + `${param.attribute} ${param.operator} "${param.value}"`;
            break;
          case "*=": //"begins with"
            queryString = queryString + `${param.attribute} LIKE "${param.value}%"`;
            break;
          case "=*": //"ends with"
            queryString = queryString + `${param.attribute} LIKE "%${param.value}"`;
            break;
          case "!*": //"no contain"
            queryString = queryString + `${param.attribute} IS NOT "%${param.value}%"`;
            break;
        }
      });
      this.queryString = queryString;
    } else {
      this.queryString = null;
    }
  }







}

v-grid-control-form.html

<template bindable="entity">
  <form  class="col-md-6">
    <div style="height:350px" class="well well-sm ">
      <div class="form-group">
        <label for="name">Name</label>
        <input class="form-control" id="name" value.bind="entity.name" disabled.bind="!entity.__vGridKey">
      </div>
      <div class="form-group">
        <label for="Number">Number</label>
        <input  class="form-control" id="Number" value.bind="entity.number" disabled.bind="!entity.__vGridKey">
      </div>
      <div class="form-group">
        <label for="Date">Date</label>
        <input  class="form-control" id="Date" value.bind="entity.date" disabled.bind="!entity.__vGridKey">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" checked.bind="entity.bool" disabled.bind="!entity.__vGridKey"> Bool
        </label>
    </div>
    <img if.bind="entity.__vGridKey" src.bind="entity.images" alt="images" class="img-circle">
    </div>
  </form>
</template>

valueConverters.js

/**
 * Created by vegar on 6/8/2016.
 */

import moment from 'moment';
export class DateFormatValueConverter {
  toView(value) {
    if(value){
      var x = moment(value).format('DD.MM.YYYY');
      return x;
    } else {
      return value;
    }
  }
  fromView(value) {
    if(value){
      return new Date(moment(value,'DD.MM.YYYY')._d);
    } else {
      return value;
    }
  }
}


import numeral from 'numeral';
export class NumberFormatValueConverter {
  toView(value) {
    if (value) {
      return numeral(value).format('($0,0.00)');
    } else {
      return value;
    }
  }

  fromView(value) {
    if (value) {
      return numeral().unformat(value);
    } else {
      return value;
    }
  }
}