add cells, rows, columns functions

demos/grid-view/body-template.jade

@@ -0,0 +1,2 @@
+i
+  span= CustomerID

demos/grid-view/index.js

@@ -2,6 +2,7 @@ import _ from 'underscore';
 import $ from 'jquery';
 import { GridView } from '../../js/vnext/grid-view.js';
 import './index.less';
+import bodyTemplate from './body-template.jade';
 import 'bootstrap-webpack';
 
 window.gridViewEl = new GridView({
@@ -14,6 +15,18 @@ window.gridViewEl = new GridView({
     url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Orders',
   },
   selection: true,
+  columns: [{
+    name: 'Group 0',
+    html: '<i>Group 0</i>',
+    columns: [{
+      name: 'CustomerID',
+      bodyTemplate: bodyTemplate,
+    },{
+      name: 'OrderID',
+    }], 
+  },{
+    name: 'ShipCity',
+  }],
 }).render();
 
 window.gridViewWin = new GridView({

js/factory/renderers-plugin.js

@@ -2,17 +2,17 @@ import layout from '../layout/index';
 
 export default definePlugin => definePlugin('renderers', [
   'config',
-], function (config) {
-  const renderers = [];
+  ], function (config) {
+    const renderers = [];
 
-  if (config.scrollable) {
-    if (config.scrollable.virtual) {
-      renderers.push(layout.renderers.Virtualization);
+    if (config.scrollable) {
+      if (config.scrollable.virtual) {
+        renderers.push(layout.renderers.Virtualization);
+      }
+      if (config.scrollable.fixedHeader) {
+        renderers.push(layout.renderers.FixedHeader);
+      }
     }
-    if (config.scrollable.fixedHeader) {
-      renderers.push(layout.renderers.FixedHeader);
-    }
-  }
 
-  return renderers;
-});
+    return renderers;
+  });

js/vnext/projection/cells.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 
-function translateRow(columnGroup, row) {
+function translateRow(columnGroup, row, group) {
   if (_.has(row, 'html')) {
     return {
       classes: row.classes,
@@ -12,10 +12,28 @@ function translateRow(columnGroup, row) {
     };
   }
   if (_.has(row, 'item')) {
-    return {
+    const obj =  {
       classes: row.classes,
-      cells: _.map(columnGroup.leafColumns, col => (row.item[col.name] || {})),
+      cells: _.map(columnGroup.leafColumns, col => {
+        const cell = row.item[col.name] || {};
+        const classes = col.classes;
+        const template = col[group + 'Template'];
+        let html = '';
+        if (cell.html) {
+          html = cell.html;
+        } else {
+          if (template) {
+            html = _.isFunction(template) ? template(group == 'head' ? columnGroup : row.item) : template;
+          } else {
+            html = _.isObject(cell) ? cell.name : cell;
+          }
+        }
+
+        return { classes, html };
+      }),
     };
+
+    return obj;
   }
   return row;
 }
@@ -27,17 +45,17 @@ export function cells(state) {
     footRows,
     columnGroup,
   } = state;
-
+  
   headRows = _.reduce(headRows, (memo, row) => {
     if (row === 'column-header-rows') {
       return memo.concat(columnGroup.headerRows);
     }
-    memo.push(translateRow(columnGroup, row));
+    memo.push(translateRow(columnGroup, row, 'head'));
     return memo;
   }, []);
 
-  bodyRows = _.map(bodyRows, row => translateRow(columnGroup, row));
-  footRows = _.map(footRows, row => translateRow(columnGroup, row));
+  bodyRows = _.map(bodyRows, row => translateRow(columnGroup, row, 'body'));
+  footRows = _.map(footRows, row => translateRow(columnGroup, row, 'foot'));
 
   return _.defaults({
     headRows,

js/vnext/projection/column-group.js

@@ -5,25 +5,19 @@ class ColumnGroup {
     this.headerRows = [];
     this.leafColumns = [];
 
-    const buildColumn = ({
-      name,
-      width,
-      parent = null,
-      columns = [],
-      html = name,
-      height = 1,
-    }) => {
-      const col = { name, width, parent, html, height };
-
+    const buildColumn = col => {
+      const { parent, columns, height } = col;
+
+      col.height  = _.isNumber(height) ? height : 1;
       col.rowIndex = parent ? parent.rowIndex + parent.height : 0;
       col.columns = _.map(columns, c => buildColumn(_.extend({ parent: col }, c)));
-      col.treeHeight = height;
+      col.treeHeight = _.isNumber(height) ? height : 1;
       col.treeWidth = 1;
       if (!_.isEmpty(col.columns)) {
         col.treeHeight += _.chain(col.columns)
-          .map(_.property('treeHeight')).max().value();
+        .map(_.property('treeHeight')).max().value();
         col.treeWidth = _.chain(col.columns)
-          .map(_.property('treeWidth')).reduce((a, b) => a + b, 0).value();
+        .map(_.property('treeWidth')).reduce((a, b) => a + b, 0).value();
       }
 
       if (_.isEmpty(col.columns)) {
@@ -37,12 +31,13 @@ class ColumnGroup {
       if (col.parent) {
         const colspan = col.treeWidth;
         const rowspan = _.isEmpty(col.columns) ? this.root.treeHeight - col.rowIndex : col.height;
-        const html = col.html;
-
+        const html = col.html || col.name;
+        console.log(this.headerRows);
+        console.log(col.rowIndex);
         while (this.headerRows.length <= col.rowIndex) {
           this.headerRows.push({ cells: [] });
         }
-        this.headerRows[col.rowIndex].cells.push({ colspan, rowspan, html });
+        this.headerRows[col.rowIndex].cells.push({ colspan, rowspan, html, name });
       }
       _.each(col.columns, buildColumnHeader);
     };

js/vnext/projection/index.js

@@ -1,6 +1,8 @@
 export { odata } from './odata.js';
+export { jsdata } from './jsdata.js';
 export { selection } from './selection.js';
 export { columns } from './columns.js';
 export { rows } from './rows.js';
 export { columnGroup } from './column-group.js';
 export { cells } from './cells.js';
+

js/vnext/projection/jsdata.js

@@ -0,0 +1,41 @@
+import _ from 'underscore';
+import Promise from 'bluebird';
+
+export function jsdata (state, {
+  query,
+  entity,
+  options,
+  skip,
+  take,
+  filter,
+  orderby = [],
+  select = [],
+} = {}) {
+  const op = {};
+
+  if (take) {
+    op.limit = take;
+  }
+
+  if (skip) {
+    op.offset = skip;
+  }
+
+  if (filter) {
+    op.where = filter;
+  }
+
+  if (query) {
+    op.query = query;
+  }
+
+  if (orderby && orderby.length) {
+    op.orderby = _.reduce(orderby, (memo, obj) => {
+      _.each(obj, (key, value) => {memo.push([key, value > 0 ? 'ASC' : 'DESC']);});
+      return memo;
+    }, []);
+  }
+
+  return entity.fincAll(op, _.defaults(options, { all: true }))
+  .then(_.property('value'));
+};

js/vnext/projection/memory.js

@@ -0,0 +1,14 @@
+import _ from 'underscore';
+
+export function memory (state, {
+  skip,
+  take,
+  filter,
+  orderby = [],
+  select = [],
+} = {}) {
+
+  return p$state.then(function(data) {
+    return take ? data.slice(skip || 0, take) : data.slice(skip || 0);
+  });
+}

js/vnext/projection/odata.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 import $ from 'jquery';
 import Promise from 'bluebird';
 
-export function odata (p$state, {
+export function odata (state, {
   verb = 'get',
   url,
   skip,
@@ -36,10 +36,11 @@ export function odata (p$state, {
 
   return new Promise((resolve, reject) => {
     $.getJSON(_.result(op, 'url'), _.omit(op, 'url'))
-      .success(resolve)
-      .fail((jqXHR, textStatus, errorThrown) => {
-        reject(new Error(errorThrown));
-      });
+    .success(resolve)
+    .fail((jqXHR, textStatus, errorThrown) => {
+      reject(new Error(errorThrown));
+    });
   }).then(data => ({ items: data.value || [] }));
 }
 
+

js/vnext/projection/rows.js

@@ -4,11 +4,11 @@ export function rows(state, {
   headRows = ['column-header-rows'],
   footRows = [],
 } = {}) {
+  const columns = state.columns;
   const bodyRows = _.map(state.items, item => ({
     classes: ['body-row'],
-    item: _.mapObject(item, value => ({ html: value })),
-  }));
-
-  return { headRows, bodyRows, footRows, columns: state.columns };
+    item:  item, //_.mapObject(item, value => ({ html: value })),
+  })); 
+  return _.defaults({ headRows, bodyRows, footRows }, state);
 }