EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate watchlist closer into store

Browse Source
This commit is contained in:
Björn Fromme
2019-09-27 13:25:07 +02:00
parent ef14ae5863
commit 4b462da45f
3 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
+7 -3
View File
@@ -22,6 +22,7 @@
<script> <script>
import Vue from 'vue' import Vue from 'vue'
import { mapState, mapGetters } from 'vuex'
import axios from 'axios' import axios from 'axios'
import EventBus from '../_bus' import EventBus from '../_bus'
import SearchResultItem from './SearchResultItem.vue' import SearchResultItem from './SearchResultItem.vue'
@@ -58,13 +59,13 @@
}, },
methods: { methods: {
loadList () { loadList () {
if (this.watchlist.length === 0) { if (this.watchlistCount === 0) {
this.teasers = {}; this.teasers = {};
this.total = 0; this.total = 0;
return; return;
} }
let query = {}; let query = {};
query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist; query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchlist;
this.loading = true; this.loading = true;
axios({ axios({
url: this.watchlistUri, url: this.watchlistUri,
@@ -83,13 +84,16 @@
}); });
} }
}, },
computed: {
...mapState(['userData']),
...mapGetters(['watchlistCount', 'onWatchlist'])
},
created () { created () {
EventBus.$on('watchlistToggle', () => { EventBus.$on('watchlistToggle', () => {
this.loadList(); this.loadList();
}); });
}, },
mounted () { mounted () {
this.watchlist = this.$store.state.watchlist.items;
Vue.nextTick(() => { Vue.nextTick(() => {
this.loadList(); this.loadList();
}) })
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+2 -3
View File
@@ -9,6 +9,7 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
import EventBus from '../_bus' import EventBus from '../_bus'
export default { export default {
@@ -29,9 +30,7 @@
} }
}, },
computed: { computed: {
onWatchlist () { ...mapGetters(['onWatchlist'])
return this.$store.getters.onWatchlist(this.uid);
}
} }
} }
</script> </script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
+12 -12
View File
@@ -22,7 +22,8 @@ const defaultUserData = {
city: '', city: '',
phoneMobile: '', phoneMobile: '',
phonePrivate: '', phonePrivate: '',
newsletter: false newsletter: false,
watchList: []
}; };
export default new Vuex.Store({ export default new Vuex.Store({
@@ -35,7 +36,6 @@ export default new Vuex.Store({
}, },
state: { state: {
config: {}, config: {},
watchlist: [],
loading: false, loading: false,
authToken: null, authToken: null,
userData: defaultUserData, userData: defaultUserData,
@@ -58,16 +58,17 @@ export default new Vuex.Store({
axios.defaults.baseURL = state.config.myEpApiBaseUrl; axios.defaults.baseURL = state.config.myEpApiBaseUrl;
}, },
initWatchlist (state) { initWatchlist (state) {
if (!sessionStorage.getItem('watchlist')) { if (!sessionStorage.getItem('watchList')) {
sessionStorage.setItem('watchlist', JSON.stringify([])); sessionStorage.setItem('watchList', JSON.stringify([]));
} }
state.watchlist = JSON.parse(sessionStorage.getItem('watchlist')); state.userData.watchList = JSON.parse(sessionStorage.getItem('watchList'));
}, },
setWatchlist (state, list) { setWatchlist (state, list) {
state.watchlist = list; state.userData.watchList = list;
sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist)); sessionStorage.setItem('watchList', JSON.stringify(list));
}, },
setUserData (state, data) { setUserData (state, data) {
data.watchList = [...state.userData.watchList, ...data.watchList];
state.userData = data; state.userData = data;
}, },
login (state, token) { login (state, token) {
@@ -76,7 +77,6 @@ export default new Vuex.Store({
}, },
logout (state) { logout (state) {
state.authToken = null; state.authToken = null;
state.watchlist = [];
state.userData = defaultUserData; state.userData = defaultUserData;
sessionStorage.removeItem('token'); sessionStorage.removeItem('token');
sessionStorage.removeItem('watchlist'); sessionStorage.removeItem('watchlist');
@@ -186,7 +186,7 @@ export default new Vuex.Store({
}); });
}, },
watchlistToggle ({ commit, state }, uid) { watchlistToggle ({ commit, state }, uid) {
let list = state.watchlist; let list = state.userData.watchList;
let watchlistIndex = list.indexOf(uid); let watchlistIndex = list.indexOf(uid);
if (watchlistIndex === -1) { if (watchlistIndex === -1) {
list.push(uid) list.push(uid)
@@ -200,9 +200,9 @@ export default new Vuex.Store({
}, },
}, },
getters: { getters: {
watchlistCount: state => state.watchlist.length, watchlistCount: state => state.userData.watchList.length,
onWatchlist: (state) => (uid) => state.watchlist.indexOf(uid) !== -1, onWatchlist: (state) => (uid) => state.userData.watchList.indexOf(uid) !== -1,
isLoggedIn: state => !!state.authToken, isLoggedIn: state => !!state.authToken,
isTeamer: state => state.userData.isTeamer, isTeamer: state => !!state.userData.isTeamer,
} }
}); });