diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index 0943f30a6..de2d91c52 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/resources/assets/scripts/components/dashboard/Dashboard.vue
@@ -7,7 +7,7 @@
@@ -34,6 +34,8 @@
import Flash from '../Flash';
import ServerBox from './ServerBox';
import Navigation from '../core/Navigation';
+ import isObject from 'lodash/isObject';
+ import {mapState} from 'vuex';
export default {
name: 'dashboard',
@@ -42,17 +44,18 @@
return {
backgroundedAt: new Date(),
documentVisible: true,
- loading: true,
- search: '',
- servers: [],
+ loading: false,
}
},
/**
- * Start loading the servers before the DOM $.el is created.
+ * Start loading the servers before the DOM $.el is created. If we already have servers
+ * stored in vuex shows those and don't fire another API call just to load them again.
*/
created: function () {
- this.loadServers();
+ if (this.servers.length === 0) {
+ this.loadServers();
+ }
document.addEventListener('visibilitychange', () => {
this.documentVisible = document.visibilityState === 'visible';
@@ -68,28 +71,29 @@
this._iterateServerResourceUse();
},
+ computed: {
+ ...mapState('dashboard', ['servers']),
+ searchTerm: {
+ get: function () {
+ return this.$store.getters['dashboard/getSearchTerm'];
+ },
+ set: function (value) {
+ this.$store.dispatch('dashboard/setSearchTerm', value);
+ }
+ }
+ },
+
methods: {
/**
* Load the user's servers and render them onto the dashboard.
- *
- * @param {string} query
*/
- loadServers: function (query = '') {
+ loadServers: function () {
this.loading = true;
- window.axios.get(this.route('api.client.index'), {
- params: { query },
- })
+ this.$store.dispatch('dashboard/loadServers')
.finally(() => {
this.clearFlashes();
})
- .then(response => {
- this.servers = [];
- response.data.data.forEach(obj => {
- const s = new Server(obj.attributes);
- this.servers.push(s);
- this.getResourceUse(s);
- });
-
+ .then(() => {
if (this.servers.length === 0) {
this.info(this.$t('dashboard.index.no_matches'));
}
@@ -97,7 +101,7 @@
.catch(err => {
console.error(err);
const response = err.response;
- if (response.data && _.isObject(response.data.errors)) {
+ if (response.data && isObject(response.data.errors)) {
response.data.errors.forEach(error => {
this.error(error.detail);
});
@@ -113,7 +117,7 @@
* at the fastest.
*/
onChange: debounce(function () {
- this.loadServers(this.$data.search);
+ this.loadServers();
}, 500),
/**
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.vue b/resources/assets/scripts/components/dashboard/ServerBox.vue
index 992499962..53de4d6ee 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.vue
+++ b/resources/assets/scripts/components/dashboard/ServerBox.vue
@@ -1,6 +1,6 @@
-
+
diff --git a/resources/assets/scripts/router.js b/resources/assets/scripts/router.js
index 27b964c14..395c43bc0 100644
--- a/resources/assets/scripts/router.js
+++ b/resources/assets/scripts/router.js
@@ -46,7 +46,6 @@ const router = new VueRouter({
// have no JWT or the JWT is expired and wouldn't be accepted by the Panel.
router.beforeEach((to, from, next) => {
if (to.path === route('auth.logout')) {
- console.log('logging out');
return window.location = route('auth.logout');
}
@@ -54,13 +53,11 @@ router.beforeEach((to, from, next) => {
// Check that if we're accessing a non-auth route that a user exists on the page.
if (!to.path.startsWith('/auth') && !(user instanceof User)) {
- console.log('logging out 2');
store.commit('auth/logout');
return window.location = route('auth.logout');
}
// Continue on through the pipeline.
- console.log('continuing');
return next();
});
diff --git a/resources/assets/scripts/store/index.js b/resources/assets/scripts/store/index.js
index ba41fef54..4e0e2663a 100644
--- a/resources/assets/scripts/store/index.js
+++ b/resources/assets/scripts/store/index.js
@@ -1,22 +1,22 @@
import Vue from 'vue';
import Vuex from 'vuex';
-import server from "./modules/server";
-import auth from "./modules/auth";
+import auth from './modules/auth';
+import dashboard from './modules/dashboard';
Vue.use(Vuex);
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
- modules: { auth },
+ modules: { auth, dashboard },
});
if (module.hot) {
module.hot.accept(['./modules/auth'], () => {
const newAuthModule = require('./modules/auth').default;
- // const newServerModule = require('./modules/server').default;
+ const newDashboardModule = require('./modules/dashboard').default;
store.hotUpdate({
- modules: { newAuthModule },
+ modules: { newAuthModule, newDashboardModule },
});
});
}
diff --git a/resources/assets/scripts/store/modules/dashboard.js b/resources/assets/scripts/store/modules/dashboard.js
new file mode 100644
index 000000000..3711b1206
--- /dev/null
+++ b/resources/assets/scripts/store/modules/dashboard.js
@@ -0,0 +1,63 @@
+import Server from './../../models/server';
+const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
+
+export default {
+ namespaced: true,
+ state: {
+ servers: [],
+ searchTerm: '',
+ },
+ getters: {
+ getSearchTerm: function (state) {
+ return state.searchTerm;
+ }
+ },
+ actions: {
+ /**
+ * Retrieve all of the servers for a user matching the query.
+ *
+ * @param commit
+ * @param {String} query
+ * @returns {Promise}
+ */
+ loadServers: ({commit, state}) => {
+ return new Promise((resolve, reject) => {
+ window.axios.get(route('api.client.index'), {
+ params: { query: state.searchTerm },
+ })
+ .then(response => {
+ // If there is a 302 redirect or some other odd behavior (basically, response that isnt
+ // in JSON format) throw an error and don't try to continue with the request processing.
+ if (!(response.data instanceof Object)) {
+ return reject(new Error('An error was encountered while processing this request.'));
+ }
+
+ // Remove all of the existing servers.
+ commit('clearServers');
+
+ response.data.data.forEach(obj => {
+ commit('addServer', obj.attributes);
+ });
+
+ resolve();
+ })
+ .catch(reject);
+ });
+ },
+
+ setSearchTerm: ({commit}, term) => {
+ commit('setSearchTerm', term);
+ },
+ },
+ mutations: {
+ addServer: function (state, data) {
+ state.servers.push(new Server(data));
+ },
+ clearServers: function (state) {
+ state.servers = [];
+ },
+ setSearchTerm: function (state, term) {
+ state.searchTerm = term;
+ },
+ },
+};