fixed

README.md

@@ -1,8 +1,7 @@
 # Vuepouch
 A tiny library to enable you work with PouchDB in a Vuejs app. It syncs with remote CouchDB too :-)
-## Work in progress (not production ready)
 ## Installation
-Installing Vuepouch is as easy as including it in your html script tag. Being that it is a vuejs plugin 
+Installing Vuepouch is as easy as including it in your html script tag. Being that it is a vuejs mixin 
 it has a dependancy on vuejs. So dont forget to include that.
 ``` html
 <script src="vue.js"></script>
@@ -16,9 +15,17 @@ have to to `Vue.use(vuepouch)`. <br>
 var app = new Vue({
   el: "#app",
   pouchdb: {
-    todos: {
-      localdb: "todos",
-      remoteURL: "http://127.0.0.1:5984/todos"
+    uber: {
+      localdb: "uber",
+      remoteURL: "http://127.0.0.1:5984/uber"
+    }
+  },
+  computed () {
+    drivers () {
+      return this.uber.drivers
+    },
+    passengers () {
+      return this.uber.passengers
     }
   }
 })
@@ -27,25 +34,28 @@ var app = new Vue({
 ``` javascript
 ...
 methods: {
-  addData: function(){
-    this.$pouchdbRefs.todos.push(/*your data*/)
-  }
+  addDriver () {
+    this.$pouchdbRefs.uber.put('drivers',/*your data*/)
+  },
+  addPassenger () {
+    this.$pouchdbRefs.uber.put('passengers', /*your data*/)
+  } 
 }
 ```
 ## Deleting data
 ``` javascript
-this.$pouchdbRefs.todos.delete(/*your data*/)
+this.$pouchdbRefs.uber.remove(/*your data*/)
 ```
 ## Updating data
 ``` javascript
-this.$pouchdbRefs.todos.update(/*your data*/)
+this.$pouchdbRefs.uber.update(/*your data*/)
 ```
 
 ## Displaying data in your html
 ``` html
 <div id="app">
   <ul>
-    <li v-for="t in todos">{{t}}</li>
+    <li v-for="driver in drivers">{{driver.name}}</li>
   </ul>
 </div>
 ```

src/index.js

@@ -1,13 +1,143 @@
-const VuePouch = {
-  test () {
-    
-  },
-  install (Vue, options) {
-    Vue.mixin({
-      mounted () {
-        console.log('vuepouch mixin called')
-      }
+const init = vm => {
+  const bindings = vm.$options.pouchdb
+  if (!bindings) {
+    return
+  }
+  ensureRef(vm)
+  for (const key in bindings) {
+    makeReactive(vm, key, bindings[key])
+    bind(vm, key, bindings[key])
+  }
+}
+
+const ensureRef = vm => {
+  if (!vm.$pouchdbRefs) {
+    vm.$pouchdbRefs = Object.create(null)
+  }
+}
+
+const bind = (vm, key, source) => {
+  const localDB = new PouchDB(source.localDB)
+  initDB(vm, key, localDB)
+  vm.$pouchdbRefs[key] = Object.create(null)
+  attachMethods(vm, key, localDB)
+  if (!source.remoteURL) {
+    return
+  }
+  const remoteDB = new PouchDB(source.remoteURL)
+  syncDB(vm, key, localDB, remoteDB)
+}
+
+const makeReactive = (vm, key, val) => {
+  if (key in vm) {
+    return
+  }
+  Vue.util.defineReactive(vm, key, val)
+}
+function initDB(vm, key, localDB) {
+  localDB.allDocs({
+    include_docs: true,
+    descending: true
+  }).then(function (doc) {
+    var objs = {}
+    doc.rows.forEach(function (d) {
+      objs[d.id] = d.doc
     })
+    let uniques = [...new Set(Object.keys(objs).map(item => objs[item].doctype))]
+    vm.$options.pouchdb.uniques = uniques
+    let data = []
+    Object.keys(objs).forEach(item => {
+      uniques.forEach(unique => {
+        if (objs[item].doctype === unique) {
+          if (!vm[key][unique]) {
+            Vue.set(vm[key], unique, Object.create(null))
+          }
+          Vue.set(vm[key][unique], item, objs[item])
+        }
+      })
+    })
+  })
+}
+
+function syncDB(vm, key, localDB, remoteDB) {
+  localDB.sync(remoteDB, {
+    live: true,
+    retry: true,
+    include_docs: true
+  }).on('change', change => {
+    handleChanges(vm, key, change)
+  })
+}
+
+const handleChanges = (vm, key, change) => {
+  const { docs } = change.change
+  docs.forEach(function (doc) {
+    if (doc['_deleted']) {
+      vm.$options.pouchdb.uniques.forEach(unique => {
+        if (vm[key][unique][doc['_id']]) {
+          Vue.delete(vm[key][unique], doc['_id'])
+        }
+      })
+      return
+    }
+    vm[key][doc['doctype']][doc['_id']] = doc
+  })
+}
+
+const attachMethods = (vm, key, localDB) => {
+  vm.$pouchdbRefs[key] = Object.create(null)
+  vm.$pouchdbRefs[key].put = put.bind({
+    localDB,
+    vm,
+    key
+  })
+  vm.$pouchdbRefs[key].get = get.bind({
+    localDB,
+    vm,
+    key
+  })
+  vm.$pouchdbRefs[key].update = update.bind({
+    localDB,
+    vm,
+    key
+  })
+  vm.$pouchdbRefs[key].remove = remove.bind({
+    localDB,
+    vm,
+    key
+  })
+}
+
+function put(docName, data) {
+  data['_id'] = new Date().toISOString()
+  data['doctype'] = docName
+  const {
+    localDB,
+    vm,
+    key
+  } = this
+  if (!vm[key][docName]) {
+    Vue.set(vm[key], [docName], Object.create(null))
   }
+  localDB.put(data).then(doc => {
+    data['rev'] = doc['rev']
+    Vue.set(vm[key][docName], [data['_id']], data)
+  })
 }
-export default VuePouch
+
+function get(docName, options) {
+
+}
+function update(doc) {
+  const { localDB, key, vm } = this
+  return localDB.put(doc)
+}
+function remove(doc) {
+  const { localDB, key, vm } = this
+  return localDB.remove(doc)
+}
+Vue.mixin({
+  created() {
+    init(this)
+  }
+})