feat(async): add async module

Author: Walker Leite

README.md

@@ -20,6 +20,13 @@ A Vue project template with [Loopback](http://loopback.io/) framework featuring
 3. `server`: Loopback server files
 4. `test`: Unit test
 
+## Features
+
+* Loopback service using [axios](https://github.com/axios/axios) at `client/services/loopback`;
+* Full authentication support, by default the account listed in `server/initial-data/maintenance-account.json` is created;
+* Ajax Async queue module in `client/modules/async` (useful to see if and how many requests are being made to the server);
+* [CSS Modules](https://github.com/css-modules/css-modules), [Sass](https://sass-lang.com/) and [Bootstrap Vue](https://bootstrap-vue.js.org).
+
 ## Linting
 
 ```

template/client/App.vue

@@ -13,6 +13,10 @@ export default {
     hello: 'Hello World!',
   }),
   {{/unless}}
+  created() {
+    // Boot Application
+    this.$store.dispatch('async/syncLoopback');
+  }
 }
 </script>
 

template/client/services/loopback.js

@@ -28,7 +28,7 @@ function addTokenFromLocalStorage(http) {
 
 const http = axios.create({
   baseURL: `http://${host}:${port}${restApiRoot}`,
-});fi
+});
 
 // Current setLoading function
 let setLoading = () => {

template/client/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import async from './modules/async';
 import auth from './modules/auth';
 
 Vue.use(Vuex);
@@ -16,6 +17,7 @@ export default new Vuex.Store({
     }],
   },
   modules: {
+    async, // async namespaced
     auth, // auth namespaced
   },
 });

template/client/store/modules/async/index.js

@@ -0,0 +1,40 @@
+import getUID from 'uid';
+import lb from '@/services/loopback';
+
+export default {
+  namespaced: true,
+  state: {
+    ajaxCommands: [],
+  },
+  getters: {
+    loadingAjax(state) {
+      if (state.ajaxCommands.length > 0) return true;
+      return false;
+    },
+  },
+  actions: {
+    syncLoopback({commit}) {
+      lb.setLoadingFunction(
+        (isLoading, uid = getUID()) => {
+          if (isLoading) {
+            commit('addAjaxCommand', uid);
+          } else {
+            commit('removeAjaxCommand', uid);
+          }
+          return uid;
+        }
+      );
+    },
+  },
+  mutations: {
+    addAjaxCommand(state, uid) {
+      state.ajaxCommands.push(uid);
+    },
+    removeAjaxCommand(state, uid) {
+      state.ajaxCommands.splice(
+        state.ajaxCommands.indexOf(uid),
+        1
+      );
+    },
+  },
+};

template/package.json

@@ -37,6 +37,7 @@
     "install": "^0.10.1",
     "lodash.defaultsdeep": "^4.6.0",
     "loopback-ds-timestamp-mixin": "^3.4.1",
+    "uid": "0.0.2",
     "vue-awesome": "^2.3.4",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.3",