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>
import Vue from 'vue'
import { mapState, mapGetters } from 'vuex'
import axios from 'axios'
import EventBus from '../_bus'
import SearchResultItem from './SearchResultItem.vue'
@@ -58,13 +59,13 @@
},
methods: {
loadList () {
if (this.watchlist.length === 0) {
if (this.watchlistCount === 0) {
this.teasers = {};
this.total = 0;
return;
}
let query = {};
query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchlist;
this.loading = true;
axios({
url: this.watchlistUri,
@@ -83,13 +84,16 @@
});
}
},
computed: {
...mapState(['userData']),
...mapGetters(['watchlistCount', 'onWatchlist'])
},
created () {
EventBus.$on('watchlistToggle', () => {
this.loadList();
});
},
mounted () {
this.watchlist = this.$store.state.watchlist.items;
Vue.nextTick(() => {
this.loadList();
})
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+2 -3
View File
@@ -9,6 +9,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import EventBus from '../_bus'
export default {
@@ -29,9 +30,7 @@
}
},
computed: {
onWatchlist () {
return this.$store.getters.onWatchlist(this.uid);
}
...mapGetters(['onWatchlist'])
}
}
</script>
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
+12 -12
View File
@@ -22,7 +22,8 @@ const defaultUserData = {
city: '',
phoneMobile: '',
phonePrivate: '',
newsletter: false
newsletter: false,
watchList: []
};
export default new Vuex.Store({
@@ -35,7 +36,6 @@ export default new Vuex.Store({
},
state: {
config: {},
watchlist: [],
loading: false,
authToken: null,
userData: defaultUserData,
@@ -58,16 +58,17 @@ export default new Vuex.Store({
axios.defaults.baseURL = state.config.myEpApiBaseUrl;
},
initWatchlist (state) {
if (!sessionStorage.getItem('watchlist')) {
sessionStorage.setItem('watchlist', JSON.stringify([]));
if (!sessionStorage.getItem('watchList')) {
sessionStorage.setItem('watchList', JSON.stringify([]));
}
state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
state.userData.watchList = JSON.parse(sessionStorage.getItem('watchList'));
},
setWatchlist (state, list) {
state.watchlist = list;
sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
state.userData.watchList = list;
sessionStorage.setItem('watchList', JSON.stringify(list));
},
setUserData (state, data) {
data.watchList = [...state.userData.watchList, ...data.watchList];
state.userData = data;
},
login (state, token) {
@@ -76,7 +77,6 @@ export default new Vuex.Store({
},
logout (state) {
state.authToken = null;
state.watchlist = [];
state.userData = defaultUserData;
sessionStorage.removeItem('token');
sessionStorage.removeItem('watchlist');
@@ -186,7 +186,7 @@ export default new Vuex.Store({
});
},
watchlistToggle ({ commit, state }, uid) {
let list = state.watchlist;
let list = state.userData.watchList;
let watchlistIndex = list.indexOf(uid);
if (watchlistIndex === -1) {
list.push(uid)
@@ -200,9 +200,9 @@ export default new Vuex.Store({
},
},
getters: {
watchlistCount: state => state.watchlist.length,
onWatchlist: (state) => (uid) => state.watchlist.indexOf(uid) !== -1,
watchlistCount: state => state.userData.watchList.length,
onWatchlist: (state) => (uid) => state.userData.watchList.indexOf(uid) !== -1,
isLoggedIn: state => !!state.authToken,
isTeamer: state => state.userData.isTeamer,
isTeamer: state => !!state.userData.isTeamer,
}
});