start to properly use vuex

2018-06-04 00:45:01 +02:00 · 2018-06-04 00:45:01 +02:00 · 58ad7a4b27
commit 58ad7a4b27
parent 20472a903c
12 changed files with 1207 additions and 156 deletions
--- a/resources/assets/scripts/store/modules/server.js
+++ b/resources/assets/scripts/store/modules/server.js
@ -0,0 +1,64 @@
+import LoadingState from '../../models/loadingStates';
+import route from '../../../../../vendor/tightenco/ziggy/src/js/route';
+
+export const serverModule = {
+    state: {
+        servers: {},
+        serverIDs: [],
+        currentServerID: '',
+        serverLoadingState: '',
+    },
+    mutations: {
+        setCurrentServer (state, serverID) {
+            state.currentServerID = serverID;
+        },
+        setServers (state, servers) {
+            servers.forEach(s => {
+                state.servers[s.identifier] = s;
+                if (!!state.serverIDs.indexOf(s.identifier)) {
+                    state.serverIDs.push(s.identifier)
+                }
+            });
+        },
+        removeServer (state, serverID) {
+            delete state.servers[serverID];
+            state.serverIDs.remove(serverID);
+        },
+        setServerLoadingState (state, s) {
+            state.serverLoadingState = s;
+        }
+    },
+    actions: {
+        loadServers({ commit }) {
+            commit('setServerLoadingState', LoadingState.LOADING);
+            window.axios.get(route('api.client.index'))
+                .then(response => {
+                    commit('setServers', response.data.data.map(o => o.attributes));
+                    commit('setServerLoadingState', LoadingState.DONE);
+                })
+                .catch(err => {
+                    console.error(err);
+                    const response = err.response;
+                    if (response.data && _.isObject(response.data.errors)) {
+                        response.data.errors.forEach(function (error) {
+                            this.error(error.detail);
+                        });
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+    },
+    getters: {
+        currentServer (state) {
+            return state.servers[state.route.params.serverID];
+        },
+        isServersLoading (state) {
+            return state.serverLoadingState === LoadingState.LOADING;
+        },
+        serverList (state) {
+            return state.serverIDs.map(k => state.servers[k]);
+        }
+    }
+};