add customer loading, and refresh button

reload customer data if it's been more than 30 seconds

src/pages/Customers.vue

@@ -6,19 +6,30 @@
 
     <div class="container" v-if="!loading">
       <header class="is-clearfix">
-        <div class="control has-addons is-pulled-right">
+        <div class="control is-grouped is-pulled-right">
-          <a class="button" :class="{ 'is-primary': mode === 'cards' }" @click="setMode('cards')">
+          <div class="control">
-            <span class="icon is-small">
+            <a class="button" @click="fetchCustomers()">
-              <i class="fa fa-th-large"></i>
+              <span class="icon is-small">
-            </span>
+                <i class="fa fa-refresh"></i>
-            <span>Cards</span>
+              </span>
-          </a>
+              <span>Reload</span>
-          <a class="button" :class="{ 'is-primary': mode === 'table' }" @click="setMode('table')">
+            </a>
-            <span class="icon is-small">
+
-              <i class="fa fa-table"></i>
+          </div>
-            </span>
+          <div class="control has-addons">
-            <span>Table</span>
+            <a class="button" :class="{ 'is-primary': mode === 'cards' }" @click="setMode('cards')">
-          </a>
+              <span class="icon is-small">
+                <i class="fa fa-th-large"></i>
+              </span>
+              <span>Cards</span>
+            </a>
+            <a class="button" :class="{ 'is-primary': mode === 'table' }" @click="setMode('table')">
+              <span class="icon is-small">
+                <i class="fa fa-table"></i>
+              </span>
+              <span>Table</span>
+            </a>
+          </div>
         </div>
       </header>
 
@@ -62,14 +73,23 @@
         mode: 'cards',
       }
     },
-    computed: Object.assign({}, mapState('customers', ['customers', 'loading'])),
+    computed: Object.assign({}, mapState('customers', [
+      'customers',
+      'loading',
+      'updatedAt',
+    ])),
     methods: Object.assign({
       setMode(mode) {
         this.mode = (mode === 'table') ? 'table' : 'cards';
       },
-    }, mapActions('customers', ['fetchCustomers'])),
+    }, mapActions('customers', [
+      'fetchCustomers',
+    ])),
     created() {
-      this.fetchCustomers();
+      const diffTime = (new Date().getTime()) - this.updatedAt;
+      const seconds = 30;
+
+      if (diffTime >= seconds * 1000) this.fetchCustomers();
     },
   }
 </script>

src/store/customers.js

@@ -3,26 +3,31 @@ export default {
   state: {
     loading: false,
     customers: [],
+    updatedAt: 0,
+    pagination: {
+      page: 0,
+      count: 10,
+    },
   },
   mutations: {
     setCustomers(state, customers) {
       state.customers = customers;
-      state.loaded = true;
+      state.updatedAt = new Date().getTime();
     },
-    toggleLoading(state) {
+    setPagination(state, opts = {}) {
-      state.loading = !state.loading;
+      if (opts.page) state.pagination.page = opts.page;
+      if (opts.count) state.pagination.count = opts.count;
+    },
+    toggleLoading(state, loading) {
+      state.loading = loading || !state.loading;
     },
   },
   actions: {
-    fetchCustomers({ commit }, opts = {}) {
+    fetchCustomers({ commit, state }, opts = {}) {
-      commit('toggleLoading');
+      commit('toggleLoading', true);
+      commit('setPagination', opts);
 
       // TODO: fetch customers from server
-      const options = Object.assign({
-        page: 0,
-        count: 10,
-      }, opts);
-
       return new Promise((resolve) => {
         const customers = [{
           id: 'ai7rgail73ria3uhr',
@@ -69,9 +74,10 @@ export default {
         }];
 
         setTimeout(() => {
-          const results = customers.slice(options.page, options.count);
+          const { page, count } = state.pagination;
+          const results = customers.slice(page, count);
           commit('setCustomers', results);
-          commit('toggleLoading');
+          commit('toggleLoading', false);
           resolve();
         }, 300);
       });