Store members' watchlist in db

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js

@@ -21,12 +21,12 @@ export default new Vuex.Store({
     state: {
         config: {},
         watchlist: [],
-        watchlistId: null,
         loading: false,
         authToken: sessionStorage.getItem('token'),
         loggedIn: !!sessionStorage.getItem('token'),
         isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
         memberId: JSON.parse(sessionStorage.getItem('memberId')),
+        memberName: sessionStorage.getItem('memberName'),
         countries: [],
         abilities: [],
         timeFrames: [],
@@ -44,31 +44,30 @@ export default new Vuex.Store({
         },
         initWatchlist (state, list = null) {
             if (list) {
-                sessionStorage.setItem('watchlist', JSON.stringify(list.items));
-                sessionStorage.setItem('watchlistId', JSON.stringify(list.id));
+                sessionStorage.setItem('watchlist', JSON.stringify(list));
             } else if (!sessionStorage.getItem('watchlist')) {
-                sessionStorage.setItem('watchlist', JSON.stringify([]));
-                sessionStorage.setItem('watchlistId', JSON.stringify(null));
+                sessionStorage.setItem('watchlist', JSON.stringify({ id: null, items: [] }));
             }
             state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
-            state.watchlistId = JSON.parse(sessionStorage.getItem('watchlistId'));
         },
         watchlistToggle (state, uid) {
-            let list = state.watchlist;
+            let list = state.watchlist.items;
             let watchlistIndex = list.indexOf(uid);
             if (watchlistIndex === -1) {
                 list.push(uid)
             } else {
                 list.splice(watchlistIndex, 1)
             }
-            state.watchlist = list;
-            sessionStorage.setItem('watchlist', JSON.stringify(list));
-            if (state.watchlistId) {
-                axios({
-                    url: '/api/watchlists/' + state.watchlistId,
-                    data: state.watchlist,
-                    method: 'put'
+            state.watchlist.items = list;
+            sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
+
+            if (state.loggedIn) {
+                const client = axios.create({
+                    headers: {
+                        'X-Auth-Token': state.authToken
+                    }
                 });
+                client.put('/api/watchlists/' + state.watchlist.id, state.watchlist);
             }
         },
         loginSuccess (state, token) {
@@ -84,9 +83,12 @@ export default new Vuex.Store({
             state.isTeamer = false;
             state.teamerId = null;
             state.authToken = null;
+            state.watchlist = { id: null, items: [] };
             sessionStorage.removeItem('token');
             sessionStorage.removeItem('isTeamer');
             sessionStorage.removeItem('memberId');
+            sessionStorage.removeItem('memberName');
+            sessionStorage.removeItem('watchlist');
         },
         alert (state, payload) {
             state.message.text = payload.message;
@@ -96,9 +98,11 @@ export default new Vuex.Store({
             state.isTeamer = true;
             sessionStorage.setItem('isTeamer', JSON.stringify(true));
         },
-        setMember (state, memberId) {
-            state.memberId = memberId;
-            sessionStorage.setItem('memberId', memberId);
+        setMember (state, member) {
+            state.memberId = member.id;
+            state.memberName = member.name;
+            sessionStorage.setItem('memberId', member.id);
+            sessionStorage.setItem('memberName', member.name);
         },
         loadingBegin (state) {
             state.loading = true;
@@ -134,7 +138,7 @@ export default new Vuex.Store({
                 withCredentials: true
             }).then((response) => {
                 let memberId = parseInt(response.data.member_id);
-                commit('setMember', memberId);
+                commit('setMember', { id: memberId, name: response.data.member_name });
                 if (response.data.watchlist) {
                     commit('initWatchlist', response.data.watchlist);
                 }
@@ -154,6 +158,7 @@ export default new Vuex.Store({
             });
         },
         logout({ commit, state }) {
+            commit('loadingBegin');
             return axios({
                 url: '/api/logout',
                 headers: {
@@ -161,6 +166,14 @@ export default new Vuex.Store({
                 }
             }).then(() => {
                 commit('logout');
+                commit('loadingFinish');
+            }).catch((error) => {
+                commit('alert', {
+                    message: 'Der Logout ist fehlgeschlagen :(',
+                    class: 'alert-danger'
+                });
+                commit('loadingFinish');
+                throw error;
             });
         },
         resetPassword({ commit }, email) {
@@ -204,10 +217,10 @@ export default new Vuex.Store({
     },
     getters: {
         watchlistCount: state => {
-            return state.watchlist.length;
+            return state.watchlist.items.length;
         },
         onWatchlist: (state) => (uid) => {
-            return state.watchlist.indexOf(uid) !== -1;
+            return state.watchlist.items.indexOf(uid) !== -1;
         },
         authToken: state => {
             return state.authToken;

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue

@@ -88,7 +88,7 @@
             });
         },
         mounted () {
-            this.watchlist = this.$store.state.watchlist;
+            this.watchlist = this.$store.state.watchlist.items;
             Vue.nextTick(() => {
                 this.loadList();
             })