-
-
-
-
- Cards
-
-
-
-
-
- Table
-
+
@@ -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();
},
}
diff --git a/src/store/customers.js b/src/store/customers.js
index 21b7ac5..f73c652 100644
--- a/src/store/customers.js
+++ b/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) {
- state.loading = !state.loading;
+ setPagination(state, opts = {}) {
+ 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 = {}) {
- commit('toggleLoading');
+ fetchCustomers({ commit, state }, opts = {}) {
+ 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);
});