Add data sources to use SQL queries in ListViews

Using Database::itemDataSource(), one can now create a data source object that
implements the IListDataSource interface. It can be used to conveniently display
the results of an SQLite query in a WinJS.UI.ListView (or FlipView).

Database::groupDataSource() creates an additional data source that can be used
to group the items in the ListView. This can be a bit tricky, because the SQL
queries used in both list views must be compatible -- most importantly, the
items must be ordered exactly as they appear in groups, and they must have a
groupKey property (that can be obtained from a column using the
groupKeyColumnName parameter).

Author: superquadratic

SQLite3JS/js/SQLite3.js

@@ -1,7 +1,7 @@
 (function () {
   "use strict";
 
-  var Statement, Database;
+  var Statement, Database, ItemDataSource, GroupDataSource;
 
   // Alternative typeof implementation yielding more meaningful results,
   // see http://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/
@@ -166,11 +166,111 @@
     prepare: function (sql, args) {
       return new Statement(this, sql, args);
     },
+    itemDataSource: function (sql, args, keyColumnName, groupKeyColumnName) {
+      if (type(args) === 'string') {
+        groupKeyColumnName = keyColumnName;
+        keyColumnName = args;
+        args = undefined;
+      }
+
+      return new ItemDataSource(this, sql, args, keyColumnName, groupKeyColumnName);
+    },
+    groupDataSource: function (sql, args, keyColumnName, sizeColumnName) {
+      if (type(args) === 'string') {
+        sizeColumnName = keyColumnName;
+        keyColumnName = args;
+        args = undefined;
+      }
+
+      return new GroupDataSource(this, sql, args, keyColumnName, sizeColumnName);
+    },
     close: function () {
       this.connection.close();
     }
   });
 
+  ItemDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource,
+    function (db, sql, args, keyColumnName, groupKeyColumnName) {
+      var dataAdapter = {
+        getCount: function () {
+          var row = db.one('SELECT COUNT(*) AS cnt FROM (' + sql + ')', args);
+          return WinJS.Promise.wrap(row.cnt);
+        },
+        itemsFromIndex: function (requestIndex, countBefore, countAfter) {
+          var items,
+              limit = countBefore + 1 + countAfter,
+              offset = requestIndex - countBefore;
+
+          items = db.map(
+            'SELECT * FROM (' + sql + ') LIMIT ' + limit + ' OFFSET ' + offset,
+            function (row) {
+              var item = {
+                key: row[keyColumnName].toString(),
+                data: row
+              };
+              if (groupKeyColumnName) {
+                item.groupKey = row[groupKeyColumnName].toString();
+              }
+              return item;
+            });
+
+          return WinJS.Promise.wrap({
+            items: items,
+            offset: countBefore,
+            atEnd: items.length < limit
+          });
+        }
+      };
+
+      this._baseDataSourceConstructor(dataAdapter);
+    }
+  );
+
+  GroupDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource,
+    function (db, sql, args, keyColumnName, sizeColumnName) {
+      var groups,
+          dataAdapter,
+          keyIndexMap = {},
+          groupIndex = 0,
+          firstItemIndex = 0;
+
+      groups = db.map(sql, args, function (row) {
+        var item = {
+          key: row[keyColumnName].toString(),
+          groupSize: row[sizeColumnName],
+          firstItemIndexHint: firstItemIndex,
+          data: row
+        };
+
+        keyIndexMap[item.key] = groupIndex;
+        groupIndex += 1;
+        firstItemIndex += item.groupSize;
+
+        return item;
+      });
+
+      dataAdapter = {
+        getCount: function () {
+          return WinJS.Promise.wrap(groups.length);
+        },
+        itemsFromIndex: function (requestIndex, countBefore, countAfter) {
+          return WinJS.Promise.wrap({
+            items: groups.slice(),
+            offset: requestIndex,
+            absoluteIndex: requestIndex,
+            atStart: true,
+            atEnd: true
+          });
+        },
+        itemsFromKey: function (key, countBefore, countAfter) {
+          return this.itemsFromIndex(keyIndexMap[key], countBefore, countAfter);
+        }
+      };
+
+      this._baseDataSourceConstructor(dataAdapter);
+    }
+  );
+
   WinJS.Namespace.define('SQLite3JS', {
     Database: Database
   });

SQLite3JS/spec/SQLite3Spec.js

@@ -112,6 +112,66 @@
     });
   });
 
+  describe('Item Data Source', function () {
+    beforeEach(function () {
+      this.itemDataSource = db.itemDataSource('SELECT * FROM Item', 'id');
+    });
+
+    it('should support getCount()', function () {
+      waitsForPromise(
+        this.itemDataSource.getCount().then(function (count) {
+          expect(count).toEqual(3);
+        })
+      );
+    });
+
+    it('should support itemFromIndex()', function () {
+      waitsForPromise(
+        this.itemDataSource.itemFromIndex(1).then(function (item) {
+          expect(item.key).toEqual('2');
+          expect(item.data.name).toEqual('Orange');
+        })
+      );
+    });
+  });
+
+  describe('Group Data Source', function () {
+    beforeEach(function () {
+      this.groupDataSource = db.groupDataSource(
+        'SELECT LENGTH(name) AS key, COUNT(*) AS groupSize FROM Item GROUP BY key',
+        'key',
+        'groupSize');
+    });
+
+    it('should support getCount()', function () {
+      waitsForPromise(
+        this.groupDataSource.getCount().then(function (count) {
+          expect(count).toEqual(2);
+        })
+      );
+    });
+
+    it('should support itemFromIndex()', function () {
+      waitsForPromise(
+        this.groupDataSource.itemFromIndex(1).then(function (item) {
+          expect(item.key).toEqual('6');
+          expect(item.groupSize).toEqual(2);
+          expect(item.firstItemIndexHint).toEqual(1);
+        })
+      );
+    });
+
+    it('should support itemFromKey()', function () {
+      waitsForPromise(
+        this.groupDataSource.itemFromKey('5').then(function (item) {
+          expect(item.key).toEqual('5');
+          expect(item.groupSize).toEqual(1);
+          expect(item.firstItemIndexHint).toEqual(0);
+        })
+      );
+    });
+  });
+
   it('should pass JSLint', function () {
     this.addMatchers({
       toPassJsLint: function () {