initial http polling implementation

Author: mkastner

Diff for: .eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console":0,
+    "indent": [
+      "error",
+      2
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  }
+}

Diff for: .gitignore

@@ -0,0 +1 @@
+node_modules

Diff for: adapters/.sync-adapter.js.swp

@@ -0,0 +1,46 @@
+const ChangeTypeConstants = require('../src/change-type-constants');
+
+module.exports = function syncAdapter(Model) { 
+  return async (req, res) => {
+    try {
+      console.log('req body', req.body); 
+     
+      let deletedItems = req.body.modified.filter(item => item.change_type === ChangeTypeConstants.ChangeTypeDeleted);
+      let createdItems = req.body.modified.filter(item => item.change_type === ChangeTypeConstants.ChangeTypeCreated);  
+      let updatedItems = req.body.modified.filter(item => item.change_type === ChangeTypeConstants.ChangeTypeUpdated);  
+     
+
+      const deletedServerItems = await Model.query((qb) => {
+        qb.whereIn('id', deletedItems.map((item) => item.id)); 
+      });
+
+      let createdServerItems = {};
+
+      for (let i = 0, l = createdItems; i < l; i++) {
+        let oldId = createdItems[i].id;
+        delete createdItems[i].id;
+        delete createdItems[i].change_type;
+        let newModel = new Model(createdItems[i]);
+        let savedItem = await newModel.save();
+        createdServerItems[oldId] = savedItem.id; 
+      }
+     
+      let updatedServerItems = [];
+      for (let i = 0, l = updatedItems; i < l; i++) {
+        let updatedModel = new Model(updatedItems[i]);
+        let updatedItem = await updatedModel.save();
+        updatedServerItems.push(updatedItem);
+      }
+
+      //
+      // TODO send item to client which were added since last update
+      //
+
+
+      res.status(200).json({createdServerItems, updatedServerItems, deletedServerItems});
+    }
+    catch (err) {
+      console.error(err); 
+    }
+  }
+};

Diff for: adapters/sync-adapter.js

@@ -0,0 +1,53 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'development', 
+  module: {
+    rules: [
+      // ... other rules
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          hotReload: true,
+          preserveWhitespace: false,
+          postcss: [
+            require('autoprefixer')({
+              browsers: ['last 3 versions']
+            })
+          ]
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: ['vue-style-loader', 'css-loader', 'resolve-url-loader']
+      }, {
+        test   : /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 
+          'resolve-url-loader', 'sass-loader?sourceMap']
+      },
+      {
+        test   : /\.worker\.js$/,
+        use: 'worker-loader' 
+      }
+    ]
+  },
+  plugins: [
+    // make sure to include the plugin!
+    new VueLoaderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    //new webpack.NoEmitErrorsPlugin()
+  ]
+};

Diff for: build/webpack.base.config.js

@@ -0,0 +1,14 @@
+const merge = require('webpack-merge');
+const webpackBase = require('./webpack.base.config');
+const path = require('path');
+
+module.exports = merge(webpackBase, {
+  entry: {
+    index: './src/index.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: 'index.js'
+  }
+});

Diff for: build/webpack.dist.config.js

@@ -0,0 +1,18 @@
+const merge = require('webpack-merge');
+const webpackBase = require('./webpack.base.config');
+const path = require('path');
+
+module.exports = merge(webpackBase, {
+  entry: {
+    index: [
+      './test/entry.js',
+      'webpack-hot-middleware/client' 
+    ] 
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/dist/',
+    filename: 'test-entry.js',
+    globalObject: '(typeof self !== \'undefined\' ? self : this)'
+  }
+});

Diff for: build/webpack.test.config.js

@@ -0,0 +1,42 @@
+{
+  "name": "mk-vue-dexie-sync-plugin",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "NODE_ENV=development node test/server.js",
+    "build": "NODE_ENV=production webpack --config build/webpack.dist.config.js --progress --hide-modules"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "autoprefixer": "^9.4.7",
+    "axios": "^0.18.0",
+    "babel-loader": "^8.0.5",
+    "body-parser": "^1.18.3",
+    "bookshelf": "^0.14.2",
+    "bookshelf-scopes": "^1.5.1",
+    "chokidar": "^2.0.4",
+    "css-loader": "^2.1.0",
+    "dexie": "^2.0.4",
+    "dexie-observable": "^1.0.0-beta.5",
+    "express": "^4.16.4",
+    "knex": "^0.14.6",
+    "mysql": "^2.16.0",
+    "node-sass": "^4.11.0",
+    "resolve-url-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "vue": "^2.5.22",
+    "vue-loader": "^15.6.2",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.5.22",
+    "vuex": "^3.1.0",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-middleware": "^3.5.1",
+    "webpack-hot-middleware": "^2.24.3",
+    "webpack-merge": "^4.2.1",
+    "worker-loader": "^2.0.0"
+  },
+  "dependencies": {}
+}

Diff for: package.json

@@ -0,0 +1,9 @@
+const ChangeTypeDeleted = 1;
+const ChangeTypeCreated = 2;
+const ChangeTypeUpdated = 3;
+
+module.exports = {
+  ChangeTypeDeleted,
+  ChangeTypeCreated,
+  ChangeTypeUpdated
+};

Diff for: src/.create-store-module.js.swp

@@ -0,0 +1,162 @@
+import Vue from 'vue';
+import uuid from 'uuid';
+import ChangeTypeConstants from './change-type-constants';
+import DateTimeConstants from './date-time-constants';
+import moment from 'moment';
+
+export default function StoreModule(dbTable) {
+  return {
+      
+    namespaced: true,
+    
+    state: () => ({
+      index: -1,
+      search: '',
+      list: [], // all tables – paginated
+      pagination: {
+        page: 1,
+        pageSize: 10
+      } // tables pagination 
+    }),
+    getters: {
+      // (state, allGetters, rootState) => rootState.route.params
+      current(state, allGetters, rootState) {
+        return state.list[this.index]; 
+      },
+      // returns all items which are not marked as deleted 
+      undeleted(state, allGetters) {
+        return state.list.filter(item => item.change_type !== ChangeTypeConstants.ChangeTypeDeleted);
+      }
+      
+    },
+    actions: {
+      fetchOne({state, commit}, index) {
+        
+        if (state.list.length === 0) {
+          return Promise.resolve(null);
+        }
+        // index is optional
+        // in case index was passed 
+        commit('SET_INDEX', 0 || index); 
+        
+        if (state.index === -1 || state.index >= state.list.length) {
+          commit('SET_INDEX', 0);
+        }
+
+        let listItem = state.list[state.index]; 
+
+        console.log('listItem', listItem);
+
+        return Promise.resolve(listItem); 
+      },
+      search({commit, dispatch}, search) {
+        commit('SET_SEARCH', search); 
+        dispatch('fetch', search);
+      }, 
+      fetch({commit, state}) {
+        // TODO implement search with state.search 
+        dbTable.where('change_type')
+          .notEqual(ChangeTypeConstants.ChangeTypeDeleted)
+          .offset((state.pagination.page - 1) * state.pagination.pageSize)
+          .limit(state.pagination.pageSize).toArray()
+          .then((records) => {
+            commit('CLEAR'); 
+            for (let i = 0, l = records.length; i < l; i++) {
+              commit('ADD', records[i]); 
+            }
+          }).catch((err) => {
+            console.error(err); 
+          });
+      },
+      create({commit}, initialFields) {
+        const  newItem = {
+          id: uuid(),
+          created_at: moment().format(DateTimeConstants.MySqlFormat), 
+          updated_at: moment().format(DateTimeConstants.MySqlFormat), 
+          change_type: ChangeTypeConstants.ChangeTypeCreated
+        };
+
+        if (initialFields) {
+          for (let key in initialFields) {
+            newItem[key] = initialFields[key]; 
+          } 
+        }
+        commit('CREATE', newItem);  
+      },
+      delete({commit}, {id, change_type}) {
+        // if the record is a new one
+        // then it can get immediately deleted
+        // because it's not stored on the server yet
+        if (change_type === ChangeTypeConstants.ChangeTypeCreated) {
+          commit('DELETE', id);
+        } 
+        // the record is not really deleted
+        // just marked as deleted so the server
+        // can be informed about deletion upon
+        // syncing
+        else {
+          const fields = {
+            change_type: ChangeTypeConstants.ChangeTypeDeleted,
+            updated_at: moment().format(DateTimeConstants.MySqlFormat) 
+          };
+          commit('PATCH', {id, fields});
+        }
+      },
+      patch({commit}, {id, fields}) {
+        // only mark as updated if it is not a new record
+        // new records must keep new-Type
+        console.log('fields            ', fields);
+        console.log('fields.change_type', fields.change_type);
+        console.log('ChangeTypeConstants.ChangeTypeCreated', ChangeTypeConstants.ChangeTypeCreated);
+
+        if (fields.change_type !== ChangeTypeConstants.ChangeTypeCreated) {
+          fields.change_type = ChangeTypeConstants.ChangeTypeUpdated;
+        } 
+        fields.updated_at = moment().format(DateTimeConstants.MySqlFormat);
+        commit('PATCH', {id, fields});
+      },
+      setPage({commit}, page) {
+        commit('SET_PAGE', page);  
+      },
+      setIndex({commit}, index) {
+        commit('SET_INDEX', index);  
+      },
+    },
+    mutations: {
+      SET_INDEX(state, index) {
+        state.index = index; 
+      },
+      SET_PAGE(state, page) {
+        state.pagination.page = page; 
+      },
+      SET_SEARCH(state, search) {
+        state.search = search; 
+      },
+      CLEAR(state) {
+        state.list.splice(0); 
+      }, 
+      ADD(state, table) {
+        state.list.push(table);
+      },
+      SET_PAGINATION_ITEM(state, {key, value}) {
+        Vue.set(state.pagination, key, value); 
+      },
+      CREATE(state, newItem) {
+        state.list.push(newItem);
+      },
+      PATCH(state, {id, fields}) {
+        console.log('id', id); 
+        const index = state.list.findIndex(item => item.id === id);
+        console.log('index', index); 
+        for (let key in fields) {
+          state.list[index][key] = fields[key]; 
+        } 
+      },
+      DELETE(state, id) {
+        const index = state.list.findIndex(item => item.id === id);
+        state.list.splice(index, 1);
+      }
+    }
+  };
+}
+

Diff for: src/.db-sync.js.swp

@@ -0,0 +1,3 @@
+export default {
+  MySqlFormat: 'YYYY-MM-DD HH:mm:ss.SSS'
+};